/* Source: styles.css */
:root {
  color-scheme: light;
  --ink: #141922;
  --muted: #69717f;
  --line: #d8dde6;
  --paper: #edf0f4;
  --panel: #ffffff;
  --accent: #e5573f;
  --accent-2: #167c80;
  --focus: #f9c846;
  --chrome: #171b22;
  --chrome-2: #222832;
  --chrome-line: rgba(255, 255, 255, 0.12);
  --soft-shadow: 0 18px 42px rgba(20, 25, 34, 0.14);
}

/* v108 phone topbar: one polished title/history pill, no clipped overflow controls. */
@media (max-width: 760px) {
  .topbar {
    display: flex !important;
    width: auto !important;
    max-width: calc(100vw - 22px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .history-actions {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    padding: 7px 10px !important;
  }

  .view-actions {
    display: none !important;
  }
}

/* v109 phone header command trim: keep mobile title bar readable. */
@media (max-width: 760px) {
  .history-actions #duplicateButton,
  .history-actions #deleteButton {
    display: none !important;
  }

  .history-actions {
    justify-content: flex-start;
    gap: 8px !important;
  }

  .document-chip {
    flex: 1 1 auto;
  }
}

/* v110 phone header sizing: match the compact floating iOS control shape. */
@media (max-width: 760px) {
  .topbar {
    right: auto !important;
    width: min(322px, calc(100vw - 24px)) !important;
    max-width: min(322px, calc(100vw - 24px)) !important;
  }

  .history-actions {
    width: 100%;
  }

  .document-chip {
    flex: 1 1 0;
    max-width: none;
  }

  .history-actions button {
    flex: 0 0 36px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button,
.file-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  min-height: 36px;
  border-radius: 7px;
  cursor: pointer;
}

button:hover,
.file-button:hover {
  border-color: var(--accent-2);
}

button.is-active {
  border-color: var(--accent);
  background: #fff1ed;
}

.app-shell {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 360px;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.sidebar,
.layers {
  background: #f7f8fa;
  padding: 12px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  min-width: 0;
}

.layers {
  border-right: 0;
  border-left: 1px solid var(--line);
  padding: 14px;
  box-shadow: -12px 0 34px rgba(20, 25, 34, 0.05);
}

.sidebar {
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--chrome), #11151b);
  color: #f8fafc;
  border-right: 1px solid #05070a;
  padding: 10px;
}

.brand {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  margin-bottom: 16px;
}

.mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #f06c4f, #0f8b8d);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 13px;
  letter-spacing: 0;
}

.brand p,
.stats p {
  color: var(--muted);
  font-size: 11px;
}

.sidebar .brand p,
.sidebar .panel h2 {
  color: rgba(248, 250, 252, 0.62);
}

.inspector-title {
  padding: 4px 4px 12px;
}

.inspector-title h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.inspector-title p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.inspector-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #eef1f5;
  margin-bottom: 12px;
}

.inspector-tabs button {
  min-height: 32px;
  padding: 0 6px;
  font-size: 12px;
  border-color: transparent;
  background: transparent;
}

.inspector-tabs button.is-active {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 6px 14px rgba(20, 25, 34, 0.08);
}

.panel.is-hidden {
  display: none;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(20, 25, 34, 0.04);
}

.sidebar .panel {
  padding: 7px;
  background: var(--chrome-2);
  border-color: var(--chrome-line);
  box-shadow: none;
}

.sidebar .panel h2 {
  text-align: center;
  margin-bottom: 8px;
}

.panel h2 {
  font-size: 13px;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-heading h2 {
  margin-bottom: 0;
}

.panel-heading button {
  width: 34px;
  min-height: 34px;
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.tool {
  aspect-ratio: 1;
  min-height: 0;
  font-size: 16px;
  font-weight: 700;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

.tool.is-active {
  border-color: rgba(255, 255, 255, 0.42);
  background: #f8fafc;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.file-button,
.wide-button {
  display: grid;
  width: 100%;
  place-items: center;
  margin-bottom: 8px;
}

.pdf-controls {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.pdf-controls button {
  min-height: 34px;
}

.file-button input,
#projectInput {
  display: none;
}

.controls label {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0;
}

.compact-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0;
}

.compact-field select {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: #fff;
}

.trace-settings {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.controls .trace-settings .compact-field {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  margin: 0;
  font-size: 10px;
}

.trace-settings select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 5px;
  font-size: 11px;
}

.controls .trace-toggle {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin: 3px 0;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.trace-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1473e6;
}

.pixel-selection-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 8px;
  margin: 8px 0 10px;
}

.pixel-refine-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.background-removal-settings {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
}

.retouch-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.tone-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.pixel-filter-settings,
.pixel-filter-colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.tone-histogram {
  display: block;
  width: 100%;
  height: 86px;
  margin: 6px 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f8fa;
}

.controls .pixel-selection-settings .compact-field,
.controls .pixel-refine-settings .compact-field,
.controls .background-removal-settings .compact-field,
.controls .retouch-settings .compact-field,
.controls .tone-settings .compact-field,
.controls .pixel-filter-settings .compact-field,
.controls .pixel-filter-colors .compact-field {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  margin: 0;
  font-size: 10px;
}

.pixel-selection-settings select,
.pixel-refine-settings input,
.background-removal-settings select,
.background-removal-settings input,
.retouch-settings input,
.tone-settings input,
.pixel-filter-settings input,
.pixel-filter-colors input {
  width: 100%;
  min-width: 0;
}

.pixel-selection-settings select,
.background-removal-settings select {
  height: 34px;
}

.pixel-feather-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 6px;
  min-height: 34px;
}

.pixel-feather-control input {
  width: 100%;
  min-width: 0;
}

.pixel-feather-control output {
  color: var(--text);
  font-size: 10px;
  text-align: right;
}

.retouch-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 6px;
  min-height: 34px;
}

.retouch-range output {
  color: var(--text);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.controls .filter-toggle {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin: 2px 0 8px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.filter-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent-2);
}

.pixel-filter-colors input[type="color"] {
  width: 100%;
  height: 34px;
  padding: 3px;
}

.pixel-filter-settings > [hidden],
.controls .filter-toggle[hidden],
.pixel-filter-colors[hidden] {
  display: none;
}

.mini-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
}

.ocr-progress {
  display: block;
  width: 100%;
  height: 5px;
  margin: 4px 0;
  accent-color: var(--accent-2);
}

.pdf-page-list {
  display: grid;
  gap: 7px;
  max-height: 190px;
  overflow: auto;
  padding-right: 2px;
}

.pdf-page-list button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 8px;
  text-align: left;
}

.pdf-page-list button span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}

.pdf-page-list button strong,
.pdf-page-list button em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-page-list button strong {
  font-size: 12px;
}

.pdf-page-list button em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.pdf-page-list button.is-active {
  border-color: var(--accent-2);
  background: rgba(22, 124, 128, 0.1);
}

.controls input[type="color"] {
  width: 100%;
  height: 36px;
  padding: 2px;
}

.controls input[type="number"],
.controls input[type="text"],
.controls select {
  min-width: 0;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: #fff;
}

.controls input[type="range"] {
  min-width: 0;
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.button-row button {
  width: 100%;
}

.workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  background: #e9edf2;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(300px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  min-width: 0;
  box-shadow: 0 8px 22px rgba(20, 25, 34, 0.06);
}

.topbar-group {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.topbar-group button {
  min-width: 38px;
  min-height: 34px;
  padding: 0 10px;
  background: #f8fafc;
}

.history-actions {
  justify-self: start;
}

.export-actions {
  justify-self: end;
}

.mode-switcher {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border-radius: 10px;
  background: #eef1f5;
  border: 1px solid var(--line);
}

.mode-switcher button {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 7px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mode-switcher button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 12px rgba(20, 25, 34, 0.08);
}

.canvas-wrap {
  min-width: 0;
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: 34px;
  background-color: #cfd6df;
  background-image:
    linear-gradient(rgba(255,255,255,.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.26) 1px, transparent 1px);
  background-size: 32px 32px;
}

.pasteboard-frame {
  display: grid;
  grid-template-rows: 24px auto;
  gap: 0;
  padding: 0 0 24px 0;
}

.canvas-rulers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  width: 100%;
  min-height: 24px;
  color: rgba(20, 25, 34, 0.54);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

#artboard {
  display: block;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #9fa9b6;
  box-shadow: var(--soft-shadow);
  touch-action: none;
}

.zoom-actions {
  min-width: 190px;
  justify-content: center;
}

#zoomLabel {
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  color: var(--muted);
  font-size: 13px;
}

.export-status {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  min-height: 16px;
  padding-left: 2px;
}

.layer-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.layer-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  margin-bottom: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}

.layer-name {
  display: grid;
  min-width: 0;
}

.layer-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-actions {
  display: flex;
  gap: 4px;
}

.layer-toggle {
  min-height: 28px;
  width: 42px;
  padding: 0;
  font-size: 11px;
}

.layer-list li.is-selected {
  border-color: var(--accent);
  background: #fff1ed;
}

.layer-kind {
  color: var(--muted);
  font-size: 12px;
  justify-self: end;
  max-width: 82px;
}

.estimate-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.estimate-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.align-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.align-grid button {
  min-height: 34px;
  padding: 0 6px;
  font-size: 12px;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(23, 33, 43, 0.62);
  z-index: 10;
}

.modal[hidden] {
  display: none;
}

.modal-surface {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.34);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  font-size: 18px;
  text-transform: none;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0;
}

.modal-header p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

#preview3dCanvas {
  display: block;
  width: 100%;
  height: auto;
  background: #f6f7f9;
}

.preview3d-modal {
  padding: 0;
  background: #e7ebf0;
  z-index: 2147483647;
}

body.preview3d-open .app-shell {
  visibility: hidden;
}

.preview3d-surface {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-height: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #e7ebf0;
}

.preview3d-surface .modal-header {
  position: relative;
  z-index: 2;
  min-height: 58px;
  padding: max(9px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left));
  background: rgba(250, 251, 252, 0.94);
  backdrop-filter: blur(18px) saturate(140%);
}

.preview3d-surface .modal-header h2 {
  font-size: 16px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-surface .modal-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.preview3d-surface .modal-header p {
  max-width: min(58vw, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 15px;
}

.preview3d-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

.preview3d-actions button {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
}

.preview3d-view-control {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 5px 0 7px;
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.44);
}

.preview3d-view-control img {
  width: 15px;
  height: 15px;
  margin-right: 2px;
  opacity: 0.72;
}

.preview3d-view-control select {
  width: 86px;
  height: 30px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 600 10px/1 system-ui, sans-serif;
}

.preview3d-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
}

.preview3d-action img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  opacity: 0.82;
}

.preview3d-action.is-active {
  background: rgba(20, 115, 230, 0.11);
  color: #1167c9;
}

.preview3d-done {
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  color: #1167c9 !important;
}

.preview3d-viewport,
.preview3d-surface #preview3dCanvas {
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.preview3d-viewport[hidden],
.preview3d-surface #preview3dCanvas[hidden] {
  display: none;
}

.preview3d-viewport {
  position: relative;
  overflow: hidden;
  background: #e7ebf0;
  touch-action: none;
  cursor: grab;
}

.preview3d-viewport:active {
  cursor: grabbing;
}

.preview3d-viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.preview3d-editor,
.preview3d-build-tools {
  position: relative;
  z-index: 3;
  grid-row: 3;
  min-width: 0;
  border-top: 1px solid rgba(23, 33, 43, 0.13);
  background: rgba(249, 250, 252, 0.97);
  backdrop-filter: blur(18px) saturate(140%);
}

.preview3d-build-tools {
  display: grid;
  min-height: 96px;
  grid-template-rows: 46px auto;
  padding-bottom: env(safe-area-inset-bottom);
}

.preview3d-build-tools[hidden] {
  display: none;
}

.preview3d-build-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
}

.preview3d-build-modes button {
  display: grid;
  min-width: 0;
  min-height: 46px;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 3px 2px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #525b66;
  font: 600 9px/11px system-ui, sans-serif;
}

.preview3d-build-modes button + button {
  border-left: 1px solid rgba(23, 33, 43, 0.06);
}

.preview3d-build-modes button.is-active {
  background: rgba(20, 115, 230, 0.09);
  color: #1167c9;
}

.preview3d-build-modes img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  opacity: 0.82;
}

.preview3d-build-footer {
  display: flex;
  min-width: 0;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
}

.preview3d-build-summary,
.preview3d-build-actions,
.preview3d-build-actions button {
  display: flex;
  align-items: center;
}

.preview3d-build-summary {
  min-width: 0;
  gap: 7px;
  color: #525b66;
  font: 600 11px/14px system-ui, sans-serif;
}

.preview3d-build-summary img {
  width: 18px;
  height: 18px;
  opacity: 0.78;
}

.preview3d-build-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-build-actions {
  flex: 0 0 auto;
  gap: 6px;
}

.preview3d-build-actions button {
  min-height: 34px;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgba(23, 33, 43, 0.13);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: 700 10px/1 system-ui, sans-serif;
}

.preview3d-build-actions img {
  width: 16px;
  height: 16px;
  opacity: 0.78;
}

.preview3d-build-actions button:disabled {
  opacity: 0.42;
}

.preview3d-editor {
  min-height: 112px;
  padding-bottom: env(safe-area-inset-bottom);
}

.preview3d-editor[hidden] {
  display: none;
}

.preview3d-editor-modes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 46px;
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
}

.preview3d-editor-modes button {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  min-height: 46px;
  padding: 3px 2px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #525b66;
  font: 600 9px/11px system-ui, sans-serif;
}

.preview3d-editor-modes button + button {
  border-left: 1px solid rgba(23, 33, 43, 0.06);
}

.preview3d-editor-modes button.is-active {
  background: rgba(20, 115, 230, 0.09);
  color: #1167c9;
}

.preview3d-editor-modes img {
  width: 17px;
  height: 17px;
  margin-bottom: 2px;
  object-fit: contain;
  opacity: 0.82;
}

.preview3d-editor-content {
  display: grid;
  min-height: 65px;
  align-items: stretch;
}

.preview3d-axis-controls,
.preview3d-material-controls {
  grid-area: 1 / 1;
  width: min(100%, 720px);
  margin: 0 auto;
}

.preview3d-axis-controls[hidden],
.preview3d-material-controls[hidden] {
  display: none;
}

.preview3d-axis-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preview3d-axis-controls label,
.preview3d-material-controls label {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
  padding: 7px 10px;
  color: #626b76;
  font: 600 9px/11px system-ui, sans-serif;
}

.preview3d-axis-controls label + label,
.preview3d-material-controls label + label {
  border-left: 1px solid rgba(23, 33, 43, 0.07);
}

.preview3d-axis-controls input,
.preview3d-material-controls select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: 500 12px/1 system-ui, sans-serif;
}

.preview3d-material-controls {
  display: grid;
  grid-template-columns: 72px minmax(90px, 1.15fr) repeat(3, minmax(72px, 1fr));
}

.preview3d-material-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 4px 0;
  accent-color: #1675dc;
}

.preview3d-color-control input {
  width: 34px;
  height: 28px;
  padding: 2px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: transparent;
}

.preview3d-editor:not([hidden]) ~ .preview3d-status {
  bottom: calc(122px + env(safe-area-inset-bottom));
}

.preview3d-build-tools:not([hidden]) ~ .preview3d-status {
  bottom: calc(106px + env(safe-area-inset-bottom));
}

.preview3d-status {
  position: absolute;
  z-index: 2;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 24px);
  margin: 0;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid rgba(70, 80, 94, 0.14);
  border-radius: 5px;
  background: rgba(250, 251, 252, 0.84);
  color: #515a68;
  font-size: 10px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  pointer-events: none;
}

html[data-theme="dark"] .preview3d-modal,
html[data-theme="dark"] .preview3d-surface,
html[data-theme="dark"] .preview3d-viewport {
  background: #252a31;
}

html[data-theme="dark"] .preview3d-surface .modal-header {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(39, 44, 52, 0.94);
}

html[data-theme="dark"] .preview3d-actions button,
html[data-theme="dark"] .preview3d-surface .modal-header h2 {
  color: #eef2f7;
}

html[data-theme="dark"] .preview3d-action img {
  filter: invert(1);
}

html[data-theme="dark"] .preview3d-view-control,
html[data-theme="dark"] .preview3d-editor,
html[data-theme="dark"] .preview3d-build-tools {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(39, 44, 52, 0.96);
}

html[data-theme="dark"] .preview3d-view-control img,
html[data-theme="dark"] .preview3d-editor-modes img,
html[data-theme="dark"] .preview3d-build-modes img,
html[data-theme="dark"] .preview3d-build-summary img,
html[data-theme="dark"] .preview3d-build-actions img {
  filter: invert(1);
}

html[data-theme="dark"] .preview3d-editor-modes,
html[data-theme="dark"] .preview3d-editor-modes button + button,
html[data-theme="dark"] .preview3d-build-modes,
html[data-theme="dark"] .preview3d-build-modes button + button,
html[data-theme="dark"] .preview3d-axis-controls label + label,
html[data-theme="dark"] .preview3d-material-controls label + label {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .preview3d-editor-modes button,
html[data-theme="dark"] .preview3d-build-modes button,
html[data-theme="dark"] .preview3d-axis-controls label,
html[data-theme="dark"] .preview3d-material-controls label,
html[data-theme="dark"] .preview3d-build-summary {
  color: #c4cbd5;
}

html[data-theme="dark"] .preview3d-editor-modes button.is-active,
html[data-theme="dark"] .preview3d-build-modes button.is-active {
  background: rgba(73, 151, 245, 0.15);
  color: #86baff;
}

html[data-theme="dark"] .preview3d-axis-controls input,
html[data-theme="dark"] .preview3d-material-controls select,
html[data-theme="dark"] .preview3d-build-actions button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(17, 20, 25, 0.5);
  color: #eef2f7;
}

html[data-theme="dark"] .preview3d-status {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(39, 44, 52, 0.84);
  color: #c4cbd5;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-modal,
  html[data-theme="auto"] .preview3d-surface,
  html[data-theme="auto"] .preview3d-viewport {
    background: #252a31;
  }

  html[data-theme="auto"] .preview3d-surface .modal-header {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(39, 44, 52, 0.94);
  }

  html[data-theme="auto"] .preview3d-actions button,
  html[data-theme="auto"] .preview3d-surface .modal-header h2 {
    color: #eef2f7;
  }

  html[data-theme="auto"] .preview3d-action img {
    filter: invert(1);
  }

  html[data-theme="auto"] .preview3d-view-control,
  html[data-theme="auto"] .preview3d-editor,
  html[data-theme="auto"] .preview3d-build-tools {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(39, 44, 52, 0.96);
  }

  html[data-theme="auto"] .preview3d-view-control img,
  html[data-theme="auto"] .preview3d-editor-modes img,
  html[data-theme="auto"] .preview3d-build-modes img,
  html[data-theme="auto"] .preview3d-build-summary img,
  html[data-theme="auto"] .preview3d-build-actions img {
    filter: invert(1);
  }

  html[data-theme="auto"] .preview3d-editor-modes,
  html[data-theme="auto"] .preview3d-editor-modes button + button,
  html[data-theme="auto"] .preview3d-build-modes,
  html[data-theme="auto"] .preview3d-build-modes button + button,
  html[data-theme="auto"] .preview3d-axis-controls label + label,
  html[data-theme="auto"] .preview3d-material-controls label + label {
    border-color: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="auto"] .preview3d-editor-modes button,
  html[data-theme="auto"] .preview3d-build-modes button,
  html[data-theme="auto"] .preview3d-axis-controls label,
  html[data-theme="auto"] .preview3d-material-controls label,
  html[data-theme="auto"] .preview3d-build-summary {
    color: #c4cbd5;
  }

  html[data-theme="auto"] .preview3d-editor-modes button.is-active,
  html[data-theme="auto"] .preview3d-build-modes button.is-active {
    background: rgba(73, 151, 245, 0.15);
    color: #86baff;
  }

  html[data-theme="auto"] .preview3d-axis-controls input,
  html[data-theme="auto"] .preview3d-material-controls select,
  html[data-theme="auto"] .preview3d-build-actions button {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(17, 20, 25, 0.5);
    color: #eef2f7;
  }

  html[data-theme="auto"] .preview3d-status {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(39, 44, 52, 0.84);
    color: #c4cbd5;
  }
}

@media (max-width: 520px) {
  .preview3d-surface .modal-header {
    min-height: 54px;
    gap: 7px;
  }

  .preview3d-surface .modal-header h2 {
    font-size: 14px;
    line-height: 18px;
  }

  .preview3d-surface .modal-header p {
    max-width: 38vw;
    font-size: 10px;
  }

  .preview3d-action {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .preview3d-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .preview3d-view-control {
    padding-left: 5px;
  }

  .preview3d-view-control img {
    display: none;
  }

  .preview3d-view-control select {
    width: 72px;
    padding: 0 2px;
    font-size: 9px;
  }

  .preview3d-editor {
    min-height: 111px;
  }

  .preview3d-axis-controls label,
  .preview3d-material-controls label {
    padding: 6px;
  }

  .preview3d-material-controls {
    grid-template-columns: 55px 82px repeat(3, minmax(54px, 1fr));
  }

  .preview3d-material-controls label {
    font-size: 8px;
  }
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .sidebar,
  .layers {
    border: 0;
  }

  .sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    background: var(--chrome);
  }

  .tool-grid {
    grid-template-columns: repeat(6, minmax(42px, 1fr));
  }

  .brand {
    grid-column: 1 / -1;
  }

  .panel {
    margin-bottom: 0;
  }

  .workspace {
    min-height: 68vh;
  }

  .topbar {
    grid-template-columns: 1fr;
  }

  .mode-switcher,
  .history-actions,
  .export-actions {
    justify-self: stretch;
  }

  .mode-switcher {
    overflow-x: auto;
  }
}

/* Sleek mobile creative-app shell inspired by Photoshop, Illustrator, and Curve */
body {
  background: #0b0b0c;
}

.app-shell {
  grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(circle at 18% 18%, rgba(240, 108, 79, 0.18), transparent 26%),
    radial-gradient(circle at 78% 20%, rgba(59, 130, 246, 0.16), transparent 28%),
    #111214;
}

.workspace {
  grid-column: 1;
  background: transparent;
}

.topbar {
  position: fixed;
  top: 10px;
  left: 78px;
  right: 16px;
  z-index: 8;
  min-height: 48px;
  padding: 0;
  background: transparent;
  color: #f8fafc;
}

.topbar-group {
  min-height: 42px;
  border-radius: 16px;
  background: rgba(16, 17, 19, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(22px);
}

.topbar-group button,
.mode-switcher button {
  color: #f8fafc;
}

.topbar-group button:hover,
.topbar-group button.is-active {
  background: rgba(255, 255, 255, 0.14);
}

.document-chip {
  border-right-color: rgba(255, 255, 255, 0.12);
}

.document-chip span {
  color: rgba(248, 250, 252, 0.56);
}

.document-chip strong {
  color: #fff;
}

.export-status {
  color: rgba(248, 250, 252, 0.72);
}

.canvas-wrap {
  min-height: 100vh;
  padding: 78px 72px 96px 92px;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    #202124;
  background-size: 24px 24px;
}

.pasteboard-frame {
  transform-origin: top center;
}

.canvas-rulers {
  color: rgba(248, 250, 252, 0.42);
}

#artboard {
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
}

.sidebar {
  top: 76px;
  left: 14px;
  bottom: auto;
  width: 56px;
  max-height: calc(100vh - 156px);
  border-radius: 20px;
  background: rgba(17, 18, 20, 0.92);
}

.tool,
.color-dot,
.color-swatch {
  border-radius: 14px;
}

.color-dot,
.color-swatch {
  width: 36px;
  min-height: 36px;
}

.layers {
  position: fixed;
  top: 74px;
  right: 14px;
  bottom: 84px;
  z-index: 7;
  width: 320px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  background: rgba(18, 19, 21, 0.94);
  color: #f8fafc;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(24px);
}

.app-shell.inspector-collapsed .layers {
  display: none;
}

.inspector-tabs {
  top: 0;
  grid-template-columns: repeat(4, 1fr);
  padding: 4px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.inspector-tabs button {
  color: rgba(248, 250, 252, 0.72);
  border: 0;
  border-radius: 13px;
}

.inspector-tabs button.is-active {
  background: #f8fafc;
  color: #111214;
}

.panel {
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  color: #f8fafc;
}

.panel h2 {
  color: rgba(248, 250, 252, 0.78);
}

.controls label,
.compact-field,
.mini-status,
.stats p,
.layer-kind,
.estimate-list {
  color: rgba(248, 250, 252, 0.68);
}

button,
.file-button,
.controls input[type="number"],
.controls input[type="text"],
.controls select,
.compact-field select {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

.controls input[type="color"] {
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.layer-list li,
.library-asset {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

.layer-list li.is-selected {
  border-color: #f06c4f;
  background: rgba(240, 108, 79, 0.18);
}

.right-quickbar {
  position: fixed;
  right: 350px;
  top: 50%;
  z-index: 7;
  display: grid;
  gap: 6px;
  padding: 7px;
  border-radius: 18px;
  background: rgba(16, 17, 19, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%);
  backdrop-filter: blur(20px);
}

.right-quickbar button {
  width: 46px;
  min-height: 38px;
  padding: 0 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(248, 250, 252, 0.86);
  font-size: 10px;
}

.right-quickbar button:hover {
  background: rgba(255, 255, 255, 0.13);
}

.bottom-workflows {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(8, minmax(64px, 1fr));
  gap: 4px;
  width: min(720px, calc(100vw - 28px));
  padding: 7px;
  border-radius: 22px;
  background: rgba(16, 17, 19, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
  transform: translateX(-50%);
  backdrop-filter: blur(24px);
}

.bottom-workflows button {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: rgba(248, 250, 252, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.tool-options {
  position: fixed;
  left: 50%;
  bottom: 76px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(76px, auto) auto auto auto;
  gap: 8px;
  align-items: center;
  width: min(720px, calc(100vw - 28px));
  padding: 8px;
  border-radius: 18px;
  background: rgba(16, 17, 19, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
  backdrop-filter: blur(24px);
}

.shortcut-hint {
  margin: 0;
  color: rgba(248, 250, 252, 0.44);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

body[data-tool-options="compact"] .tool-options {
  display: none;
}

.tool-options label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: rgba(248, 250, 252, 0.72);
  font-size: 11px;
  font-weight: 700;
}

.tool-options input[type="range"] {
  min-width: 0;
}

.tool-options input[type="number"] {
  width: 72px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  padding: 0 8px;
}

.tool-options button {
  min-height: 30px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.78);
  font-size: 11px;
  font-weight: 700;
}

.tool-options button.is-active {
  background: #f8fafc;
  color: #111214;
}

body:not([data-active-tool="text"]) .tool-options label:nth-child(3) {
  display: none;
}

body[data-active-tool="text"] .tool-options label:first-child {
  display: none;
}

.mobile-share-actions {
  display: none;
}

.bottom-workflows button.is-active {
  background: #f8fafc;
  color: #111214;
}

.workflow-actions {
  position: fixed;
  left: 50%;
  bottom: 82px;
  z-index: 22;
  display: flex;
  max-width: min(620px, calc(100vw - 120px));
  gap: 5px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: var(--surface-glass, rgba(42, 44, 49, 0.82));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px);
  transform: translateX(-50%);
  scrollbar-width: none;
}

.workflow-actions::-webkit-scrollbar {
  display: none;
}

.workflow-actions button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(248, 250, 252, 0.86);
  font-size: 12px;
  font-weight: 700;
}

.workflow-actions button:hover {
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 1100px) {
  .layers {
    width: 292px;
  }

  .right-quickbar {
    right: 314px;
  }

  .export-actions {
    display: none;
  }
}

@media (max-width: 760px) {
  .topbar {
    left: 12px;
    right: 12px;
    overflow-x: auto;
  }

  .canvas-wrap {
    padding: 70px 18px 108px;
  }

  .sidebar {
    top: 72px;
    left: 10px;
  }

  .layers {
    top: auto;
    left: 10px;
    right: 10px;
    bottom: 88px;
    width: auto;
    max-height: 52vh;
    border-radius: 24px 24px 18px 18px;
  }

  .right-quickbar {
    right: 12px;
  }

  .bottom-workflows {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 8px;
    border-radius: 24px 24px 0 0;
    bottom: 0;
    width: 100vw;
  }

  .bottom-workflows button {
    min-height: 42px;
    border-radius: 16px;
    font-size: 10px;
  }

  .tool-options {
    bottom: 98px;
    grid-template-columns: 1fr 1fr;
    width: calc(100vw - 28px);
    border-radius: 20px;
  }

  .tool-options label {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .shortcut-hint {
    display: none;
  }
}

@media (max-width: 760px) {
  .sidebar {
    top: 78px;
    bottom: 108px;
    width: 56px;
    max-height: none;
    overflow-y: auto;
  }

  .sidebar .tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .right-quickbar {
    display: none;
  }

  .topbar-group {
    flex: 0 0 auto;
  }

  .document-chip {
    min-width: 104px;
  }
}

.sidebar {
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.canvas-wrap,
.layers,
.topbar {
  scrollbar-width: none;
}

.canvas-wrap::-webkit-scrollbar,
.layers::-webkit-scrollbar,
.topbar::-webkit-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .right-quickbar {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto;
    gap: 6px;
  }

  .topbar-group {
    min-height: 40px;
    padding: 3px;
  }

  .topbar-group button {
    min-width: 30px;
    min-height: 30px;
    padding: 0 7px;
    font-size: 11px;
  }

  .zoom-actions {
    justify-self: end;
  }

  .zoom-actions button:not(#fitButton),
  .zoom-actions #zoomLabel {
    display: none;
  }

  #fitButton {
    min-width: 42px;
  }

  .view-actions,
  .export-status {
    display: none;
  }

  .mobile-share-actions {
    display: flex;
    justify-self: end;
  }

  .export-actions {
    position: fixed;
    top: 60px;
    right: 12px;
    left: 76px;
    z-index: 9;
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 7px;
    border-radius: 18px;
  }

  .app-shell.share-open .export-actions {
    display: grid;
  }

  .export-actions button {
    min-width: 0;
    font-size: 10px;
  }

  .document-chip {
    min-width: 96px;
  }

  .canvas-wrap {
    overflow: hidden;
  }

  .pasteboard-frame {
    justify-self: center;
  }
}

/* Final polish pass for native-feeling tool chrome. */
.tool[data-tool="hand"],
.tool[data-tool="eyedropper"] {
  font-size: 10px;
  letter-spacing: 0;
}

.tool {
  display: grid;
  place-items: center;
}

.tool.is-active,
.bottom-workflows button.is-active,
.inspector-tabs button.is-active {
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.08);
}

.canvas-wrap {
  overflow: auto;
  overscroll-behavior: none;
}

@media (max-width: 760px) {
  .canvas-wrap {
    overflow: auto;
  }

  .sidebar {
    padding: 6px;
  }

  .tool {
    width: 38px;
    min-height: 38px;
  }

  .color-dot,
  .color-swatch {
    width: 34px;
    min-height: 34px;
  }
}

@media (max-width: 560px) {
  .sidebar {
    grid-template-columns: 1fr;
  }

  .topbar-group {
    justify-content: space-between;
  }

  .canvas-wrap {
    padding: 14px;
  }
}

/* Linearity Curve-inspired iPad studio shell */
.app-shell {
  grid-template-columns: minmax(0, 1fr) 338px;
  background: #d9d9d9;
}

.sidebar {
  position: fixed;
  top: 76px;
  left: 14px;
  z-index: 6;
  width: 54px;
  max-height: calc(100vh - 96px);
  padding: 7px;
  border: 0;
  border-radius: 15px;
  background: rgba(31, 35, 41, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.sidebar .brand {
  margin: 0 0 8px;
}

.sidebar .brand > div,
.sidebar .panel h2 {
  display: none;
}

.sidebar .panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 14px;
}

.tool-grid {
  gap: 6px;
}

.tool {
  width: 40px;
  min-height: 40px;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
}

.tool:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
}

.tool.is-active {
  border-color: #fff;
  background: #fff;
  color: #111827;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
}

.color-widget {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  justify-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.color-dot,
.color-swatch {
  width: 34px;
  min-height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.78);
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.color-dot.is-fill {
  background: #f06c4f;
}

.color-dot.is-stroke {
  background: #243447;
}

.color-swatch[data-fill="#ffffff"] {
  background: #fff;
}

.color-swatch[data-fill="#22c55e"] {
  background: #22c55e;
}

.color-swatch[data-fill="#3b82f6"] {
  background: #3b82f6;
}

.workspace {
  grid-column: 1;
  background: #d9d9d9;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px 8px 78px;
  border-bottom: 0;
  background: #d9d9d9;
  box-shadow: none;
  overflow: hidden;
}

.topbar-group {
  flex-wrap: nowrap;
  gap: 5px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.topbar-group button,
.mode-switcher button {
  min-width: 30px;
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0 7px;
  font-size: 12px;
}

.topbar-group button:hover,
.mode-switcher button:hover {
  background: #fff;
}

.document-chip {
  display: grid;
  gap: 1px;
  min-width: 112px;
  padding: 0 7px;
  border-right: 1px solid var(--line);
}

.document-chip span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
}

.document-chip strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
}

.mode-switcher {
  display: none;
}

.mode-switcher button {
  color: #586170;
}

.mode-switcher button.is-active {
  background: #20242b;
  color: #fff;
  box-shadow: none;
}

.export-actions {
  flex: 0 1 auto;
  overflow: visible;
  max-width: none;
}

.export-status {
  flex: 0 0 auto;
  grid-column: auto;
  min-width: 54px;
  padding: 0;
  text-align: right;
}

.canvas-wrap {
  place-items: start center;
  padding: 26px 28px 40px 92px;
  background-color: #d9d9d9;
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 24px 24px;
}

.pasteboard-frame {
  grid-template-rows: 22px auto;
  filter: none;
}

.canvas-rulers {
  color: rgba(20, 25, 34, 0.42);
  font-size: 9px;
  font-weight: 600;
}

#artboard {
  border: 0;
  box-shadow: 0 12px 26px rgba(20, 25, 34, 0.18);
}

.layers {
  grid-column: 2;
  background: #f2f2f2;
  border-left: 0;
  box-shadow: -8px 0 22px rgba(20, 25, 34, 0.08);
}

.app-shell.inspector-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.inspector-collapsed .layers {
  display: none;
}

.inspector-title {
  display: none;
}

.inspector-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 10px;
  background: #dedede;
}

.inspector-tabs button.is-active {
  background: #20242b;
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

.panel {
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

.panel h2 {
  color: #555d68;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.library-asset {
  min-height: 48px;
  border: 1px solid #d7dce5;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-height: none;
  }

  .sidebar .brand {
    display: none;
  }

  .tool-grid {
    grid-template-columns: repeat(11, minmax(36px, 1fr));
  }

  .topbar {
    padding-left: 12px;
    overflow-x: auto;
  }

  .canvas-wrap {
    padding: 22px 18px 90px;
  }

  .layers {
    grid-column: 1;
  }
}

/* Final app-store style overrides: keep the sleek mobile chrome above legacy layout rules. */
body {
  background: #0b0b0c;
}

.app-shell {
  grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(circle at 18% 18%, rgba(240, 108, 79, 0.18), transparent 26%),
    radial-gradient(circle at 78% 20%, rgba(59, 130, 246, 0.16), transparent 28%),
    #111214;
}

.workspace,
.canvas-wrap {
  background-color: transparent;
}

.topbar {
  position: fixed;
  top: 10px;
  left: 78px;
  right: 16px;
  z-index: 8;
  min-height: 48px;
  padding: 0;
  background: transparent;
  color: #f8fafc;
}

.topbar-group,
.layers,
.sidebar,
.right-quickbar,
.bottom-workflows {
  background: rgba(16, 17, 19, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(24px);
}

.topbar-group button,
.document-chip strong,
.export-status,
.right-quickbar button,
.bottom-workflows button,
.panel,
.panel h2,
.controls label,
.compact-field,
.mini-status,
.stats p,
.layer-kind,
.estimate-list,
.layer-list li,
.library-asset {
  color: #f8fafc;
}

.document-chip span,
.controls label,
.compact-field,
.mini-status,
.stats p,
.layer-kind,
.estimate-list {
  color: rgba(248, 250, 252, 0.68);
}

.canvas-wrap {
  min-height: 100vh;
  padding: 78px 72px 96px 92px;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    #202124;
  background-size: 24px 24px;
}

#artboard {
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
}

.layers {
  position: fixed;
  top: 74px;
  right: 14px;
  bottom: 84px;
  z-index: 7;
  width: 320px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 22px;
}

.app-shell.inspector-collapsed .layers {
  display: none;
}

.inspector-tabs {
  grid-template-columns: repeat(4, 1fr);
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.inspector-tabs button {
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(248, 250, 252, 0.72);
}

.inspector-tabs button.is-active,
.bottom-workflows button.is-active {
  background: #f8fafc;
  color: #111214;
}

.panel {
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}

button,
.file-button,
.controls input[type="number"],
.controls input[type="text"],
.controls select,
.compact-field select,
.layer-list li,
.library-asset {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.controls input[type="number"],
.controls input[type="text"],
.controls select,
.compact-field select {
  color: #f8fafc;
}

.right-quickbar {
  position: fixed;
  right: 350px;
  top: 50%;
  z-index: 7;
  display: grid;
  gap: 6px;
  padding: 7px;
  border-radius: 18px;
  transform: translateY(-50%);
}

.right-quickbar button {
  width: 46px;
  min-height: 38px;
  padding: 0 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 10px;
}

.bottom-workflows {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(8, minmax(64px, 1fr));
  gap: 4px;
  width: min(720px, calc(100vw - 28px));
  padding: 7px;
  border-radius: 22px;
  transform: translateX(-50%);
}

.bottom-workflows button {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: rgba(248, 250, 252, 0.72);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .topbar {
    left: 12px;
    right: 12px;
    overflow-x: auto;
  }

  .canvas-wrap {
    padding: 70px 16px 108px 76px;
  }

  .sidebar {
    top: 72px;
    left: 10px;
    right: auto;
    bottom: auto;
    width: 56px;
    max-height: calc(100vh - 188px);
  }

  .layers {
    left: 12px;
    right: 12px;
    bottom: 84px;
    width: auto;
  }

  .right-quickbar {
    right: 12px;
  }

  .bottom-workflows {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Premium refinement: monochrome dock icons, subtle color chips, graphite glass. */
:root {
  --surface-glass: rgba(42, 44, 49, 0.82);
  --surface-glass-strong: rgba(34, 36, 41, 0.92);
  --surface-line: rgba(255, 255, 255, 0.13);
  --canvas-charcoal: #25282d;
}

.app-shell {
  background:
    radial-gradient(circle at 16% 14%, rgba(99, 102, 241, 0.1), transparent 24%),
    radial-gradient(circle at 84% 8%, rgba(20, 184, 166, 0.07), transparent 22%),
    #181a1f;
}

.canvas-wrap {
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    var(--canvas-charcoal);
  background-size: 24px 24px;
}

.topbar-group,
.layers,
.sidebar,
.right-quickbar,
.bottom-workflows,
.tool-options {
  background: var(--surface-glass);
  border-color: var(--surface-line);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.sidebar {
  width: 52px;
  padding: 6px;
  border-radius: 18px;
}

.tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 38px;
  border-radius: 12px;
  color: rgba(245, 247, 250, 0.82);
  font-size: 0;
}

.tool::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--tool-icon) center / contain no-repeat;
  -webkit-mask: var(--tool-icon) center / contain no-repeat;
}

.tool:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.tool.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: #15171b;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.tool[data-tool="select"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 3l13 9-6 1.1 3.4 6.1-2.7 1.5-3.4-6.1L5 19z'/%3E%3C/svg%3E"); }
.tool[data-tool="hand"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 21c-2.2-2.6-3.3-4.8-3.3-6.7V12c0-.8.6-1.4 1.4-1.4.4 0 .8.2 1.1.5V6.4C7.2 5.6 7.8 5 8.6 5c.5 0 .9.2 1.2.6V4.4c0-.8.6-1.4 1.4-1.4s1.4.6 1.4 1.4v1.2c.3-.4.7-.6 1.2-.6.8 0 1.4.6 1.4 1.4v1.4c.3-.3.7-.5 1.2-.5.8 0 1.4.6 1.4 1.4v5.2c0 2.1-.8 4.1-2.2 5.6L14.1 21z'/%3E%3C/svg%3E"); }
.tool[data-tool="eyedropper"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M18.7 3.9c1 .9 1 2.5 0 3.4l-2 2 1.2 1.2-1.8 1.8-.9-.9-7.4 7.4H4.5v-3.3l7.4-7.4-.9-.9 1.8-1.8L14 6.6l2-2c.8-.9 2.3-.9 3.2 0zM6.6 16.3v1.1h1.1l6.2-6.2-1.1-1.1z'/%3E%3C/svg%3E"); }
.tool[data-tool="rect"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 6h14v12H5zm2 2v8h10V8z'/%3E%3C/svg%3E"); }
.tool[data-tool="ellipse"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 5c5 0 9 3.1 9 7s-4 7-9 7-9-3.1-9-7 4-7 9-7zm0 2c-3.9 0-7 2.2-7 5s3.1 5 7 5 7-2.2 7-5-3.1-5-7-5z'/%3E%3C/svg%3E"); }
.tool[data-tool="line"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5.6 19.8L4.2 18.4 18.4 4.2l1.4 1.4z'/%3E%3C/svg%3E"); }
.tool[data-tool="pen"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M13.4 4l6.6 6.6-7.7 7.7-4.7 1.7 1.7-4.7zM6.5 4.8l4.2 4.2-1.4 1.4-2.8-2.8-2.1 2.1L3 8.3z'/%3E%3C/svg%3E"); }
.tool[data-tool="text"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 5h14v3h-2V7h-4v11h2v2H9v-2h2V7H7v1H5z'/%3E%3C/svg%3E"); }
.tool[data-tool="brush"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M16.8 3.8l3.4 3.4-8.5 8.5c-.9.9-2.2.9-3.1 0l-.3-.3c-.9-.9-.9-2.2 0-3.1zM7 16.8c.7.7 1.6 1.1 2.6 1.1-1 1.9-2.8 3.1-5.6 3.1.9-1.2 1.1-2.2 1.1-3.1 0-.8.5-1.4 1.1-1.8z'/%3E%3C/svg%3E"); }
.tool[data-tool="eraser"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M14.7 4.3l5 5c.8.8.8 2 0 2.8L12.8 19H6.4l-3.1-3.1c-.8-.8-.8-2 0-2.8l8.6-8.8c.8-.8 2-.8 2.8 0zM7.2 17h4.7l2.2-2.2-5-5-4.4 4.4z'/%3E%3C/svg%3E"); }
.tool[data-tool="dimension"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 7h16v2H4zm2 5h12v2H6zm-2 3l4 3v-6zm16 0l-4-3v6z'/%3E%3C/svg%3E"); }
.tool[data-tool="crop"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 3h2v12h12v2h-4v4h-2v-4H7zm2 4h8v8h-2V9H9z'/%3E%3C/svg%3E"); }
.tool[data-tool="area"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 7l6-3 6 3-1 10-5 3-5-3zm2 1.2.7 7.6 3.3 1.9 3.3-1.9.7-7.6-4-2z'/%3E%3C/svg%3E"); }

.color-widget {
  position: relative;
  width: 38px;
  height: 38px;
  margin: 10px auto 0;
  padding: 0;
  border-top: 0;
}

.color-dot,
.color-swatch {
  width: 22px;
  min-height: 22px;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26);
}

.color-dot.is-fill {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 2;
}

.color-dot.is-stroke {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 1;
}

.color-swatch {
  display: none;
}

/* Last word on dock polish: icon-only, never label-heavy. */
.tool,
.tool[data-tool="hand"],
.tool[data-tool="eyedropper"] {
  font-size: 0 !important;
  line-height: 0;
}

.tool::before {
  display: block;
  flex: 0 0 auto;
}

/* Curve-like light mode and adaptive appearance */
:root {
  --curve-bg: #d8d9db;
  --curve-surface: rgba(255, 255, 255, 0.82);
  --curve-surface-strong: rgba(255, 255, 255, 0.94);
  --curve-text: #111317;
  --curve-muted: rgba(17, 19, 23, 0.52);
  --curve-line: rgba(255, 255, 255, 0.72);
  --curve-shadow: 0 18px 44px rgba(82, 86, 94, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]),
  :root[data-theme="auto"] {
    --curve-bg: #25282d;
    --curve-surface: rgba(42, 44, 49, 0.82);
    --curve-surface-strong: rgba(34, 36, 41, 0.92);
    --curve-text: #f8fafc;
    --curve-muted: rgba(248, 250, 252, 0.62);
    --curve-line: rgba(255, 255, 255, 0.13);
    --curve-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
  }
}

:root[data-theme="dark"] {
  --curve-bg: #25282d;
  --curve-surface: rgba(42, 44, 49, 0.82);
  --curve-surface-strong: rgba(34, 36, 41, 0.92);
  --curve-text: #f8fafc;
  --curve-muted: rgba(248, 250, 252, 0.62);
  --curve-line: rgba(255, 255, 255, 0.13);
  --curve-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
}

:root[data-theme="light"] {
  --curve-bg: #d8d9db;
  --curve-surface: rgba(255, 255, 255, 0.82);
  --curve-surface-strong: rgba(255, 255, 255, 0.94);
  --curve-text: #111317;
  --curve-muted: rgba(17, 19, 23, 0.52);
  --curve-line: rgba(255, 255, 255, 0.72);
  --curve-shadow: 0 18px 44px rgba(82, 86, 94, 0.2);
}

body {
  color: var(--curve-text);
  background: var(--curve-bg);
}

.app-shell {
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.28), transparent 42%), var(--curve-bg);
}

.canvas-wrap {
  background:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px),
    var(--curve-bg);
  background-size: 24px 24px;
}

.topbar-group,
.layers,
.sidebar,
.right-quickbar,
.bottom-workflows,
.tool-options,
.tool-popout {
  background: var(--curve-surface);
  border-color: var(--curve-line);
  color: var(--curve-text);
  box-shadow: var(--curve-shadow);
}

.topbar-group button,
.topbar-group select,
.document-chip strong,
.export-status,
.right-quickbar button,
.bottom-workflows button,
.tool-options button,
.panel,
.panel h2,
.controls label,
.compact-field,
.mini-status,
.stats p,
.layer-kind,
.estimate-list,
.layer-list li,
.library-asset {
  color: var(--curve-text);
}

.document-chip span,
.controls label,
.compact-field,
.mini-status,
.stats p,
.layer-kind,
.estimate-list {
  color: var(--curve-muted);
}

.topbar-group button,
.topbar-group select,
.tool-options button,
button,
.file-button,
.controls input[type="number"],
.controls input[type="text"],
.controls select,
.compact-field select,
.layer-list li,
.library-asset {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(0, 0, 0, 0.05);
  color: var(--curve-text);
}

:root[data-theme="dark"] .topbar-group button,
:root[data-theme="dark"] .topbar-group select,
:root[data-theme="dark"] .tool-options button,
:root[data-theme="dark"] button,
:root[data-theme="dark"] .file-button,
:root[data-theme="dark"] .controls input[type="number"],
:root[data-theme="dark"] .controls input[type="text"],
:root[data-theme="dark"] .controls select,
:root[data-theme="dark"] .compact-field select,
:root[data-theme="dark"] .layer-list li,
:root[data-theme="dark"] .library-asset {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.tool {
  color: var(--curve-text);
}

.tool.is-active,
.bottom-workflows button.is-active,
.inspector-tabs button.is-active {
  background: rgba(17, 19, 23, 0.1);
  color: var(--curve-text);
}

:root[data-theme="dark"] .tool.is-active,
:root[data-theme="dark"] .bottom-workflows button.is-active,
:root[data-theme="dark"] .inspector-tabs button.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: #111317;
}

.panel {
  background: rgba(255, 255, 255, 0.34);
}

:root[data-theme="dark"] .panel {
  background: rgba(255, 255, 255, 0.07);
}

.tool-popout {
  position: absolute;
  left: calc(100% + 12px);
  z-index: 7;
  display: grid;
  gap: 8px;
  width: 54px;
  padding: 6px;
  border: 1px solid var(--curve-line);
  border-radius: 999px;
  backdrop-filter: blur(24px);
}

.tool-flyout {
  position: absolute;
  left: calc(100% + 64px);
  z-index: 18;
  display: none;
  grid-template-columns: repeat(2, minmax(74px, 1fr));
  gap: 7px;
  width: 174px;
  padding: 8px;
  border: 1px solid var(--curve-line);
  border-radius: 20px;
  background: var(--curve-surface);
  box-shadow: var(--curve-shadow);
  backdrop-filter: blur(22px);
}

.tool-flyout.is-open {
  display: grid;
}

.tool-flyout button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--curve-text);
  font-size: 11px;
  font-weight: 800;
}

.tool-flyout button[data-ready="false"] {
  color: var(--curve-muted);
  background: rgba(255, 255, 255, 0.06);
}

.tool-flyout button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tool-popout button {
  width: 42px;
  min-height: 42px;
  border-radius: 50%;
  border: 0;
  font-size: 0;
  background: rgba(255, 255, 255, 0.45);
}

.tool-popout button::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  margin: auto;
  color: var(--curve-text);
  background: currentColor;
  -webkit-mask: var(--popout-icon) center / contain no-repeat;
  mask: var(--popout-icon) center / contain no-repeat;
}

.tool-popout button[data-popout-action="style"] {
  --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M14.7 3.3a1 1 0 0 1 1.4 0l4.6 4.6a1 1 0 0 1 0 1.4l-8.9 8.9-5.7 1.7 1.7-5.7 8.9-8.9Zm-5.1 12 .7 2.4 2.4-.7 5.9-5.9-3.1-3.1-5.9 5.9Z'/%3E%3C/svg%3E");
}

.tool-popout button[data-popout-action="duplicate"] {
  --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M7 3h10a2 2 0 0 1 2 2v10h-2V5H7V3Zm-2 4h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Zm0 2v10h10V9H5Z'/%3E%3C/svg%3E");
}

.tool-popout button[data-popout-action="layers"] {
  --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='m12 3 9 5-9 5-9-5 9-5Zm0 2.3L7.1 8 12 10.7 16.9 8 12 5.3ZM4.1 11.2 12 15.6l7.9-4.4 1.1 1.9-9 5-9-5 1.1-1.9Zm0 4L12 19.6l7.9-4.4 1.1 1.9-9 5-9-5 1.1-1.9Z'/%3E%3C/svg%3E");
}

.tool-popout button[data-popout-action="grid"] {
  --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 4h16v16H4V4Zm2 2v5h5V6H6Zm7 0v5h5V6h-5ZM6 13v5h5v-5H6Zm7 0v5h5v-5h-5Z'/%3E%3C/svg%3E");
}

.tool-popout button[data-popout-action="snap"] {
  --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M7 3h10v5h-2V5H9v6a3 3 0 0 0 6 0v-1h2v1a5 5 0 0 1-10 0V3Zm-2 7h4v2H7v8h10v-8h-2v-2h4v12H5V10Z'/%3E%3C/svg%3E");
}

.layers {
  background: var(--curve-surface-strong);
}

.inspector-tabs {
  background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .inspector-tabs {
  background: rgba(255, 255, 255, 0.08);
}

canvas,
.canvas-wrap,
.workspace {
  touch-action: none;
}

/* v58 mobile finish: light Curve-style chrome with icon-first navigation. */
@media (max-width: 760px) {
  .topbar {
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: minmax(92px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    min-height: 54px;
  }

  .document-chip {
    min-width: 0;
    width: 100%;
  }

  .document-chip span {
    display: none;
  }

  .mode-switcher,
  .zoom-actions,
  .export-actions,
  .export-status {
    display: none;
  }

  .view-actions {
    display: flex;
    gap: 6px;
  }

  .view-actions button,
  .view-actions select,
  .mobile-share-actions button {
    width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
  }

  .view-actions select {
    width: 66px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 800;
  }

  .view-actions button::before,
  .mobile-share-actions button::before,
  .right-quickbar button::before,
  .bottom-workflows button::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    margin: auto;
    background: currentColor;
    -webkit-mask: var(--action-icon) center / contain no-repeat;
    mask: var(--action-icon) center / contain no-repeat;
  }

  #quickSettingsButton {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M5 7h8a3 3 0 1 0 0-2H5v2Zm10-1a1 1 0 1 1 2 0 1 1 0 0 1-2 0ZM5 19h8a3 3 0 1 0 0-2H5v2Zm10-1a1 1 0 1 1 2 0 1 1 0 0 1-2 0ZM5 13h2a3 3 0 1 0 0-2H5v2Zm4-1a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z'/%3E%3C/svg%3E");
  }

  #inspectorToggleButton {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5h16v14H4V5Zm2 2v10h5V7H6Zm7 0v10h5V7h-5Z'/%3E%3C/svg%3E");
  }

  #mobileShareButton {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12 3 7 8h3v6h4V8h3l-5-5ZM5 13h2v5h10v-5h2v7H5v-7Z'/%3E%3C/svg%3E");
  }

  .mobile-share-actions {
    display: block;
  }

  .canvas-wrap {
    padding: 78px 16px 104px 76px;
  }

  .right-quickbar {
    display: grid !important;
    right: 70px !important;
    width: 56px !important;
    padding: 8px 6px;
    border-radius: 999px;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
  }

  .right-quickbar button {
    width: 42px;
    min-height: 42px;
    font-size: 0;
    color: var(--curve-text);
  }

  .right-quickbar button[data-quick-action="fit"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 4h7v2H6v5H4V4Zm9 0h7v7h-2V6h-5V4ZM4 13h2v5h5v2H4v-7Zm14 0h2v7h-7v-2h5v-5Z'/%3E%3C/svg%3E");
  }

  .right-quickbar button[data-quick-action="crop"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 3h2v3h10v10h3v2h-3v3h-2v-3H6V8H3V6h3V3Zm2 5v8h8V8H8Z'/%3E%3C/svg%3E");
  }

  .right-quickbar button[data-quick-action="layers"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='m12 3 9 5-9 5-9-5 9-5Zm0 2.3L7.1 8 12 10.7 16.9 8 12 5.3ZM4.1 12 12 16.4l7.9-4.4 1.1 1.8-9 5-9-5L4.1 12Z'/%3E%3C/svg%3E");
  }

  .right-quickbar button[data-quick-action="build"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 20h16v-2H4v2Zm2-4h3V8H6v8Zm5 0h3V4h-3v12Zm5 0h3v-6h-3v6Z'/%3E%3C/svg%3E");
  }

  .right-quickbar button[data-quick-action="delete"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M8 4h8l1 2h4v2H3V6h4l1-2Zm-2 6h12l-1 11H7L6 10Zm4 2v7h2v-7h-2Zm4 0v7h2v-7h-2Z'/%3E%3C/svg%3E");
  }

  .bottom-workflows {
    left: 50%;
    bottom: 16px;
    display: flex;
    width: auto;
    max-width: calc(100vw - 104px);
    gap: 4px;
    padding: 7px;
    border-radius: 999px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bottom-workflows::-webkit-scrollbar {
    display: none;
  }

  .bottom-workflows button {
    flex: 0 0 48px;
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
  }

  .workflow-actions {
    bottom: 78px;
    max-width: calc(100vw - 104px);
    padding: 6px;
    gap: 4px;
  }

  .workflow-actions button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 11px;
  }

  .bottom-workflows button[data-workflow="select"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M5 3v18l4.5-4.2 2.5 5.2 2.2-1-2.5-5.1H18L5 3Z'/%3E%3C/svg%3E");
  }

  .bottom-workflows button[data-workflow="adjust"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M5 7h8a3 3 0 1 0 0-2H5v2Zm0 12h8a3 3 0 1 0 0-2H5v2Zm0-6h2a3 3 0 1 0 0-2H5v2Z'/%3E%3C/svg%3E");
  }

  .bottom-workflows button[data-workflow="vector"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M7 4a3 3 0 0 1 2.8 2h4.4A3 3 0 1 1 17 10a2.9 2.9 0 0 1-1.5-.4L9.6 15.5A3 3 0 1 1 8.2 14l5.8-5.8A3 3 0 1 1 7 4Z'/%3E%3C/svg%3E");
  }

  .bottom-workflows button[data-workflow="type"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 5h16v4h-2V7h-5v12h3v2H8v-2h3V7H6v2H4V5Z'/%3E%3C/svg%3E");
  }

  .bottom-workflows button[data-workflow="measure"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 17 17 4l3 3L7 20H4v-3Zm3.8 1 9.4-9.4-1.8-1.8L6 16.2V18h1.8ZM9 4h2v3H9V4Zm4 0h2v3h-2V4ZM4 9h3v2H4V9Zm0 4h3v2H4v-2Z'/%3E%3C/svg%3E");
  }

  .bottom-workflows button[data-workflow="pdf"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M6 2h9l5 5v15H6V2Zm8 2v4h4l-4-4ZM8 4v16h10V10h-6V4H8Zm1 11h6v2H9v-2Z'/%3E%3C/svg%3E");
  }

  .bottom-workflows button[data-workflow="build"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M4 20h16v-2H4v2Zm2-4h3V8H6v8Zm5 0h3V4h-3v12Zm5 0h3v-6h-3v6Z'/%3E%3C/svg%3E");
  }

  .bottom-workflows button[data-workflow="preview3d"] {
    --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='m12 2 8 4.5v9L12 20l-8-4.5v-9L12 2Zm0 2.3L7 7.1l5 2.8 5-2.8-5-2.8Zm-6 4.5v5.5l5 2.8v-5.5L6 8.8Zm12 0-5 2.8v5.5l5-2.8V8.8Z'/%3E%3C/svg%3E");
  }

  .tool-options {
    bottom: 84px;
    border-radius: 999px;
  }

  .layers {
    display: block;
    top: auto !important;
    left: 10px !important;
    right: auto !important;
    bottom: 82px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(58vh, 520px);
    min-width: 0 !important;
    padding: 22px 12px 12px;
    border-radius: 30px 30px 22px 22px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 18;
  }

  .layers::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: rgba(17, 19, 23, 0.34);
    transform: translateX(-50%);
  }

  .app-shell.inspector-collapsed .layers {
    display: none;
  }

  .app-shell:not(.inspector-collapsed) .right-quickbar {
    display: none !important;
  }

  .inspector-title {
    text-align: center;
  }

  .inspector-title h2 {
    font-size: 20px;
  }

  .inspector-title p {
    display: block;
    font-size: 11px;
  }

  .inspector-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .inspector-tabs button {
    min-width: 0;
    padding: 0 6px;
    font-size: 11px;
  }

  .layers .panel {
    min-width: 0;
    overflow: hidden;
  }

  .library-grid,
  .align-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .library-asset,
  .align-grid button {
    min-width: 0;
  }
}

/* v64 icon pass: thinner stroke-style symbols so tools read like modern iOS creative apps. */
.tool::before,
.tool-popout button::before {
  width: 20px;
  height: 20px;
  opacity: 0.92;
}

@media (max-width: 760px) {
  .view-actions button::before,
  .mobile-share-actions button::before,
  .right-quickbar button::before,
  .bottom-workflows button::before {
    width: 20px;
    height: 20px;
    opacity: 0.92;
  }
}

.tool::before {
  width: 21px;
  height: 21px;
}

.tool[data-tool="select"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3.5 18 12l-5.7 1.1 3.1 6-2.4 1.3-3.1-6L5 19.2V3.5Z'/%3E%3C/svg%3E"); }
.tool[data-tool="hand"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.4 12.5V7.1a1.35 1.35 0 0 1 2.7 0v4.1'/%3E%3Cpath d='M10.1 11V5.7a1.35 1.35 0 0 1 2.7 0V11'/%3E%3Cpath d='M12.8 11V7a1.35 1.35 0 0 1 2.7 0v4.4'/%3E%3Cpath d='M15.5 11.5V9.4a1.35 1.35 0 0 1 2.7 0v4.3c0 4.1-2.4 6.8-6.1 6.8h-1.3c-2.4 0-4.1-1.2-5.2-3.6l-1.1-2.5a1.45 1.45 0 0 1 2.6-1.2l.7 1.2'/%3E%3C/svg%3E"); }
.tool[data-tool="eyedropper"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14 5 5 5'/%3E%3Cpath d='m12 7 5 5-8 8H5v-4l8-8'/%3E%3Cpath d='M15.5 3.5a2.1 2.1 0 0 1 3 3L17 8l-3-3 1.5-1.5Z'/%3E%3C/svg%3E"); }
.tool[data-tool="rect"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='6.5' width='14' height='11' rx='1.4'/%3E%3C/svg%3E"); }
.tool[data-tool="ellipse"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='12' rx='8.2' ry='5.6'/%3E%3C/svg%3E"); }
.tool[data-tool="line"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19 19 5'/%3E%3C/svg%3E"); }
.tool[data-tool="pen"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.5 4.5 6 6L12 18l-5 1.5 1.5-5 7.5-7.5'/%3E%3Cpath d='m12 6 6 6'/%3E%3Cpath d='m8.5 14.5 2 2'/%3E%3C/svg%3E"); }
.tool[data-tool="text"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14'/%3E%3Cpath d='M12 6v13'/%3E%3Cpath d='M9 19h6'/%3E%3Cpath d='M5 6v3'/%3E%3Cpath d='M19 6v3'/%3E%3C/svg%3E"); }
.tool[data-tool="brush"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.5 4.5 4 4-7.6 7.6a2.8 2.8 0 0 1-4-4l7.6-7.6Z'/%3E%3Cpath d='M7.3 16.6c-.2 2.4-1.5 3.8-4.1 4.4 1.5-1.4 1.5-3.2 2-4.2.4-.8 1.2-1.2 2.1-.2Z'/%3E%3C/svg%3E"); }
.tool[data-tool="eraser"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.5 4.5 5 5a2 2 0 0 1 0 2.8L13 19H7l-3-3a2 2 0 0 1 0-2.8l7.7-8.7a2 2 0 0 1 2.8 0Z'/%3E%3Cpath d='m8.5 9.5 6 6'/%3E%3Cpath d='M12.5 19H20'/%3E%3C/svg%3E"); }
.tool[data-tool="dimension"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7v10'/%3E%3Cpath d='M19 7v10'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='m9 9-3 3 3 3'/%3E%3Cpath d='m15 9 3 3-3 3'/%3E%3C/svg%3E"); }
.tool[data-tool="crop"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3v14h14'/%3E%3Cpath d='M3 7h14v14'/%3E%3C/svg%3E"); }
.tool[data-tool="area"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 4 6.5 4-1.2 8.2L12 20l-5.3-3.8L5.5 8 12 4Z'/%3E%3Cpath d='M8.5 9.5 12 7.5l3.5 2'/%3E%3C/svg%3E"); }
.tool[data-tool="redaction"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l4 4v14H7V3Z'/%3E%3Cpath d='M14 3v5h4'/%3E%3Cpath d='M9.5 15h5'/%3E%3Cpath d='M9.5 18h5'/%3E%3C/svg%3E"); }
.tool[data-tool="wall"] { --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 18h14'/%3E%3Cpath d='M7 18V8h4v10'/%3E%3Cpath d='M13 18V5h4v13'/%3E%3C/svg%3E"); }

.tool-popout button::before {
  width: 20px;
  height: 20px;
}

.tool-popout button[data-popout-action="style"] { --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14 4 6 6-8 8-5 1.5L8.5 14 14 4Z'/%3E%3Cpath d='m12.5 6.5 5 5'/%3E%3C/svg%3E"); }
.tool-popout button[data-popout-action="duplicate"] { --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='7' width='11' height='11' rx='1.5'/%3E%3Cpath d='M5 15V5h10'/%3E%3C/svg%3E"); }
.tool-popout button[data-popout-action="layers"] { --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 4 8 4-8 4-8-4 8-4Z'/%3E%3Cpath d='m4 12 8 4 8-4'/%3E%3Cpath d='m4 16 8 4 8-4'/%3E%3C/svg%3E"); }
.tool-popout button[data-popout-action="grid"] { --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='14' height='14' rx='1.5'/%3E%3Cpath d='M5 10h14M5 14h14M10 5v14M14 5v14'/%3E%3C/svg%3E"); }
.tool-popout button[data-popout-action="snap"] { --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5h10v4'/%3E%3Cpath d='M7 5v7a5 5 0 0 0 10 0V9'/%3E%3Cpath d='M5 12H3'/%3E%3Cpath d='M21 12h-2'/%3E%3C/svg%3E"); }
.tool-popout button[data-popout-action="more"] { --popout-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='12' r='1.4'/%3E%3Ccircle cx='12' cy='12' r='1.4'/%3E%3Ccircle cx='18' cy='12' r='1.4'/%3E%3C/svg%3E"); }

.tool-drawer {
  position: fixed;
  left: 80px;
  top: 78px;
  z-index: 21;
  display: none;
  width: min(340px, calc(100vw - 102px));
  max-height: calc(100vh - 108px);
  padding: 12px;
  overflow-y: auto;
  border: 1px solid var(--curve-line);
  border-radius: 22px;
  background: var(--curve-surface-strong);
  box-shadow: var(--curve-shadow);
  backdrop-filter: blur(24px);
}

.app-shell.tool-drawer-open .tool-drawer {
  display: grid;
  gap: 12px;
}

.app-shell.tool-drawer-open .sidebar {
  overflow: visible !important;
}

.app-shell.tool-drawer-open .right-quickbar {
  display: none !important;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawer-head strong {
  color: var(--curve-text);
  font-size: 13px;
}

.drawer-head button {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 0;
  background: rgba(17, 19, 23, 0.08);
}

.drawer-head button::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tool-drawer section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tool-drawer h3 {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--curve-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.drawer-tool {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  color: var(--curve-text);
  background: rgba(255, 255, 255, 0.42);
}

.drawer-tool::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--drawer-icon, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")) center / contain no-repeat;
  mask: var(--drawer-icon, url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")) center / contain no-repeat;
}

.drawer-tool[data-icon="marquee"],
.drawer-tool[data-icon="redact"],
.drawer-tool[data-icon="form"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='3 2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='6' width='14' height='12' rx='1.5'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="lasso"],
.drawer-tool[data-icon="smudge"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 16c-2-2.5-1.4-6.2 1.6-8.2 3.3-2.2 8.3-1.4 9.7 1.8 1.3 3-1.2 6.5-5.3 7.3-2.6.5-4.8.1-6-1.1Z'/%3E%3Cpath d='M12 17c1.5 1.4 3.4 2.1 5.8 2.1'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="quick-select"] {
  --drawer-icon: url("assets/lucide/quick-select.svg");
}

.drawer-tool[data-icon="magnetic-lasso"] {
  --drawer-icon: url("assets/lucide/magnet.svg");
}

.drawer-tool[data-icon="crop"] {
  --drawer-icon: url("assets/lucide/crop.svg");
}

.drawer-tool[data-icon="image-size"] {
  --drawer-icon: url("assets/lucide/image.svg");
}

.drawer-tool[data-icon="canvas-size"] {
  --drawer-icon: url("assets/lucide/frame.svg");
}

.drawer-tool[data-icon="white-balance"] {
  --drawer-icon: url("assets/lucide/sun.svg");
}

.drawer-tool[data-icon="shadows-highlights"] {
  --drawer-icon: url("assets/lucide/contrast.svg");
}

.drawer-tool[data-icon="color-balance"] {
  --drawer-icon: url("assets/lucide/swatch-book.svg");
}

.drawer-tool[data-icon="black-white"] {
  --drawer-icon: url("assets/sent-icons/half-tone.png");
}

.drawer-tool[data-icon="channel-mixer"] {
  --drawer-icon: url("assets/sent-icons/blend.png");
}

.drawer-tool[data-icon="pdf-vector"] {
  --drawer-icon: url("assets/lucide/spline.svg");
}

.drawer-tool[data-icon="pdf-content"] {
  --drawer-icon: url("assets/lucide/component.svg");
}

.drawer-tool[data-icon="wand"],
.drawer-tool[data-icon="heal"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 19 9-9'/%3E%3Cpath d='m12 8 4 4'/%3E%3Cpath d='M18 4v3M18 11v3M13 9h-3M23 9h-3'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="stamp"],
.drawer-tool[data-icon="clone"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 13h6l1 6H8l1-6Z'/%3E%3Cpath d='M10 13V8a2 2 0 0 1 4 0v5'/%3E%3Cpath d='M6 20h12'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="curve"],
.drawer-tool[data-icon="anchor-plus"],
.drawer-tool[data-icon="anchor-minus"],
.drawer-tool[data-icon="direct"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='17' r='2'/%3E%3Ccircle cx='18' cy='7' r='2'/%3E%3Cpath d='M8 17c4.2 0 3.8-10 8-10'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="scissors"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6.5' cy='7.5' r='2.2'/%3E%3Ccircle cx='6.5' cy='16.5' r='2.2'/%3E%3Cpath d='M9 9.5 19 19M9 14.5 19 5'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="polygon"],
.drawer-tool[data-icon="room"],
.drawer-tool[data-icon="model"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 4 7 4v8l-7 4-7-4V8l7-4Z'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="star"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 4 2.2 5 5.4.5-4 3.6 1.2 5.3L12 15.7l-4.8 2.7 1.2-5.3-4-3.6 5.4-.5L12 4Z'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="pages"],
.drawer-tool[data-icon="ocr"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h9l3 3v13H7V4Z'/%3E%3Cpath d='M16 4v4h3'/%3E%3Cpath d='M5 8v12'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="angle"],
.drawer-tool[data-icon="arc"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h14'/%3E%3Cpath d='M5 19 17 7'/%3E%3Cpath d='M9 19a6 6 0 0 1 1.8-4.2'/%3E%3C/svg%3E");
}

.drawer-tool[data-icon="wall"],
.drawer-tool[data-icon="door"],
.drawer-tool[data-icon="pushpull"],
.drawer-tool[data-icon="orbit"] {
  --drawer-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 17 12 5l7 12H5Z'/%3E%3Cpath d='M9 17v-5h6v5'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
  .tool-drawer {
    left: 74px;
    top: 76px;
    width: min(336px, calc(100vw - 86px));
    max-height: calc(100vh - 172px);
    border-radius: 24px;
  }

  .tool-drawer section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .view-actions button::before,
  .mobile-share-actions button::before,
  .right-quickbar button::before,
  .bottom-workflows button::before {
    background-color: currentColor;
    opacity: 0.9;
  }

  #quickSettingsButton { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h9'/%3E%3Ccircle cx='17' cy='7' r='2'/%3E%3Cpath d='M19 17H10'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M5 12h4'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M14 12h5'/%3E%3C/svg%3E"); }
  #inspectorToggleButton { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4.5' y='5' width='15' height='14' rx='1.8'/%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M8 9h1.3M8 12h1.3M8 15h1.3'/%3E%3C/svg%3E"); }
  #mobileShareButton { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15V4'/%3E%3Cpath d='m8 8 4-4 4 4'/%3E%3Cpath d='M5 13v6h14v-6'/%3E%3C/svg%3E"); }

  .right-quickbar button[data-quick-action="fit"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9V5h4'/%3E%3Cpath d='M15 5h4v4'/%3E%3Cpath d='M19 15v4h-4'/%3E%3Cpath d='M9 19H5v-4'/%3E%3C/svg%3E"); }
  .right-quickbar button[data-quick-action="crop"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3v14h14'/%3E%3Cpath d='M3 7h14v14'/%3E%3C/svg%3E"); }
  .right-quickbar button[data-quick-action="layers"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 4 8 4-8 4-8-4 8-4Z'/%3E%3Cpath d='m4 12 8 4 8-4'/%3E%3Cpath d='m4 16 8 4 8-4'/%3E%3C/svg%3E"); }
  .right-quickbar button[data-quick-action="build"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h14'/%3E%3Cpath d='M7 19V9h4v10'/%3E%3Cpath d='M13 19V5h4v14'/%3E%3C/svg%3E"); }
  .right-quickbar button[data-quick-action="delete"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3Cpath d='M7 10l1 10h8l1-10'/%3E%3Cpath d='M10 12v5M14 12v5'/%3E%3C/svg%3E"); }

  .bottom-workflows button[data-workflow="select"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 4 17.5 12l-5.1 1.1 2.7 5.6-2.3 1.1-2.8-5.6-4.5 4.2V4Z'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="adjust"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h9'/%3E%3Ccircle cx='17' cy='7' r='2'/%3E%3Cpath d='M19 17H10'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M5 12h4'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M14 12h5'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="vector"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6.5' cy='7' r='2'/%3E%3Ccircle cx='17.5' cy='7' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3Cpath d='M8.5 7h7'/%3E%3Cpath d='M7.7 8.7 11 16.2'/%3E%3Cpath d='m16.3 8.7-3.3 7.5'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="type"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14'/%3E%3Cpath d='M12 6v13'/%3E%3Cpath d='M9 19h6'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="measure"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 19 14-14'/%3E%3Cpath d='M7 17h3M10 14h2M13 11h3M16 8h2'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="pdf"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h7l4 4v14H7V3Z'/%3E%3Cpath d='M14 3v5h4'/%3E%3Cpath d='M9.5 16h5'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="build"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19h14'/%3E%3Cpath d='M7 19V9h4v10'/%3E%3Cpath d='M13 19V5h4v14'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="preview3d"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 4 7 4-7 4-7-4 7-4Z'/%3E%3Cpath d='M5 8v8l7 4 7-4V8'/%3E%3Cpath d='M12 12v8'/%3E%3C/svg%3E"); }
}

/* v95 Linearity-style usability pass: lighter chrome, clearer labels, softer floating controls. */
:root {
  --ios-bg: #dedfe1;
  --ios-sheet: rgba(252, 252, 253, 0.94);
  --ios-control: rgba(255, 255, 255, 0.78);
  --ios-control-active: rgba(17, 19, 23, 0.11);
  --ios-ink: #111317;
  --ios-muted: #72777f;
  --ios-stroke: rgba(255, 255, 255, 0.84);
  --ios-divider: rgba(17, 19, 23, 0.08);
  --ios-accent: #c77817;
  --ios-shadow: 0 18px 38px rgba(64, 68, 76, 0.18);
}

:root[data-theme="dark"] {
  --ios-bg: #24272c;
  --ios-sheet: rgba(36, 39, 44, 0.94);
  --ios-control: rgba(255, 255, 255, 0.1);
  --ios-control-active: rgba(255, 255, 255, 0.16);
  --ios-ink: #f8fafc;
  --ios-muted: rgba(248, 250, 252, 0.62);
  --ios-stroke: rgba(255, 255, 255, 0.12);
  --ios-divider: rgba(255, 255, 255, 0.09);
  --ios-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

body,
.app-shell {
  background: var(--ios-bg);
}

.app-shell {
  color: var(--ios-ink);
}

.topbar-group,
.sidebar,
.right-quickbar,
.bottom-workflows,
.tool-options,
.tool-popout,
.tool-flyout,
.tool-drawer,
.layers {
  background: var(--ios-sheet);
  border-color: var(--ios-stroke);
  box-shadow: var(--ios-shadow);
  color: var(--ios-ink);
  backdrop-filter: blur(24px) saturate(1.18);
}

.canvas-wrap {
  background:
    linear-gradient(rgba(255,255,255,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px),
    var(--ios-bg);
  background-size: 24px 24px;
}

.pasteboard-frame {
  box-shadow: 0 10px 26px rgba(66, 70, 78, 0.11);
}

.add-menu-button {
  display: none;
}

.tool,
.right-quickbar button,
.tool-popout button,
.view-actions button,
.mobile-share-actions button {
  color: var(--ios-ink);
  background: transparent;
}

.tool::before,
.tool-popout button::before,
.right-quickbar button::before,
.bottom-workflows button::before,
.view-actions button::before,
.mobile-share-actions button::before {
  opacity: 0.94;
}

.tool.is-active,
.tool:hover,
.right-quickbar button:hover,
.tool-popout button:hover,
.bottom-workflows button.is-active,
.inspector-tabs button.is-active {
  background: var(--ios-control-active);
  color: var(--ios-ink);
  box-shadow: none;
}

.tool-flyout {
  width: 186px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-radius: 22px;
}

.tool-flyout button,
.drawer-tool,
.library-asset,
.layer-list li,
.controls input,
.controls select,
.compact-field select,
.topbar-group button,
.topbar-group select,
.button-row button,
.wide-button {
  background: var(--ios-control);
  border-color: var(--ios-divider);
  color: var(--ios-ink);
}

.panel {
  background: transparent;
  border-color: var(--ios-divider);
  box-shadow: none;
}

.panel h2,
.inspector-title h2 {
  color: var(--ios-ink);
}

.controls label,
.compact-field,
.mini-status,
.layer-kind,
.stats p,
.inspector-title p {
  color: var(--ios-muted);
}

@media (max-width: 760px) {
  .app-shell {
    min-height: 100dvh;
    overflow: hidden;
  }

  .topbar {
    top: 12px;
    left: 12px;
    right: 12px;
    min-height: 48px;
    grid-template-columns: minmax(96px, 1fr) auto auto;
  }

  .topbar-group {
    min-height: 48px;
    border-radius: 999px;
  }

  .document-chip {
    padding: 0 13px;
  }

  .document-chip strong {
    font-size: 12px;
    font-weight: 850;
  }

  .view-actions {
    gap: 0;
    overflow: hidden;
  }

  .view-actions button,
  .mobile-share-actions button {
    width: 42px;
    min-height: 42px;
    border-radius: 0;
    background: transparent;
  }

  .view-actions button:first-child {
    border-radius: 999px 0 0 999px;
  }

  .view-actions select {
    height: 42px;
    border-radius: 999px;
    background: transparent;
  }

  .canvas-wrap {
    padding: 86px 14px 116px 78px;
  }

  .pasteboard-frame {
    width: min(280px, calc(100vw - 104px));
  }

  .sidebar {
    top: 166px;
    left: 11px;
    width: 56px;
    max-height: calc(100dvh - 344px);
    padding: 4px;
    border-radius: 999px;
    overflow: visible;
  }

  .sidebar .brand,
  .sidebar .panel h2 {
    display: none;
  }

  .sidebar .panel {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .tool-grid {
    gap: 0;
  }

  .tool {
    width: 48px;
    min-height: 46px;
    border-radius: 999px;
  }

  .tool::before {
    width: 21px;
    height: 21px;
  }

  .tool.is-active {
    background: rgba(17, 19, 23, 0.13);
  }

  .add-menu-button {
    position: fixed;
    top: 104px;
    left: 11px;
    z-index: 16;
    display: grid;
    place-items: center;
    width: 56px;
    min-height: 56px;
    padding: 0;
    border: 1px solid var(--ios-stroke);
    border-radius: 50%;
    background: var(--ios-sheet);
    color: var(--ios-ink);
    box-shadow: var(--ios-shadow);
    font-size: 0;
    backdrop-filter: blur(24px) saturate(1.18);
  }

  .add-menu-button::before,
  .add-menu-button::after {
    content: "";
    position: absolute;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .add-menu-button::after {
    transform: rotate(90deg);
  }

  .color-widget {
    display: none;
  }

  .tool-popout {
    left: 78px;
    width: 56px;
    padding: 5px;
    gap: 7px;
    border-radius: 999px;
  }

  .tool-popout button {
    width: 46px;
    min-height: 46px;
    background: var(--ios-control);
  }

  .tool-flyout {
    left: 142px;
    width: 184px;
  }

  .right-quickbar {
    right: 12px;
    top: 48%;
    width: 54px;
    padding: 5px;
    border-radius: 999px;
    gap: 7px;
  }

  .right-quickbar button {
    width: 44px;
    min-height: 44px;
    border-radius: 999px;
    background: transparent;
    font-size: 0;
  }

  .layers {
    left: 11px;
    right: 11px;
    bottom: 82px;
    max-height: min(58dvh, 540px);
    border-radius: 32px 32px 28px 28px;
    padding: 42px 12px 84px;
    overflow: hidden auto;
  }

  .layers::before {
    top: 13px;
    width: 46px;
    height: 5px;
    background: rgba(17, 19, 23, 0.38);
  }

  .inspector-title {
    justify-content: center;
    text-align: center;
  }

  .inspector-title p {
    display: none;
  }

  .inspector-title h2 {
    font-size: 20px;
    font-weight: 900;
  }

  .inspector-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    width: min(354px, calc(100vw - 64px));
    margin: 0 auto 18px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(17, 19, 23, 0.08);
  }

  .inspector-tabs button {
    min-height: 50px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    color: var(--ios-muted);
  }

  .inspector-tabs button.is-active {
    background: rgba(17, 19, 23, 0.1);
    color: var(--ios-ink);
  }

  .panel h2 {
    font-size: 14px;
    letter-spacing: 0;
  }

  .layer-list li {
    min-height: 56px;
    border-radius: 12px;
    box-shadow: none;
  }

  .align-grid,
  .button-row {
    gap: 8px;
  }

  .align-grid button,
  .button-row button,
  .wide-button {
    min-height: 36px;
    border-radius: 10px;
    font-size: 12px;
  }

  .bottom-workflows {
    left: 12px;
    right: 12px;
    bottom: 14px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(58px, 1fr);
    grid-template-columns: none;
    gap: 3px;
    width: auto;
    padding: 6px;
    overflow-x: auto;
    border-radius: 999px;
    scrollbar-width: none;
  }

  .bottom-workflows button {
    display: grid;
    grid-template-rows: 22px 15px;
    place-items: center;
    gap: 2px;
    min-height: 54px;
    padding: 6px 4px 5px;
    border-radius: 999px;
    background: transparent;
    color: var(--ios-ink);
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
  }

  .bottom-workflows button::before {
    width: 21px;
    height: 21px;
    margin: 0;
  }

  .bottom-workflows button.is-active {
    background: rgba(17, 19, 23, 0.11);
    color: var(--ios-accent);
  }

  .workflow-actions {
    left: 96px;
    right: 24px;
    bottom: 82px;
    max-width: none;
    padding: 6px;
    border-radius: 999px;
    background: var(--ios-sheet);
    box-shadow: var(--ios-shadow);
  }

  .app-shell:not(.inspector-collapsed) .workflow-actions {
    display: none;
  }

  .workflow-actions button {
    min-height: 34px;
    border-radius: 999px;
    font-size: 11px;
  }

  .tool-options {
    left: 88px;
    right: 22px;
    bottom: 86px;
    border-radius: 999px;
  }

  .tool-drawer {
    left: 78px;
    top: 100px;
    width: min(314px, calc(100vw - 92px));
    max-height: calc(100dvh - 188px);
  }
}

/* v97 bottom navigation correction: keep the labeled dock anchored and readable. */
@media (max-width: 760px) {
  .bottom-workflows {
    left: 10px !important;
    right: 10px !important;
    bottom: 14px !important;
    transform: none !important;
    display: flex !important;
    justify-content: flex-start;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .bottom-workflows button {
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px;
    font-size: 10px !important;
    scroll-snap-align: start;
  }

  .bottom-workflows button::before {
    display: block !important;
  }
}

/* v98 reference dock: mobile bottom nav mirrors the sheet tabs from the supplied app. */
@media (max-width: 760px) {
  .bottom-workflows {
    left: 94px !important;
    right: 20px !important;
    bottom: 14px !important;
    justify-content: center;
    overflow: visible;
    padding: 6px;
  }

  .bottom-workflows button {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    max-width: 74px;
    grid-template-rows: 22px 14px;
    place-items: center;
    gap: 2px;
    font-size: 0 !important;
  }

  .bottom-workflows button::after {
    display: block;
    color: currentColor;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
  }

  .bottom-workflows button[data-workflow="select"]::after {
    content: "Layers";
  }

  .bottom-workflows button[data-workflow="adjust"]::after {
    content: "Style";
  }

  .bottom-workflows button[data-workflow="vector"]::after {
    content: "Library";
  }

  .bottom-workflows button[data-workflow="build"]::after {
    content: "Build";
  }

  .bottom-workflows button.is-active {
    box-shadow: inset 0 0 0 1px rgba(17, 19, 23, 0.03);
  }

  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="preview3d"] {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    display: none !important;
  }

  .bottom-workflows button[data-workflow="type"]::before,
  .bottom-workflows button[data-workflow="type"]::after,
  .bottom-workflows button[data-workflow="measure"]::before,
  .bottom-workflows button[data-workflow="measure"]::after,
  .bottom-workflows button[data-workflow="pdf"]::before,
  .bottom-workflows button[data-workflow="pdf"]::after,
  .bottom-workflows button[data-workflow="preview3d"]::before,
  .bottom-workflows button[data-workflow="preview3d"]::after {
    content: none !important;
    display: none !important;
  }

  .layers {
    padding-bottom: 78px;
  }

  .app-shell:not(.inspector-collapsed) .mobile-share-actions {
    display: none !important;
  }

  .app-shell:not(.share-open) .export-actions,
  .app-shell:not(.share-open) .export-actions * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .export-actions,
  .export-actions * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .app-shell::after {
    content: "";
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: 88px;
    height: 82px;
    background:
      linear-gradient(rgba(255,255,255,.34) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px),
      var(--ios-bg);
    background-size: 24px 24px;
    pointer-events: none;
  }
}

/* v106 mobile geometry polish: keep the reference-style chrome inside the phone frame. */
@media (max-width: 760px) {
  .topbar {
    left: 12px !important;
    right: 10px !important;
    grid-template-columns: minmax(80px, 1fr) auto !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .document-chip {
    min-width: 0 !important;
    padding: 0 12px !important;
  }

  .document-chip strong {
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .view-actions {
    justify-self: end;
    gap: 4px !important;
  }

  .view-actions button,
  .view-actions select {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .view-actions select {
    width: 58px !important;
    min-width: 58px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .mobile-share-actions {
    display: none !important;
  }

  .layers {
    bottom: 104px !important;
    max-height: min(55dvh, 512px) !important;
    padding-bottom: 58px !important;
  }

  .bottom-workflows {
    bottom: 14px !important;
    min-height: 64px;
    height: 64px;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    max-width: 72px;
    min-height: 54px;
  }

  .app-shell::after {
    height: 74px;
  }
}

/* v107 mobile refinement: slimmer top chrome and icon-only layer actions. */
@media (max-width: 760px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .history-actions {
    min-width: 0;
  }

  .history-actions button {
    width: 36px !important;
    min-width: 36px !important;
  }

  .history-actions #duplicateButton {
    font-size: 0 !important;
  }

  .history-actions #duplicateButton::before {
    width: 18px;
    height: 18px;
    background: currentColor;
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='8' width='11' height='11' rx='1.5'/%3E%3Cpath d='M5 15V6.5A1.5 1.5 0 0 1 6.5 5H15'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='8' y='8' width='11' height='11' rx='1.5'/%3E%3Cpath d='M5 15V6.5A1.5 1.5 0 0 1 6.5 5H15'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .view-actions select {
    display: none !important;
  }

  .view-actions {
    width: 86px;
  }

  .layer-list li {
    grid-template-columns: minmax(0, 1fr) 74px;
    min-height: 56px;
    padding: 9px 10px;
    gap: 10px;
    border-radius: 12px;
  }

  .layer-name > span:first-child {
    font-size: 13px;
    font-weight: 650;
  }

  .layer-kind {
    justify-self: start;
    max-width: 160px;
    font-size: 11px;
  }

  .layer-actions {
    justify-content: end;
    gap: 6px;
  }

  .layer-toggle {
    display: grid;
    place-items: center;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px;
    min-height: 32px;
    border-radius: 999px;
    font-size: 0 !important;
    background: rgba(255, 255, 255, 0.56);
  }

  .layer-toggle::before {
    width: 17px;
    height: 17px;
    background: currentColor;
    content: "";
  }

  .layer-toggle[data-action="visibility"]::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .layer-toggle[data-action="lock"]::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6.5' y='10' width='11' height='9' rx='1.6'/%3E%3Cpath d='M9 10V7.8a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6.5' y='10' width='11' height='9' rx='1.6'/%3E%3Cpath d='M9 10V7.8a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* v108 phone topbar final override: one polished title/history pill, no clipped overflow controls. */
@media (max-width: 760px) {
  .topbar {
    display: flex !important;
    width: auto !important;
    max-width: calc(100vw - 22px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .history-actions {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
    padding: 7px 10px !important;
  }

  .view-actions {
    display: none !important;
  }
}

/* v111 final mobile header placement: compact title/undo control that cannot crop. */
@media (max-width: 760px) {
  .topbar {
    right: auto !important;
    width: min(322px, calc(100vw - 24px)) !important;
    max-width: min(322px, calc(100vw - 24px)) !important;
  }

  .history-actions {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: 8px !important;
    padding: 7px 10px !important;
  }

  .document-chip {
    flex: 1 1 0;
    max-width: none;
  }

  .history-actions button {
    flex: 0 0 36px;
  }

  .history-actions #duplicateButton,
  .history-actions #deleteButton {
    display: none !important;
  }
}

/* v112 bottom sheet containment: keep row controls inside the phone viewport. */
@media (max-width: 760px) {
  .layers {
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    overflow-x: hidden !important;
  }

  .layer-list li {
    grid-template-columns: minmax(0, 1fr) 70px;
  }

  .layer-actions {
    min-width: 70px;
  }
}

/* v113 layer row icon fit: smaller mobile lock/eye controls with breathing room. */
@media (max-width: 760px) {
  .layer-list li {
    grid-template-columns: minmax(0, 1fr) 60px;
    padding-right: 8px;
  }

  .layer-actions {
    min-width: 60px;
    gap: 4px;
  }

  .layer-toggle {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px;
    min-height: 28px;
  }

  .layer-toggle::before {
    width: 15px;
    height: 15px;
  }
}

/* v114 layer row action alignment: keep both eye and lock visible. */
@media (max-width: 760px) {
  .layer-list li {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  .layer-actions {
    min-width: 92px;
    justify-content: flex-start;
  }
}

/* v115 Linearity proportion pass: lower sheet, fuller left rail, softer icon chrome. */
@media (max-width: 760px) {
  .sidebar {
    top: 168px !important;
    left: 12px !important;
    width: 56px !important;
    max-height: calc(100dvh - 488px) !important;
    padding: 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 18px 38px rgba(36, 38, 43, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  .tool-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .tool {
    width: 48px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #111316 !important;
    box-shadow: none !important;
  }

  .tool::before {
    width: 20px !important;
    height: 20px !important;
  }

  .tool.is-active {
    background: rgba(17, 19, 23, 0.14) !important;
  }

  .tool[data-tool="eyedropper"],
  .tool[data-tool="ellipse"],
  .tool[data-tool="line"],
  .tool[data-tool="crop"],
  .tool[data-tool="area"],
  .tool[data-tool="redaction"],
  .tool[data-tool="wall"] {
    display: none !important;
  }

  .tool[data-tool="dimension"] {
    display: grid !important;
  }

  .add-menu-button {
    top: 108px !important;
    left: 12px !important;
    width: 56px !important;
    min-height: 56px !important;
    background: rgba(255, 255, 255, 0.74) !important;
  }

  .tool-popout {
    left: 80px !important;
    width: 56px !important;
    padding: 5px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 9px !important;
  }

  .tool-popout button {
    width: 50px !important;
    min-height: 50px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 14px 28px rgba(36, 38, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  .layers {
    bottom: 104px !important;
    max-height: min(42dvh, 402px) !important;
    padding-top: 40px !important;
    border-radius: 32px 32px 28px 28px !important;
  }

  .canvas-wrap {
    padding-bottom: 116px !important;
  }
}

/* v116 separate add control: force the plus above the tool rail like the phone reference. */
@media (max-width: 760px) {
  .app-shell .add-menu-button {
    position: absolute !important;
    display: grid !important;
    top: -70px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 44 !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  .sidebar {
    top: 176px !important;
    overflow: visible !important;
  }

  .tool-popout {
    z-index: 43 !important;
  }
}

/* v118 mobile sheet title: match the reference bottom panel hierarchy. */
@media (max-width: 760px) {
  .inspector-title {
    display: grid !important;
    justify-items: center !important;
    padding: 8px 0 16px !important;
  }

  .inspector-title h2 {
    display: block !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  .inspector-title h2::after {
    content: "Layers";
    display: block;
    color: var(--ios-ink);
    font-size: 22px;
    font-weight: 900;
  }

  .inspector-title p {
    display: none !important;
  }

  .layers {
    padding-top: 34px !important;
  }
}

/* v119 mobile sheet navigation: use the bottom dock as the primary category control. */
@media (max-width: 760px) {
  .inspector-tabs {
    display: none !important;
  }

  .layers .panel {
    margin-top: 0 !important;
  }
}

/* v120 right utility rail: keep crop/layer/delete actions visible like the reference app. */
@media (max-width: 760px) {
  .app-shell:not(.inspector-collapsed) .right-quickbar,
  .right-quickbar {
    position: fixed !important;
    display: grid !important;
    right: 10px !important;
    left: auto !important;
    top: 178px !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 42 !important;
    width: 54px !important;
    padding: 5px !important;
    gap: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 18px 38px rgba(36, 38, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(24px) saturate(1.14);
  }

  .right-quickbar button {
    display: grid !important;
    place-items: center;
    width: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #111316 !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  .right-quickbar button::before {
    width: 20px !important;
    height: 20px !important;
  }

  .right-quickbar button:hover,
  .right-quickbar button:focus-visible {
    background: rgba(17, 19, 23, 0.11) !important;
  }
}

/* v121 unclipped right utility rail: anchor inside the clipped workspace. */
@media (max-width: 760px) {
  .workspace {
    position: relative !important;
  }

  .app-shell:not(.inspector-collapsed) .right-quickbar,
  .right-quickbar {
    position: absolute !important;
    right: 64px !important;
    top: 178px !important;
    z-index: 35 !important;
  }
}

/* v123 split mobile header: back circle, undo pill, centered title, menu capsule. */
@media (max-width: 760px) {
  .topbar {
    position: fixed !important;
    inset: 12px 0 auto 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 56px !important;
    display: block !important;
    pointer-events: none;
  }

  .topbar::before {
    content: "<";
    position: fixed;
    top: 12px;
    left: 27px;
    z-index: 48;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 38px rgba(36, 38, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #111316;
    font-size: 30px;
    font-weight: 420;
    line-height: 1;
    pointer-events: none;
  }

  .topbar::after {
    content: "...";
    position: fixed;
    top: 15px;
    right: 28px;
    z-index: 48;
    display: grid;
    place-items: center;
    width: 106px;
    height: 50px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 38px rgba(36, 38, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #111316;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
    pointer-events: none;
  }

  .history-actions {
    display: block !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  .history-actions::before {
    content: "";
    position: fixed;
    top: 15px;
    left: 101px;
    z-index: 48;
    width: 130px;
    height: 50px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 38px rgba(36, 38, 43, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .document-chip {
    position: fixed !important;
    top: 18px !important;
    left: 50% !important;
    z-index: 49;
    transform: translateX(-50%) !important;
    display: grid !important;
    place-items: center;
    width: 132px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto;
  }

  .document-chip strong {
    max-width: 112px !important;
    font-size: 15px !important;
    font-weight: 850 !important;
  }

  .document-chip strong::after {
    content: "⌄";
    margin-left: 5px;
    color: rgba(17, 19, 23, 0.48);
    font-size: 14px;
  }

  #undoButton,
  #redoButton {
    position: fixed !important;
    top: 23px !important;
    z-index: 49;
    display: grid !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(17, 19, 23, 0.7) !important;
    pointer-events: auto;
  }

  #undoButton {
    left: 124px !important;
  }

  #redoButton {
    left: 172px !important;
  }
}

/* v124 top chrome fit: keep header capsules separate and fully inside the viewport. */
@media (max-width: 760px) {
  .topbar::after {
    right: 60px !important;
    width: 78px !important;
    height: 50px !important;
    letter-spacing: 1px !important;
  }

  .history-actions::before {
    left: 101px !important;
    width: 112px !important;
  }

  #undoButton {
    left: 119px !important;
  }

  #redoButton {
    left: 164px !important;
  }

  .document-chip {
    top: 19px !important;
    width: 118px !important;
  }

  .document-chip strong {
    max-width: 104px !important;
  }
}

/* v126 sheet action row: replace desktop heading with Select chip and plus button. */
@media (max-width: 760px) {
  .layers .panel:has(#layerList) {
    padding-inline: 12px !important;
  }

  .layers .panel:has(#layerList) .panel-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 2px 0 14px !important;
    padding: 0 54px 0 0 !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2 {
    display: grid !important;
    place-items: center;
    min-width: 108px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: rgba(17, 19, 23, 0.08);
    color: var(--ios-ink);
    font-size: 0 !important;
    font-weight: 850;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2::after {
    content: "Select";
    font-size: 17px;
  }

  .layers .panel:has(#layerList) .panel-heading button {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 999px !important;
    background: rgba(17, 19, 23, 0.06) !important;
    border: 0 !important;
    color: transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    margin-right: 0 !important;
  }

  .layers .panel:has(#layerList) .panel-heading button::before,
  .layers .panel:has(#layerList) .panel-heading button::after {
    content: "";
    position: absolute;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: #111316;
  }

  .layers .panel:has(#layerList) .panel-heading button::after {
    transform: rotate(90deg);
  }
}

/* v130 refined top glyphs: use consistent thin-line icon masks. */
@media (max-width: 760px) {
  #undoButton,
  #redoButton {
    font-size: 0 !important;
  }

  #undoButton::before,
  #redoButton::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
  }

  #undoButton::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 8H5v4'/%3E%3Cpath d='M5 12c2.3-3.8 7.6-5.1 11.3-2.8 2 1.3 3.1 3.4 3.2 5.6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 8H5v4'/%3E%3Cpath d='M5 12c2.3-3.8 7.6-5.1 11.3-2.8 2 1.3 3.1 3.4 3.2 5.6'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  #redoButton::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 8h4v4'/%3E%3Cpath d='M19 12c-2.3-3.8-7.6-5.1-11.3-2.8-2 1.3-3.1 3.4-3.2 5.6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 8h4v4'/%3E%3Cpath d='M19 12c-2.3-3.8-7.6-5.1-11.3-2.8-2 1.3-3.1 3.4-3.2 5.6'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .document-chip strong::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 7px;
    border-right: 2px solid rgba(17, 19, 23, 0.42);
    border-bottom: 2px solid rgba(17, 19, 23, 0.42);
    transform: translateY(-2px) rotate(45deg);
  }
}

/* v131 vertical rhythm: airier canvas, cleaner sheet-to-dock spacing. */
@media (max-width: 760px) {
  .canvas-wrap {
    padding-top: 106px !important;
    padding-left: 82px !important;
    padding-right: 12px !important;
    padding-bottom: 118px !important;
  }

  .pasteboard-frame {
    width: min(280px, calc(100vw - 96px)) !important;
  }

  .layers {
    bottom: 104px !important;
    max-height: min(40dvh, 372px) !important;
    padding-bottom: 24px !important;
  }

  .layer-list {
    margin-top: 8px !important;
  }

  .layer-list li {
    min-height: 54px !important;
    margin-bottom: 7px !important;
  }

  .bottom-workflows {
    bottom: 14px !important;
  }
}

/* v132 chrome cleanup: icon back control and unclipped companion bubbles. */
@media (max-width: 760px) {
  .topbar::before {
    content: "‹" !important;
    padding-bottom: 4px;
    font-family: Arial, sans-serif;
    font-size: 38px !important;
    font-weight: 300 !important;
  }

  .topbar::after,
  .history-actions::before {
    box-shadow: 0 16px 34px rgba(36, 38, 43, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  .tool-popout button:nth-child(n+5) {
    display: none !important;
  }

  .tool-popout {
    top: 6px !important;
  }
}

/* v133 dock polish: lighter native-feeling bottom category control. */
@media (max-width: 760px) {
  .bottom-workflows {
    left: 94px !important;
    right: 22px !important;
    bottom: 13px !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 5px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 18px 38px rgba(36, 38, 43, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    grid-template-rows: 20px 13px !important;
    min-height: 50px !important;
    max-width: 70px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
  }

  .bottom-workflows button::before {
    width: 20px !important;
    height: 20px !important;
  }

  .bottom-workflows button::after {
    font-size: 9px !important;
    font-weight: 850 !important;
  }

  .bottom-workflows button.is-active {
    background: rgba(17, 19, 23, 0.1) !important;
    color: #d78620 !important;
  }
}

/* v134 left rail polish: denser native stack with lighter active treatment. */
@media (max-width: 760px) {
  .sidebar {
    top: 178px !important;
    width: 54px !important;
    max-height: 262px !important;
    padding: 4px 3px !important;
    background: rgba(255, 255, 255, 0.68) !important;
  }

  .tool-grid {
    gap: 1px !important;
  }

  .tool {
    width: 48px !important;
    min-height: 38px !important;
    color: #111316 !important;
  }

  .tool::before {
    width: 18px !important;
    height: 18px !important;
  }

  .tool.is-active {
    background: rgba(17, 19, 23, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important;
  }

  .app-shell .add-menu-button {
    top: -70px !important;
    width: 56px !important;
    height: 56px !important;
  }

  .tool-popout {
    left: 78px !important;
    top: 2px !important;
    gap: 7px !important;
  }

  .tool-popout button {
    width: 50px !important;
    min-height: 50px !important;
  }
}

/* v135 rail containment: no stray tool icon below the rounded stack. */
@media (max-width: 760px) {
  .sidebar {
    overflow: hidden !important;
    max-height: 252px !important;
  }

  .sidebar:hover,
  .sidebar:focus-within {
    overflow: hidden !important;
  }

  .app-shell .add-menu-button {
    position: fixed !important;
    top: 108px !important;
    left: 13px !important;
    z-index: 44 !important;
  }
}

/* v136 independent add button: sibling placement keeps the plus out of the clipped rail. */
@media (max-width: 760px) {
  .app-shell > .add-menu-button {
    position: fixed !important;
    top: 108px !important;
    left: 13px !important;
    display: grid !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    z-index: 46 !important;
  }

  .sidebar {
    overflow: hidden !important;
  }
}

/* v137 layer sheet polish: softer native list rows and subtler selected state. */
@media (max-width: 760px) {
  .layers {
    background: rgba(250, 250, 251, 0.94) !important;
    box-shadow: 0 -18px 48px rgba(36, 38, 43, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  .layer-list li {
    min-height: 52px !important;
    padding: 8px 8px 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17, 19, 23, 0.07) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 0 !important;
  }

  .layer-list li:first-child {
    border-radius: 14px 14px 0 0 !important;
  }

  .layer-list li:last-child {
    border-bottom: 0 !important;
    border-radius: 0 0 14px 14px !important;
  }

  .layer-list li.is-selected {
    background: rgba(229, 87, 63, 0.13) !important;
    box-shadow: inset 2px 0 0 rgba(229, 87, 63, 0.72) !important;
  }

  .layer-name > span:first-child {
    font-size: 13px !important;
    font-weight: 780 !important;
  }

  .layer-kind {
    color: rgba(17, 19, 23, 0.48) !important;
    font-size: 11px !important;
  }

  .layer-toggle {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(17, 19, 23, 0.06) !important;
  }
}

/* v138 mobile tool priority: deliberate seven-tool creative stack. */
@media (max-width: 760px) {
  .sidebar {
    max-height: 288px !important;
    padding-block: 5px !important;
  }

  .tool-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .tool {
    min-height: 34px !important;
    width: 48px !important;
  }

  .tool::before {
    width: 17px !important;
    height: 17px !important;
  }

  .tool[data-tool="select"] { order: 1; }
  .tool[data-tool="hand"] { order: 2; }
  .tool[data-tool="rect"] { order: 3; }
  .tool[data-tool="pen"] { order: 4; }
  .tool[data-tool="brush"] { order: 5; }
  .tool[data-tool="text"] { order: 6; }
  .tool[data-tool="eraser"] { order: 7; }

  .tool[data-tool="eyedropper"],
  .tool[data-tool="ellipse"],
  .tool[data-tool="line"],
  .tool[data-tool="dimension"],
  .tool[data-tool="crop"],
  .tool[data-tool="area"],
  .tool[data-tool="redaction"],
  .tool[data-tool="wall"] {
    display: none !important;
  }
}

/* v139 iOS icon pass: thinner masks, smaller chrome, and phone-safe fit. */
@media (max-width: 760px) {
  .topbar::before {
    content: "\2039" !important;
    width: 54px !important;
    height: 54px !important;
    left: 26px !important;
    font-size: 36px !important;
    line-height: 1 !important;
  }

  .topbar::after {
    width: 74px !important;
    height: 48px !important;
    right: 56px !important;
    font-size: 22px !important;
  }

  .history-actions::before {
    width: 108px !important;
    height: 48px !important;
  }

  .app-shell > .add-menu-button {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    left: 14px !important;
    top: 110px !important;
    box-shadow: 0 12px 28px rgba(36, 38, 43, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  .add-menu-button::before,
  .add-menu-button::after {
    width: 18px !important;
    height: 1.8px !important;
  }

  .sidebar {
    left: 14px !important;
    top: 178px !important;
    width: 50px !important;
    max-height: 280px !important;
    padding: 5px 2px !important;
    border-radius: 999px !important;
  }

  .tool {
    width: 46px !important;
    min-height: 34px !important;
  }

  .tool::before {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.98 !important;
  }

  .tool.is-active {
    background: rgba(17, 19, 23, 0.105) !important;
  }

  .tool[data-tool="select"] {
    --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 4.2 17.4 12l-5.25 1.05 2.75 5.55-2.25 1.1-2.75-5.45-4.9 4.55V4.2Z'/%3E%3C/svg%3E");
  }

  .tool[data-tool="hand"] {
    --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 12.3V7.2a1.25 1.25 0 0 1 2.5 0v4.2'/%3E%3Cpath d='M10 11.4V5.9a1.25 1.25 0 0 1 2.5 0v5.45'/%3E%3Cpath d='M12.5 11.3V7.1a1.25 1.25 0 0 1 2.5 0v4.5'/%3E%3Cpath d='M15 11.9V9.7a1.25 1.25 0 0 1 2.5 0v4c0 4.05-2.25 6.55-5.75 6.55h-1.2c-2.25 0-3.85-1.1-4.9-3.35l-1-2.25a1.35 1.35 0 0 1 2.4-1.15l.7 1.15'/%3E%3C/svg%3E");
  }

  .tool[data-tool="rect"] {
    --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5.25' y='7' width='13.5' height='10' rx='1.2'/%3E%3C/svg%3E");
  }

  .tool[data-tool="pen"] {
    --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.7 4.8 5.5 5.5-7.3 7.35-4.75 1.35 1.35-4.75 7.35-7.3'/%3E%3Cpath d='m12.4 6.6 5 5'/%3E%3Cpath d='M8.45 14.35 10.65 16.55'/%3E%3C/svg%3E");
  }

  .tool[data-tool="brush"] {
    --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.4 4.6 4 4-7.45 7.45a2.55 2.55 0 0 1-3.6-3.6L15.4 4.6Z'/%3E%3Cpath d='M7.25 16.35c-.15 2.1-1.35 3.4-3.65 3.95 1.25-1.15 1.35-2.75 1.75-3.7.35-.75 1.15-1.05 1.9-.25Z'/%3E%3C/svg%3E");
  }

  .tool[data-tool="text"] {
    --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 6.5h13'/%3E%3Cpath d='M12 6.5v12'/%3E%3Cpath d='M9.2 18.5h5.6'/%3E%3Cpath d='M5.5 6.5v2.7'/%3E%3Cpath d='M18.5 6.5v2.7'/%3E%3C/svg%3E");
  }

  .tool[data-tool="eraser"] {
    --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14.45 4.85 4.7 4.7a1.8 1.8 0 0 1 0 2.55l-6.45 6.45H7.05l-2.75-2.75a1.8 1.8 0 0 1 0-2.55l7.6-8.4a1.8 1.8 0 0 1 2.55 0Z'/%3E%3Cpath d='m8.65 9.55 5.75 5.75'/%3E%3Cpath d='M12.3 18.55H20'/%3E%3C/svg%3E");
  }

  .right-quickbar {
    width: 50px !important;
    padding: 4px !important;
    right: 64px !important;
  }

  .right-quickbar button {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 38px !important;
  }

  .right-quickbar button::before {
    width: 18px !important;
    height: 18px !important;
  }

  .bottom-workflows {
    height: 58px !important;
    min-height: 58px !important;
  }

  .bottom-workflows button::before {
    width: 18px !important;
    height: 18px !important;
  }
}

/* v140 narrow iPhone fit: no clipped right chrome on 390px screens. */
@media (max-width: 400px) {
  html,
  body,
  .app-shell,
  .workspace {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .topbar::before {
    left: 24px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .history-actions::before {
    left: 100px !important;
    width: 104px !important;
    height: 48px !important;
  }

  #undoButton {
    left: 116px !important;
  }

  #redoButton {
    left: 158px !important;
  }

  .document-chip {
    left: 61% !important;
    width: 104px !important;
  }

  .document-chip strong {
    font-size: 14px !important;
    max-width: 92px !important;
  }

  .topbar::after {
    right: 14px !important;
    width: 68px !important;
    height: 48px !important;
  }

  .canvas-wrap {
    padding-left: 78px !important;
    padding-right: 8px !important;
  }

  .pasteboard-frame {
    width: min(260px, calc(100vw - 92px)) !important;
  }

  .right-quickbar {
    right: 14px !important;
    width: 48px !important;
  }

  .right-quickbar button {
    width: 38px !important;
    min-width: 38px !important;
  }

  .layers {
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  .bottom-workflows {
    left: 94px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 102px) !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    max-width: 62px !important;
  }
}

/* v141 hard iOS viewport fit: anchor right chrome to 100vw instead of inherited layout width. */
@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .workspace {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .topbar::after {
    left: calc(100vw - 86px) !important;
    right: auto !important;
    width: 72px !important;
    height: 48px !important;
  }

  .right-quickbar {
    position: fixed !important;
    left: calc(100vw - 62px) !important;
    right: auto !important;
    width: 48px !important;
    padding: 4px !important;
  }

  .right-quickbar button {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .canvas-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 78px !important;
    padding-right: 8px !important;
  }

  .pasteboard-frame {
    width: min(270px, calc(100vw - 96px)) !important;
  }

  .layers {
    left: 8px !important;
    right: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  .layers .panel:has(#layerList) .panel-heading {
    padding-right: 18px !important;
  }

  .layer-list li {
    grid-template-columns: minmax(0, 1fr) 66px !important;
  }

  .layer-actions {
    min-width: 66px !important;
    justify-content: flex-start !important;
  }

  .bottom-workflows {
    left: 94px !important;
    right: auto !important;
    width: calc(100vw - 104px) !important;
    max-width: calc(100vw - 104px) !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    max-width: none !important;
  }
}

/* v142 iOS app frame: compact Linearity-style chrome that fits inside 390px. */
@media (max-width: 760px) {
  body {
    min-height: 100svh !important;
  }

  .app-shell {
    height: 100svh !important;
    min-height: 100svh !important;
    display: block !important;
    position: relative !important;
  }

  .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100vw !important;
    height: 98px !important;
    min-height: 98px !important;
    padding: 0 !important;
    z-index: 70 !important;
    pointer-events: none !important;
  }

  .topbar > * {
    pointer-events: auto !important;
  }

  .topbar::before {
    left: 22px !important;
    top: 28px !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 34px !important;
    line-height: 46px !important;
  }

  .history-actions::before {
    left: 100px !important;
    top: 30px !important;
    width: 102px !important;
    height: 46px !important;
  }

  #undoButton,
  #redoButton {
    top: 40px !important;
    width: 22px !important;
    height: 22px !important;
  }

  #undoButton { left: 124px !important; }
  #redoButton { left: 166px !important; }

  .document-chip {
    left: 210px !important;
    top: 34px !important;
    width: 92px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  .document-chip strong {
    max-width: 72px !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
  }

  .document-chip::after {
    margin-left: 4px !important;
  }

  .topbar::after {
    left: calc(100vw - 80px) !important;
    top: 30px !important;
    width: 62px !important;
    height: 46px !important;
    font-size: 20px !important;
    letter-spacing: 2px !important;
  }

  .canvas-wrap {
    position: fixed !important;
    inset: 100px 0 0 0 !important;
    height: calc(100svh - 100px) !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 30px 12px 250px 84px !important;
    overflow: hidden !important;
  }

  .pasteboard-frame {
    width: min(254px, calc(100vw - 104px)) !important;
    min-width: 0 !important;
    transform-origin: top center !important;
  }

  .page-rulers {
    font-size: 10px !important;
    opacity: 0.62 !important;
  }

  .app-shell > .add-menu-button {
    left: 14px !important;
    top: 110px !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    z-index: 82 !important;
  }

  .sidebar {
    position: fixed !important;
    left: 14px !important;
    top: 178px !important;
    width: 50px !important;
    max-height: 286px !important;
    z-index: 82 !important;
  }

  .tool {
    width: 46px !important;
    min-height: 34px !important;
  }

  .tool::before {
    width: 17px !important;
    height: 17px !important;
  }

  .right-quickbar {
    position: fixed !important;
    left: auto !important;
    right: 8px !important;
    top: 218px !important;
    width: 48px !important;
    max-height: 342px !important;
    padding: 4px !important;
    border-radius: 22px !important;
    z-index: 81 !important;
  }

  .right-quickbar button {
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .right-quickbar button::before {
    width: 17px !important;
    height: 17px !important;
  }

  .tool-popout {
    left: 76px !important;
    top: 180px !important;
    gap: 8px !important;
  }

  .tool-popout button {
    width: 52px !important;
    height: 52px !important;
  }

  .layers {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 92px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(338px, calc(100svh - 402px)) !important;
    border-radius: 34px !important;
    padding: 26px 14px 16px !important;
    overflow: hidden !important;
    z-index: 75 !important;
  }

  .layers::before {
    top: 9px !important;
    width: 44px !important;
    height: 5px !important;
  }

  .layers .panel:has(#layerList) {
    min-height: 0 !important;
    max-height: 100% !important;
  }

  .layers .panel:has(#layerList) .panel-heading {
    height: 76px !important;
    grid-template-columns: 94px minmax(0, 1fr) 48px !important;
    padding: 0 4px 8px !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2 {
    font-size: 22px !important;
  }

  .layers .panel:has(#layerList) .panel-heading button {
    width: 48px !important;
    height: 48px !important;
  }

  .layer-list {
    max-height: 168px !important;
    overflow: hidden auto !important;
    border-radius: 18px !important;
  }

  .layer-list li {
    min-height: 52px !important;
    padding: 8px 10px !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
  }

  .layer-name > span:first-child {
    font-size: 12px !important;
  }

  .layer-kind {
    font-size: 10px !important;
  }

  .layer-toggle {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  .bottom-workflows {
    position: fixed !important;
    left: 96px !important;
    right: 8px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 4px !important;
    gap: 0 !important;
    z-index: 84 !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50px !important;
    padding: 7px 4px 5px !important;
  }

  .bottom-workflows button::before {
    width: 17px !important;
    height: 17px !important;
  }

  .bottom-workflows button::after {
    font-size: 9px !important;
  }
}

/* v143 exact mobile selector overrides: keep all iOS chrome visible and balanced. */
@media (max-width: 760px) {
  .document-chip {
    left: 206px !important;
    transform: none !important;
    justify-items: start !important;
    place-items: center start !important;
  }

  .app-shell:not(.inspector-collapsed) .right-quickbar,
  .app-shell.inspector-collapsed .right-quickbar,
  .right-quickbar {
    position: fixed !important;
    left: auto !important;
    right: 8px !important;
    top: 218px !important;
    width: 48px !important;
    max-width: 48px !important;
    padding: 4px !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .right-quickbar button {
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
  }

  .layers .panel:has(#layerList) .panel-heading {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) 50px !important;
    align-items: center !important;
    height: 78px !important;
    margin: 0 0 8px !important;
    padding: 0 2px 8px !important;
  }

  .layers .panel:has(#layerList) .panel-heading::before {
    content: "Layers";
    position: absolute;
    left: 50%;
    top: 13px;
    transform: translateX(-50%);
    color: #111316;
    font-size: 22px;
    font-weight: 850;
    line-height: 1;
  }

  .layers .panel:has(#layerList) .panel-heading h2 {
    grid-column: 1 !important;
    align-self: end !important;
    min-width: 108px !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    font-size: 0 !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2::after {
    content: "Select" !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .layers .panel:has(#layerList) .panel-heading button {
    grid-column: 3 !important;
    align-self: end !important;
    justify-self: end !important;
  }

  .bottom-workflows {
    left: 96px !important;
    right: 8px !important;
    bottom: 20px !important;
    height: 54px !important;
    min-height: 54px !important;
    overflow: hidden !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    height: 46px !important;
    grid-template-rows: 18px 12px !important;
    gap: 2px !important;
  }

  .bottom-workflows button::before {
    width: 16px !important;
    height: 16px !important;
  }

  .bottom-workflows button::after {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .layers {
    bottom: 94px !important;
    max-height: min(320px, calc(100svh - 410px)) !important;
  }
}

/* v144 iOS hierarchy cleanup: one sheet title, visible right rail, lighter dock. */
@media (max-width: 760px) {
  .app-shell:not(.inspector-collapsed) .right-quickbar,
  .app-shell.inspector-collapsed .right-quickbar,
  .right-quickbar {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    right: 10px !important;
    top: 246px !important;
    z-index: 120 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
  }

  .right-quickbar button,
  .right-quickbar button::before {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .right-quickbar button {
    color: #101114 !important;
  }

  .layers .panel:has(#layerList) .panel-heading::before {
    content: none !important;
    display: none !important;
  }

  .layers .panel:has(#layerList) .panel-heading {
    grid-template-columns: 112px minmax(0, 1fr) 50px !important;
    height: 58px !important;
    margin: 0 0 8px !important;
    padding: 0 2px !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2 {
    align-self: center !important;
    min-height: 46px !important;
    background: rgba(17, 19, 23, 0.075) !important;
  }

  .layers .panel:has(#layerList) .panel-heading button {
    align-self: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  .inspector-title {
    padding: 6px 0 10px !important;
  }

  .inspector-title h2::after {
    font-size: 21px !important;
  }

  .layer-list {
    max-height: 164px !important;
  }

  .bottom-workflows {
    bottom: 24px !important;
    height: 52px !important;
    min-height: 52px !important;
    background: rgba(255, 255, 255, 0.8) !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    height: 44px !important;
    padding-top: 6px !important;
  }

  .bottom-workflows button.is-active {
    background: rgba(17, 19, 23, 0.08) !important;
  }
}

/* v145 explicit iPhone anchors: no hidden or off-canvas right-side chrome. */
@media (max-width: 760px) {
  .topbar::after {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: 312px !important;
    right: auto !important;
    top: 30px !important;
    width: 62px !important;
    height: 46px !important;
    transform: none !important;
    z-index: 130 !important;
  }

  .app-shell:not(.inspector-collapsed) .right-quickbar,
  .app-shell.inspector-collapsed .right-quickbar,
  .right-quickbar {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 332px !important;
    right: auto !important;
    top: 242px !important;
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    height: auto !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .right-quickbar button {
    width: 38px !important;
    min-width: 38px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 0 !important;
  }

  .bottom-workflows {
    bottom: 34px !important;
  }
}

@media (max-width: 370px) {
  .document-chip {
    left: 198px !important;
    width: 84px !important;
  }

  .document-chip strong {
    max-width: 66px !important;
  }

  .topbar::after {
    left: calc(100vw - 72px) !important;
    width: 56px !important;
  }

  .app-shell:not(.inspector-collapsed) .right-quickbar,
  .app-shell.inspector-collapsed .right-quickbar,
  .right-quickbar {
    left: calc(100vw - 56px) !important;
  }

  .bottom-workflows {
    left: 88px !important;
    right: 8px !important;
  }
}

/* v146 icon refinement: thinner iOS masks and a dock that clears the screen edge. */
@media (max-width: 760px) {
  .bottom-workflows {
    bottom: 46px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 5px !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    height: 44px !important;
    grid-template-rows: 17px 12px !important;
    gap: 3px !important;
    align-content: center !important;
  }

  .bottom-workflows button::after {
    display: block !important;
    transform: none !important;
  }

  .right-quickbar {
    top: 240px !important;
    background: rgba(255, 255, 255, 0.82) !important;
  }

  .right-quickbar button::before,
  .bottom-workflows button::before {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.96 !important;
  }

  .right-quickbar button[data-quick-action="fit"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 9V5.5H9'/%3E%3Cpath d='M15 5.5h3.5V9'/%3E%3Cpath d='M18.5 15v3.5H15'/%3E%3Cpath d='M9 18.5H5.5V15'/%3E%3C/svg%3E"); }
  .right-quickbar button[data-quick-action="crop"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4.5v12.5h12.5'/%3E%3Cpath d='M4.5 7h12.5v12.5'/%3E%3C/svg%3E"); }
  .right-quickbar button[data-quick-action="layers"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 5 7 3.5-7 3.5-7-3.5L12 5Z'/%3E%3Cpath d='m5 12 7 3.5 7-3.5'/%3E%3Cpath d='m5 15.5 7 3.5 7-3.5'/%3E%3C/svg%3E"); }
  .right-quickbar button[data-quick-action="build"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 19h13'/%3E%3Cpath d='M7.5 19V9.5h4V19'/%3E%3Cpath d='M13.5 19V5.5h3.5V19'/%3E%3C/svg%3E"); }
  .right-quickbar button[data-quick-action="delete"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M9 7V4.5h6V7'/%3E%3Cpath d='M7.5 10l.8 9.5h7.4l.8-9.5'/%3E%3Cpath d='M10.3 12.2v4.8M13.7 12.2v4.8'/%3E%3C/svg%3E"); }

  .bottom-workflows button[data-workflow="select"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 4.8 7.4 3.7L12 12.2 4.6 8.5 12 4.8Z'/%3E%3Cpath d='m4.6 12.2 7.4 3.7 7.4-3.7'/%3E%3Cpath d='m4.6 15.9 7.4 3.7 7.4-3.7'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="adjust"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h8'/%3E%3Ccircle cx='16.5' cy='7' r='1.8'/%3E%3Cpath d='M19 17h-8'/%3E%3Ccircle cx='7.5' cy='17' r='1.8'/%3E%3Cpath d='M5 12h4.5'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Cpath d='M14.5 12H19'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="vector"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6.7' cy='7.2' r='1.8'/%3E%3Ccircle cx='17.3' cy='7.2' r='1.8'/%3E%3Ccircle cx='12' cy='18' r='1.8'/%3E%3Cpath d='M8.5 7.2h7'/%3E%3Cpath d='m7.5 8.8 3.4 7.4'/%3E%3Cpath d='m16.5 8.8-3.4 7.4'/%3E%3C/svg%3E"); }
  .bottom-workflows button[data-workflow="build"] { --action-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 19h13'/%3E%3Cpath d='M7.5 19V9.5h4V19'/%3E%3Cpath d='M13.5 19V5.5h3.5V19'/%3E%3C/svg%3E"); }
}

/* v147 match reference dock: three bottom tabs, right sheet action fully inside. */
@media (max-width: 760px) {
  .bottom-workflows {
    left: 96px !important;
    right: 20px !important;
    width: auto !important;
    max-width: none !important;
    justify-content: stretch !important;
  }

  .bottom-workflows button[data-workflow="build"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    flex: 1 1 33.333% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .layers .panel:has(#layerList) .panel-heading {
    padding-right: 0 !important;
  }

  .layers .panel:has(#layerList) .panel-heading button {
    position: absolute !important;
    right: 44px !important;
    top: 6px !important;
    z-index: 4 !important;
  }
}

/* v149 usability reset: readable iOS toolbar, full dock, clear icons, visible zoom. */
@media (max-width: 760px) {
  .topbar {
    height: 120px !important;
  }

  .topbar::before {
    left: 20px !important;
    top: 28px !important;
    width: 54px !important;
    height: 54px !important;
    font-size: 34px !important;
    line-height: 48px !important;
  }

  .history-actions::before {
    left: 96px !important;
    top: 30px !important;
    width: 124px !important;
    height: 48px !important;
  }

  #undoButton,
  #redoButton {
    top: 38px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 32px !important;
    min-height: 32px !important;
    color: #202328 !important;
  }

  #undoButton { left: 118px !important; }
  #redoButton { left: 166px !important; }

  #undoButton::before,
  #redoButton::before {
    width: 23px !important;
    height: 23px !important;
  }

  #undoButton::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 7 4 12l5 5'/%3E%3Cpath d='M5 12h9a6 6 0 0 1 6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 7 4 12l5 5'/%3E%3Cpath d='M5 12h9a6 6 0 0 1 6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #redoButton::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15 7 5 5-5 5'/%3E%3Cpath d='M19 12h-9a6 6 0 0 0-6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15 7 5 5-5 5'/%3E%3Cpath d='M19 12h-9a6 6 0 0 0-6 6'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  .document-chip {
    top: 32px !important;
    left: 50% !important;
    width: 112px !important;
    height: 42px !important;
    transform: translateX(-50%) !important;
    justify-items: center !important;
    place-items: center !important;
    text-align: center !important;
  }

  .document-chip strong {
    max-width: 96px !important;
    font-size: 16px !important;
    font-weight: 850 !important;
  }

  .topbar::after {
    left: auto !important;
    right: 18px !important;
    top: 30px !important;
    width: 66px !important;
    height: 48px !important;
    font-size: 24px !important;
    letter-spacing: 2px !important;
  }

  .zoom-actions {
    display: flex !important;
    position: fixed !important;
    left: 100px !important;
    top: 88px !important;
    z-index: 132 !important;
    width: 154px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 14px 28px rgba(36, 38, 43, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    pointer-events: auto !important;
  }

  .zoom-actions button,
  .zoom-actions button:not(#fitButton),
  .zoom-actions #zoomLabel {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .zoom-actions button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 999px !important;
    color: #15171b !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 18px !important;
    font-weight: 750 !important;
    place-items: center !important;
    padding: 0 !important;
  }

  #fitButton {
    width: 38px !important;
    min-width: 38px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  #zoomLabel {
    min-width: 44px !important;
    color: #15171b !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    place-items: center !important;
  }

  .canvas-wrap {
    inset: 126px 0 0 0 !important;
    padding: 22px 8px 276px 76px !important;
    overflow: auto !important;
    touch-action: none !important;
  }

  .pasteboard-frame {
    width: auto !important;
    min-width: 0 !important;
  }

  .app-shell > .add-menu-button {
    left: 14px !important;
    top: 112px !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  .add-menu-button::before,
  .add-menu-button::after {
    width: 20px !important;
    height: 2px !important;
  }

  .sidebar {
    top: 176px !important;
    width: 52px !important;
    max-height: 322px !important;
    padding: 5px 3px !important;
  }

  .tool {
    width: 46px !important;
    min-height: 39px !important;
  }

  .tool::before {
    width: 22px !important;
    height: 22px !important;
  }

  .tool[data-tool="text"]::before {
    width: 23px !important;
    height: 23px !important;
  }

  .tool-popout {
    left: 78px !important;
    top: 178px !important;
    gap: 9px !important;
  }

  .tool-popout button {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
  }

  .tool-popout button::before {
    width: 23px !important;
    height: 23px !important;
  }

  .right-quickbar {
    left: auto !important;
    right: 10px !important;
    top: 254px !important;
    width: 52px !important;
    max-width: 52px !important;
    min-width: 52px !important;
    padding: 5px !important;
  }

  .right-quickbar button {
    width: 42px !important;
    min-width: 42px !important;
    height: 41px !important;
    min-height: 41px !important;
  }

  .right-quickbar button::before {
    width: 21px !important;
    height: 21px !important;
  }

  .layers {
    bottom: 116px !important;
    max-height: min(344px, calc(100svh - 392px)) !important;
    padding: 24px 18px 18px !important;
  }

  .layers .panel:has(#layerList) .panel-heading {
    height: 64px !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2::after {
    font-size: 16px !important;
  }

  .layers .panel:has(#layerList) .panel-heading button {
    right: 18px !important;
    top: 8px !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  .layer-list {
    max-height: 188px !important;
  }

  .layer-name > span:first-child {
    font-size: 13px !important;
  }

  .layer-kind {
    font-size: 11px !important;
  }

  .bottom-workflows {
    left: 96px !important;
    right: 10px !important;
    bottom: 30px !important;
    width: auto !important;
    max-width: none !important;
    height: 70px !important;
    min-height: 70px !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
  }

  .bottom-workflows button,
  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="build"],
  .bottom-workflows button[data-workflow="preview3d"] {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 56px !important;
    min-height: 56px !important;
    grid-template-rows: 24px 15px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 6px 4px !important;
    font-size: 0 !important;
    scroll-snap-align: start !important;
  }

  .bottom-workflows button::before {
    width: 22px !important;
    height: 22px !important;
  }

  .bottom-workflows button::after {
    display: block !important;
    color: currentColor !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  .bottom-workflows button[data-workflow="select"]::after { content: "Select" !important; }
  .bottom-workflows button[data-workflow="adjust"]::after { content: "Adjust" !important; }
  .bottom-workflows button[data-workflow="vector"]::after { content: "Vector" !important; }
  .bottom-workflows button[data-workflow="type"]::after { content: "Type" !important; }
  .bottom-workflows button[data-workflow="measure"]::after { content: "Measure" !important; }
  .bottom-workflows button[data-workflow="pdf"]::after { content: "PDF" !important; }
  .bottom-workflows button[data-workflow="build"]::after { content: "Build" !important; }
  .bottom-workflows button[data-workflow="preview3d"]::after { content: "3D" !important; }
}

/* v150 real iOS top menu and denser readable workflow dock. */
@media (max-width: 760px) {
  .topbar::after {
    content: none !important;
    display: none !important;
  }

  .mobile-share-actions {
    display: block !important;
    position: fixed !important;
    right: 18px !important;
    top: 30px !important;
    z-index: 135 !important;
    width: 66px !important;
    height: 48px !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    border-radius: 999px !important;
    box-shadow: 0 16px 34px rgba(36, 38, 43, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    pointer-events: auto !important;
  }

  #mobileShareButton {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  #mobileShareButton::before {
    content: "...";
    color: #111316;
    font-size: 24px;
    font-weight: 850;
    letter-spacing: 2px;
    line-height: 1;
    transform: translateY(-3px);
  }

  .history-actions::before {
    width: 112px !important;
  }

  #undoButton { left: 114px !important; }
  #redoButton { left: 156px !important; }

  .document-chip {
    left: 232px !important;
    width: 78px !important;
    transform: none !important;
    justify-items: start !important;
    place-items: center start !important;
    text-align: left !important;
  }

  .document-chip strong {
    max-width: 64px !important;
    font-size: 15px !important;
  }

  .document-chip strong::after {
    width: 5px !important;
    height: 5px !important;
    margin-left: 6px !important;
  }

  .bottom-workflows {
    left: 86px !important;
    right: 8px !important;
    height: 68px !important;
    min-height: 68px !important;
  }

  .bottom-workflows button,
  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="build"],
  .bottom-workflows button[data-workflow="preview3d"] {
    flex-basis: 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 54px !important;
    grid-template-rows: 23px 14px !important;
  }

  .bottom-workflows button::before {
    width: 21px !important;
    height: 21px !important;
  }

  .bottom-workflows button::after {
    font-size: 9.5px !important;
  }
}

/* v151 specificity repair: keep menu visible and active dock compact. */
@media (max-width: 760px) {
  .app-shell:not(.inspector-collapsed) .mobile-share-actions,
  .app-shell.inspector-collapsed .mobile-share-actions,
  .app-shell .topbar .mobile-share-actions {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    right: 18px !important;
    top: 30px !important;
    z-index: 180 !important;
    width: 66px !important;
    height: 48px !important;
    min-width: 66px !important;
    min-height: 48px !important;
    pointer-events: auto !important;
  }

  .app-shell .topbar .mobile-share-actions *,
  .app-shell .topbar #mobileShareButton,
  .app-shell .topbar #mobileShareButton::before {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .document-chip {
    left: 224px !important;
    width: 86px !important;
  }

  .document-chip strong {
    max-width: 72px !important;
  }

  .bottom-workflows button.is-active,
  .bottom-workflows button.is-active[data-workflow],
  .bottom-workflows button,
  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="build"],
  .bottom-workflows button[data-workflow="preview3d"] {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  .bottom-workflows {
    gap: 4px !important;
  }

  .bottom-workflows button::after {
    font-size: 9px !important;
  }
}

.ios-menu-button {
  display: none;
}

/* v152 root-level iOS menu and restored offscreen workflow categories. */
@media (max-width: 760px) {
  .ios-menu-button {
    position: fixed !important;
    right: 18px !important;
    top: 30px !important;
    z-index: 240 !important;
    display: grid !important;
    place-items: center !important;
    width: 66px !important;
    min-width: 66px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 16px 34px rgba(36, 38, 43, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .ios-menu-button::before {
    content: "...";
    color: #111316;
    font-size: 24px;
    font-weight: 850;
    letter-spacing: 2px;
    line-height: 1;
    transform: translateY(-3px);
  }

  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="preview3d"] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
  }

  .bottom-workflows button[data-workflow="type"]::before,
  .bottom-workflows button[data-workflow="type"]::after,
  .bottom-workflows button[data-workflow="measure"]::before,
  .bottom-workflows button[data-workflow="measure"]::after,
  .bottom-workflows button[data-workflow="pdf"]::before,
  .bottom-workflows button[data-workflow="pdf"]::after,
  .bottom-workflows button[data-workflow="preview3d"]::before,
  .bottom-workflows button[data-workflow="preview3d"]::after {
    display: block !important;
  }
}

/* v153 body-level menu badge: visible above every mobile shell layer. */
@media (max-width: 760px) {
  body::before {
    content: "...";
    position: fixed;
    left: 312px;
    right: auto;
    top: 30px;
    z-index: 9999;
    display: grid;
    place-items: center;
    width: 66px;
    height: 48px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 34px rgba(36, 38, 43, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    color: #111316;
    font-size: 24px;
    font-weight: 850;
    letter-spacing: 2px;
    line-height: 1;
    transform: translateY(-3px);
    pointer-events: none;
  }
}

/* v155 Linearity-style iOS pass: native floating chrome, sheet tabs, recognizable tools. */
@media (max-width: 760px) {
  body {
    background:
      linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
      #d9dadc !important;
    background-size: 24px 24px !important;
  }

  .topbar {
    height: 104px !important;
    background: transparent !important;
  }

  .topbar::before {
    left: 26px !important;
    top: 28px !important;
    width: 58px !important;
    height: 58px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 18px 38px rgba(36,38,43,0.13), inset 0 1px 0 rgba(255,255,255,0.92) !important;
    font-size: 36px !important;
  }

  .history-actions::before {
    left: 102px !important;
    top: 30px !important;
    width: 128px !important;
    height: 54px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
  }

  #undoButton,
  #redoButton {
    top: 40px !important;
    width: 36px !important;
    height: 34px !important;
  }

  #undoButton { left: 124px !important; }
  #redoButton { left: 174px !important; }

  #undoButton::before,
  #redoButton::before {
    width: 22px !important;
    height: 22px !important;
    opacity: 0.7 !important;
  }

  .document-chip {
    top: 38px !important;
    left: 214px !important;
    width: 92px !important;
    height: 34px !important;
    transform: none !important;
    justify-items: start !important;
    place-items: center start !important;
    background: transparent !important;
  }

  .document-chip strong {
    max-width: 80px !important;
    font-size: 18px !important;
    font-weight: 850 !important;
  }

  body::before {
    left: 312px !important;
    top: 30px !important;
    width: 122px !important;
    height: 54px !important;
    background: rgba(255, 255, 255, 0.78) !important;
  }

  .ios-menu-button,
  .mobile-share-actions {
    display: none !important;
  }

  .zoom-actions {
    display: none !important;
  }

  .canvas-wrap {
    inset: 132px 0 0 0 !important;
    padding: 22px 82px 398px 84px !important;
    overflow: auto !important;
  }

  .pasteboard-frame {
    width: auto !important;
    filter: drop-shadow(0 16px 22px rgba(36,38,43,0.12));
  }

  .app-shell > .add-menu-button {
    top: 166px !important;
    left: 12px !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    background: rgba(255,255,255,0.78) !important;
  }

  .sidebar {
    top: 236px !important;
    left: 12px !important;
    width: 56px !important;
    max-height: 372px !important;
    padding: 5px 3px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.76) !important;
  }

  .tool {
    width: 50px !important;
    min-height: 46px !important;
  }

  .tool::before {
    width: 24px !important;
    height: 24px !important;
    opacity: 1 !important;
  }

  .tool.is-active {
    background: rgba(17,19,23,0.14) !important;
  }

  .tool[data-tool="select"] { order: 1; }
  .tool[data-tool="pen"] { order: 2; }
  .tool[data-tool="brush"] { order: 3; }
  .tool[data-tool="hand"] { order: 4; }
  .tool[data-tool="rect"] { order: 5; }
  .tool[data-tool="ellipse"] { order: 6; display: grid !important; }
  .tool[data-tool="line"] { order: 7; display: grid !important; }
  .tool[data-tool="text"] { order: 8; }
  .tool[data-tool="eraser"] { order: 9; }

  .tool-popout {
    display: grid !important;
    left: 78px !important;
    top: 236px !important;
    gap: 12px !important;
    z-index: 130 !important;
  }

  .tool-popout button:nth-child(n) {
    display: grid !important;
  }

  .tool-popout button:nth-child(n+6) {
    display: none !important;
  }

  .tool-popout button {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.78) !important;
  }

  .tool-popout button::before {
    width: 25px !important;
    height: 25px !important;
  }

  .right-quickbar {
    right: 12px !important;
    left: auto !important;
    top: 476px !important;
    width: 56px !important;
    max-width: 56px !important;
    min-width: 56px !important;
    padding: 5px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.78) !important;
  }

  .right-quickbar button {
    width: 46px !important;
    min-width: 46px !important;
    height: 45px !important;
    min-height: 45px !important;
  }

  .right-quickbar button::before {
    width: 24px !important;
    height: 24px !important;
  }

  .layers {
    left: 8px !important;
    right: 8px !important;
    bottom: 0 !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(430px, 48svh) !important;
    padding: 32px 20px 88px !important;
    border-radius: 34px 34px 30px 30px !important;
    background: rgba(250,250,251,0.96) !important;
    overflow: hidden !important;
  }

  .inspector-title h2::after {
    font-size: 24px !important;
    font-weight: 900 !important;
  }

  .layers .panel:has(#layerList) .panel-heading {
    height: 58px !important;
    margin: 2px 0 14px !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2 {
    min-width: 118px !important;
    min-height: 48px !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2::after {
    font-size: 18px !important;
  }

  .layers .panel:has(#layerList) .panel-heading button {
    right: 4px !important;
    top: 2px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
  }

  .layer-list {
    max-height: 226px !important;
    border-radius: 20px !important;
  }

  .layer-list li {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  .layer-name > span:first-child {
    font-size: 14px !important;
  }

  .bottom-workflows {
    left: 118px !important;
    right: auto !important;
    bottom: 28px !important;
    width: 236px !important;
    max-width: 236px !important;
    height: 66px !important;
    min-height: 66px !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 5px !important;
    gap: 0 !important;
    background: rgba(220,220,221,0.84) !important;
  }

  .bottom-workflows button {
    display: none !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    grid-template-rows: 26px 15px !important;
    gap: 3px !important;
    color: #111316 !important;
  }

  .bottom-workflows button[data-workflow="select"]::after { content: "Layers" !important; }
  .bottom-workflows button[data-workflow="adjust"]::after { content: "Style" !important; }
  .bottom-workflows button[data-workflow="vector"]::after { content: "Library" !important; }

  .bottom-workflows button::before {
    width: 25px !important;
    height: 25px !important;
  }

  .bottom-workflows button::after {
    font-size: 10px !important;
  }
}

/* v157 final reference corrections: unclipped menu and true 3-tab sheet dock. */
@media (max-width: 760px) {
  body::before {
    left: 310px !important;
    width: 64px !important;
    height: 54px !important;
  }

  .bottom-workflows {
    left: 108px !important;
    bottom: 26px !important;
    width: 252px !important;
    max-width: 252px !important;
  }

  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="build"],
  .bottom-workflows button[data-workflow="preview3d"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    left: auto !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* v158 readable title and sheet content clearance above the tab dock. */
@media (max-width: 760px) {
  .document-chip {
    left: 214px !important;
    width: 96px !important;
  }

  .document-chip strong {
    max-width: 88px !important;
    font-size: 16px !important;
  }

  .layer-list {
    max-height: 158px !important;
    margin-bottom: 76px !important;
  }

  .bottom-workflows {
    bottom: 22px !important;
  }
}

/* v159 closer Linearity reference: exact visible groups, bold filled icons, SF-style text. */
@media (max-width: 760px) {
  :root {
    --ios-reference-bg: #ddddde;
    --ios-surface: rgba(255, 255, 255, 0.82);
    --ios-sheet: rgba(250, 250, 251, 0.97);
    --ios-soft: rgba(17, 19, 23, 0.085);
    --ios-ink: #08090b;
    --ios-accent: #d88922;
  }

  html,
  body {
    width: 100vw !important;
    height: 100svh !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Arial, sans-serif !important;
    background: var(--ios-reference-bg) !important;
  }

  body::before {
    content: "...";
    position: fixed;
    left: calc(100vw - 78px) !important;
    top: 30px !important;
    z-index: 9999;
    display: grid;
    place-items: center;
    width: 64px !important;
    height: 54px !important;
    border-radius: 999px;
    background: var(--ios-surface) !important;
    border: 1px solid rgba(255,255,255,0.92);
    box-shadow: 0 18px 38px rgba(36,38,43,0.14), inset 0 1px 0 rgba(255,255,255,0.92);
    color: var(--ios-ink);
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1;
    transform: translateY(-3px);
    pointer-events: none;
  }

  .topbar {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: 100vw !important;
    height: 118px !important;
    background: transparent !important;
    z-index: 160 !important;
  }

  .topbar::before {
    content: "\2039" !important;
    position: fixed !important;
    left: 26px !important;
    top: 30px !important;
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 999px !important;
    background: var(--ios-surface) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 18px 38px rgba(36,38,43,0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
    color: var(--ios-ink) !important;
    font-family: Arial, sans-serif !important;
    font-size: 38px !important;
    font-weight: 300 !important;
    line-height: 48px !important;
    padding-bottom: 4px !important;
  }

  .history-actions {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .history-actions::before {
    content: "";
    position: fixed !important;
    left: 102px !important;
    top: 31px !important;
    width: 128px !important;
    height: 54px !important;
    border-radius: 999px !important;
    background: var(--ios-surface) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 18px 38px rgba(36,38,43,0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
  }

  #undoButton,
  #redoButton {
    position: fixed !important;
    top: 41px !important;
    z-index: 170 !important;
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(8,9,11,0.58) !important;
    font-size: 0 !important;
  }

  #undoButton { left: 122px !important; }
  #redoButton { left: 174px !important; }

  #undoButton::before,
  #redoButton::before {
    content: "";
    width: 24px !important;
    height: 24px !important;
    background: currentColor !important;
  }

  #undoButton::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M10.8 6.3 5.1 12l5.7 5.7 1.6-1.6-3-3h5.2c3 0 5.4 2.4 5.4 5.4h2.3c0-4.3-3.4-7.7-7.7-7.7H9.4l3-3z'/%3E%3C/svg%3E") center / contain no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M10.8 6.3 5.1 12l5.7 5.7 1.6-1.6-3-3h5.2c3 0 5.4 2.4 5.4 5.4h2.3c0-4.3-3.4-7.7-7.7-7.7H9.4l3-3z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  #redoButton::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m13.2 6.3 5.7 5.7-5.7 5.7-1.6-1.6 3-3H9.4c-3 0-5.4 2.4-5.4 5.4H1.7c0-4.3 3.4-7.7 7.7-7.7h5.2l-3-3z'/%3E%3C/svg%3E") center / contain no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m13.2 6.3 5.7 5.7-5.7 5.7-1.6-1.6 3-3H9.4c-3 0-5.4 2.4-5.4 5.4H1.7c0-4.3 3.4-7.7 7.7-7.7h5.2l-3-3z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  .document-chip {
    position: fixed !important;
    left: 248px !important;
    top: 39px !important;
    z-index: 170 !important;
    display: flex !important;
    align-items: center !important;
    width: calc(100vw - 330px) !important;
    height: 34px !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--ios-ink) !important;
    overflow: visible !important;
  }

  .document-chip span {
    display: none !important;
  }

  .document-chip strong {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    color: var(--ios-ink) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .zoom-actions,
  .mode-switcher,
  .view-actions,
  .mobile-share-actions,
  .export-actions,
  #duplicateButton,
  #deleteButton,
  .ios-menu-button {
    display: none !important;
  }

  .canvas-wrap {
    position: fixed !important;
    inset: 118px 0 0 0 !important;
    width: 100vw !important;
    height: calc(100svh - 118px) !important;
    padding: 52px 78px 402px 84px !important;
    overflow: auto !important;
    touch-action: none !important;
    background:
      linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px),
      var(--ios-reference-bg) !important;
    background-size: 24px 24px !important;
  }

  .pasteboard-frame {
    width: max-content !important;
    min-width: 0 !important;
    filter: drop-shadow(0 16px 22px rgba(36,38,43,0.13)) !important;
  }

  .app-shell > .add-menu-button {
    position: fixed !important;
    left: 12px !important;
    top: 168px !important;
    z-index: 180 !important;
    display: grid !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    background: var(--ios-surface) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 18px 38px rgba(36,38,43,0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
  }

  .sidebar {
    position: fixed !important;
    left: 12px !important;
    top: 238px !important;
    z-index: 180 !important;
    display: block !important;
    width: 56px !important;
    max-height: 372px !important;
    padding: 5px 3px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 22px 44px rgba(36,38,43,0.15), inset 0 1px 0 rgba(255,255,255,0.92) !important;
    overflow: hidden !important;
  }

  .sidebar .brand,
  .sidebar .panel h2,
  .sidebar .panel:not(:has(.tool-grid)),
  .color-widget {
    display: none !important;
  }

  .tool-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .tool {
    display: grid !important;
    place-items: center !important;
    width: 50px !important;
    min-width: 50px !important;
    min-height: 45px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .tool::before {
    content: "";
    width: 25px !important;
    height: 25px !important;
    background: var(--ios-ink) !important;
    opacity: 1 !important;
    mask: var(--tool-icon) center / contain no-repeat !important;
    -webkit-mask: var(--tool-icon) center / contain no-repeat !important;
  }

  .tool.is-active {
    background: rgba(17,19,23,0.16) !important;
  }

  .tool[data-tool="select"] { order: 1; --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 3.2 18.4 12l-5.9 1.2 3.2 6-2.6 1.4-3.2-6-4.9 4.7z'/%3E%3C/svg%3E") !important; }
  .tool[data-tool="pen"] { order: 2; --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m12.8 4 6.8 6.8-6.9 6.9L7 20l2.3-5.7zm-1.5 2.9-4-2.5L3.8 8l4 2.5z'/%3E%3C/svg%3E") !important; }
  .tool[data-tool="brush"] { order: 3; --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M17 3.5 20.5 7l-8.4 8.4a3 3 0 0 1-4.2 0l-.3-.3a3 3 0 0 1 0-4.2zM7 16.9c.7.7 1.7 1.1 2.8 1.1-1 2-2.9 3.1-5.8 3.1 1-1.2 1.1-2.2 1.1-3.1 0-.8.6-1.4 1.2-1.8z'/%3E%3C/svg%3E") !important; }
  .tool[data-tool="hand"] { order: 4; --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 21c-2.2-2.6-3.3-4.8-3.3-6.7V12c0-.8.6-1.4 1.4-1.4.4 0 .8.2 1.1.5V6.4C7.2 5.6 7.8 5 8.6 5c.5 0 .9.2 1.2.6V4.4c0-.8.6-1.4 1.4-1.4s1.4.6 1.4 1.4v1.2c.3-.4.7-.6 1.2-.6.8 0 1.4.6 1.4 1.4v1.4c.3-.3.7-.5 1.2-.5.8 0 1.4.6 1.4 1.4v5.2c0 2.1-.8 4.1-2.2 5.6L14.1 21z'/%3E%3C/svg%3E") !important; }
  .tool[data-tool="rect"] { order: 5; --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 6h14v12H5zm2.2 2.2v7.6h9.6V8.2z'/%3E%3C/svg%3E") !important; }
  .tool[data-tool="ellipse"] { order: 6; display: grid !important; --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 5.5c5.3 0 9.5 2.9 9.5 6.5s-4.2 6.5-9.5 6.5S2.5 15.6 2.5 12 6.7 5.5 12 5.5zm0 2.2c-4 0-7.2 1.9-7.2 4.3s3.2 4.3 7.2 4.3 7.2-1.9 7.2-4.3S16 7.7 12 7.7z'/%3E%3C/svg%3E") !important; }
  .tool[data-tool="line"] { order: 7; display: grid !important; --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m5.5 20-1.5-1.5L18.5 4 20 5.5z'/%3E%3C/svg%3E") !important; }
  .tool[data-tool="text"] { order: 8; --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4.5 5h15v4h-2V7.2h-4.3V19h2.2v2H8.6v-2h2.2V7.2H6.5V9h-2z'/%3E%3C/svg%3E") !important; }
  .tool[data-tool="eraser"] { order: 9; --tool-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m14.8 4.2 5 5a2 2 0 0 1 0 2.9L13 19H6.3l-3.1-3.1a2 2 0 0 1 0-2.9l8.7-8.8a2 2 0 0 1 2.9 0zM7.2 17h4.9l2.2-2.2-5.1-5.1-4.5 4.5z'/%3E%3C/svg%3E") !important; }
  .tool[data-tool="eyedropper"],
  .tool[data-tool="dimension"],
  .tool[data-tool="crop"],
  .tool[data-tool="area"],
  .tool[data-tool="redaction"],
  .tool[data-tool="wall"] { display: none !important; }

  .tool-popout {
    position: fixed !important;
    left: 78px !important;
    top: 238px !important;
    z-index: 181 !important;
    display: grid !important;
    gap: 12px !important;
  }

  .tool-popout button {
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    background: var(--ios-surface) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 18px 38px rgba(36,38,43,0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
  }

  .tool-popout button:nth-child(n+6) {
    display: none !important;
  }

  .tool-popout button::before {
    width: 26px !important;
    height: 26px !important;
    background: var(--ios-ink) !important;
  }

  .right-quickbar {
    position: fixed !important;
    left: auto !important;
    right: 12px !important;
    top: 476px !important;
    z-index: 181 !important;
    display: grid !important;
    width: 56px !important;
    max-width: 56px !important;
    min-width: 56px !important;
    padding: 5px !important;
    border-radius: 999px !important;
    background: var(--ios-surface) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 22px 44px rgba(36,38,43,0.15), inset 0 1px 0 rgba(255,255,255,0.92) !important;
  }

  .right-quickbar button {
    width: 46px !important;
    min-width: 46px !important;
    height: 45px !important;
    min-height: 45px !important;
  }

  .right-quickbar button::before {
    width: 25px !important;
    height: 25px !important;
    background: var(--ios-ink) !important;
  }

  .layers {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 0 !important;
    z-index: 150 !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(432px, 50svh) !important;
    padding: 32px 20px 92px !important;
    border-radius: 34px 34px 30px 30px !important;
    background: var(--ios-sheet) !important;
    border: 1px solid rgba(255,255,255,0.9) !important;
    box-shadow: 0 -18px 54px rgba(36,38,43,0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
    overflow: hidden !important;
  }

  .layers::before {
    top: 9px !important;
    width: 44px !important;
    height: 5px !important;
    background: rgba(17,19,23,0.42) !important;
  }

  .inspector-title {
    display: grid !important;
    padding: 5px 0 12px !important;
  }

  .inspector-title h2::after {
    font-size: 24px !important;
    font-weight: 900 !important;
  }

  .layers .panel:has(#layerList) .panel-heading {
    position: relative !important;
    height: 58px !important;
    margin: 2px 0 14px !important;
    padding: 0 !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2 {
    position: absolute !important;
    left: 0 !important;
    top: 5px !important;
    display: grid !important;
    place-items: center !important;
    min-width: 118px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    background: var(--ios-soft) !important;
  }

  .layers .panel:has(#layerList) .panel-heading h2::after {
    content: "Select" !important;
    font-size: 18px !important;
    font-weight: 820 !important;
  }

  .layers .panel:has(#layerList) .panel-heading button {
    position: absolute !important;
    right: 2px !important;
    top: 2px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    background: var(--ios-soft) !important;
  }

  .layer-list {
    max-height: 156px !important;
    margin-bottom: 78px !important;
    overflow: hidden auto !important;
    border-radius: 20px !important;
  }

  .layer-list li {
    min-height: 58px !important;
    padding: 10px 12px !important;
    background: rgba(255,255,255,0.72) !important;
  }

  .layer-name > span:first-child {
    font-size: 14px !important;
    font-weight: 780 !important;
  }

  .bottom-workflows {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 22px !important;
    z-index: 190 !important;
    display: flex !important;
    width: 252px !important;
    max-width: 252px !important;
    height: 66px !important;
    min-height: 66px !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 5px !important;
    gap: 0 !important;
    border-radius: 999px !important;
    background: rgba(220,220,221,0.86) !important;
    border: 1px solid rgba(255,255,255,0.84) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.74) !important;
  }

  .bottom-workflows button {
    display: none !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    position: relative !important;
    left: auto !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    grid-template-rows: 27px 15px !important;
    place-items: center !important;
    gap: 3px !important;
    padding: 6px 4px !important;
    border-radius: 999px !important;
    color: var(--ios-ink) !important;
  }

  .bottom-workflows button[data-workflow="select"]::after { content: "Layers" !important; }
  .bottom-workflows button[data-workflow="adjust"]::after { content: "Style" !important; }
  .bottom-workflows button[data-workflow="vector"]::after { content: "Library" !important; }

  .bottom-workflows button::before {
    width: 26px !important;
    height: 26px !important;
    background: currentColor !important;
  }

  .bottom-workflows button::after {
    display: block !important;
    color: currentColor !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  .bottom-workflows button.is-active {
    background: rgba(17,19,23,0.11) !important;
    color: var(--ios-accent) !important;
  }
}

/* v160 force real iOS menu and companion bubbles above all legacy hidden states. */
@media (max-width: 760px) {
  body::before {
    content: none !important;
    display: none !important;
  }

  .ios-menu-button {
    position: fixed !important;
    left: 312px !important;
    right: auto !important;
    top: 30px !important;
    z-index: 10000 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    place-items: center !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    background: rgba(255,255,255,0.84) !important;
    box-shadow: 0 18px 38px rgba(36,38,43,0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
    color: transparent !important;
    font-size: 0 !important;
    pointer-events: auto !important;
  }

  .ios-menu-button::before {
    content: "..." !important;
    display: block !important;
    color: #08090b !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    transform: translateY(-3px) !important;
  }

  .tool-popout {
    position: fixed !important;
    left: 78px !important;
    top: 238px !important;
    z-index: 10001 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 12px !important;
    pointer-events: auto !important;
  }

  .tool-popout button,
  .tool-popout button:nth-child(1),
  .tool-popout button:nth-child(2),
  .tool-popout button:nth-child(3),
  .tool-popout button:nth-child(4),
  .tool-popout button:nth-child(5) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    place-items: center !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.84) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 18px 38px rgba(36,38,43,0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .tool-popout button:nth-child(n+6) {
    display: none !important;
  }

  .tool-popout button::before {
    content: "" !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background: #08090b !important;
    opacity: 1 !important;
  }
}

/* v161 root companion toolbar: not clipped by the left rail. */
@media (max-width: 760px) {
  .sidebar .sidebar-popout {
    display: none !important;
  }

  .app-shell > .ios-companion-buttons {
    position: fixed !important;
    left: 78px !important;
    top: 238px !important;
    z-index: 10001 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 12px !important;
    pointer-events: auto !important;
  }

  .app-shell > .ios-companion-buttons button {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    place-items: center !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.84) !important;
    border: 1px solid rgba(255,255,255,0.92) !important;
    box-shadow: 0 18px 38px rgba(36,38,43,0.14), inset 0 1px 0 rgba(255,255,255,0.92) !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .app-shell > .ios-companion-buttons button:nth-child(n+6) {
    display: none !important;
  }

  .app-shell > .ios-companion-buttons button::before {
    content: "" !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background: #08090b !important;
    opacity: 1 !important;
  }
}

/* v162 center the document title like the iOS reference top chrome. */
@media (max-width: 760px) {
  .document-chip {
    left: 50% !important;
    top: 39px !important;
    width: 128px !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .document-chip strong {
    max-width: 116px !important;
    font-size: 18px !important;
    text-align: center !important;
  }
}

/* v163 screenshot-extracted transparent PNG icons. */
@media (max-width: 760px) {
  .topbar::before {
    content: "" !important;
    background:
      rgba(255,255,255,0.84)
      url("assets/reference-icons/back.png")
      center / 28px 28px no-repeat !important;
  }

  .app-shell > .add-menu-button {
    color: transparent !important;
    font-size: 0 !important;
    background:
      rgba(255,255,255,0.84)
      url("assets/reference-icons/plus.png")
      center / 30px 30px no-repeat !important;
  }

  .add-menu-button::before,
  .add-menu-button::after {
    content: none !important;
    display: none !important;
  }

  #undoButton::before,
  #redoButton::before,
  .tool::before,
  .right-quickbar button::before,
  .bottom-workflows button::before,
  .app-shell > .ios-companion-buttons button::before {
    -webkit-mask: none !important;
            mask: none !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  #undoButton::before { background-image: url("assets/reference-icons/undo.png") !important; }
  #redoButton::before { background-image: url("assets/reference-icons/redo.png") !important; }

  .ios-menu-button::before {
    content: "" !important;
    width: 30px !important;
    height: 30px !important;
    transform: none !important;
    background: transparent url("assets/reference-icons/menu.png") center / contain no-repeat !important;
  }

  .tool[data-tool="select"]::before { background-image: url("assets/reference-icons/select.png") !important; }
  .tool[data-tool="pen"]::before { background-image: url("assets/reference-icons/pen.png") !important; }
  .tool[data-tool="brush"]::before { background-image: url("assets/reference-icons/brush.png") !important; }
  .tool[data-tool="hand"]::before { background-image: url("assets/reference-icons/hand.png") !important; }
  .tool[data-tool="rect"]::before { background-image: url("assets/reference-icons/rect.png") !important; }
  .tool[data-tool="ellipse"]::before { background-image: url("assets/reference-icons/ellipse.png") !important; }
  .tool[data-tool="line"]::before { background-image: url("assets/reference-icons/scale.png") !important; }
  .tool[data-tool="text"]::before { background-image: url("assets/reference-icons/text.png") !important; }
  .tool[data-tool="eraser"]::before { background-image: url("assets/reference-icons/eraser.png") !important; }

  .app-shell > .ios-companion-buttons button[data-popout-action="style"]::before { background-image: url("assets/reference-icons/confirm.png") !important; }
  .app-shell > .ios-companion-buttons button[data-popout-action="duplicate"]::before { background-image: url("assets/reference-icons/duplicate.png") !important; }
  .app-shell > .ios-companion-buttons button[data-popout-action="layers"]::before { background-image: url("assets/reference-icons/marquee.png") !important; }
  .app-shell > .ios-companion-buttons button[data-popout-action="grid"]::before { background-image: url("assets/reference-icons/rotate.png") !important; }
  .app-shell > .ios-companion-buttons button[data-popout-action="snap"]::before { background-image: url("assets/reference-icons/scale.png") !important; }

  .right-quickbar button[data-quick-action="fit"]::before { background-image: url("assets/reference-icons/fit.png") !important; }
  .right-quickbar button[data-quick-action="crop"]::before { background-image: url("assets/reference-icons/crop.png") !important; }
  .right-quickbar button[data-quick-action="layers"]::before { background-image: url("assets/reference-icons/layers-action.png") !important; }
  .right-quickbar button[data-quick-action="build"]::before { background-image: url("assets/reference-icons/chart.png") !important; }
  .right-quickbar button[data-quick-action="delete"]::before { background-image: url("assets/reference-icons/trash.png") !important; }

  .bottom-workflows button[data-workflow="select"]::before { background-image: url("assets/reference-icons/dock-layers.png") !important; }
  .bottom-workflows button[data-workflow="adjust"]::before { background-image: url("assets/reference-icons/dock-style.png") !important; }
  .bottom-workflows button[data-workflow="vector"]::before { background-image: url("assets/reference-icons/dock-library.png") !important; }
}

/* v164 stable centered title using the same screenshot-driven iOS top row. */
@media (max-width: 760px) {
  .document-chip {
    display: none !important;
  }

  body::after {
    content: "Untitled";
    position: fixed;
    left: 50%;
    top: 39px;
    z-index: 10002;
    display: block;
    width: 126px;
    transform: translateX(-50%);
    color: #08090b;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Arial, sans-serif;
    font-size: 18px;
    font-weight: 850;
    line-height: 34px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }

  body::after {
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  }
}

/* v165 extracted-icon scale normalization and reference bottom dock polish. */
@media (max-width: 760px) {
  #undoButton::before,
  #redoButton::before,
  .tool::before,
  .right-quickbar button::before,
  .bottom-workflows button::before,
  .app-shell > .ios-companion-buttons button::before {
    display: block !important;
    background-color: #08090b !important;
    background-image: none !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
            mask-size: contain !important;
  }

  #undoButton::before {
    width: 24px !important;
    height: 24px !important;
    -webkit-mask-image: url("assets/reference-icons/undo.png") !important;
            mask-image: url("assets/reference-icons/undo.png") !important;
  }

  #redoButton::before {
    width: 24px !important;
    height: 24px !important;
    -webkit-mask-image: url("assets/reference-icons/redo.png") !important;
            mask-image: url("assets/reference-icons/redo.png") !important;
  }

  .tool::before {
    width: 24px !important;
    height: 24px !important;
  }

  .tool[data-tool="select"]::before { -webkit-mask-image: url("assets/reference-icons/select.png") !important; mask-image: url("assets/reference-icons/select.png") !important; }
  .tool[data-tool="pen"]::before { -webkit-mask-image: url("assets/reference-icons/pen.png") !important; mask-image: url("assets/reference-icons/pen.png") !important; }
  .tool[data-tool="brush"]::before { -webkit-mask-image: url("assets/reference-icons/brush.png") !important; mask-image: url("assets/reference-icons/brush.png") !important; }
  .tool[data-tool="hand"]::before { -webkit-mask-image: url("assets/reference-icons/hand.png") !important; mask-image: url("assets/reference-icons/hand.png") !important; }
  .tool[data-tool="rect"]::before { -webkit-mask-image: url("assets/reference-icons/rect.png") !important; mask-image: url("assets/reference-icons/rect.png") !important; }
  .tool[data-tool="ellipse"]::before { -webkit-mask-image: url("assets/reference-icons/ellipse.png") !important; mask-image: url("assets/reference-icons/ellipse.png") !important; }
  .tool[data-tool="line"]::before { -webkit-mask-image: url("assets/reference-icons/scale.png") !important; mask-image: url("assets/reference-icons/scale.png") !important; }
  .tool[data-tool="text"]::before { -webkit-mask-image: url("assets/reference-icons/text.png") !important; mask-image: url("assets/reference-icons/text.png") !important; }
  .tool[data-tool="eraser"]::before { -webkit-mask-image: url("assets/reference-icons/eraser.png") !important; mask-image: url("assets/reference-icons/eraser.png") !important; }

  .app-shell > .ios-companion-buttons button::before {
    width: 25px !important;
    height: 25px !important;
  }

  .app-shell > .ios-companion-buttons button[data-popout-action="style"]::before { -webkit-mask-image: url("assets/reference-icons/confirm.png") !important; mask-image: url("assets/reference-icons/confirm.png") !important; }
  .app-shell > .ios-companion-buttons button[data-popout-action="duplicate"]::before { -webkit-mask-image: url("assets/reference-icons/duplicate.png") !important; mask-image: url("assets/reference-icons/duplicate.png") !important; }
  .app-shell > .ios-companion-buttons button[data-popout-action="layers"]::before { -webkit-mask-image: url("assets/reference-icons/marquee.png") !important; mask-image: url("assets/reference-icons/marquee.png") !important; }
  .app-shell > .ios-companion-buttons button[data-popout-action="grid"]::before { -webkit-mask-image: url("assets/reference-icons/rotate.png") !important; mask-image: url("assets/reference-icons/rotate.png") !important; }
  .app-shell > .ios-companion-buttons button[data-popout-action="snap"]::before { -webkit-mask-image: url("assets/reference-icons/scale.png") !important; mask-image: url("assets/reference-icons/scale.png") !important; }

  .right-quickbar button::before {
    width: 24px !important;
    height: 24px !important;
  }

  .right-quickbar button[data-quick-action="fit"]::before { -webkit-mask-image: url("assets/reference-icons/fit.png") !important; mask-image: url("assets/reference-icons/fit.png") !important; }
  .right-quickbar button[data-quick-action="crop"]::before { -webkit-mask-image: url("assets/reference-icons/crop.png") !important; mask-image: url("assets/reference-icons/crop.png") !important; }
  .right-quickbar button[data-quick-action="layers"]::before { -webkit-mask-image: url("assets/reference-icons/layers-action.png") !important; mask-image: url("assets/reference-icons/layers-action.png") !important; }
  .right-quickbar button[data-quick-action="build"]::before { -webkit-mask-image: url("assets/reference-icons/chart.png") !important; mask-image: url("assets/reference-icons/chart.png") !important; }
  .right-quickbar button[data-quick-action="delete"]::before { -webkit-mask-image: url("assets/reference-icons/trash.png") !important; mask-image: url("assets/reference-icons/trash.png") !important; }

  .layers {
    padding-bottom: 108px !important;
  }

  .layer-list {
    max-height: 142px !important;
    margin-bottom: 92px !important;
  }

  .bottom-workflows {
    left: 50% !important;
    right: auto !important;
    bottom: 24px !important;
    width: min(292px, calc(100vw - 72px)) !important;
    max-width: min(292px, calc(100vw - 72px)) !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 6px !important;
    gap: 0 !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    height: 60px !important;
    min-height: 60px !important;
    grid-template-rows: 30px 16px !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 7px 8px 6px !important;
  }

  .bottom-workflows button::before {
    width: 28px !important;
    height: 28px !important;
  }

  .bottom-workflows button[data-workflow="select"]::before {
    -webkit-mask-image: url("assets/reference-icons/dock-layers.png") !important;
            mask-image: url("assets/reference-icons/dock-layers.png") !important;
  }

  .bottom-workflows button[data-workflow="adjust"]::before {
    -webkit-mask-image: url("assets/reference-icons/dock-style.png") !important;
            mask-image: url("assets/reference-icons/dock-style.png") !important;
  }

  .bottom-workflows button[data-workflow="vector"]::before {
    -webkit-mask-image: url("assets/reference-icons/dock-library.png") !important;
            mask-image: url("assets/reference-icons/dock-library.png") !important;
  }

  .bottom-workflows button::after {
    font-size: 11px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
  }

  .bottom-workflows button.is-active {
    box-shadow: none !important;
  }
}

/* v166 iOS reference dock and top control correction. */
@media (max-width: 760px) {
  .topbar {
    height: 88px !important;
    padding: 30px 158px 0 102px !important;
    align-items: flex-start !important;
  }

  .history-actions {
    position: fixed !important;
    left: 102px !important;
    top: 31px !important;
    z-index: 10001 !important;
    display: grid !important;
    grid-template-columns: 54px 54px !important;
    width: 128px !important;
    height: 56px !important;
    padding: 0 10px !important;
    gap: 0 !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,0.9) !important;
    box-shadow: 0 18px 40px rgba(18,22,27,0.16), inset 0 0 0 1px rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(22px) !important;
  }

  #undoButton,
  #redoButton {
    display: grid !important;
    width: 54px !important;
    height: 56px !important;
    min-width: 54px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    opacity: 1 !important;
  }

  #undoButton::before,
  #redoButton::before {
    content: "" !important;
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    background-color: #747a82 !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
            mask-size: contain !important;
  }

  body::after {
    top: 41px !important;
    width: 132px !important;
    font-size: 20px !important;
    line-height: 32px !important;
  }

  .app-shell > .add-menu-button {
    width: 56px !important;
    height: 56px !important;
    left: 12px !important;
    top: 166px !important;
    background-size: 27px 27px !important;
  }

  .tool-grid {
    top: 238px !important;
    left: 12px !important;
    width: 56px !important;
    padding: 7px 0 !important;
    gap: 0 !important;
  }

  .tool {
    width: 56px !important;
    height: 47px !important;
  }

  .tool::before {
    width: 22px !important;
    height: 22px !important;
  }

  .tool.is-active::after {
    width: 44px !important;
    height: 44px !important;
    left: 6px !important;
    top: 1px !important;
  }

  .app-shell > .ios-companion-buttons {
    top: 241px !important;
    left: 78px !important;
    gap: 12px !important;
  }

  .app-shell > .ios-companion-buttons button {
    width: 58px !important;
    height: 58px !important;
  }

  .app-shell > .ios-companion-buttons button::before {
    width: 24px !important;
    height: 24px !important;
  }

  .right-quickbar {
    top: 252px !important;
    right: 14px !important;
    width: 55px !important;
    padding: 10px 0 !important;
    gap: 14px !important;
  }

  .right-quickbar button {
    width: 55px !important;
    height: 34px !important;
  }

  .right-quickbar button::before {
    width: 23px !important;
    height: 23px !important;
  }

  .layers {
    height: 262px !important;
    min-height: 262px !important;
    max-height: 262px !important;
    padding: 34px 22px 112px !important;
    border-radius: 38px 38px 0 0 !important;
    overflow: hidden !important;
  }

  .layers .panel-heading {
    margin-bottom: 18px !important;
  }

  .layers .panel-heading h2,
  .layers h2 {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  .layer-list {
    max-height: 116px !important;
    margin-bottom: 0 !important;
    padding: 0 10px !important;
    overflow: hidden !important;
  }

  .layer-item {
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .bottom-workflows {
    left: 50% !important;
    right: auto !important;
    bottom: 24px !important;
    width: 288px !important;
    max-width: calc(100vw - 48px) !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 5px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-radius: 999px !important;
    background: rgba(229,229,229,0.84) !important;
    box-shadow: 0 18px 36px rgba(20,24,29,0.18), inset 0 0 0 1px rgba(255,255,255,0.8) !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(24px) !important;
  }

  .bottom-workflows button,
  .bottom-workflows button[data-workflow] {
    display: none !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 5px 8px 4px !important;
    grid-template-rows: 31px 15px !important;
    gap: 3px !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: #111318 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .bottom-workflows button[data-workflow="select"]::after { content: "Layers" !important; }
  .bottom-workflows button[data-workflow="adjust"]::after { content: "Style" !important; }
  .bottom-workflows button[data-workflow="vector"]::after { content: "Library" !important; }

  .bottom-workflows button::before {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    background-color: #111318 !important;
  }

  .bottom-workflows button::after {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    color: #111318 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    line-height: 15px !important;
    text-align: center !important;
  }

  .bottom-workflows button.is-active {
    background: rgba(196,196,196,0.82) !important;
    color: #c98420 !important;
    box-shadow: none !important;
  }

  .bottom-workflows button.is-active::before,
  .bottom-workflows button.is-active::after {
    background-color: #c98420 !important;
    color: #c98420 !important;
  }
}

/* v167 remove desktop bleed-through and lock the iOS lower dock. */
@media (max-width: 760px) {
  .history-actions .document-chip,
  #duplicateButton,
  #deleteButton,
  .mode-switcher,
  .zoom-actions,
  .view-actions,
  .mobile-share-actions,
  .export-actions,
  .export-status {
    display: none !important;
  }

  .history-actions {
    grid-template-columns: repeat(2, 44px) !important;
    width: 128px !important;
    height: 56px !important;
    padding: 0 20px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #undoButton,
  #redoButton {
    width: 44px !important;
    min-width: 44px !important;
  }

  body::after {
    left: 50% !important;
    top: 40px !important;
    z-index: 10003 !important;
    display: block !important;
    width: 142px !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
  }

  .ios-menu-button {
    right: 14px !important;
    top: 30px !important;
    width: 64px !important;
    height: 56px !important;
  }

  .canvas-wrap {
    bottom: 262px !important;
  }

  .layers {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 262px !important;
    min-height: 262px !important;
    max-height: 262px !important;
    padding: 36px 22px 98px !important;
    display: block !important;
  }

  .layers .panel {
    display: none !important;
  }

  .layers .panel:nth-of-type(2),
  .layers .panel:nth-of-type(3) {
    display: block !important;
  }

  .layers .panel:nth-of-type(2) {
    margin: 0 !important;
  }

  .layers .panel:nth-of-type(2) .panel-heading {
    display: grid !important;
    grid-template-columns: 86px 1fr 54px !important;
    align-items: center !important;
    min-height: 54px !important;
    margin: 0 0 10px !important;
  }

  .layers .panel:nth-of-type(2) .panel-heading::before {
    content: "Select";
    display: grid;
    height: 48px;
    min-width: 86px;
    padding: 0 18px;
    place-items: center;
    border-radius: 999px;
    background: rgba(226,226,226,0.88);
    color: #111318;
    font-size: 16px;
    font-weight: 760;
  }

  .layers .panel:nth-of-type(2) .panel-heading h2 {
    justify-self: center !important;
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .layers .panel:nth-of-type(2) .panel-heading button {
    justify-self: end !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    color: transparent !important;
    font-size: 0 !important;
    background: rgba(226,226,226,0.9) url("assets/reference-icons/plus.png") center / 27px 27px no-repeat !important;
  }

  .layer-list {
    max-height: 132px !important;
    padding: 0 !important;
  }

  .layers .panel:nth-of-type(3) {
    margin-top: 8px !important;
  }

  .layers .panel:nth-of-type(3) h2 {
    margin: 0 0 8px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  .layers .panel:nth-of-type(3) .align-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .layers .panel:nth-of-type(3) .align-grid button {
    min-height: 34px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  .bottom-workflows {
    bottom: 24px !important;
    z-index: 10005 !important;
    width: 288px !important;
    height: 68px !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    height: 58px !important;
    padding: 5px 8px 4px !important;
    grid-template-rows: 30px 16px !important;
  }
}

/* v168 final cascade cleanup for the reference iOS mobile frame. */
@media (max-width: 760px) {
  .inspector-title,
  .inspector-tabs {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .inspector-title h2::after,
  .layers .panel:has(#layerList) .panel-heading h2::after {
    content: none !important;
    display: none !important;
  }

  .history-actions .document-chip,
  .topbar .document-chip,
  .mode-switcher,
  .zoom-actions,
  .view-actions,
  .mobile-share-actions,
  .export-actions,
  #duplicateButton,
  #deleteButton {
    display: none !important;
    visibility: hidden !important;
  }

  .topbar {
    pointer-events: none !important;
  }

  .topbar::before,
  .history-actions,
  .ios-menu-button {
    pointer-events: auto !important;
  }

  .history-actions {
    position: fixed !important;
    left: 102px !important;
    top: 31px !important;
    display: grid !important;
    grid-template-columns: 44px 44px !important;
    width: 128px !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 20px !important;
    overflow: hidden !important;
  }

  #undoButton::before {
    -webkit-mask-image: url("assets/reference-icons/undo.png") !important;
            mask-image: url("assets/reference-icons/undo.png") !important;
  }

  #redoButton::before {
    -webkit-mask-image: url("assets/reference-icons/redo.png") !important;
            mask-image: url("assets/reference-icons/redo.png") !important;
  }

  .workspace::before,
  .workspace::after,
  .topbar::after {
    content: none !important;
    display: none !important;
  }

  .layers {
    top: auto !important;
    height: 262px !important;
    max-height: 262px !important;
    padding: 34px 22px 100px !important;
  }

  .layers > .panel {
    display: none !important;
  }

  .layers > .panel:has(#layerList),
  .layers > .panel:has(#selectAllButton) {
    display: block !important;
  }

  .layers > .panel:has(#layerList) .panel-heading {
    display: grid !important;
    grid-template-columns: 88px 1fr 52px !important;
    align-items: center !important;
    height: 52px !important;
    margin: 0 0 10px !important;
  }

  .layers > .panel:has(#layerList) .panel-heading::before {
    content: "Select" !important;
    display: grid !important;
    height: 46px !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(226,226,226,0.9) !important;
    color: #111318 !important;
    font-size: 16px !important;
    font-weight: 780 !important;
  }

  .layers > .panel:has(#layerList) .panel-heading h2 {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    justify-self: center !important;
    color: #08090b !important;
    font-size: 24px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
  }

  .layers > .panel:has(#layerList) .panel-heading button {
    position: static !important;
    justify-self: end !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    transform: none !important;
  }

  .layers > .panel:has(#selectAllButton) {
    margin-top: 8px !important;
  }

  .layers > .panel:has(#selectAllButton) h2 {
    margin: 0 0 8px !important;
    color: #111318 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  .bottom-workflows {
    left: 50% !important;
    bottom: 23px !important;
    width: 288px !important;
    height: 68px !important;
    max-width: calc(100vw - 48px) !important;
    transform: translateX(-50%) !important;
  }
}

/* v169 restore the exact sheet title pattern and visible undo/redo PNGs. */
@media (max-width: 760px) {
  #undoButton::before,
  #redoButton::before {
    -webkit-mask: none !important;
            mask: none !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 25px 25px !important;
  }

  #undoButton::before {
    background-image: url("assets/reference-icons/undo.png") !important;
  }

  #redoButton::before {
    background-image: url("assets/reference-icons/redo.png") !important;
  }

  .layers > .panel {
    display: none !important;
  }

  .layers > .panel:has(#layerList) {
    display: block !important;
  }

  .layers > .panel:has(#layerList) .panel-heading {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 118px 1fr 54px !important;
    height: 66px !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
  }

  .layers > .panel:has(#layerList) .panel-heading::before {
    content: "Layers" !important;
    position: absolute !important;
    left: 50% !important;
    top: 13px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
    color: #08090b !important;
    font-size: 24px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
  }

  .layers > .panel:has(#layerList) .panel-heading h2 {
    position: static !important;
    grid-column: 1 !important;
    align-self: end !important;
    justify-self: start !important;
    display: grid !important;
    width: 118px !important;
    min-width: 118px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(226,226,226,0.9) !important;
    color: #111318 !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  .layers > .panel:has(#layerList) .panel-heading h2::after {
    content: "Select" !important;
    display: block !important;
    color: #111318 !important;
    font-size: 16px !important;
    font-weight: 780 !important;
    line-height: 1 !important;
  }

  .layers > .panel:has(#layerList) .panel-heading button {
    grid-column: 3 !important;
    align-self: end !important;
    justify-self: end !important;
  }

  .layer-list {
    max-height: 132px !important;
    margin-bottom: 0 !important;
  }

  .bottom-workflows {
    bottom: 24px !important;
    overflow: hidden !important;
  }
}

/* v170 direct mobile selectors: no hidden desktop panel bleed, visible undo controls. */
@media (max-width: 760px) {
  .history-actions {
    left: 102px !important;
    width: 128px !important;
  }

  #undoButton,
  #redoButton {
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 25px 25px !important;
  }

  #undoButton {
    background-image: url("assets/reference-icons/undo.png") !important;
  }

  #redoButton {
    background-image: url("assets/reference-icons/redo.png") !important;
  }

  #undoButton::before,
  #redoButton::before {
    display: none !important;
    content: none !important;
  }

  .layers > .panel:nth-of-type(1),
  .layers > .panel:nth-of-type(3),
  .layers > .panel:nth-of-type(4),
  .layers > .panel:nth-of-type(5),
  .layers > .panel:nth-of-type(6) {
    display: none !important;
    visibility: hidden !important;
  }

  .layers > .panel:nth-of-type(2) {
    display: block !important;
    visibility: visible !important;
  }

  .layers > .panel:nth-of-type(2) .panel-heading {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 118px 1fr 54px !important;
    height: 66px !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
  }

  .layers > .panel:nth-of-type(2) .panel-heading::before {
    content: "Layers" !important;
    position: absolute !important;
    left: 50% !important;
    top: 13px !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
    color: #08090b !important;
    font-size: 24px !important;
    font-weight: 880 !important;
    line-height: 1 !important;
  }

  .layers > .panel:nth-of-type(2) .panel-heading h2 {
    grid-column: 1 !important;
    align-self: end !important;
    justify-self: start !important;
    display: grid !important;
    width: 118px !important;
    height: 48px !important;
    margin: 0 !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(226,226,226,0.9) !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .layers > .panel:nth-of-type(2) .panel-heading h2::after {
    content: "Select" !important;
    display: block !important;
    color: #111318 !important;
    font-size: 16px !important;
    font-weight: 780 !important;
  }

  .bottom-workflows {
    bottom: 30px !important;
  }
}

.mobile-ios-sheet {
  display: none;
}

.integrated-right-nav {
  display: none;
}

.app-frame-right-nav {
  display: none;
}

@media (max-width: 760px) {
  .layers {
    display: none !important;
  }

  .mobile-ios-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;
    display: block;
    height: 260px;
    padding: 34px 22px 104px;
    border-radius: 38px 38px 0 0;
    background: rgba(250,250,251,0.96);
    box-shadow: 0 -18px 52px rgba(18,22,27,0.18), inset 0 1px 0 rgba(255,255,255,0.86);
    backdrop-filter: blur(26px);
    overflow: hidden;
  }

  .mobile-sheet-handle {
    position: absolute;
    left: 50%;
    top: 11px;
    width: 42px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(122,122,126,0.72);
  }

  .mobile-sheet-head {
    display: grid;
    grid-template-columns: 118px 1fr 54px;
    align-items: end;
    height: 58px;
    margin-bottom: 10px;
  }

  .mobile-sheet-head h2 {
    justify-self: center;
    margin: 0 0 12px;
    color: #08090b;
    font-size: 24px;
    font-weight: 880;
    line-height: 1;
  }

  .mobile-sheet-head button {
    display: grid;
    width: 118px;
    height: 48px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(226,226,226,0.9);
    color: #111318;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Arial, sans-serif;
    font-size: 16px;
    font-weight: 780;
  }

  .mobile-sheet-head .mobile-sheet-add {
    justify-self: end;
    width: 48px;
    color: transparent;
    font-size: 0;
    background: rgba(226,226,226,0.9) url("assets/reference-icons/plus.png") center / 27px 27px no-repeat;
  }

  .mobile-layer-list {
    display: grid;
    gap: 0;
    border-radius: 19px;
    background: rgba(232,232,233,0.78);
    overflow: hidden;
  }

  .mobile-layer-row {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 26px;
    grid-template-rows: 20px 16px;
    column-gap: 10px;
    min-height: 52px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(190,190,192,0.46);
    color: #111318;
  }

  .mobile-layer-row.is-selected {
    background: rgba(255,232,226,0.88);
    box-shadow: inset 0 0 0 1px rgba(255,102,78,0.82);
  }

  .layer-thumb {
    grid-row: 1 / span 2;
    align-self: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #f7d979;
    box-shadow: inset 0 0 0 1px rgba(97,72,18,0.35);
  }

  .badge-thumb {
    background: #f7d979 url("assets/reference-icons/dock-layers.png") center / 22px 22px no-repeat;
  }

  .mobile-layer-row strong {
    align-self: end;
    font-size: 13px;
    font-weight: 760;
    line-height: 1;
  }

  .mobile-layer-row small {
    align-self: start;
    color: #7a7d82;
    font-size: 11px;
    line-height: 1.1;
  }

  .layer-eye {
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
  }

  .layer-eye::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: #60656d;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6.5c5 0 8.8 5.5 8.8 5.5S17 17.5 12 17.5 3.2 12 3.2 12 7 6.5 12 6.5Zm0 2.4a3.1 3.1 0 1 0 0 6.2 3.1 3.1 0 0 0 0-6.2Z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6.5c5 0 8.8 5.5 8.8 5.5S17 17.5 12 17.5 3.2 12 3.2 12 7 6.5 12 6.5Zm0 2.4a3.1 3.1 0 1 0 0 6.2 3.1 3.1 0 0 0 0-6.2Z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  }

  .bottom-workflows {
    z-index: 10006 !important;
    bottom: 24px !important;
  }
}

/* v172 top undo/redo capsule scaled to phone logical pixels. */
@media (max-width: 760px) {
  .history-actions {
    left: 102px !important;
    top: 31px !important;
    width: 128px !important;
  }

  @media (max-width: 430px) {
    .history-actions {
      left: 68px !important;
      width: 128px !important;
      transform: none !important;
    }

    body::after {
      left: 50% !important;
    }
  }

  .history-actions::before,
  .history-actions::after {
    content: "" !important;
    position: absolute !important;
    top: 16px !important;
    z-index: 2 !important;
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    pointer-events: none !important;
  }

  .history-actions::before {
    left: 28px !important;
    background-image: url("assets/reference-icons/undo.png") !important;
  }

  .history-actions::after {
    right: 28px !important;
    background-image: url("assets/reference-icons/redo.png") !important;
  }

  #undoButton,
  #redoButton {
    opacity: 0 !important;
  }
}

@media (max-width: 430px) {
  .history-actions {
    left: 68px !important;
    width: 128px !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .history-actions {
    left: 98px !important;
    width: 104px !important;
    transform: none !important;
  }

  .history-actions::before {
    left: 22px !important;
  }

  .history-actions::after {
    right: 22px !important;
  }
}

/* v177: one bottom label only, lighter sheet typography, no dock crowding. */
@media (max-width: 760px) {
  .mobile-ios-sheet {
    height: 260px !important;
    padding: 34px 22px 112px !important;
  }

  .mobile-sheet-head {
    height: 54px !important;
    margin-bottom: 8px !important;
  }

  .mobile-sheet-head h2 {
    margin-bottom: 12px !important;
    font-size: 22px !important;
    font-weight: 820 !important;
  }

  .mobile-sheet-head button {
    width: 116px !important;
    height: 46px !important;
    font-size: 15px !important;
    font-weight: 720 !important;
  }

  .mobile-layer-list {
    max-height: 112px !important;
    overflow: hidden !important;
  }

  .mobile-layer-row {
    min-height: 48px !important;
    padding: 7px 10px !important;
    grid-template-rows: 18px 15px !important;
  }

  .mobile-layer-row strong {
    font-size: 12px !important;
    font-weight: 720 !important;
  }

  .mobile-layer-row small {
    font-size: 10px !important;
  }

  .bottom-workflows {
    bottom: 24px !important;
    height: 66px !important;
    width: 286px !important;
    padding: 5px !important;
    background: rgba(232,232,233,0.86) !important;
  }

  .bottom-workflows button,
  .bottom-workflows button[data-workflow],
  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    height: 56px !important;
    grid-template-rows: 28px 15px !important;
    gap: 3px !important;
    padding: 5px 8px 4px !important;
  }

  .bottom-workflows button::before {
    content: "" !important;
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    background-color: #111318 !important;
    background-image: none !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
            mask-size: contain !important;
  }

  .bottom-workflows button[data-workflow="select"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 4.3 8 4-8 4-8-4 8-4Zm-6.7 7 6.7 3.3 6.7-3.3 1.3.7-8 4-8-4 1.3-.7Zm0 3.6 6.7 3.3 6.7-3.3 1.3.7-8 4-8-4 1.3-.7Z'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 4.3 8 4-8 4-8-4 8-4Zm-6.7 7 6.7 3.3 6.7-3.3 1.3.7-8 4-8-4 1.3-.7Zm0 3.6 6.7 3.3 6.7-3.3 1.3.7-8 4-8-4 1.3-.7Z'/%3E%3C/svg%3E") !important;
  }

  .bottom-workflows button[data-workflow="adjust"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h10v3h-2v13h-3V7h-2v13H7V7H5V4h2Zm10 8h3v3h-3v-3ZM4 12h3v3H4v-3Z'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h10v3h-2v13h-3V7h-2v13H7V7H5V4h2Zm10 8h3v3h-3v-3ZM4 12h3v3H4v-3Z'/%3E%3C/svg%3E") !important;
  }

  .bottom-workflows button[data-workflow="vector"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20h14v-2h-1V8l-6-4-6 4v10H5v2Zm3-2V9.1l4-2.7 4 2.7V18H8Zm2-7h4v2h-4v-2Zm0 4h4v2h-4v-2Z'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20h14v-2h-1V8l-6-4-6 4v10H5v2Zm3-2V9.1l4-2.7 4 2.7V18H8Zm2-7h4v2h-4v-2Zm0 4h4v2h-4v-2Z'/%3E%3C/svg%3E") !important;
  }

  .bottom-workflows button::after {
    display: block !important;
    width: 100% !important;
    color: #111318 !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 680 !important;
    line-height: 15px !important;
    text-align: center !important;
    text-indent: 0 !important;
  }

  .bottom-workflows button.is-active {
    background: rgba(202,202,203,0.84) !important;
    box-shadow: none !important;
  }

  .bottom-workflows button.is-active::before {
    background-color: #c98420 !important;
  }

  .bottom-workflows button.is-active::after {
    color: #c98420 !important;
  }
}

/* v178: final dock specificity reset. */
@media (max-width: 760px) {
  .bottom-workflows {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 999px !important;
  }

  .bottom-workflows button.is-active,
  .bottom-workflows button.is-active[data-workflow] {
    background: rgba(202,202,203,0.82) !important;
    color: transparent !important;
  }

  .bottom-workflows button.is-active::before {
    background-color: #c98420 !important;
    background-image: none !important;
  }

  .bottom-workflows button.is-active::after,
  .bottom-workflows button.is-active[data-workflow]::after {
    background: transparent !important;
    background-color: transparent !important;
    color: #c98420 !important;
  }
}

/* v179: lock dock icon and label placement inside each tab. */
@media (max-width: 760px) {
  .mobile-sheet-head {
    grid-template-columns: 116px minmax(0, 1fr) 48px !important;
  }

  .mobile-sheet-head h2 {
    font-size: 21px !important;
    font-weight: 800 !important;
  }

  .mobile-sheet-head .mobile-sheet-add {
    width: 46px !important;
    height: 46px !important;
    background-size: 25px 25px !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    position: relative !important;
    display: block !important;
    height: 56px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .bottom-workflows button::before {
    position: absolute !important;
    left: 50% !important;
    top: 8px !important;
    width: 25px !important;
    height: 25px !important;
    transform: translateX(-50%) !important;
  }

  .bottom-workflows button::after {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 7px !important;
    height: 12px !important;
    line-height: 12px !important;
    overflow: hidden !important;
  }
}

/* v180: keep the sheet add button fully on-screen. */
@media (max-width: 760px) {
  .mobile-sheet-head {
    position: relative !important;
    grid-template-columns: 116px 1fr !important;
    padding-right: 56px !important;
  }

  .mobile-sheet-head .mobile-sheet-add {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    display: grid !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(226,226,226,0.9) url("assets/reference-icons/plus.png") center / 25px 25px no-repeat !important;
  }
}

/* v181: visible iOS-style add control on the mobile sheet. */
@media (max-width: 760px) {
  .mobile-sheet-head .mobile-sheet-add {
    opacity: 0 !important;
  }

  .mobile-sheet-head::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    background:
      rgba(226,226,226,0.92)
      url("assets/reference-icons/plus.png")
      center / 25px 25px no-repeat !important;
  }
}

/* v182: integrated four-edge mobile app frame, not floating bubbles. */
@media (max-width: 760px) {
  :root {
    --integrated-bar: rgba(250,250,251,0.96);
    --integrated-line: rgba(25,28,33,0.12);
    --integrated-ink: #23262b;
    --integrated-muted: #777c83;
    --integrated-active: #1677dc;
  }

  body {
    background: #f1f2f3 !important;
  }

  .app-shell {
    background: #f1f2f3 !important;
  }

  .workspace {
    inset: 0 !important;
    background: #f1f2f3 !important;
  }

  .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 10020 !important;
    display: grid !important;
    grid-template-columns: 48px 92px minmax(0, 1fr) 52px 46px !important;
    align-items: center !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--integrated-line) !important;
    background: var(--integrated-bar) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) !important;
    pointer-events: auto !important;
  }

  .topbar::before {
    content: "" !important;
    position: static !important;
    grid-column: 1 !important;
    display: block !important;
    width: 48px !important;
    height: 50px !important;
    border-radius: 0 !important;
    background:
      transparent
      url("assets/reference-icons/back.png")
      center / 23px 23px no-repeat !important;
    box-shadow: none !important;
  }

  body::after {
    content: "Untitled" !important;
    position: fixed !important;
    left: 50% !important;
    top: 0 !important;
    z-index: 10023 !important;
    width: 122px !important;
    height: 50px !important;
    transform: translateX(-50%) !important;
    color: var(--integrated-ink) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 50px !important;
    text-align: center !important;
    text-shadow: none !important;
    pointer-events: none !important;
  }

  .history-actions {
    position: static !important;
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: 42px 42px !important;
    width: 92px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 4px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .history-actions::before,
  .history-actions::after {
    top: 13px !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 0.68 !important;
  }

  .history-actions::before {
    left: 14px !important;
  }

  .history-actions::after {
    right: 14px !important;
  }

  .ios-menu-button {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 10024 !important;
    width: 46px !important;
    height: 50px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ios-menu-button::before {
    width: 24px !important;
    height: 24px !important;
  }

  .topbar .zoom-actions {
    position: fixed !important;
    right: 46px !important;
    top: 0 !important;
    z-index: 10024 !important;
    display: grid !important;
    width: 52px !important;
    height: 50px !important;
    place-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .topbar .zoom-actions button,
  .topbar .zoom-actions #zoomOutButton,
  .topbar .zoom-actions #zoomInButton,
  .topbar .zoom-actions #fitButton {
    display: none !important;
  }

  .topbar .zoom-actions #zoomLabel {
    display: grid !important;
    width: 46px !important;
    height: 28px !important;
    place-items: center !important;
    border-radius: 6px !important;
    background: rgba(235,236,238,0.9) !important;
    color: #6d737b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  .app-shell > .add-menu-button,
  .app-shell > .ios-companion-buttons,
  .mobile-ios-sheet,
  .workflow-actions,
  .tool-options {
    display: none !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 50px !important;
    bottom: 56px !important;
    z-index: 10010 !important;
    display: block !important;
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border-right: 1px solid var(--integrated-line) !important;
    border-radius: 0 !important;
    background: var(--integrated-bar) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .sidebar .brand,
  .sidebar .color-widget,
  .sidebar .sidebar-popout,
  .sidebar .tool-flyout,
  .sidebar .tool-drawer,
  .sidebar > .panel:not(:first-of-type),
  .sidebar > .panel:first-of-type h2 {
    display: none !important;
  }

  .sidebar > .panel:first-of-type {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .tool-grid {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 48px !important;
    height: 100% !important;
    max-height: none !important;
    padding: 4px 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .tool {
    position: relative !important;
    display: grid !important;
    width: 48px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  .tool::before {
    width: 21px !important;
    height: 21px !important;
    background-color: var(--integrated-ink) !important;
  }

  .tool.is-active {
    background: var(--integrated-active) !important;
  }

  .tool.is-active::before {
    background-color: #ffffff !important;
  }

  .tool.is-active::after {
    content: none !important;
    display: none !important;
  }

  .tool:nth-of-type(n+13) {
    display: none !important;
  }

  .right-quickbar {
    position: fixed !important;
    right: 0 !important;
    top: 50px !important;
    bottom: 56px !important;
    z-index: 10010 !important;
    display: grid !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    width: 48px !important;
    padding: 4px 0 !important;
    gap: 0 !important;
    border-left: 1px solid var(--integrated-line) !important;
    border-radius: 0 !important;
    background: var(--integrated-bar) !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .right-quickbar button {
    width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  .right-quickbar button::before {
    width: 21px !important;
    height: 21px !important;
    background-color: #6d737b !important;
  }

  .bottom-workflows {
    position: fixed !important;
    left: 48px !important;
    right: 48px !important;
    bottom: 0 !important;
    z-index: 10020 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    width: auto !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-top: 1px solid var(--integrated-line) !important;
    border-radius: 0 !important;
    background: var(--integrated-bar) !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
    backdrop-filter: blur(18px) !important;
  }

  .bottom-workflows button,
  .bottom-workflows button[data-workflow],
  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="build"],
  .bottom-workflows button[data-workflow="preview3d"] {
    position: relative !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .bottom-workflows button::before {
    position: absolute !important;
    left: 50% !important;
    top: 8px !important;
    width: 20px !important;
    height: 20px !important;
    transform: translateX(-50%) !important;
    background-color: var(--integrated-ink) !important;
  }

  .bottom-workflows button::after {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 6px !important;
    display: block !important;
    height: 13px !important;
    color: var(--integrated-muted) !important;
    background: transparent !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 13px !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  .bottom-workflows button[data-workflow="select"]::after { content: "Layers" !important; }
  .bottom-workflows button[data-workflow="adjust"]::after { content: "Style" !important; }
  .bottom-workflows button[data-workflow="vector"]::after { content: "Vector" !important; }
  .bottom-workflows button[data-workflow="type"]::after { content: "Type" !important; }
  .bottom-workflows button[data-workflow="measure"]::after { content: "Measure" !important; }
  .bottom-workflows button[data-workflow="pdf"]::after { content: "PDF" !important; }
  .bottom-workflows button[data-workflow="build"]::after { content: "Build" !important; }
  .bottom-workflows button[data-workflow="preview3d"]::after { content: "3D" !important; }

  .bottom-workflows button.is-active,
  .bottom-workflows button.is-active[data-workflow] {
    background: rgba(22,119,220,0.1) !important;
  }

  .bottom-workflows button.is-active::before {
    background-color: var(--integrated-active) !important;
  }

  .bottom-workflows button.is-active::after {
    color: var(--integrated-active) !important;
  }

  .canvas-wrap {
    position: fixed !important;
    left: 48px !important;
    right: 48px !important;
    top: 50px !important;
    bottom: 56px !important;
    padding: 0 !important;
    background:
      linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px),
      #e7e8ea !important;
    background-size: 20px 20px !important;
    overflow: hidden !important;
  }

  .pasteboard-frame {
    position: absolute !important;
    left: 34px !important;
    right: 28px !important;
    top: 66px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #artboard {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100svh - 190px) !important;
    border: 1px solid rgba(40,44,50,0.25) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 24px rgba(20,24,30,0.08) !important;
  }

  .canvas-rulers {
    top: -22px !important;
    left: 0 !important;
    right: 0 !important;
    height: 22px !important;
    color: #7a7f86 !important;
    font-size: 9px !important;
  }
}

/* v183: stronger integrated right rail and centered artboard fit. */
@media (max-width: 760px) {
  .workspace > .right-quickbar,
  .app-shell .workspace .right-quickbar {
    position: fixed !important;
    inset: 50px 0 56px auto !important;
    right: 0 !important;
    left: auto !important;
    top: 50px !important;
    bottom: 56px !important;
    display: grid !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    justify-content: stretch !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--integrated-line) !important;
    border-radius: 0 !important;
    background: var(--integrated-bar) !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .workspace > .right-quickbar button,
  .app-shell .workspace .right-quickbar button {
    display: grid !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .workspace > .right-quickbar button::before,
  .app-shell .workspace .right-quickbar button::before {
    width: 20px !important;
    height: 20px !important;
  }

  .pasteboard-frame {
    left: 28px !important;
    right: 28px !important;
    top: 70px !important;
  }

  #artboard {
    width: min(100%, calc(100vw - 152px)) !important;
    max-width: calc(100vw - 152px) !important;
  }
}

/* v184: visible right navigation and non-overlapping top controls. */
@media (max-width: 760px) {
  body::after {
    width: 88px !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }

  .topbar .zoom-actions {
    right: 46px !important;
    width: 44px !important;
  }

  .topbar .zoom-actions #zoomLabel {
    width: 38px !important;
    height: 24px !important;
    font-size: 10px !important;
    border-radius: 5px !important;
  }

  .workspace::after {
    content: "" !important;
    position: fixed !important;
    right: 0 !important;
    top: 50px !important;
    bottom: 56px !important;
    z-index: 10018 !important;
    display: block !important;
    width: 48px !important;
    border-left: 1px solid var(--integrated-line) !important;
    background: var(--integrated-bar) !important;
    pointer-events: none !important;
  }

  .workspace > .right-quickbar,
  .app-shell .workspace .right-quickbar {
    z-index: 10030 !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
  }

  .workspace > .right-quickbar button,
  .app-shell .workspace .right-quickbar button {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .workspace > .right-quickbar button::before,
  .app-shell .workspace .right-quickbar button::before {
    display: block !important;
    opacity: 1 !important;
    background-color: #5f656d !important;
  }
}

/* v185: clean mobile right-side navigation, replacing old floating quickbar. */
@media (max-width: 760px) {
  .right-quickbar {
    display: none !important;
  }

  .integrated-right-nav {
    position: fixed !important;
    right: 0 !important;
    top: 50px !important;
    bottom: 56px !important;
    z-index: 10040 !important;
    display: grid !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    width: 48px !important;
    padding: 4px 0 !important;
    border-left: 1px solid var(--integrated-line) !important;
    background: var(--integrated-bar) !important;
    box-shadow: none !important;
  }

  .integrated-right-nav button {
    position: relative !important;
    display: grid !important;
    width: 48px !important;
    height: 42px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .integrated-right-nav button::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background: #626870 !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
            mask-size: contain !important;
  }

  .integrated-right-nav button[data-nav-icon="layers"]::before {
    -webkit-mask-image: url("assets/reference-icons/dock-layers.png") !important;
            mask-image: url("assets/reference-icons/dock-layers.png") !important;
  }

  .integrated-right-nav button[data-nav-icon="sliders"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8v2H4V7Zm11-2h2v6h-2V9h-3V7h3V5ZM4 15h3v2H4v-2Zm6-2h2v6h-2v-2h10v-2H10v-2Z'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8v2H4V7Zm11-2h2v6h-2V9h-3V7h3V5ZM4 15h3v2H4v-2Zm6-2h2v6h-2v-2h10v-2H10v-2Z'/%3E%3C/svg%3E") !important;
  }

  .integrated-right-nav button[data-nav-icon="ruler"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17 17 4l3 3L7 20H4v-3Zm3.5-.9 8.6-8.6-1.1-1.1-8.6 8.6 1.1 1.1Zm8.1-2.9 1.4-1.4 1.4 1.4-1.4 1.4-1.4-1.4Zm-3 3 1.4-1.4 1.4 1.4-1.4 1.4-1.4-1.4Z'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17 17 4l3 3L7 20H4v-3Zm3.5-.9 8.6-8.6-1.1-1.1-8.6 8.6 1.1 1.1Zm8.1-2.9 1.4-1.4 1.4 1.4-1.4 1.4-1.4-1.4Zm-3 3 1.4-1.4 1.4 1.4-1.4 1.4-1.4-1.4Z'/%3E%3C/svg%3E") !important;
  }

  .integrated-right-nav button[data-nav-icon="comment"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Zm2 2v7.2L8.2 13H17V7H7Z'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Zm2 2v7.2L8.2 13H17V7H7Z'/%3E%3C/svg%3E") !important;
  }

  .integrated-right-nav button[data-nav-icon="copy"]::before {
    -webkit-mask-image: url("assets/reference-icons/duplicate.png") !important;
            mask-image: url("assets/reference-icons/duplicate.png") !important;
  }

  .integrated-right-nav button[data-nav-icon="scissors"]::before {
    -webkit-mask-image: url("assets/reference-icons/crop.png") !important;
            mask-image: url("assets/reference-icons/crop.png") !important;
  }

  .integrated-right-nav button[data-nav-icon="type"]::before {
    -webkit-mask-image: url("assets/reference-icons/text.png") !important;
            mask-image: url("assets/reference-icons/text.png") !important;
  }

  .integrated-right-nav button[data-nav-icon="link"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.7 15.3 7.3 14l6.7-6.7a4 4 0 0 1 5.7 5.7l-2.4 2.4-1.4-1.4 2.4-2.4a2 2 0 1 0-2.9-2.9l-6.7 6.6Zm-4.4-4.4 2.4-2.4 1.4 1.4-2.4 2.4a2 2 0 1 0 2.9 2.9l6.7-6.7 1.4 1.4-6.7 6.7A4 4 0 0 1 4.3 10.9Z'/%3E%3C/svg%3E") !important;
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.7 15.3 7.3 14l6.7-6.7a4 4 0 0 1 5.7 5.7l-2.4 2.4-1.4-1.4 2.4-2.4a2 2 0 1 0-2.9-2.9l-6.7 6.6Zm-4.4-4.4 2.4-2.4 1.4 1.4-2.4 2.4a2 2 0 1 0 2.9 2.9l6.7-6.7 1.4 1.4-6.7 6.7A4 4 0 0 1 4.3 10.9Z'/%3E%3C/svg%3E") !important;
  }
}

/* v186: app-shell level right rail, guaranteed above the canvas. */
@media (max-width: 760px) {
  .app-frame-right-nav {
    position: fixed !important;
    right: 0 !important;
    top: 50px !important;
    bottom: 56px !important;
    z-index: 2147483000 !important;
    display: grid !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    width: 48px !important;
    padding: 4px 0 !important;
    border-left: 1px solid rgba(25,28,33,0.12) !important;
    background: rgba(250,250,251,0.98) !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  .app-frame-right-nav button {
    position: relative !important;
    display: grid !important;
    width: 48px !important;
    height: 42px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .app-frame-right-nav button::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background: #60666e !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
            mask-size: contain !important;
  }

  .app-frame-right-nav button[data-nav-icon="layers"]::before { -webkit-mask-image: url("assets/reference-icons/dock-layers.png") !important; mask-image: url("assets/reference-icons/dock-layers.png") !important; }
  .app-frame-right-nav button[data-nav-icon="sliders"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8v2H4V7Zm11-2h2v6h-2V9h-3V7h3V5ZM4 15h3v2H4v-2Zm6-2h2v6h-2v-2h10v-2H10v-2Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8v2H4V7Zm11-2h2v6h-2V9h-3V7h3V5ZM4 15h3v2H4v-2Zm6-2h2v6h-2v-2h10v-2H10v-2Z'/%3E%3C/svg%3E") !important; }
  .app-frame-right-nav button[data-nav-icon="ruler"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17 17 4l3 3L7 20H4v-3Zm3.5-.9 8.6-8.6-1.1-1.1-8.6 8.6 1.1 1.1Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17 17 4l3 3L7 20H4v-3Zm3.5-.9 8.6-8.6-1.1-1.1-8.6 8.6 1.1 1.1Z'/%3E%3C/svg%3E") !important; }
  .app-frame-right-nav button[data-nav-icon="comment"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Zm2 2v7.2L8.2 13H17V7H7Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Zm2 2v7.2L8.2 13H17V7H7Z'/%3E%3C/svg%3E") !important; }
  .app-frame-right-nav button[data-nav-icon="copy"]::before { -webkit-mask-image: url("assets/reference-icons/duplicate.png") !important; mask-image: url("assets/reference-icons/duplicate.png") !important; }
  .app-frame-right-nav button[data-nav-icon="scissors"]::before { -webkit-mask-image: url("assets/reference-icons/crop.png") !important; mask-image: url("assets/reference-icons/crop.png") !important; }
  .app-frame-right-nav button[data-nav-icon="type"]::before { -webkit-mask-image: url("assets/reference-icons/text.png") !important; mask-image: url("assets/reference-icons/text.png") !important; }
  .app-frame-right-nav button[data-nav-icon="link"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.7 15.3 7.3 14l6.7-6.7a4 4 0 0 1 5.7 5.7l-2.4 2.4-1.4-1.4 2.4-2.4a2 2 0 1 0-2.9-2.9l-6.7 6.6Zm-4.4-4.4 2.4-2.4 1.4 1.4-2.4 2.4a2 2 0 1 0 2.9 2.9l6.7-6.7 1.4 1.4-6.7 6.7A4 4 0 0 1 4.3 10.9Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.7 15.3 7.3 14l6.7-6.7a4 4 0 0 1 5.7 5.7l-2.4 2.4-1.4-1.4 2.4-2.4a2 2 0 1 0-2.9-2.9l-6.7 6.6Zm-4.4-4.4 2.4-2.4 1.4 1.4-2.4 2.4a2 2 0 1 0 2.9 2.9l6.7-6.7 1.4 1.4-6.7 6.7A4 4 0 0 1 4.3 10.9Z'/%3E%3C/svg%3E") !important; }
}

/* v196: final end-of-file override for supplied icons and integrated iOS rails. */
@media (max-width: 1400px) {
  :root { --ios-frame-width: min(100vw, 390px); }

  html,
  body,
  .app-shell,
  .workspace {
    width: var(--ios-frame-width) !important;
    max-width: var(--ios-frame-width) !important;
    overflow-x: hidden !important;
  }

  .topbar {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: var(--ios-frame-width) !important;
    height: 50px !important;
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: 48px 92px minmax(0, 1fr) 46px !important;
    gap: 0 !important;
    padding: 0 !important;
    background: rgba(250, 250, 251, 0.98) !important;
    border-bottom: 1px solid rgba(27, 31, 36, 0.1) !important;
    box-shadow: none !important;
  }

  .document-title h1 {
    color: #22262b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 50px auto 56px 0 !important;
    width: 48px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(27, 31, 36, 0.1) !important;
    background: rgba(250, 250, 251, 0.98) !important;
    box-shadow: none !important;
  }

  .sidebar .brand,
  .sidebar .panel h2,
  .color-widget,
  .sidebar-popout {
    display: none !important;
  }

  .sidebar .panel {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .tool-grid {
    display: grid !important;
    grid-template-columns: 48px !important;
    grid-auto-rows: 40px !important;
    width: 48px !important;
    gap: 0 !important;
    padding: 4px 0 !important;
  }

  .tool,
  .app-frame-right-nav button,
  .bottom-workflows button {
    overflow: hidden !important;
    text-indent: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .tool {
    display: grid !important;
    width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .tool::before,
  .app-frame-right-nav button::before,
  .bottom-workflows button::before,
  .history-actions::before,
  .history-actions::after,
  .ios-menu-button::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    text-indent: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    -webkit-mask: none !important;
            mask: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    opacity: 0.9 !important;
    transform: none !important;
  }

  .tool.is-active {
    background: #1473e6 !important;
  }

  .tool.is-active::before {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
  }

  .tool[data-tool="select"]::before { background-image: url("assets/sent-icons/select.png") !important; }
  .tool[data-tool="hand"]::before { background-image: url("assets/sent-icons/hand.png") !important; }
  .tool[data-tool="eyedropper"]::before { background-image: url("assets/sent-icons/eyedropper.png") !important; }
  .tool[data-tool="rect"]::before { background-image: url("assets/sent-icons/rectangle.png") !important; }
  .tool[data-tool="ellipse"]::before { background-image: url("assets/sent-icons/ellipse.png") !important; }
  .tool[data-tool="line"]::before { background-image: url("assets/sent-icons/line.png") !important; }
  .tool[data-tool="pen"]::before { background-image: url("assets/sent-icons/pen.png") !important; }
  .tool[data-tool="text"]::before { background-image: url("assets/sent-icons/type.png") !important; }
  .tool[data-tool="brush"]::before { background-image: url("assets/sent-icons/brush.png") !important; }
  .tool[data-tool="eraser"]::before { background-image: url("assets/sent-icons/eraser.png") !important; }
  .tool[data-tool="dimension"]::before { background-image: url("assets/sent-icons/ruler.png") !important; }
  .tool[data-tool="crop"]::before { background-image: url("assets/sent-icons/crop.png") !important; }
  .tool[data-tool="area"]::before { background-image: url("assets/sent-icons/polygon.png") !important; }
  .tool[data-tool="redaction"]::before { background-image: url("assets/sent-icons/pages.png") !important; }
  .tool[data-tool="wall"]::before { background-image: url("assets/sent-icons/cube.png") !important; }

  .app-frame-right-nav {
    position: fixed !important;
    inset: 50px auto 56px calc(var(--ios-frame-width) - 48px) !important;
    z-index: 2147483000 !important;
    display: grid !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    width: 48px !important;
    padding: 4px 0 !important;
    border-left: 1px solid rgba(27, 31, 36, 0.1) !important;
    background: rgba(250, 250, 251, 0.98) !important;
    box-shadow: none !important;
  }

  .app-frame-right-nav button {
    display: grid !important;
    width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
  }

  .app-frame-right-nav button::before {
    width: 22px !important;
    height: 22px !important;
    background-color: transparent !important;
    filter: none !important;
  }

  .app-frame-right-nav button[data-nav-icon="layers"]::before { background-image: url("assets/sent-icons/layers.png") !important; }
  .app-frame-right-nav button[data-nav-icon="sliders"]::before { background-image: url("assets/sent-icons/sliders.png") !important; }
  .app-frame-right-nav button[data-nav-icon="ruler"]::before { background-image: url("assets/sent-icons/ruler.png") !important; }
  .app-frame-right-nav button[data-nav-icon="comment"]::before { background-image: url("assets/sent-icons/comment.png") !important; }
  .app-frame-right-nav button[data-nav-icon="copy"]::before { background-image: url("assets/sent-icons/duplicate.png") !important; }
  .app-frame-right-nav button[data-nav-icon="scissors"]::before { background-image: url("assets/sent-icons/scissors.png") !important; }
  .app-frame-right-nav button[data-nav-icon="type"]::before { background-image: url("assets/sent-icons/type.png") !important; }
  .app-frame-right-nav button[data-nav-icon="link"]::before { background-image: url("assets/sent-icons/link.png") !important; }

  .canvas-wrap {
    position: fixed !important;
    inset: 50px auto 56px 48px !important;
    width: calc(var(--ios-frame-width) - 96px) !important;
    min-height: 0 !important;
    padding: 72px 28px 32px !important;
  }

  .bottom-workflows {
    position: fixed !important;
    inset: auto auto 0 48px !important;
    z-index: 2147483000 !important;
    width: calc(var(--ios-frame-width) - 96px) !important;
    height: 56px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(27, 31, 36, 0.1) !important;
    border-radius: 0 !important;
    background: rgba(250, 250, 251, 0.98) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="preview3d"] {
    display: none !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    display: grid !important;
  }

  .bottom-workflows button {
    position: relative !important;
    height: 56px !important;
    min-width: 0 !important;
    padding: 6px 0 5px !important;
    grid-template-rows: 25px 16px !important;
    gap: 2px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .bottom-workflows button::before {
    position: static !important;
    width: 22px !important;
    height: 22px !important;
    opacity: 0.9 !important;
    filter: none !important;
  }

  .bottom-workflows button::after {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 14px !important;
    text-indent: 0 !important;
    color: #505862 !important;
    background: transparent !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .bottom-workflows button[data-workflow="select"]::before { background-image: url("assets/sent-icons/layers.png") !important; }
  .bottom-workflows button[data-workflow="adjust"]::before { background-image: url("assets/sent-icons/style.png") !important; }
  .bottom-workflows button[data-workflow="vector"]::before { background-image: url("assets/sent-icons/folder.png") !important; }
  .bottom-workflows button[data-workflow="build"]::before { background-image: url("assets/sent-icons/cube.png") !important; }
  .bottom-workflows button[data-workflow="select"]::after { content: "Layers" !important; }
  .bottom-workflows button[data-workflow="adjust"]::after { content: "Style" !important; }
  .bottom-workflows button[data-workflow="vector"]::after { content: "Library" !important; }
  .bottom-workflows button[data-workflow="build"]::after { content: "Build" !important; }

  .bottom-workflows button.is-active {
    background: rgba(20, 115, 230, 0.12) !important;
  }

  .bottom-workflows button.is-active::before {
    filter: invert(39%) sepia(94%) saturate(1838%) hue-rotate(195deg) brightness(94%) contrast(94%) !important;
  }

  .bottom-workflows button.is-active::after {
    color: #1473e6 !important;
  }
}

/* v194: final sent-icon pass. Keep the app chrome integrated and use the user's supplied icon sheet. */
@media (max-width: 1400px) {
  html,
  body,
  .app-shell,
  .workspace {
    width: var(--ios-frame-width, min(100vw, 390px)) !important;
    max-width: var(--ios-frame-width, min(100vw, 390px)) !important;
    overflow-x: hidden !important;
  }

  .topbar {
    left: 0 !important;
    right: auto !important;
    width: var(--ios-frame-width, min(100vw, 390px)) !important;
    grid-template-columns: 48px 96px minmax(0, 1fr) 48px !important;
  }

  .document-title h1 {
    max-width: 132px !important;
    color: #22262b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  .history-actions {
    width: 88px !important;
    height: 42px !important;
    margin: 4px 0 0 !important;
    border-left: 1px solid rgba(27, 31, 36, 0.1) !important;
    border-right: 1px solid rgba(27, 31, 36, 0.1) !important;
  }

  .history-actions::before,
  .history-actions::after,
  .ios-menu-button::before,
  .tool::before,
  .app-frame-right-nav button::before,
  .bottom-workflows button::before {
    content: "" !important;
    display: block !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    -webkit-mask: none !important;
            mask: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  .history-actions::before {
    background-image: url("assets/sent-icons/rotate-hand.png") !important;
  }

  .history-actions::after {
    background-image: url("assets/sent-icons/rotate-view.png") !important;
  }

  .ios-menu-button::before {
    width: 22px !important;
    height: 22px !important;
    background-image: url("assets/sent-icons/more.png") !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 50px !important;
    bottom: 56px !important;
    width: 48px !important;
    padding: 0 !important;
    border-right: 1px solid rgba(27, 31, 36, 0.1) !important;
    background: rgba(250, 250, 251, 0.98) !important;
    box-shadow: none !important;
  }

  .tool-grid {
    display: grid !important;
    grid-auto-rows: 40px !important;
    width: 48px !important;
    padding: 4px 0 !important;
    gap: 0 !important;
  }

  .tool {
    display: grid !important;
    width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
  }

  .tool::before {
    width: 23px !important;
    height: 23px !important;
    opacity: 0.9 !important;
    filter: none !important;
  }

  .tool.is-active {
    background: #1473e6 !important;
  }

  .tool.is-active::before {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
  }

  .tool[data-tool="select"]::before { background-image: url("assets/sent-icons/select.png") !important; }
  .tool[data-tool="hand"]::before { background-image: url("assets/sent-icons/hand.png") !important; }
  .tool[data-tool="eyedropper"]::before { background-image: url("assets/sent-icons/eyedropper.png") !important; }
  .tool[data-tool="rect"]::before { background-image: url("assets/sent-icons/rectangle.png") !important; }
  .tool[data-tool="ellipse"]::before { background-image: url("assets/sent-icons/ellipse.png") !important; }
  .tool[data-tool="line"]::before { background-image: url("assets/sent-icons/line.png") !important; }
  .tool[data-tool="pen"]::before { background-image: url("assets/sent-icons/pen.png") !important; }
  .tool[data-tool="text"]::before { background-image: url("assets/sent-icons/type.png") !important; }
  .tool[data-tool="brush"]::before { background-image: url("assets/sent-icons/brush.png") !important; }
  .tool[data-tool="eraser"]::before { background-image: url("assets/sent-icons/eraser.png") !important; }
  .tool[data-tool="dimension"]::before { background-image: url("assets/sent-icons/ruler.png") !important; }
  .tool[data-tool="crop"]::before { background-image: url("assets/sent-icons/crop.png") !important; }
  .tool[data-tool="area"]::before { background-image: url("assets/sent-icons/polygon.png") !important; }
  .tool[data-tool="redaction"]::before { background-image: url("assets/sent-icons/pages.png") !important; }
  .tool[data-tool="wall"]::before { background-image: url("assets/sent-icons/cube.png") !important; }

  .app-frame-right-nav {
    left: calc(var(--ios-frame-width, min(100vw, 390px)) - 48px) !important;
    right: auto !important;
    top: 50px !important;
    bottom: 56px !important;
    width: 48px !important;
    border-left: 1px solid rgba(27, 31, 36, 0.1) !important;
    background: rgba(250, 250, 251, 0.98) !important;
    box-shadow: none !important;
  }

  .app-frame-right-nav button {
    display: grid !important;
    width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    place-items: center !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
  }

  .app-frame-right-nav button::before {
    width: 22px !important;
    height: 22px !important;
    opacity: 0.82 !important;
    filter: none !important;
  }

  .app-frame-right-nav button[data-nav-icon="layers"]::before { background-image: url("assets/sent-icons/layers.png") !important; }
  .app-frame-right-nav button[data-nav-icon="sliders"]::before { background-image: url("assets/sent-icons/sliders.png") !important; }
  .app-frame-right-nav button[data-nav-icon="ruler"]::before { background-image: url("assets/sent-icons/ruler.png") !important; }
  .app-frame-right-nav button[data-nav-icon="comment"]::before { background-image: url("assets/sent-icons/comment.png") !important; }
  .app-frame-right-nav button[data-nav-icon="copy"]::before { background-image: url("assets/sent-icons/duplicate.png") !important; }
  .app-frame-right-nav button[data-nav-icon="scissors"]::before { background-image: url("assets/sent-icons/scissors.png") !important; }
  .app-frame-right-nav button[data-nav-icon="type"]::before { background-image: url("assets/sent-icons/type.png") !important; }
  .app-frame-right-nav button[data-nav-icon="link"]::before { background-image: url("assets/sent-icons/link.png") !important; }

  .bottom-workflows {
    left: 48px !important;
    right: auto !important;
    bottom: 0 !important;
    width: calc(var(--ios-frame-width, min(100vw, 390px)) - 96px) !important;
    height: 56px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    border-top: 1px solid rgba(27, 31, 36, 0.1) !important;
    border-radius: 0 !important;
    background: rgba(250, 250, 251, 0.98) !important;
    box-shadow: none !important;
  }

  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="preview3d"] {
    display: none !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="build"] {
    display: grid !important;
  }

  .bottom-workflows button {
    position: relative !important;
    height: 56px !important;
    min-width: 0 !important;
    padding: 6px 0 5px !important;
    grid-template-rows: 25px 16px !important;
    gap: 2px !important;
    place-items: center !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .bottom-workflows button::before {
    position: static !important;
    width: 23px !important;
    height: 23px !important;
    opacity: 0.88 !important;
    filter: none !important;
  }

  .bottom-workflows button::after {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 14px !important;
    color: #505862 !important;
    background: transparent !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
  }

  .bottom-workflows button[data-workflow="select"]::before { background-image: url("assets/sent-icons/layers.png") !important; }
  .bottom-workflows button[data-workflow="adjust"]::before { background-image: url("assets/sent-icons/style.png") !important; }
  .bottom-workflows button[data-workflow="vector"]::before { background-image: url("assets/sent-icons/folder.png") !important; }
  .bottom-workflows button[data-workflow="build"]::before { background-image: url("assets/sent-icons/cube.png") !important; }
  .bottom-workflows button[data-workflow="select"]::after { content: "Layers" !important; }
  .bottom-workflows button[data-workflow="adjust"]::after { content: "Style" !important; }
  .bottom-workflows button[data-workflow="vector"]::after { content: "Library" !important; }
  .bottom-workflows button[data-workflow="build"]::after { content: "Build" !important; }

  .bottom-workflows button.is-active {
    background: rgba(20, 115, 230, 0.12) !important;
  }

  .bottom-workflows button.is-active::before {
    filter: invert(39%) sepia(94%) saturate(1838%) hue-rotate(195deg) brightness(94%) contrast(94%) !important;
  }

  .bottom-workflows button.is-active::after {
    color: #1473e6 !important;
    background: transparent !important;
  }
}

/* v195: stop hidden text from shifting pseudo-icon backgrounds off the rails. */
@media (max-width: 1400px) {
  .tool,
  .app-frame-right-nav button,
  .bottom-workflows button {
    text-indent: 0 !important;
    overflow: hidden !important;
  }

  .tool,
  .app-frame-right-nav button {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .tool::before,
  .app-frame-right-nav button::before,
  .bottom-workflows button::before,
  .bottom-workflows button::after,
  .history-actions::before,
  .history-actions::after,
  .ios-menu-button::before {
    text-indent: 0 !important;
    transform: none !important;
  }

  .tool::before {
    width: 24px !important;
    height: 24px !important;
    background-size: 24px 24px !important;
  }

  .app-frame-right-nav button::before,
  .bottom-workflows button::before {
    width: 23px !important;
    height: 23px !important;
    background-size: 23px 23px !important;
  }

  .bottom-workflows button {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .bottom-workflows button::after {
    color: #505862 !important;
    font-size: 9px !important;
    line-height: 14px !important;
  }

  .bottom-workflows button.is-active::after {
    color: #1473e6 !important;
  }
}

/* v188: phone-width integrated frame inside desktop preview shells. */
@media (max-width: 1400px) {
  :root {
    --ios-frame-width: min(100vw, 390px);
  }

  html,
  body {
    width: var(--ios-frame-width) !important;
    max-width: var(--ios-frame-width) !important;
    overflow-x: hidden !important;
  }

  .app-shell,
  .workspace {
    width: var(--ios-frame-width) !important;
    max-width: var(--ios-frame-width) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .topbar {
    width: var(--ios-frame-width) !important;
    right: auto !important;
  }

  .ios-menu-button {
    left: calc(var(--ios-frame-width) - 46px) !important;
    right: auto !important;
  }

  .topbar .zoom-actions {
    left: calc(var(--ios-frame-width) - 90px) !important;
    right: auto !important;
  }

  .app-frame-right-nav {
    left: calc(var(--ios-frame-width) - 48px) !important;
    right: auto !important;
  }

  .canvas-wrap {
    left: 48px !important;
    right: auto !important;
    width: calc(var(--ios-frame-width) - 96px) !important;
  }

  .bottom-workflows {
    left: 48px !important;
    right: auto !important;
    width: calc(var(--ios-frame-width) - 96px) !important;
  }

  .pasteboard-frame {
    left: 28px !important;
    right: auto !important;
    width: calc(var(--ios-frame-width) - 152px) !important;
  }

  #artboard {
    width: calc(var(--ios-frame-width) - 152px) !important;
    max-width: calc(var(--ios-frame-width) - 152px) !important;
  }
}

/* v189: final integrated top and bottom bar polish. */
@media (max-width: 1400px) {
  .topbar .zoom-actions,
  .topbar .zoom-actions #zoomLabel {
    display: none !important;
    visibility: hidden !important;
  }

  body::after {
    left: calc(var(--ios-frame-width) / 2) !important;
    width: 112px !important;
    font-size: 15px !important;
    font-weight: 650 !important;
  }

  .ios-menu-button {
    left: calc(var(--ios-frame-width) - 46px) !important;
    width: 46px !important;
  }

  .app-frame-right-nav {
    top: 50px !important;
  }

  .bottom-workflows {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    left: 48px !important;
    right: auto !important;
    bottom: 0 !important;
    width: calc(var(--ios-frame-width) - 96px) !important;
    height: 56px !important;
  }

  .bottom-workflows button[data-workflow] {
    display: none !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"] {
    position: relative !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .bottom-workflows button[data-workflow="select"]::after { content: "Layers" !important; }
  .bottom-workflows button[data-workflow="adjust"]::after { content: "Style" !important; }
  .bottom-workflows button[data-workflow="vector"]::after { content: "Library" !important; }

  .bottom-workflows button::before {
    top: 8px !important;
    width: 20px !important;
    height: 20px !important;
  }

  .bottom-workflows button::after {
    left: 0 !important;
    right: 0 !important;
    bottom: 6px !important;
    width: auto !important;
    height: 13px !important;
    color: #6f757c !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 13px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .bottom-workflows button.is-active {
    background: rgba(22,119,220,0.1) !important;
  }

  .bottom-workflows button.is-active::before,
  .bottom-workflows button.is-active::after {
    color: #1677dc !important;
    background-color: #1677dc !important;
  }

  .bottom-workflows button.is-active::after {
    background-color: transparent !important;
  }
}

/* v190: remove remaining floating top controls in integrated mode. */
@media (max-width: 1400px) {
  .mobile-share-actions,
  #mobileShareButton,
  #duplicateButton,
  #deleteButton,
  .export-actions,
  .view-actions,
  .mode-switcher,
  .export-status {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .topbar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    grid-template-columns: 48px 92px minmax(0, 1fr) 46px !important;
    background: rgba(250,250,251,0.98) !important;
    border-bottom: 1px solid rgba(25,28,33,0.12) !important;
    box-shadow: none !important;
  }

  .app-frame-right-nav {
    top: 50px !important;
  }

  .workspace::before,
  .workspace::after,
  .topbar::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* v193: use the exact icon sheet supplied by the user. */
@media (max-width: 1400px) {
  .tool::before,
  .bottom-workflows button::before,
  .app-frame-right-nav button::before,
  .history-actions::before,
  .history-actions::after,
  .ios-menu-button::before {
    -webkit-mask: none !important;
            mask: none !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    filter: none !important;
  }

  .tool::before {
    width: 21px !important;
    height: 21px !important;
  }

  .tool[data-tool="select"]::before { background-image: url("assets/sent-icons/select.png") !important; }
  .tool[data-tool="hand"]::before { background-image: url("assets/sent-icons/hand.png") !important; }
  .tool[data-tool="eyedropper"]::before { background-image: url("assets/sent-icons/eyedropper.png") !important; }
  .tool[data-tool="rect"]::before { background-image: url("assets/sent-icons/rectangle.png") !important; }
  .tool[data-tool="ellipse"]::before { background-image: url("assets/sent-icons/ellipse.png") !important; }
  .tool[data-tool="line"]::before { background-image: url("assets/sent-icons/line.png") !important; }
  .tool[data-tool="pen"]::before { background-image: url("assets/sent-icons/pen.png") !important; }
  .tool[data-tool="text"]::before { background-image: url("assets/sent-icons/type.png") !important; }
  .tool[data-tool="brush"]::before { background-image: url("assets/sent-icons/brush.png") !important; }
  .tool[data-tool="eraser"]::before { background-image: url("assets/sent-icons/eraser.png") !important; }
  .tool[data-tool="dimension"]::before { background-image: url("assets/sent-icons/ruler.png") !important; }
  .tool[data-tool="crop"]::before { background-image: url("assets/sent-icons/crop.png") !important; }

  .tool.is-active::before {
    filter: brightness(0) invert(1) !important;
  }

  .app-frame-right-nav button::before {
    width: 20px !important;
    height: 20px !important;
  }

  .app-frame-right-nav button[data-nav-icon="layers"]::before { background-image: url("assets/sent-icons/layers.png") !important; }
  .app-frame-right-nav button[data-nav-icon="sliders"]::before { background-image: url("assets/sent-icons/sliders.png") !important; }
  .app-frame-right-nav button[data-nav-icon="ruler"]::before { background-image: url("assets/sent-icons/ruler.png") !important; }
  .app-frame-right-nav button[data-nav-icon="comment"]::before { background-image: url("assets/sent-icons/comment.png") !important; }
  .app-frame-right-nav button[data-nav-icon="copy"]::before { background-image: url("assets/sent-icons/duplicate.png") !important; }
  .app-frame-right-nav button[data-nav-icon="scissors"]::before { background-image: url("assets/sent-icons/scissors.png") !important; }
  .app-frame-right-nav button[data-nav-icon="type"]::before { background-image: url("assets/sent-icons/type.png") !important; }
  .app-frame-right-nav button[data-nav-icon="link"]::before { background-image: url("assets/sent-icons/link.png") !important; }

  .bottom-workflows button::before {
    width: 20px !important;
    height: 20px !important;
  }

  .bottom-workflows button[data-workflow="select"]::before { background-image: url("assets/sent-icons/layers.png") !important; }
  .bottom-workflows button[data-workflow="adjust"]::before { background-image: url("assets/sent-icons/style.png") !important; }
  .bottom-workflows button[data-workflow="vector"]::before { background-image: url("assets/sent-icons/folder.png") !important; }
  .bottom-workflows button[data-workflow="type"]::before { background-image: url("assets/sent-icons/type.png") !important; }
  .bottom-workflows button[data-workflow="measure"]::before { background-image: url("assets/sent-icons/ruler.png") !important; }
  .bottom-workflows button[data-workflow="pdf"]::before { background-image: url("assets/sent-icons/pages.png") !important; }
  .bottom-workflows button[data-workflow="build"]::before { background-image: url("assets/sent-icons/cube.png") !important; }
  .bottom-workflows button[data-workflow="preview3d"]::before { background-image: url("assets/sent-icons/orbit.png") !important; }

  .bottom-workflows button.is-active::before {
    filter: invert(42%) sepia(80%) saturate(1742%) hue-rotate(191deg) brightness(91%) contrast(92%) !important;
    background-color: transparent !important;
  }

  .ios-menu-button::before {
    background-image: url("assets/sent-icons/more.png") !important;
  }
}

/* v187: apply the integrated prototype frame in wide preview shells too. */
@media (max-width: 1400px) {
  .right-quickbar,
  .integrated-right-nav {
    display: none !important;
  }

  .app-frame-right-nav {
    position: fixed !important;
    right: 0 !important;
    top: 50px !important;
    bottom: 56px !important;
    z-index: 2147483000 !important;
    display: grid !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    width: 48px !important;
    padding: 4px 0 !important;
    border-left: 1px solid rgba(25,28,33,0.12) !important;
    background: rgba(250,250,251,0.98) !important;
  }

  .app-frame-right-nav button {
    display: grid !important;
    width: 48px !important;
    height: 42px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  .app-frame-right-nav button::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background: #60666e !important;
    -webkit-mask-position: center !important;
            mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
            mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
            mask-size: contain !important;
  }

  .app-frame-right-nav button[data-nav-icon="layers"]::before { -webkit-mask-image: url("assets/reference-icons/dock-layers.png") !important; mask-image: url("assets/reference-icons/dock-layers.png") !important; }
  .app-frame-right-nav button[data-nav-icon="sliders"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8v2H4V7Zm11-2h2v6h-2V9h-3V7h3V5ZM4 15h3v2H4v-2Zm6-2h2v6h-2v-2h10v-2H10v-2Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h8v2H4V7Zm11-2h2v6h-2V9h-3V7h3V5ZM4 15h3v2H4v-2Zm6-2h2v6h-2v-2h10v-2H10v-2Z'/%3E%3C/svg%3E") !important; }
  .app-frame-right-nav button[data-nav-icon="ruler"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17 17 4l3 3L7 20H4v-3Zm3.5-.9 8.6-8.6-1.1-1.1-8.6 8.6 1.1 1.1Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 17 17 4l3 3L7 20H4v-3Zm3.5-.9 8.6-8.6-1.1-1.1-8.6 8.6 1.1 1.1Z'/%3E%3C/svg%3E") !important; }
  .app-frame-right-nav button[data-nav-icon="comment"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Zm2 2v7.2L8.2 13H17V7H7Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5h14v10H9l-4 4V5Zm2 2v7.2L8.2 13H17V7H7Z'/%3E%3C/svg%3E") !important; }
  .app-frame-right-nav button[data-nav-icon="copy"]::before { -webkit-mask-image: url("assets/reference-icons/duplicate.png") !important; mask-image: url("assets/reference-icons/duplicate.png") !important; }
  .app-frame-right-nav button[data-nav-icon="scissors"]::before { -webkit-mask-image: url("assets/reference-icons/crop.png") !important; mask-image: url("assets/reference-icons/crop.png") !important; }
  .app-frame-right-nav button[data-nav-icon="type"]::before { -webkit-mask-image: url("assets/reference-icons/text.png") !important; mask-image: url("assets/reference-icons/text.png") !important; }
  .app-frame-right-nav button[data-nav-icon="link"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.7 15.3 7.3 14l6.7-6.7a4 4 0 0 1 5.7 5.7l-2.4 2.4-1.4-1.4 2.4-2.4a2 2 0 1 0-2.9-2.9l-6.7 6.6Zm-4.4-4.4 2.4-2.4 1.4 1.4-2.4 2.4a2 2 0 1 0 2.9 2.9l6.7-6.7 1.4 1.4-6.7 6.7A4 4 0 0 1 4.3 10.9Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.7 15.3 7.3 14l6.7-6.7a4 4 0 0 1 5.7 5.7l-2.4 2.4-1.4-1.4 2.4-2.4a2 2 0 1 0-2.9-2.9l-6.7 6.6Zm-4.4-4.4 2.4-2.4 1.4 1.4-2.4 2.4a2 2 0 1 0 2.9 2.9l6.7-6.7 1.4 1.4-6.7 6.7A4 4 0 0 1 4.3 10.9Z'/%3E%3C/svg%3E") !important; }
}

/* v291: precise Transform controls, artboard view settings, and expanded local asset catalogs. */
.tool[data-tool="transform"]::before {
  background-image: url("assets/sent-icons/transform.png") !important;
}

.transform-reference-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  align-items: center;
  gap: 10px;
}

.transform-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, 18px);
  gap: 3px;
  justify-content: end;
}

.transform-reference-grid button {
  position: relative;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 1px solid #c8cdd4;
  border-radius: 2px;
  background: #fff;
}

.transform-reference-grid button::after {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #8b929b;
  content: "";
}

.transform-reference-grid button.is-active {
  border-color: #1677dc;
  background: #eaf3ff;
}

.transform-reference-grid button.is-active::after {
  background: #1677dc;
}

.transform-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.transform-option input {
  width: 17px !important;
  min-width: 17px;
  height: 17px !important;
}

.transform-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.flyout-transform-grid,
.artboard-grid-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.artboard-view-toggles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #d5d9df;
  border-radius: 4px;
}

.artboard-view-toggles button {
  display: grid;
  min-width: 0;
  min-height: 48px;
  padding: 5px 2px 4px;
  place-items: center;
  gap: 2px;
  border: 0;
  border-right: 1px solid #d5d9df;
  border-radius: 0;
  background: #fff;
  color: #5b626b;
  font-size: 9px;
  font-weight: 600;
}

.artboard-view-toggles button:last-child {
  border-right: 0;
}

.artboard-view-toggles button img {
  width: 17px;
  height: 17px;
  opacity: 0.72;
}

.artboard-view-toggles button.is-active {
  background: #eaf3ff;
  color: #126bc7;
}

.artboard-view-toggles button.is-active img {
  filter: invert(38%) sepia(97%) saturate(1286%) hue-rotate(187deg) brightness(89%) contrast(91%);
  opacity: 1;
}

.canvas-wrap.rulers-hidden .canvas-rulers,
.canvas-rulers[hidden] {
  display: none !important;
}

.library-catalog-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
}

.library-catalog-tools input {
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #d5d9df;
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
}

.library-catalog-tools output {
  color: #747b84;
  font-size: 10px;
  white-space: nowrap;
}

.library-background-grid,
.stock-icon-grid,
.emoji-library-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.catalog-asset {
  display: grid;
  min-width: 0;
  min-height: 76px;
  padding: 7px 4px 5px;
  place-items: center;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  border: 1px solid #d9dde3;
  border-radius: 4px;
  background: #fff;
  color: #343940;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.catalog-asset img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  opacity: 0.82;
}

.catalog-asset > span:last-child {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.background-preview {
  display: block;
  width: 100%;
  height: 38px;
  border: 1px solid rgba(25, 28, 33, 0.08);
  border-radius: 2px;
}

.background-preview[data-fill-mode="dot"] {
  background-size: 10px 10px !important;
}

.background-preview[data-fill-mode="checker"] {
  background-size: 14px 14px !important;
}

.emoji-asset strong {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 430px) {
  .library-background-grid,
  .stock-icon-grid,
  .emoji-library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .catalog-asset {
    min-height: 72px;
    padding-inline: 2px;
  }
}

/* Refined camera-stop actions: two labeled commands and three compact icon controls. */
.preview3d-walkthrough-stops > li {
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(20, 25, 34, 0.1);
  border-radius: 8px;
  background: var(--panel, #fff);
}

.preview3d-stop-heading {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 7px;
}

.preview3d-stop-role {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(22, 124, 128, 0.1);
  color: #126d71;
  font-size: 9px;
  font-weight: 700;
}

.preview3d-stop-name {
  height: 30px;
  padding-inline: 8px;
  border-color: transparent;
  border-radius: 5px;
  background: rgba(20, 25, 34, 0.035);
  font-size: 12px;
  font-weight: 600;
}

.preview3d-stop-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) repeat(3, 30px);
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(20, 25, 34, 0.09);
  border-radius: 8px;
  background: rgba(20, 25, 34, 0.035);
}

.preview3d-stop-actions button {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink, #141922);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.preview3d-stop-actions button img {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.preview3d-stop-actions button[data-walkthrough-stop-action="view"] {
  justify-content: flex-start;
  padding-inline: 7px;
}

.preview3d-stop-actions button[data-walkthrough-stop-action="capture"] {
  background: rgba(22, 124, 128, 0.11);
  color: #11676b;
}

.preview3d-stop-actions button.preview3d-stop-action-icon {
  width: 30px;
  padding: 0;
}

.preview3d-stop-actions button.preview3d-stop-action-remove {
  color: #9b4242;
}

.preview3d-stop-actions button:not(:disabled):hover {
  background: rgba(22, 124, 128, 0.14);
}

.preview3d-stop-actions button.preview3d-stop-action-remove:not(:disabled):hover {
  background: rgba(177, 58, 58, 0.1);
  color: #a72f2f;
}

.preview3d-stop-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.preview3d-stop-name:focus-visible,
.preview3d-stop-actions button:focus-visible {
  outline: 2px solid var(--accent-2, #167c80);
  outline-offset: 1px;
}

html[data-theme="dark"] .preview3d-walkthrough-stops > li {
  border-color: rgba(220, 230, 240, 0.14);
  background: #202a34;
}

html[data-theme="dark"] .preview3d-stop-name,
html[data-theme="dark"] .preview3d-stop-actions {
  border-color: rgba(220, 230, 240, 0.12);
  background: rgba(220, 230, 240, 0.055);
  color: #edf2f6;
}

html[data-theme="dark"] .preview3d-stop-role {
  background: rgba(108, 196, 191, 0.14);
  color: #9ce0db;
}

html[data-theme="dark"] .preview3d-stop-actions button {
  color: #edf2f6;
}

html[data-theme="dark"] .preview3d-stop-actions button[data-walkthrough-stop-action="capture"] {
  background: rgba(108, 196, 191, 0.16);
  color: #a5e4df;
}

html[data-theme="dark"] .preview3d-stop-actions button.preview3d-stop-action-remove {
  color: #f0a5a5;
}

@media (max-width: 420px) {
  .preview3d-stop-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) repeat(3, 28px);
    gap: 2px;
    padding: 2px;
  }

  .preview3d-stop-actions button {
    height: 28px;
    min-height: 28px;
    gap: 4px;
    padding-inline: 4px;
    font-size: 10px;
  }

  .preview3d-stop-actions button.preview3d-stop-action-icon {
    width: 28px;
  }
}

/* Source: overrides.css */
@media (max-width: 1400px) {
  :root { --ios-frame-width: min(100vw, 390px); }

  html, body, .app-shell, .workspace {
    width: var(--ios-frame-width) !important;
    max-width: var(--ios-frame-width) !important;
    overflow-x: hidden !important;
  }

  .topbar {
    position: fixed !important;
    inset: 0 auto auto 0 !important;
    width: var(--ios-frame-width) !important;
    height: 50px !important;
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: 48px 92px minmax(0, 1fr) 46px !important;
    gap: 0 !important;
    padding: 0 !important;
    background: rgba(250, 250, 251, 0.98) !important;
    border-bottom: 1px solid rgba(27, 31, 36, 0.1) !important;
    box-shadow: none !important;
  }

  .document-title h1 {
    color: #22262b !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 50px auto 56px 0 !important;
    width: 48px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(27, 31, 36, 0.1) !important;
    background: rgba(250, 250, 251, 0.98) !important;
    box-shadow: none !important;
  }

  .sidebar .brand,
  .sidebar .panel h2,
  .color-widget,
  .sidebar-popout {
    display: none !important;
  }

  .sidebar .panel {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .tool-grid {
    display: grid !important;
    grid-template-columns: 48px !important;
    grid-auto-rows: 40px !important;
    width: 48px !important;
    gap: 0 !important;
    padding: 4px 0 !important;
  }

  .tool,
  .app-frame-right-nav button {
    overflow: hidden !important;
    text-indent: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .tool {
    display: grid !important;
    width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .tool::before,
  .app-frame-right-nav button::before,
  .history-actions::before,
  .history-actions::after,
  .ios-menu-button::before {
    content: "" !important;
    display: block !important;
    text-indent: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    -webkit-mask: none !important;
            mask: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    opacity: 0.9 !important;
    transform: none !important;
  }

  .tool::before {
    width: 24px !important;
    height: 24px !important;
  }

  .tool.is-active {
    background: #1473e6 !important;
  }

  .tool.is-active::before {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
  }

  .tool[data-tool="select"]::before { background-image: url("assets/sent-icons/select.png") !important; }
  .tool[data-tool="hand"]::before { background-image: url("assets/sent-icons/hand.png") !important; }
  .tool[data-tool="eyedropper"]::before { background-image: url("assets/sent-icons/eyedropper.png") !important; }
  .tool[data-tool="rect"]::before { background-image: url("assets/sent-icons/rectangle.png") !important; }
  .tool[data-tool="ellipse"]::before { background-image: url("assets/sent-icons/ellipse.png") !important; }
  .tool[data-tool="line"]::before { background-image: url("assets/sent-icons/line.png") !important; }
  .tool[data-tool="pen"]::before { background-image: url("assets/sent-icons/pen.png") !important; }
  .tool[data-tool="text"]::before { background-image: url("assets/sent-icons/type.png") !important; }
  .tool[data-tool="brush"]::before { background-image: url("assets/sent-icons/brush.png") !important; }
  .tool[data-tool="eraser"]::before { background-image: url("assets/sent-icons/eraser.png") !important; }
  .tool[data-tool="dimension"]::before { background-image: url("assets/sent-icons/ruler.png") !important; }
  .tool[data-tool="crop"]::before { background-image: url("assets/sent-icons/crop.png") !important; }
  .tool[data-tool="area"]::before { background-image: url("assets/sent-icons/polygon.png") !important; }
  .tool[data-tool="redaction"]::before { background-image: url("assets/sent-icons/pages.png") !important; }
  .tool[data-tool="wall"]::before { background-image: url("assets/sent-icons/cube.png") !important; }

  .app-frame-right-nav {
    position: fixed !important;
    inset: 50px auto 56px calc(var(--ios-frame-width) - 48px) !important;
    z-index: 2147483000 !important;
    display: grid !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    width: 48px !important;
    padding: 4px 0 !important;
    border-left: 1px solid rgba(27, 31, 36, 0.1) !important;
    background: rgba(250, 250, 251, 0.98) !important;
    box-shadow: none !important;
  }

  .app-frame-right-nav button {
    display: grid !important;
    width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
  }

  .app-frame-right-nav button::before {
    width: 22px !important;
    height: 22px !important;
    filter: none !important;
  }

  .app-frame-right-nav button[data-nav-icon="layers"]::before { background-image: url("assets/sent-icons/layers.png") !important; }
  .app-frame-right-nav button[data-nav-icon="sliders"]::before { background-image: url("assets/sent-icons/sliders.png") !important; }
  .app-frame-right-nav button[data-nav-icon="measure"]::before { background-image: url("assets/sent-icons/ruler.png") !important; }
  .app-frame-right-nav button[data-nav-icon="notes"]::before { background-image: url("assets/sent-icons/notes.png") !important; }
  .app-frame-right-nav button[data-nav-icon="copy"]::before { background-image: url("assets/sent-icons/duplicate.png") !important; }
  .app-frame-right-nav button[data-nav-icon="delete"]::before { background-image: url("assets/sent-icons/trash.png") !important; }
  .app-frame-right-nav button[data-nav-icon="type"]::before { background-image: url("assets/sent-icons/type.png") !important; }
  .app-frame-right-nav button[data-nav-icon="pdf"]::before { background-image: url("assets/sent-icons/page-corner.png") !important; }

  .canvas-wrap {
    position: fixed !important;
    inset: 50px auto 56px 48px !important;
    width: calc(var(--ios-frame-width) - 96px) !important;
    min-height: 0 !important;
    padding: 72px 28px 32px !important;
  }

  .bottom-workflows {
    position: fixed !important;
    inset: auto auto 0 48px !important;
    z-index: 2147483000 !important;
    width: calc(var(--ios-frame-width) - 96px) !important;
    height: 56px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(27, 31, 36, 0.1) !important;
    border-radius: 0 !important;
    background: rgba(250, 250, 251, 0.98) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .bottom-workflows button[data-workflow="select"],
  .bottom-workflows button[data-workflow="adjust"],
  .bottom-workflows button[data-workflow="vector"],
  .bottom-workflows button[data-workflow="type"],
  .bottom-workflows button[data-workflow="measure"],
  .bottom-workflows button[data-workflow="pdf"],
  .bottom-workflows button[data-workflow="build"],
  .bottom-workflows button[data-workflow="preview3d"] {
    display: grid !important;
  }

  .bottom-workflows button {
    position: relative !important;
    height: 56px !important;
    min-width: 0 !important;
    padding: 6px 0 5px !important;
    grid-template-rows: 25px 16px !important;
    gap: 2px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .bottom-workflows {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  .bottom-workflows button {
    position: relative !important;
    height: 56px !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 4px 0 3px !important;
    grid-template-rows: 24px 13px !important;
    gap: 2px !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #505862 !important;
    font-size: 9px !important;
    line-height: 13px !important;
    text-align: center !important;
  }

  .bottom-workflows button::before,
  .bottom-workflows button::after {
    content: none !important;
    display: none !important;
  }

  .bottom-workflows button img {
    width: 21px !important;
    height: 21px !important;
  }

  .bottom-workflows button span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: inherit !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .bottom-workflows button.is-active {
    background: rgba(20, 115, 230, 0.12) !important;
  }

  .bottom-workflows button.is-active::before {
    filter: invert(39%) sepia(94%) saturate(1838%) hue-rotate(195deg) brightness(94%) contrast(94%) !important;
  }

  .bottom-workflows button.is-active::after {
    color: #1473e6 !important;
  }

  .mobile-ios-sheet,
  .floating-selection-actions,
  .workflow-actions,
  .tool-options {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .workflow-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding: 8px !important;
    min-height: 42px !important;
  }

  .tool-options {
    position: fixed !important;
    left: 48px !important;
    right: 48px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .app-shell.tool-drawer-open .tool-drawer {
    display: block !important;
    inset: auto auto 56px 48px !important;
    width: calc(var(--ios-frame-width) - 96px) !important;
    height: auto !important;
    max-height: calc(100dvh - 106px - 56px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px !important;
    background: #f8f9fa !important;
    z-index: 2147483500 !important;
  }
}

/* Release 798: keep the web 3D rail fully visible and optically consistent. */
html[data-photostrator-surface="web"] body .app-frame-right-nav {
  scrollbar-color: rgba(76, 89, 102, 0.82) rgba(224, 228, 232, 0.78) !important;
}

html[data-photostrator-surface="web"] body .app-frame-right-nav .category-tool {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-photostrator-surface="web"] body .app-frame-right-nav[aria-label="3D workspace tools"] .category-tool img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  flex: 0 0 24px !important;
  object-fit: contain !important;
  transform: none !important;
}

@media screen and (max-width: 760px) {
  html[data-photostrator-surface="web"] body .app-frame-right-nav {
    bottom: 64px !important;
  }
}

html[data-photostrator-surface="web"] body.preview3d-open .preview3d-model-tool-strip button img,
html[data-photostrator-surface="web"] body.preview3d-open .preview3d-model-more button img {
  width: 17px !important;
  height: 17px !important;
}

html[data-photostrator-surface="web"] body.preview3d-open #preview3dDockPanelStyle .preview3d-style-command-bar button img {
  width: 17px !important;
  height: 17px !important;
}

html[data-photostrator-surface="web"] body.preview3d-open #preview3dDockPanelLibrary .preview3d-inline-material-actions button img {
  width: 17px !important;
  height: 17px !important;
}

/* Source: ios-reference.css */
/*
  v285 integrated iOS editor shell.
  This file is intentionally loaded last so one coherent mobile shell wins
  over the earlier iterative navigation experiments.
*/

@media (min-width: 0px) {
  :root {
    --phone-width: min(100vw, 590px);
    --phone-left: max(0px, calc((100vw - var(--phone-width)) / 2));
    --title-row-height: 58px;
    --command-height: 48px;
    --topbar-height: calc(var(--title-row-height) + var(--command-height) + env(safe-area-inset-top, 0px));
    --editor-top: var(--topbar-height);
    --rail-width: 48px;
    --bottom-height: calc(70px + env(safe-area-inset-bottom, 0px));
    --ios-surface: rgba(252, 252, 253, 0.97);
    --ios-panel: rgba(247, 247, 248, 0.98);
    --ios-canvas: #e2e4e7;
    --ios-line: rgba(37, 40, 46, 0.14);
    --ios-text: #15171a;
    --ios-muted: #6a6e75;
    --ios-active: #b77b20;
    --ios-selected: #dedfe1;
  }

  html[data-theme="dark"] {
    --ios-surface: rgba(54, 56, 60, 0.97);
    --ios-panel: rgba(46, 48, 52, 0.98);
    --ios-canvas: #6f7379;
    --ios-line: rgba(255, 255, 255, 0.16);
    --ios-text: #f5f5f6;
    --ios-muted: #c0c2c6;
    --ios-selected: #71747a;
  }

  html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #cfd2d6 !important;
    color: var(--ios-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
  }

  body .app-shell {
    position: fixed !important;
    inset: 0 auto auto var(--phone-left) !important;
    width: var(--phone-width) !important;
    max-width: var(--phone-width) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    background: var(--ios-canvas) !important;
    box-shadow: 0 0 22px rgba(28, 31, 35, 0.13) !important;
  }

  body .workspace {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--ios-canvas) !important;
  }

  /* Compact document header */
  body .topbar {
    position: fixed !important;
    z-index: 5000 !important;
    inset: 0 auto auto var(--phone-left) !important;
    width: var(--phone-width) !important;
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
    padding: env(safe-area-inset-top, 0px) 0 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  }

  body .topbar-back-button,
  body #undoButton,
  body #redoButton,
  body #iosMenuButton {
    height: 57px !important;
    min-height: 57px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
  }

  body .topbar-back-button {
    position: absolute !important;
    z-index: 3 !important;
    left: 0 !important;
    top: env(safe-area-inset-top, 0px) !important;
    width: 48px !important;
    min-width: 48px !important;
    border-right: 1px solid var(--ios-line) !important;
  }

  body .topbar-back-button img,
  body #undoButton img,
  body #redoButton img,
  body #iosMenuButton img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    filter: none !important;
  }

  body .history-actions {
    position: absolute !important;
    inset: env(safe-area-inset-top, 0px) 0 auto 0 !important;
    width: 100% !important;
    height: 58px !important;
    display: block !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  body #undoButton,
  body #redoButton {
    position: absolute !important;
    z-index: 3 !important;
    top: 0 !important;
    width: 36px !important;
    min-width: 36px !important;
    pointer-events: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body #undoButton {
    left: 48px !important;
  }

  body #redoButton {
    left: 84px !important;
    border-right: 1px solid var(--ios-line) !important;
  }

  body #undoButton:active,
  body #redoButton:active,
  body .topbar-back-button:active,
  body #iosMenuButton:active {
    background: var(--ios-selected) !important;
  }

  body .document-chip {
    position: absolute !important;
    z-index: 2 !important;
    left: 48px !important;
    right: 48px !important;
    top: 0 !important;
    transform: none !important;
    width: auto !important;
    height: 57px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  body .document-chip span {
    display: none !important;
  }

  body .document-chip strong {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    color: var(--ios-text) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 20px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body #iosMenuButton {
    position: fixed !important;
    z-index: 5100 !important;
    top: env(safe-area-inset-top, 0px) !important;
    left: calc(var(--phone-left) + var(--phone-width) - 48px) !important;
    right: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    margin: 0 !important;
    border-left: 1px solid var(--ios-line) !important;
  }

  body #iosMenuButton[aria-expanded="true"] {
    background: var(--ios-selected) !important;
  }

  body .topbar .mode-switcher,
  body .topbar .zoom-actions,
  body .topbar .view-actions,
  body .topbar .mobile-share-actions,
  body .topbar .export-actions,
  body .topbar .export-status,
  body #duplicateButton,
  body #deleteButton {
    display: none !important;
  }

  /* The artboard stays inside the four integrated navigation edges. */
  body .canvas-wrap {
    position: fixed !important;
    z-index: 1 !important;
    inset: var(--editor-top) auto var(--bottom-height) calc(var(--phone-left) + var(--rail-width)) !important;
    width: calc(var(--phone-width) - (var(--rail-width) * 2)) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--ios-canvas) !important;
  }

  body .pasteboard-frame {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* Add button and creative-tool rail */
  body #addMenuButton {
    position: fixed !important;
    z-index: 4300 !important;
    left: var(--phone-left) !important;
    top: var(--editor-top) !important;
    width: var(--rail-width) !important;
    min-width: var(--rail-width) !important;
    height: 48px !important;
    min-height: 48px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--ios-line) !important;
    border-bottom: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
  }

  body #addMenuButton span {
    display: block !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  body .sidebar {
    position: fixed !important;
    z-index: 4200 !important;
    inset: calc(var(--editor-top) + 48px) auto var(--bottom-height) var(--phone-left) !important;
    width: var(--rail-width) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-right: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body .sidebar .brand,
  body .sidebar .color-widget,
  body .sidebar .sidebar-popout,
  body .sidebar > .panel:not(:first-of-type),
  body .sidebar > .panel:first-of-type > h2 {
    display: none !important;
  }

  body .sidebar > .panel:first-of-type {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .sidebar .tool-grid {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    gap: 0 !important;
    padding: 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  body .sidebar .tool-grid::-webkit-scrollbar {
    display: none !important;
  }

  body .sidebar .tool {
    position: relative !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 21px !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
  }

  body .sidebar .rail-profile-button {
    position: relative !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
  }

  body .sidebar .rail-profile-button[aria-expanded="true"] {
    background: var(--ios-selected) !important;
  }

  body .sidebar .rail-profile-button img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    opacity: 0.9 !important;
    filter: none !important;
  }

  body .sidebar .tool.is-profile-hidden {
    display: none !important;
  }

  body .sidebar .tool::before,
  body .sidebar .tool::after {
    content: none !important;
    display: none !important;
  }

  body .sidebar .tool img {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    object-fit: contain !important;
    opacity: 0.95 !important;
    filter: none !important;
  }

  body .sidebar .tool.is-active {
    background: var(--ios-selected) !important;
  }

  body .sidebar .tool.is-active img {
    opacity: 1 !important;
    filter: none !important;
  }

  body .sidebar .tool > span,
  body .sidebar .rail-profile-button > span,
  body .app-frame-right-nav button > span,
  body .ios-companion-buttons button > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  /* The grouped flyout replaces the old detached companion buttons. */
  body .ios-companion-buttons {
    display: none !important;
  }

  body .ios-companion-buttons button {
    position: relative !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 22px !important;
    background: var(--ios-surface) !important;
    box-shadow: 0 4px 12px rgba(28, 31, 36, 0.12) !important;
  }

  body .ios-companion-buttons button img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    filter: none !important;
  }

  /* The right rail changes with the selected creative category. */
  body .app-frame-right-nav {
    position: fixed !important;
    z-index: 4200 !important;
    inset: var(--editor-top) auto var(--bottom-height) calc(var(--phone-left) + var(--phone-width) - var(--rail-width)) !important;
    width: var(--rail-width) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 44px !important;
    gap: 0 !important;
    align-content: start !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-left: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
  }

  body .app-frame-right-nav button {
    position: relative !important;
    width: 47px !important;
    min-width: 47px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ios-text) !important;
  }

  body .app-frame-right-nav button::before,
  body .app-frame-right-nav button::after {
    content: none !important;
    display: none !important;
  }

  body .app-frame-right-nav button:active,
  body .app-frame-right-nav button.is-active,
  body .app-frame-right-nav button.is-menu-anchor {
    background: var(--ios-selected) !important;
  }

  body .app-frame-right-nav button img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    opacity: 0.95 !important;
    filter: none !important;
  }

  body .app-frame-right-nav::-webkit-scrollbar {
    display: none !important;
  }

  body .app-frame-right-nav {
    scrollbar-width: none !important;
  }

  /* Compact document commands live directly below the title menu. */
  body .document-action-menu {
    position: absolute !important;
    z-index: 5050 !important;
    top: calc(var(--title-row-height) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--command-height) !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ios-line) !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  }

  body .document-action-menu[hidden] {
    display: none !important;
  }

  body .document-action-menu button,
  body .document-action-menu #undoButton,
  body .document-action-menu #redoButton,
  body .document-action-menu #deleteButton {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 47px !important;
    min-height: 47px !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-rows: 19px 11px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 3px 1px 2px !important;
    border: 0 !important;
    border-right: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    pointer-events: auto !important;
    box-shadow: none !important;
  }

  body .document-action-menu button:last-child {
    border-right: 0 !important;
  }

  body .document-action-menu button:active {
    background: var(--ios-selected) !important;
  }

  body .document-action-menu button:disabled {
    opacity: 0.62 !important;
    background: transparent !important;
  }

  body .document-action-menu button img,
  body .document-action-menu #undoButton img,
  body .document-action-menu #redoButton img,
  body .document-action-menu #deleteButton img {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important;
    opacity: 0.92 !important;
    filter: none !important;
  }

  body .document-action-menu button span {
    position: static !important;
    width: 100% !important;
    height: 11px !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    font-weight: 550 !important;
    line-height: 11px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Reference-style three-tab dock, integrated into the bottom edge. */
  body .bottom-workflows {
    position: fixed !important;
    z-index: 4700 !important;
    left: var(--phone-left) !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--phone-width) !important;
    height: var(--bottom-height) !important;
    min-height: var(--bottom-height) !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 4px 4px env(safe-area-inset-bottom, 0px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  }

  body .bottom-workflows button,
  body .bottom-workflows button[data-workflow] {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 65px !important;
    min-height: 65px !important;
    display: grid !important;
    grid-template-rows: 27px 16px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    font-size: 11px !important;
    font-weight: 550 !important;
    line-height: 14px !important;
  }

  body .bottom-workflows button:nth-child(n + 4) {
    display: none !important;
  }

  body .bottom-workflows button::before,
  body .bottom-workflows button::after {
    content: none !important;
    display: none !important;
  }

  body .bottom-workflows button img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    object-fit: contain !important;
    opacity: 0.94 !important;
    filter: none !important;
  }

  body .bottom-workflows button span {
    display: block !important;
    width: 100% !important;
    height: 16px !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: 11px !important;
    line-height: 16px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .bottom-workflows button.is-active {
    background: var(--ios-selected) !important;
    color: var(--ios-active) !important;
  }

  body .bottom-workflows button.is-active img {
    opacity: 1 !important;
    filter: sepia(1) saturate(4.2) hue-rotate(352deg) brightness(0.82) !important;
  }

  /* Inspector sheet rises directly from the integrated bottom dock. */
  body .layers {
    position: fixed !important;
    z-index: 4500 !important;
    inset: auto auto var(--bottom-height) var(--phone-left) !important;
    width: var(--phone-width) !important;
    max-width: var(--phone-width) !important;
    height: min(55vh, 620px) !important;
    min-height: 300px !important;
    max-height: min(55vh, 620px) !important;
    display: block !important;
    padding: 24px 12px 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--ios-line) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: var(--ios-panel) !important;
    color: var(--ios-text) !important;
    box-shadow: 0 -8px 24px rgba(28, 31, 36, 0.12) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  }

  body .layers::before {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    width: 40px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: #9c9fa5 !important;
    transform: translateX(-50%) !important;
  }

  body .app-shell.inspector-collapsed .layers {
    display: none !important;
  }

  body .layers .inspector-title {
    position: sticky !important;
    z-index: 6 !important;
    top: -24px !important;
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) 44px 44px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 76px !important;
    margin: 0 -12px 8px !important;
    padding: 16px 12px 8px !important;
    background: var(--ios-panel) !important;
  }

  body .layers .inspector-title h2 {
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--ios-text) !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .inspector-title p {
    display: none !important;
  }

  body .sheet-select-button,
  body .sheet-add-button,
  body .sheet-close-button {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--ios-selected) !important;
    color: var(--ios-text) !important;
  }

  body .sheet-select-button {
    width: 84px !important;
    border-radius: 22px !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }

  body .sheet-select-button.is-active {
    background: var(--ios-active) !important;
    color: #ffffff !important;
  }

  body .sheet-add-button,
  body .sheet-close-button {
    width: 44px !important;
    min-width: 44px !important;
    border-radius: 22px !important;
  }

  body .sheet-add-button img,
  body .sheet-close-button img {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    margin: auto !important;
    object-fit: contain !important;
    filter: none !important;
  }

  body .layers .inspector-tabs {
    display: none !important;
  }

  body .layers > .panel {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 4px !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .layers > .panel:first-of-type {
    border-top: 0 !important;
  }

  body .layers > .panel.is-hidden,
  body .layers > .panel[hidden],
  body .layers.has-panel-focus > .panel:not(.is-panel-focus) {
    display: none !important;
  }

  body .layers > .panel h2,
  body .layers > .panel h3 {
    margin: 0 0 10px !important;
    color: var(--ios-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
  }

  body .layers .panel:has(#layerList) .panel-heading {
    display: none !important;
  }

  body .layers .layer-list {
    width: 100% !important;
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    list-style: none !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: rgba(225, 226, 228, 0.56) !important;
  }

  body .layers .layer-add-menu {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
    padding: 8px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: rgba(225, 226, 228, 0.5) !important;
  }

  body .layers .layer-add-menu[hidden] {
    display: none !important;
  }

  body .layers .layer-add-menu button {
    min-width: 0 !important;
    min-height: 52px !important;
    display: grid !important;
    grid-template-rows: 22px 14px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 5px 3px !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    color: var(--ios-text) !important;
  }

  body .layers .layer-add-menu button:active {
    background: var(--ios-selected) !important;
  }

  body .layers button:disabled {
    opacity: 0.38 !important;
    pointer-events: none !important;
  }

  body .layers .layer-more-grid button.is-active {
    border-color: color-mix(in srgb, var(--ios-active) 55%, var(--ios-line)) !important;
    background: color-mix(in srgb, var(--ios-active) 14%, transparent) !important;
    color: var(--ios-active) !important;
  }

  body #layerBackwardButton img {
    transform: rotate(180deg) !important;
  }

  body .layers .layer-add-menu button img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    filter: none !important;
  }

  body .layers .layer-add-menu button span {
    width: 100% !important;
    overflow: hidden !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 14px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-list li {
    width: 100% !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
  }

  body .layers .layer-list li:last-child {
    border-bottom: 0 !important;
  }

  body .layers .layer-list li.is-selected {
    background: rgba(183, 123, 32, 0.11) !important;
  }

  body .layers .layer-thumbnail {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.6) !important;
  }

  body .layers .layer-thumbnail img {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    object-fit: contain !important;
    filter: none !important;
  }

  body .layers .layer-thumbnail.has-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body .layers .layer-name {
    min-width: 0 !important;
    display: grid !important;
    justify-items: start !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  body .layers .layer-name > span:first-child {
    width: 100% !important;
    overflow: hidden !important;
    color: var(--ios-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-kind {
    width: 100% !important;
    max-width: none !important;
    justify-self: start !important;
    overflow: hidden !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    line-height: 13px !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
  }

  body .layers .layer-toggle {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
  }

  body .layers .layer-toggle:active {
    background: var(--ios-selected) !important;
  }

  body .layers .layer-toggle img {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
    opacity: 0.68 !important;
    filter: none !important;
  }

  body .layers .layer-list li.layer-empty {
    min-height: 154px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    padding: 22px !important;
    color: var(--ios-muted) !important;
    text-align: center !important;
    cursor: default !important;
  }

  body .layers .layer-empty > img {
    width: 28px !important;
    height: 28px !important;
    opacity: 0.62 !important;
    filter: none !important;
  }

  body .layers .layer-empty strong {
    color: var(--ios-text) !important;
    font-size: 13px !important;
  }

  body .layers .layer-empty span {
    max-width: 250px !important;
    color: var(--ios-muted) !important;
    font-size: 11px !important;
    line-height: 15px !important;
    white-space: normal !important;
  }

  body .layers .library-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .layers .library-asset {
    min-width: 0 !important;
    min-height: 78px !important;
    display: grid !important;
    grid-template-rows: 34px 16px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 8px 5px !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.36) !important;
    color: var(--ios-text) !important;
  }

  body .layers .library-asset img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    filter: none !important;
  }

  body .layers .library-asset span {
    width: 100% !important;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 14px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .align-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body .layers .align-grid button,
  body .layers .button-row button,
  body .layers .wide-button {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.34) !important;
    color: var(--ios-text) !important;
    font-size: 11px !important;
    line-height: 15px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers label,
  body .layers .compact-field,
  body .layers .mini-status {
    color: var(--ios-muted) !important;
    font-size: 11px !important;
    line-height: 15px !important;
  }

  body .layers input,
  body .layers select {
    max-width: 100% !important;
    min-height: 32px !important;
    font-size: 12px !important;
  }

  body .layers .style-section-nav {
    position: sticky !important;
    z-index: 5 !important;
    top: 52px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin: 0 -4px 8px !important;
    padding: 3px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: var(--ios-panel) !important;
  }

  body .layers .style-section-nav[hidden] {
    display: none !important;
  }

  body .layers .style-section-nav button {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 5px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--ios-muted) !important;
    font-size: 11px !important;
  }

  body .layers .style-section-nav button.is-active {
    background: var(--ios-selected) !important;
    color: var(--ios-text) !important;
    font-weight: 650 !important;
  }

  body .layers .style-selection-status {
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 10px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    line-height: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .style-color-pair {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .layers .style-color-field {
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body .layers .style-color-field input[type="color"] {
    width: 32px !important;
    height: 32px !important;
    padding: 2px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 6px !important;
    background: transparent !important;
  }

  body .layers .style-paint-actions,
  body .layers .style-effects {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 7px 0 !important;
  }

  body .layers .style-paint-actions button,
  body .layers .style-effects button {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    color: var(--ios-text) !important;
    font-size: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .style-paint-actions button.is-active,
  body .layers .style-effects button.is-active {
    border-color: var(--ios-active) !important;
    background: var(--ios-selected) !important;
  }

  body .layers .style-swatches {
    display: grid !important;
    grid-template-columns: repeat(6, 28px) !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin: 9px 0 11px !important;
  }

  body .layers .style-swatches button {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 50% !important;
    background: var(--swatch) !important;
    box-shadow: inset 0 0 0 2px var(--ios-panel) !important;
  }

  body .layers .controls label:has(output) {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 7px !important;
  }

  body .layers .controls label output {
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    line-height: 14px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
  }

  body .layers .library-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 0 7px !important;
  }

  body .layers .library-browse-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
  }

  body .layers .library-browse-controls input {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.48) !important;
    color: var(--ios-text) !important;
    font-size: 11px !important;
  }

  body .layers .library-browse-controls select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
  }

  body .layers .library-actions button {
    min-width: 0 !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 9px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.38) !important;
    color: var(--ios-text) !important;
    font-size: 11px !important;
  }

  body .layers .library-actions button img {
    width: 18px !important;
    height: 18px !important;
  }

  body .layers .library-actions button:disabled {
    opacity: 0.45 !important;
  }

  body .layers .saved-library-grid {
    min-height: 82px !important;
    margin-bottom: 14px !important;
  }

  body .layers .library-empty {
    grid-column: 1 / -1 !important;
    min-height: 76px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px dashed var(--ios-line) !important;
    border-radius: 8px !important;
    color: var(--ios-muted) !important;
    font-size: 11px !important;
    text-align: center !important;
  }

  body .layers .saved-library-asset {
    position: relative !important;
    min-width: 0 !important;
    min-height: 78px !important;
  }

  body .layers .saved-library-asset > button:first-child {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 78px !important;
    display: grid !important;
    grid-template-rows: 38px 16px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    padding: 8px 5px !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.36) !important;
    color: var(--ios-text) !important;
  }

  body .layers .saved-library-asset > button:first-child img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
  }

  body .layers .saved-library-asset > button:first-child span {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .saved-library-delete {
    position: absolute !important;
    z-index: 2 !important;
    top: 2px !important;
    right: 2px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--ios-surface) !important;
  }

  body .layers .saved-library-delete img {
    width: 13px !important;
    height: 13px !important;
  }

  body .layers .layer-panel-actions {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 0 8px !important;
    padding: 3px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.26) !important;
  }

  body .layers .layer-panel-actions button {
    min-width: 0 !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-rows: 23px 14px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    font-size: 9px !important;
  }

  body .layers .layer-panel-actions button:active {
    background: var(--ios-selected) !important;
  }

  body .layers .layer-panel-actions button.is-active {
    background: color-mix(in srgb, var(--ios-active) 14%, transparent) !important;
    color: var(--ios-active) !important;
  }

  body .layers .layer-panel-actions img {
    width: 20px !important;
    height: 20px !important;
  }

  body .layers .layer-standard-actions {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 0 8px !important;
    padding: 3px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.2) !important;
  }

  body .layers .layer-standard-actions button {
    min-width: 0 !important;
    min-height: 46px !important;
    display: grid !important;
    grid-template-rows: 21px 13px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--ios-text) !important;
  }

  body .layers .layer-standard-actions button:active {
    background: var(--ios-selected) !important;
  }

  body .layers .layer-standard-actions img {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important;
    filter: none !important;
  }

  body .layers .layer-standard-actions span {
    width: 100% !important;
    overflow: hidden !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 13px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-more-actions {
    margin: 0 0 9px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.18) !important;
  }

  body .layers .layer-more-actions summary {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 9px !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  body .layers .layer-more-actions > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 0 7px 7px !important;
  }

  body .layers .layer-more-actions button {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 5px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    color: var(--ios-text) !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-quick-controls {
    display: grid !important;
    gap: 7px !important;
    margin: 0 0 10px !important;
    padding: 9px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.24) !important;
  }

  body .layers .layer-quick-controls > label {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 7px !important;
  }

  body .layers .layer-quick-controls > label input[type="text"],
  body .layers .layer-quick-controls > label select {
    grid-column: 2 / -1 !important;
    width: 100% !important;
  }

  body .layers .layer-quick-controls output {
    color: var(--ios-text) !important;
    font-size: 10px !important;
    text-align: right !important;
  }

  body .layers .layer-order-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body .layers .layer-order-actions button {
    min-width: 0 !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 5px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    color: var(--ios-text) !important;
    font-size: 10px !important;
  }

  body .layers .layer-order-actions img {
    width: 15px !important;
    height: 15px !important;
  }

  body .layers #layerForwardButton img {
    transform: rotate(180deg) !important;
  }

  /* Contextual controls now live inside each grouped tool flyout. */
  body .tool-options {
    display: none !important;
  }

  body .app-shell:not(.inspector-collapsed) .tool-options,
  body:not([data-active-tool="brush"]):not([data-active-tool="eraser"]):not([data-active-tool="heal"]):not([data-active-tool="patch"]):not([data-active-tool="redEye"]):not([data-active-tool="blurBrush"]):not([data-active-tool="sharpenBrush"]):not([data-active-tool="smudge"]):not([data-active-tool="dodge"]):not([data-active-tool="burn"]):not([data-active-tool="sponge"]):not([data-active-tool="text"]) .tool-options {
    display: none !important;
  }

  body .tool-options label {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 45px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--ios-text) !important;
    font-size: 10px !important;
  }

  body .tool-options input {
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
  }

  body:not([data-active-tool="text"]) .tool-options label:has(#quickTypeSize),
  body[data-active-tool="text"] .tool-options label:has(#quickSize),
  body .tool-options > button,
  body .tool-options .shortcut-hint {
    display: none !important;
  }

  /* Flyouts and the full tool drawer remain available without leaving screen. */
  body .tool-flyout {
    position: fixed !important;
    z-index: 5200 !important;
    top: var(--flyout-top, calc(var(--editor-top) + 8px)) !important;
    left: calc(var(--phone-left) + var(--rail-width)) !important;
    right: auto !important;
    width: min(250px, calc(var(--phone-width) - (var(--rail-width) * 2))) !important;
    max-width: calc(var(--phone-width) - (var(--rail-width) * 2)) !important;
    max-height: calc(100dvh - var(--flyout-top, 76px) - var(--bottom-height) - 8px) !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 0 10px 10px 0 !important;
    background: var(--ios-surface) !important;
    box-shadow: 8px 8px 22px rgba(27, 30, 34, 0.14) !important;
  }

  body .tool-flyout.is-open {
    display: grid !important;
  }

  body .tool-flyout.is-right-anchored {
    left: auto !important;
    right: calc(100dvw - var(--phone-left) - var(--phone-width) + var(--rail-width)) !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: -8px 8px 22px rgba(27, 30, 34, 0.14) !important;
  }

  body .tool-flyout .flyout-head {
    position: sticky !important;
    z-index: 4 !important;
    top: 0 !important;
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 6px 4px 10px !important;
    border-bottom: 1px solid var(--ios-line) !important;
    background: var(--ios-surface) !important;
  }

  body .tool-flyout .flyout-head strong {
    overflow: hidden !important;
    color: var(--ios-text) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .tool-flyout .flyout-head button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    display: grid !important;
    grid-template: 1fr / 1fr !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }

  body .tool-flyout .flyout-head button img {
    width: 18px !important;
    height: 18px !important;
  }

  body .tool-flyout .flyout-tool-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 6px !important;
  }

  body .tool-flyout button {
    position: relative !important;
    width: 100% !important;
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 24px 16px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    line-height: 15px !important;
    text-align: center !important;
  }

  body .tool-flyout button:active,
  body .tool-flyout button.is-active {
    background: var(--ios-selected) !important;
  }

  body .tool-flyout button img {
    width: 21px !important;
    height: 21px !important;
    filter: none !important;
  }

  body .tool-flyout button > span:not(.tool-state) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  body .tool-flyout .tool-state {
    position: absolute !important;
    top: 3px !important;
    right: 4px !important;
    color: var(--ios-muted) !important;
    font-size: 9px !important;
    font-weight: 550 !important;
  }

  body .tool-flyout .flyout-adjustments {
    position: sticky !important;
    z-index: 2 !important;
    bottom: 0 !important;
    display: grid !important;
    gap: 7px !important;
    padding: 9px 10px 10px !important;
    border-top: 1px solid var(--ios-line) !important;
    background: var(--ios-panel) !important;
  }

  body .tool-flyout .flyout-adjustments > strong {
    color: var(--ios-text) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 16px !important;
  }

  body .tool-flyout .flyout-adjustments label {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 55px minmax(0, 1fr) 37px !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--ios-muted) !important;
    font-size: 11px !important;
    line-height: 15px !important;
  }

  body .tool-flyout .flyout-adjustments input,
  body .tool-flyout .flyout-adjustments select {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  body .tool-flyout .flyout-adjustments select,
  body .tool-flyout .flyout-adjustments input[type="number"],
  body .tool-flyout .flyout-adjustments input[type="text"],
  body .tool-flyout .flyout-adjustments input[type="color"] {
    grid-column: 2 / -1 !important;
  }

  body .tool-flyout .flyout-adjustments input[type="color"] {
    width: 42px !important;
    min-width: 42px !important;
    height: 28px !important;
    justify-self: start !important;
    padding: 2px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 6px !important;
    background: transparent !important;
  }

  body .tool-flyout .flyout-adjustments label.flyout-toggle {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    min-height: 28px !important;
  }

  body .tool-flyout .flyout-adjustments label.flyout-toggle input[type="checkbox"] {
    width: 34px !important;
    min-width: 34px !important;
    height: 20px !important;
    margin: 0 !important;
    justify-self: end !important;
    accent-color: var(--ios-accent) !important;
  }

  body .tool-flyout .flyout-adjustments output {
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--ios-text) !important;
    font-size: 10px !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 14px !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .tool-flyout .flyout-adjustment-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body .tool-flyout .flyout-adjustment-actions.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .tool-flyout .flyout-adjustment-actions.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body .tool-flyout .flyout-adjustment-actions button {
    min-width: 0 !important;
    min-height: 46px !important;
    grid-template-rows: 21px 14px !important;
    gap: 1px !important;
    padding: 4px 2px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 7px !important;
    background: rgba(127, 127, 127, 0.12) !important;
    font-size: 10px !important;
  }

  body .tool-flyout .flyout-adjustment-actions button:active {
    background: var(--ios-selected) !important;
  }

  body .tool-flyout .flyout-adjustment-actions button img {
    width: 18px !important;
    height: 18px !important;
  }

  body .tool-flyout .flyout-adjustment-actions .flyout-glyph {
    display: block !important;
    width: auto !important;
    height: 21px !important;
    overflow: visible !important;
    color: var(--ios-text) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
  }

  body .tool-flyout .flyout-adjustment-actions .flyout-glyph.is-italic {
    font-style: italic !important;
  }

  body .tool-flyout .flyout-adjustment-actions .flyout-glyph.is-underline {
    text-decoration: underline !important;
  }

  body .tool-flyout .flyout-adjustment-actions .flyout-glyph.is-strike {
    text-decoration: line-through !important;
  }

  body .tool-flyout .flyout-mini-status {
    min-height: 14px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    line-height: 14px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .tool-drawer,
  body .app-shell.tool-drawer-open .tool-drawer {
    position: fixed !important;
    z-index: 5300 !important;
    inset: auto auto var(--bottom-height) var(--phone-left) !important;
    width: var(--phone-width) !important;
    max-width: var(--phone-width) !important;
    max-height: calc(100dvh - var(--editor-top) - var(--bottom-height)) !important;
    padding-bottom: 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 18px 18px 0 0 !important;
    background: var(--ios-panel) !important;
    box-shadow: 0 12px 34px rgba(27, 30, 34, 0.2) !important;
  }

  body .tool-drawer {
    display: none !important;
  }

  body .tool-drawer.is-open,
  body .app-shell.tool-drawer-open .tool-drawer {
    display: block !important;
  }

  body .tool-drawer .toolbar-profile-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ios-line) !important;
    background: var(--ios-surface) !important;
  }

  body .tool-drawer .toolbar-profile-field {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--ios-muted) !important;
    font-size: 11px !important;
  }

  body .tool-drawer .toolbar-profile-field select {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    font-size: 12px !important;
  }

  body .tool-drawer .custom-toolbar-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 10px !important;
    padding-top: 4px !important;
  }

  body .tool-drawer .custom-toolbar-tools[hidden] {
    display: none !important;
  }

  body .tool-drawer .custom-toolbar-tools label {
    min-width: 0 !important;
    min-height: 28px !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--ios-text) !important;
    font-size: 11px !important;
  }

  body .tool-drawer .custom-toolbar-tools input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: var(--ios-active) !important;
  }

  body .tool-drawer .custom-toolbar-tools span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .tool-drawer .toolbar-profile-note {
    margin: 0 !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  body .tool-drawer .drawer-tool[data-icon="ruler"] {
    --drawer-icon: url("assets/lucide/ruler.svg") !important;
  }

  body .tool-drawer .drawer-tool[data-icon="dimension"] {
    --drawer-icon: url("assets/lucide/scan-line.svg") !important;
  }

  body .tool-drawer .drawer-tool[data-icon="area"] {
    --drawer-icon: url("assets/lucide/pentagon.svg") !important;
  }

  body .tool-drawer .drawer-tool[data-icon="fit"] {
    --drawer-icon: url("assets/lucide/maximize.svg") !important;
  }

  body .integrated-right-nav,
  body .right-quickbar,
  body .mobile-ios-sheet,
  body .workflow-actions,
  body .floating-selection-actions,
  body .workflow-toolbar,
  body .mobile-share-actions {
    display: none !important;
  }

  html[data-theme="dark"] body .topbar img,
  html[data-theme="dark"] body .sidebar .tool img,
  html[data-theme="dark"] body .sidebar .rail-profile-button img,
  html[data-theme="dark"] body .app-frame-right-nav img,
  html[data-theme="dark"] body .bottom-workflows img,
  html[data-theme="dark"] body .ios-companion-buttons img,
  html[data-theme="dark"] body .sheet-add-button img,
  html[data-theme="dark"] body .sheet-close-button img {
    filter: invert(1) !important;
  }

  html[data-theme="dark"] body .bottom-workflows button.is-active img {
    filter: sepia(1) saturate(4.2) hue-rotate(352deg) brightness(1.2) !important;
  }
}

@media (max-height: 700px) {
  :root {
    --title-row-height: 52px;
    --command-height: 44px;
    --bottom-height: calc(62px + env(safe-area-inset-bottom, 0px));
  }

  body .topbar-back-button,
  body #iosMenuButton {
    height: 51px !important;
    min-height: 51px !important;
  }

  body .history-actions {
    height: 52px !important;
  }

  body .document-chip {
    height: 52px !important;
  }

  body .document-action-menu button,
  body .document-action-menu #undoButton,
  body .document-action-menu #redoButton,
  body .document-action-menu #deleteButton {
    height: 43px !important;
    min-height: 43px !important;
    grid-template-rows: 18px 11px !important;
  }

  body .bottom-workflows button,
  body .bottom-workflows button[data-workflow] {
    height: 57px !important;
    min-height: 57px !important;
    grid-template-rows: 24px 15px !important;
  }

  body .sidebar {
    inset: calc(var(--editor-top) + 48px) auto var(--bottom-height) var(--phone-left) !important;
  }

  body .sidebar .tool-grid {
    grid-auto-rows: 38px !important;
  }

  body .sidebar .tool {
    width: 42px !important;
    min-width: 42px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  body .layers {
    height: min(56dvh, 400px) !important;
    min-height: 270px !important;
    max-height: min(56dvh, 400px) !important;
  }

  body .layers .inspector-title {
    min-height: 68px !important;
    padding-top: 13px !important;
  }

  body .layers .inspector-title h2 {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  body .resize-modal {
    z-index: 7000 !important;
    padding: 14px !important;
    background: rgba(27, 29, 33, 0.28) !important;
    backdrop-filter: blur(8px) !important;
  }

  body .resize-surface {
    width: min(360px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 28px) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: var(--ios-surface) !important;
    color: var(--ios-text) !important;
    box-shadow: 0 18px 44px rgba(27, 30, 34, 0.2) !important;
  }

  body .resize-surface .modal-header {
    min-height: 54px !important;
    padding: 10px 12px !important;
    border-color: var(--ios-line) !important;
  }

  body .resize-surface .modal-header h2 {
    color: var(--ios-text) !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  body .resize-surface .modal-header p {
    margin: 1px 0 0 !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  body .resize-surface .modal-header button {
    min-width: 58px !important;
    min-height: 32px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ios-active) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  body .resize-body {
    display: grid !important;
    gap: 13px !important;
    padding: 14px !important;
    overflow-y: auto !important;
  }

  body .resize-mode-switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 2px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 7px !important;
    background: var(--ios-panel) !important;
  }

  body .resize-mode-switcher button {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: var(--ios-muted) !important;
    font-size: 12px !important;
  }

  body .resize-mode-switcher button.is-active {
    background: var(--ios-selected) !important;
    color: var(--ios-text) !important;
  }

  body .resize-mode-switcher img {
    width: 18px !important;
    height: 18px !important;
  }

  body .resize-dimensions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body .resize-dimensions label {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
    color: var(--ios-muted) !important;
    font-size: 11px !important;
  }

  body .resize-dimensions input {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 9px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 6px !important;
    background: var(--ios-panel) !important;
    color: var(--ios-text) !important;
    font-size: 14px !important;
    font-variant-numeric: tabular-nums !important;
  }

  body .resize-constrain {
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--ios-text) !important;
    font-size: 12px !important;
  }

  body .resize-constrain input {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--ios-active) !important;
  }

  body .resize-anchor-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--ios-muted) !important;
    font-size: 11px !important;
  }

  body .resize-anchor-panel[hidden] {
    display: none !important;
  }

  body .resize-anchor-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 30px) !important;
    gap: 3px !important;
  }

  body .resize-anchor-grid button {
    position: relative !important;
    width: 30px !important;
    height: 26px !important;
    min-width: 30px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 4px !important;
    background: var(--ios-panel) !important;
  }

  body .resize-anchor-grid button::after {
    content: "" !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--ios-muted) !important;
    transform: translate(-50%, -50%) !important;
  }

  body .resize-anchor-grid button.is-active {
    border-color: var(--ios-active) !important;
    background: var(--ios-selected) !important;
  }

  body .resize-anchor-grid button.is-active::after {
    background: var(--ios-active) !important;
  }

  body .resize-body .mini-status {
    min-height: 16px !important;
    margin: 0 !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    line-height: 16px !important;
  }

  body .resize-apply {
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: var(--ios-active) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  /* Inspector architecture: hierarchy, appearance, and reusable content stay distinct. */
  body .layers [hidden] {
    display: none !important;
  }

  body .layers .inspector-title[data-header-mode="library"] {
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
  }

  body .layers .inspector-title[data-header-mode="library"] h2 {
    grid-column: 1 !important;
  }

  body .layers .inspector-title[data-header-mode="library"] .sheet-add-button {
    grid-column: 2 !important;
  }

  body .layers .inspector-title[data-header-mode="library"] .sheet-close-button {
    grid-column: 3 !important;
  }

  body .layers .inspector-title[data-header-mode="simple"] {
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }

  body .layers .inspector-title[data-header-mode="simple"] h2 {
    grid-column: 1 !important;
  }

  body .layers .inspector-title[data-header-mode="simple"] .sheet-close-button {
    grid-column: 2 !important;
  }

  body .layers .style-inspector-section {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body .layers .style-inspector-section:last-of-type {
    border-bottom: 1px solid var(--ios-line) !important;
  }

  body .layers .style-inspector-section summary {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 4px !important;
    color: var(--ios-text) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    cursor: pointer !important;
  }

  body .layers .style-inspector-content {
    display: grid !important;
    gap: 9px !important;
    padding: 0 4px 12px !important;
  }

  body .layers .style-inspector-content > label {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--ios-muted) !important;
    font-size: 11px !important;
  }

  body .layers .style-inspector-content > label select,
  body .layers .style-inspector-content > label input[type="number"] {
    grid-column: 2 / -1 !important;
    width: 100% !important;
  }

  body .layers .style-inspector-content .align-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body .layers .style-inspector-content .align-grid button {
    min-height: 34px !important;
    padding: 0 5px !important;
    overflow: hidden !important;
    font-size: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .library-section-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin: 0 0 8px !important;
    padding: 3px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.24) !important;
  }

  body .layers .library-section-tabs button {
    min-width: 0 !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-rows: 22px 14px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 3px 1px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--ios-muted) !important;
    font-size: 9px !important;
  }

  body .layers .library-section-tabs button.is-active {
    background: var(--ios-selected) !important;
    color: var(--ios-text) !important;
    font-weight: 650 !important;
  }

  body .layers .library-section-tabs img {
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important;
  }

  body .layers .library-section {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .layers .library-section > h3 {
    margin: 12px 0 7px !important;
    color: var(--ios-text) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
  }

  body .layers .library-section .library-actions:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .layers .layer-more-actions .layer-more-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body .layers .layer-more-actions .layer-more-grid button {
    min-height: 48px !important;
    display: grid !important;
    grid-template-rows: 21px 13px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 3px 2px !important;
  }

  body .layers .layer-more-actions .layer-more-grid button img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
  }

  body .layers .layer-more-actions .layer-more-grid button span {
    width: 100% !important;
    overflow: hidden !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 13px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-more-actions .layer-symbol-actions {
    padding-top: 0 !important;
    border-top: 1px solid var(--ios-line) !important;
  }

  body .layers #layerBackwardButton img {
    transform: rotate(180deg) !important;
  }

  body .layers #layerForwardButton img {
    transform: none !important;
  }

  body .layers .layer-panel-actions button:disabled {
    opacity: 0.38 !important;
  }

  body .layers .layer-name > span:first-child.is-editing {
    min-width: 0 !important;
    padding: 2px 4px !important;
    border: 1px solid var(--ios-active) !important;
    border-radius: 4px !important;
    background: var(--ios-surface) !important;
    outline: 0 !important;
  }

  body .layers .layer-list li.layer-group-row {
    min-height: 52px !important;
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    padding: 5px 8px !important;
    background: rgba(255, 255, 255, 0.42) !important;
  }

  body .layers .layer-list li.layer-group-row.has-partial-selection {
    background: rgba(183, 123, 32, 0.06) !important;
  }

  body .layers .layer-group-disclosure {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
  }

  body .layers .layer-group-disclosure:active {
    background: var(--ios-selected) !important;
  }

  body .layers .layer-group-disclosure img {
    width: 17px !important;
    height: 17px !important;
    transform: none !important;
    transition: transform 140ms ease !important;
  }

  body .layers .layer-group-disclosure[aria-expanded="true"] img {
    transform: rotate(-90deg) !important;
  }

  body .layers .layer-list li.is-group-child {
    position: relative !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    padding-left: 22px !important;
  }

  body .layers .layer-list li.is-group-child::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 11px !important;
    width: 1px !important;
    background: var(--ios-line) !important;
  }

  body .layers .layer-list li.is-group-child .layer-thumbnail {
    width: 30px !important;
    height: 30px !important;
    border-radius: 5px !important;
  }

  body .layers .layer-list li.is-group-child .layer-thumbnail img {
    width: 18px !important;
    height: 18px !important;
  }

  body .layers .layer-panel-toolbar {
    position: sticky !important;
    z-index: 5 !important;
    top: 52px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 38px !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 7px !important;
    padding: 4px 0 !important;
    background: var(--ios-panel) !important;
  }

  body .layers .layer-count-badge {
    min-width: 48px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 5px !important;
    background: var(--ios-surface) !important;
    color: var(--ios-muted) !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-view-switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 2px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.24) !important;
  }

  body .layers .layer-view-switcher button {
    min-width: 0 !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  body .layers .layer-view-switcher button.is-active {
    background: var(--ios-surface) !important;
    color: var(--ios-text) !important;
    box-shadow: 0 1px 3px rgba(28, 31, 36, 0.09) !important;
  }

  body .layers .layer-view-switcher img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
  }

  body .layers .layer-more-button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.28) !important;
  }

  body .layers .layer-more-button[aria-expanded="true"] {
    background: var(--ios-selected) !important;
  }

  body .layers .layer-more-button img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
  }

  body .layers .layer-panel-actions {
    position: sticky !important;
    z-index: 4 !important;
    top: 97px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    background: var(--ios-panel) !important;
  }

  body .layers .layer-panel-actions button {
    min-height: 45px !important;
    grid-template-rows: 21px 14px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  body .layers .layer-more-actions[hidden] {
    display: none !important;
  }

  body .layers .layer-more-actions {
    padding: 7px !important;
  }

  body .layers .layer-more-actions > div {
    padding: 0 !important;
  }

  body .layers .layer-more-actions .layer-symbol-actions {
    margin-top: 7px !important;
    padding-top: 7px !important;
  }

  body .layers .layer-list li:not(.layer-group-row):not(.layer-empty) {
    grid-template-columns: 22px 36px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    touch-action: pan-y !important;
  }

  body .layers .layer-list li.is-group-child {
    grid-template-columns: 22px 30px minmax(0, 1fr) auto !important;
  }

  body .layers .layer-drag-handle {
    width: 22px !important;
    min-width: 22px !important;
    height: 36px !important;
    min-height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    cursor: grab !important;
    touch-action: none !important;
  }

  body .layers .layer-drag-handle:active {
    cursor: grabbing !important;
    background: var(--ios-selected) !important;
  }

  body .layers .layer-drag-handle img {
    width: 16px !important;
    height: 20px !important;
    opacity: 0.5 !important;
  }

  body .layers .layer-list.is-multi-select-mode .layer-drag-handle {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    border: 1px solid var(--ios-muted) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  body .layers .layer-list.is-multi-select-mode .layer-drag-handle img {
    display: none !important;
  }

  body .layers .layer-list.is-multi-select-mode li.is-selected .layer-drag-handle {
    border-color: var(--ios-active) !important;
    background: var(--ios-active) !important;
    box-shadow: inset 0 0 0 4px var(--ios-surface) !important;
  }

  body .layers .layer-name {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 6px !important;
  }

  body .layers .layer-name > span:first-child {
    grid-column: 1 / -1 !important;
  }

  body .layers .layer-state-badges {
    display: inline-flex !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 2px !important;
  }

  body .layers .layer-state-badges > span {
    width: 16px !important;
    height: 16px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.42) !important;
  }

  body .layers .layer-state-badges img {
    width: 11px !important;
    height: 11px !important;
    object-fit: contain !important;
  }

  body .layers .layer-list li.is-isolated {
    box-shadow: inset 3px 0 0 var(--ios-active) !important;
  }

  body .layers .layer-list li.is-isolation-dimmed {
    opacity: 0.42 !important;
  }

  body .layers .layer-list li.is-dragging {
    opacity: 0.5 !important;
  }

  body .layers .layer-list li.is-drop-before {
    box-shadow: inset 0 3px 0 var(--ios-active) !important;
  }

  body .layers .layer-list li.is-drop-after {
    box-shadow: inset 0 -3px 0 var(--ios-active) !important;
  }

  body .layers .layer-list li.is-drop-inside {
    outline: 2px solid var(--ios-active) !important;
    outline-offset: -3px !important;
  }

  body .layers .layer-list.is-compact {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 8px !important;
  }

  body .layers .layer-list.is-compact li:not(.layer-group-row):not(.layer-empty) {
    min-height: 64px !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 2px !important;
    padding: 5px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 6px !important;
  }

  body .layers .layer-list.is-compact .layer-thumbnail {
    width: 40px !important;
    height: 40px !important;
    justify-self: center !important;
  }

  body .layers .layer-list.is-compact .layer-name,
  body .layers .layer-list.is-compact .layer-actions {
    display: none !important;
  }

  body .layers .layer-list.is-compact .layer-group-row,
  body .layers .layer-list.is-compact .layer-empty {
    grid-column: 1 / -1 !important;
  }

  body .app-shell:not([data-workflow]) .layers,
  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers,
  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers-panel,
  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers-panel .layer-panel-toolbar,
  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers-panel .layer-panel-actions,
  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers-panel .layer-list {
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .app-shell:not([data-workflow]) .layers,
  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers,
  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers-panel {
    display: block !important;
  }

  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers-panel .layer-panel-toolbar,
  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers-panel .layer-panel-actions,
  body .app-shell:not(.inspector-collapsed)[data-workflow="select"] .layers-panel .layer-list {
    display: grid !important;
  }

  body .layers[data-active-tab="layers"] > .panel:not(.layers-panel) {
    display: none !important;
    visibility: hidden !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body .layers[data-active-tab="layers"] > .layers-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  body .layers[data-active-tab="layers"] > .layers-panel .layer-panel-toolbar,
  body .layers[data-active-tab="layers"] > .layers-panel .layer-panel-actions,
  body .layers[data-active-tab="layers"] > .layers-panel .layer-list {
    position: static !important;
  }

  body .layers[data-active-tab="layers"] > .layers-panel .layer-list {
    max-height: min(220px, 28dvh) !important;
    margin: 0 !important;
    overflow: hidden auto !important;
  }

  body .layers > .inspector-view {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .layers > .inspector-view[hidden],
  body .layers > .inspector-view[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
  }

  body .layers > .inspector-view > .panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 8px 4px !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  body .layers > .inspector-view > .panel:first-child {
    border-top: 0 !important;
  }

  body .layers.has-panel-focus > .inspector-view:not([hidden]) > .panel:not(.is-panel-focus) {
    display: none !important;
  }

  body .layers[data-active-tab="layers"] > .inspector-view:not([data-inspector-view="layers"]),
  body .layers[data-active-tab="properties"] > .inspector-view:not([data-inspector-view="properties"]),
  body .layers[data-active-tab="library"] > .inspector-view:not([data-inspector-view="library"]),
  body .layers[data-active-tab="pdf"] > .inspector-view:not([data-inspector-view="pdf"]),
  body .layers[data-active-tab="build"] > .inspector-view:not([data-inspector-view="build"]) {
    display: none !important;
    visibility: hidden !important;
  }

  body .layers > .inspector-view[data-inspector-view="layers"] > .stats {
    display: none !important;
  }

  body .layers > .inspector-view[data-inspector-view="layers"] > .layers-panel {
    display: block !important;
    padding: 4px !important;
  }

  body .layers > .inspector-view[data-inspector-view="layers"] .layer-panel-toolbar,
  body .layers > .inspector-view[data-inspector-view="layers"] .layer-panel-actions {
    position: static !important;
  }

  body .layers > .inspector-view[data-inspector-view="layers"] .layer-list {
    max-height: min(220px, 28dvh) !important;
    margin: 0 !important;
    overflow: hidden auto !important;
  }
}

/* Source: curve-inspector.css */
/*
  v290 Curve-style mobile inspector.
  This file resets only the bottom inspector and its dock so legacy mobile
  experiments cannot leak layout or visibility rules into these surfaces.
*/

@media (max-width: 760px) {
  body .layers,
  body .layers *,
  body .bottom-workflows,
  body .bottom-workflows * {
    all: revert !important;
    box-sizing: border-box !important;
    letter-spacing: 0 !important;
  }

  body .layers::before,
  body .layers::after,
  body .layers *::before,
  body .layers *::after,
  body .bottom-workflows::before,
  body .bottom-workflows::after,
  body .bottom-workflows *::before,
  body .bottom-workflows *::after {
    content: none !important;
    display: none !important;
  }

  body .layers {
    --curve-sheet: #f8f8f9;
    --curve-row: #e8e8ea;
    --curve-control: #e3e3e5;
    --curve-line: #d0d1d4;
    --curve-text: #151619;
    --curve-muted: #6f7278;
    --curve-accent: #c98a2a;
    position: fixed !important;
    z-index: 4500 !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 0 !important;
    width: auto !important;
    height: min(58dvh, 570px) !important;
    min-height: 360px !important;
    max-height: min(58dvh, 570px) !important;
    display: block !important;
    padding: 24px 14px 86px !important;
    overflow: hidden auto !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    border-bottom: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: var(--curve-sheet) !important;
    color: var(--curve-text) !important;
    box-shadow: 0 -8px 26px rgba(23, 25, 30, 0.13) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  body .layers::before {
    content: "" !important;
    position: absolute !important;
    top: 9px !important;
    left: 50% !important;
    width: 44px !important;
    height: 4px !important;
    display: block !important;
    border-radius: 2px !important;
    background: #888b90 !important;
    transform: translateX(-50%) !important;
  }

  body .app-shell.inspector-collapsed .layers {
    display: none !important;
  }

  body .layers [hidden],
  body .layers [aria-hidden="true"] {
    display: none !important;
  }

  body .layers .inspector-title {
    position: sticky !important;
    z-index: 9 !important;
    top: -24px !important;
    width: calc(100% + 28px) !important;
    height: 70px !important;
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) 44px 34px !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 -14px 8px !important;
    padding: 14px 12px 6px !important;
    background: rgba(248, 248, 249, 0.96) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }

  body .layers .inspector-title h2 {
    min-width: 0 !important;
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--curve-text) !important;
    font-size: 20px !important;
    font-weight: 720 !important;
    line-height: 24px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .inspector-title .sheet-select-button {
    grid-column: 1 !important;
  }

  body .layers .inspector-title .sheet-add-button {
    grid-column: 3 !important;
  }

  body .layers .inspector-title .sheet-close-button {
    grid-column: 4 !important;
  }

  body .layers .inspector-title[data-header-mode="layers"] h2 {
    grid-column: 2 !important;
  }

  body .layers .inspector-title[data-header-mode="library"] h2 {
    grid-column: 1 / 3 !important;
  }

  body .layers .inspector-title[data-header-mode="simple"] h2 {
    grid-column: 1 / 4 !important;
  }

  body .layers .inspector-title p,
  body .layers .inspector-tabs {
    display: none !important;
  }

  body .layers .sheet-select-button,
  body .layers .sheet-add-button,
  body .layers .sheet-close-button {
    all: unset !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    height: 42px !important;
    color: var(--curve-text) !important;
    background: var(--curve-control) !important;
    cursor: pointer !important;
  }

  body .layers .sheet-select-button {
    width: 82px !important;
    border-radius: 22px !important;
    font-size: 14px !important;
    font-weight: 650 !important;
  }

  body .layers .sheet-select-button.is-active {
    color: #fff !important;
    background: var(--curve-accent) !important;
  }

  body .layers .sheet-add-button {
    width: 42px !important;
    border-radius: 50% !important;
  }

  body .layers .sheet-close-button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  body .layers .sheet-add-button img,
  body .layers .sheet-close-button img {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    object-fit: contain !important;
  }

  body .layers .style-section-nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin: 0 0 10px !important;
    padding: 3px !important;
    border-radius: 12px !important;
    background: var(--curve-control) !important;
  }

  body .layers .style-section-nav[hidden] {
    display: none !important;
  }

  body .layers .style-section-nav button {
    all: unset !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 9px !important;
    color: var(--curve-muted) !important;
    font-size: 10px !important;
    font-weight: 620 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  body .layers .style-section-nav button.is-active {
    color: var(--curve-text) !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(24, 26, 31, 0.08) !important;
  }

  body .layers > .inspector-view {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body .layers > .inspector-view[hidden],
  body .layers > .inspector-view[aria-hidden="true"],
  body .layers[data-active-tab="layers"] > .inspector-view:not([data-inspector-view="layers"]),
  body .layers[data-active-tab="properties"] > .inspector-view:not([data-inspector-view="properties"]),
  body .layers[data-active-tab="artboard"] > .inspector-view:not([data-inspector-view="artboard"]),
  body .layers[data-active-tab="library"] > .inspector-view:not([data-inspector-view="library"]),
  body .layers[data-active-tab="pdf"] > .inspector-view:not([data-inspector-view="pdf"]),
  body .layers[data-active-tab="build"] > .inspector-view:not([data-inspector-view="build"]) {
    display: none !important;
  }

  body .layers > .inspector-view > .panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--curve-text) !important;
    box-shadow: none !important;
  }

  body .layers.has-panel-focus > .inspector-view:not([hidden]) > .panel:not(.is-panel-focus) {
    display: none !important;
  }

  body .layers > .inspector-view > .panel > h2,
  body .layers > .inspector-view > .panel > .panel-heading {
    display: none !important;
  }

  body .layers > .inspector-view[data-inspector-view="artboard"] > .panel {
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--curve-line) !important;
  }

  body .layers > .inspector-view[data-inspector-view="artboard"] > .panel + .panel {
    padding-top: 12px !important;
  }

  body .layers > .inspector-view[data-inspector-view="artboard"] > .panel > h2 {
    display: block !important;
    margin: 0 0 10px !important;
    color: var(--curve-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  body .layers > .inspector-view[data-inspector-view="layers"] > .stats {
    display: none !important;
  }

  body .layers .layers-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
  }

  body .layers .layer-panel-toolbar {
    display: none !important;
  }

  body .layers .layer-list {
    order: 1 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 174px !important;
    max-height: min(360px, 40dvh) !important;
    display: block !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow: hidden auto !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: var(--curve-row) !important;
    list-style: none !important;
  }

  body .layers .layer-list li {
    position: relative !important;
    width: 100% !important;
    min-height: 52px !important;
    display: grid !important;
    grid-template-columns: 20px 38px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--curve-text) !important;
  }

  body .layers .layer-list li:last-child {
    border-bottom: 0 !important;
  }

  body .layers .layer-list li.is-selected {
    background: rgba(201, 138, 42, 0.11) !important;
  }

  body .layers .layer-drag-handle,
  body .layers .layer-toggle,
  body .layers .layer-group-disclosure {
    all: unset !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
  }

  body .layers .layer-drag-handle {
    width: 20px !important;
    height: 34px !important;
    opacity: 0.48 !important;
  }

  body .layers .layer-drag-handle img {
    width: 14px !important;
    height: 18px !important;
  }

  body .layers .layer-thumbnail {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid #8f9297 !important;
    border-radius: 8px !important;
    background: #d6d7da !important;
  }

  body .layers .layer-thumbnail img {
    width: 21px !important;
    height: 21px !important;
    display: block !important;
    object-fit: contain !important;
  }

  body .layers .layer-thumbnail.has-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body .layers .layer-name {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  body .layers .layer-name > span:first-child {
    overflow: hidden !important;
    color: var(--curve-text) !important;
    font-size: 13px !important;
    font-weight: 590 !important;
    line-height: 17px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-kind {
    overflow: hidden !important;
    color: var(--curve-muted) !important;
    font-size: 10px !important;
    line-height: 13px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
  }

  body .layers .layer-toggle {
    width: 28px !important;
    height: 32px !important;
    border-radius: 8px !important;
  }

  body .layers .layer-toggle img {
    width: 17px !important;
    height: 17px !important;
    opacity: 0.62 !important;
  }

  body .layers .layer-panel-actions {
    display: none !important;
  }

  body .layers .layer-compact-controls {
    position: relative !important;
    order: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  body .layers .layer-compact-controls > label {
    position: relative !important;
    display: block !important;
  }

  body .layers .layer-compact-controls > label > span {
    position: absolute !important;
    z-index: 1 !important;
    top: 6px !important;
    left: 11px !important;
    color: var(--curve-muted) !important;
    font-size: 8px !important;
    font-weight: 650 !important;
    line-height: 10px !important;
    pointer-events: none !important;
  }

  body .layers .layer-compact-controls > label > select {
    height: 44px !important;
    padding: 17px 30px 4px 10px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: var(--curve-control) !important;
    color: var(--curve-text) !important;
    font-size: 11px !important;
    font-weight: 620 !important;
  }

  body .layers .layer-panel-actions button,
  body .layers .layer-add-menu button,
  body .layers .layer-more-grid button,
  body .layers .layer-symbol-actions button {
    all: unset !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 42px !important;
    display: grid !important;
    grid-template-rows: 20px 13px !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    color: var(--curve-text) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  body .layers .layer-panel-actions button:active,
  body .layers .layer-add-menu button:active,
  body .layers .layer-more-grid button:active {
    background: #fff !important;
  }

  body .layers .layer-panel-actions img,
  body .layers .layer-add-menu img,
  body .layers .layer-more-grid img {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    object-fit: contain !important;
  }

  body .layers button:disabled {
    opacity: 0.38 !important;
    pointer-events: none !important;
  }

  body .layers .layer-add-menu,
  body .layers .layer-more-actions {
    order: 0 !important;
    width: 100% !important;
    display: grid !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid var(--curve-line) !important;
    border-radius: 16px !important;
    background: var(--curve-row) !important;
  }

  body .layers .layer-add-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body .layers .layer-more-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  body .layers .layer-add-menu,
  body .layers .layer-more-actions {
    display: none !important;
  }

  body .layers .layer-symbol-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin-top: 5px !important;
  }

  body .layers .layer-appearance-panel {
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body .layers .layer-appearance-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.85fr) !important;
    gap: 7px !important;
    padding: 0 0 8px !important;
  }

  body .layers .layer-appearance-controls label > span {
    min-height: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }

  body .layers .layer-appearance-controls output {
    color: var(--curve-text) !important;
    font-size: 9px !important;
    font-variant-numeric: tabular-nums !important;
  }

  body .layers .layer-appearance-controls select {
    height: 34px !important;
    min-height: 34px !important;
    padding: 5px 22px 5px 7px !important;
    font-size: 10px !important;
  }

  body .layers .style-selection-status,
  body .layers .mini-status {
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 9px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    border: 1px solid var(--curve-line) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--curve-muted) !important;
    font-size: 10px !important;
    line-height: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers details {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--curve-line) !important;
    background: transparent !important;
  }

  body .layers details > summary {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 4px !important;
    color: var(--curve-text) !important;
    font-size: 15px !important;
    font-weight: 680 !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  body .layers details > summary::-webkit-details-marker {
    display: none !important;
  }

  body .layers details > summary::after {
    content: "+" !important;
    display: block !important;
    color: var(--curve-muted) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
  }

  body .layers details[open] > summary::after {
    content: "−" !important;
  }

  body .layers .layer-compact-controls .layer-appearance-panel {
    position: static !important;
    order: 0 !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
  }

  body .layers .layer-compact-controls .layer-appearance-panel > summary {
    position: relative !important;
    height: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    grid-template-rows: 10px 16px !important;
    align-content: center !important;
    justify-content: stretch !important;
    gap: 1px !important;
    padding: 4px 24px 3px 10px !important;
    overflow: hidden !important;
    border-radius: 11px !important;
    background: var(--curve-control) !important;
  }

  body .layers .layer-compact-controls .layer-appearance-panel > summary > span {
    overflow: hidden !important;
    color: var(--curve-muted) !important;
    font-size: 8px !important;
    font-weight: 650 !important;
    line-height: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-compact-controls .layer-appearance-panel > summary > strong {
    overflow: hidden !important;
    color: var(--curve-text) !important;
    font-size: 11px !important;
    font-weight: 620 !important;
    line-height: 16px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-compact-controls .layer-appearance-panel > summary::after {
    content: "v" !important;
    position: absolute !important;
    top: 14px !important;
    right: 9px !important;
    color: var(--curve-text) !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
  }

  body .layers .layer-compact-controls .layer-appearance-panel[open] > summary::after {
    content: "^" !important;
  }

  body .layers .layer-compact-controls .layer-appearance-controls {
    position: absolute !important;
    z-index: 40 !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.85fr) !important;
    gap: 7px !important;
    padding: 10px !important;
    border: 1px solid var(--curve-line) !important;
    border-radius: 13px !important;
    background: var(--curve-sheet) !important;
    box-shadow: 0 8px 20px rgba(23, 25, 30, 0.14) !important;
  }

  body .layers .style-inspector-content,
  body .layers .controls {
    display: grid !important;
    gap: 8px !important;
    padding: 0 0 10px !important;
  }

  body .layers label {
    min-width: 0 !important;
    display: grid !important;
    gap: 5px !important;
    color: var(--curve-muted) !important;
    font-size: 10px !important;
    font-weight: 560 !important;
  }

  body .layers input,
  body .layers select,
  body .layers textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border: 1px solid var(--curve-line) !important;
    border-radius: 10px !important;
    background: var(--curve-control) !important;
    color: var(--curve-text) !important;
    font: inherit !important;
  }

  body .layers input[type="range"] {
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .layers input[type="color"] {
    height: 38px !important;
    padding: 3px !important;
  }

  body .layers .library-section-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin: 0 0 10px !important;
    padding: 3px !important;
    border-radius: 14px !important;
    background: var(--curve-control) !important;
  }

  body .layers .library-section-tabs button,
  body .layers .library-actions button,
  body .layers .library-asset {
    all: unset !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
  }

  body .layers .library-section-tabs button {
    min-height: 42px !important;
    grid-template-rows: 20px 13px !important;
    gap: 2px !important;
    border-radius: 11px !important;
    color: var(--curve-muted) !important;
    font-size: 8px !important;
    font-weight: 600 !important;
  }

  body .layers .library-section-tabs button.is-active {
    color: var(--curve-accent) !important;
    background: #fff !important;
  }

  body .layers .library-section-tabs img {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    object-fit: contain !important;
  }

  body .layers .library-browse-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px 82px !important;
    gap: 5px !important;
    margin: 0 0 10px !important;
  }

  body .layers .library-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
  }

  body .layers .library-actions button {
    min-height: 42px !important;
    grid-template-columns: 20px minmax(0, auto) !important;
    gap: 6px !important;
    padding: 0 9px !important;
    border-radius: 11px !important;
    background: var(--curve-control) !important;
    color: var(--curve-text) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  body .layers .library-actions img {
    width: 18px !important;
    height: 18px !important;
  }

  body .layers .library-section > h3 {
    margin: 0 0 8px !important;
    color: var(--curve-text) !important;
    font-size: 14px !important;
    font-weight: 680 !important;
  }

  body .layers .library-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .layers .library-asset,
  body .layers .saved-library-card {
    min-height: 82px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: var(--curve-row) !important;
    color: var(--curve-text) !important;
  }

  body .layers .library-asset {
    grid-template-rows: 48px 18px !important;
    gap: 3px !important;
    padding: 7px !important;
    font-size: 10px !important;
    font-weight: 560 !important;
  }

  body .layers .library-asset img {
    width: 36px !important;
    height: 36px !important;
    display: block !important;
    object-fit: contain !important;
  }

  body .layers .library-background {
    grid-template-rows: 50px 17px !important;
  }

  body .layers .library-background-preview {
    width: 100% !important;
    height: 48px !important;
    display: block !important;
    border: 1px solid rgba(25, 28, 33, 0.12) !important;
    border-radius: 7px !important;
  }

  body .layers .library-background.is-paper .library-background-preview {
    background: #f5f3ee !important;
  }

  body .layers .library-background.is-grid .library-background-preview {
    background-color: #fff !important;
    background-image:
      linear-gradient(#d7dde5 1px, transparent 1px),
      linear-gradient(90deg, #d7dde5 1px, transparent 1px) !important;
    background-size: 10px 10px !important;
  }

  body .layers .library-background.is-blueprint .library-background-preview {
    background-color: #15314f !important;
    background-image:
      linear-gradient(rgba(116, 180, 216, 0.32) 1px, transparent 1px),
      linear-gradient(90deg, rgba(116, 180, 216, 0.32) 1px, transparent 1px) !important;
    background-size: 11px 11px !important;
  }

  body .layers .library-background.is-sunset .library-background-preview {
    background: linear-gradient(135deg, #f7cc72, #ed6a5a) !important;
  }

  body .layers .library-background.is-studio .library-background-preview {
    background: radial-gradient(circle at 50% 35%, #fff, #8d96a3) !important;
  }

  body .layers .library-background.is-mesh .library-background-preview {
    background: conic-gradient(from 60deg, #67d5c8, #476bd7, #e983a8, #67d5c8) !important;
  }

  body .layers .emoji-library-asset {
    grid-template-rows: 48px 17px !important;
  }

  body .layers .emoji-library-asset > span:first-child {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 31px !important;
    line-height: 44px !important;
  }

  body .layers .emoji-library-asset small {
    overflow: hidden !important;
    color: var(--curve-text) !important;
    font-size: 10px !important;
    font-weight: 560 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .bottom-workflows {
    position: fixed !important;
    z-index: 4700 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 3px 6px env(safe-area-inset-bottom, 0px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid #cfd0d3 !important;
    border-radius: 0 !important;
    background: rgba(248, 248, 249, 0.98) !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  }

  body .bottom-workflows button {
    all: unset !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    height: 60px !important;
    display: grid !important;
    grid-template-rows: 27px 16px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    color: #17181b !important;
    font-size: 10px !important;
    font-weight: 560 !important;
    line-height: 14px !important;
    cursor: pointer !important;
  }

  body .bottom-workflows button:nth-child(n + 5) {
    display: none !important;
  }

  body .bottom-workflows button.is-active {
    color: var(--curve-accent, #c98a2a) !important;
    background: #e7e7e9 !important;
  }

  body .bottom-workflows button img {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
    object-fit: contain !important;
  }

  body .bottom-workflows button span {
    width: 100% !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-theme="dark"] body .layers {
    --curve-sheet: #f0f0f2;
    --curve-row: #dedee1;
    --curve-control: #d8d8db;
    --curve-line: #c5c6ca;
    --curve-text: #17181b;
    --curve-muted: #666970;
  }
}

/* v290: compact Library header and flat asset browser. */
@media (max-width: 760px) {
  body .layers .sheet-select-button[hidden],
  body .layers .sheet-add-button[hidden],
  body .layers .sheet-close-button[hidden] {
    display: none !important;
  }

  body .layers .inspector-title {
    height: 56px !important;
    min-height: 56px !important;
    margin-bottom: 3px !important;
    padding-top: 15px !important;
    padding-bottom: 3px !important;
  }

  body .layers .inspector-title[data-header-mode="library"] {
    grid-template-columns: 34px minmax(0, 1fr) 38px 34px !important;
    gap: 4px !important;
  }

  body .layers .inspector-title[data-header-mode="library"] h2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body .layers .inspector-title[data-header-mode="library"] .sheet-add-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  body .layers .inspector-title[data-header-mode="library"] .sheet-close-button {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  body .layers .inspector-title h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 21px !important;
  }

  body .layers .sheet-select-button {
    width: 72px !important;
    height: 36px !important;
    border-radius: 4px !important;
    background: transparent !important;
    font-size: 13px !important;
  }

  body .layers .sheet-add-button,
  body .layers .sheet-close-button {
    width: 34px !important;
    height: 34px !important;
    border-radius: 4px !important;
    background: transparent !important;
  }

  body .layers .sheet-add-button:active,
  body .layers .sheet-close-button:active,
  body .layers .sheet-select-button:active {
    background: #e3e5e8 !important;
  }

  body .layers .sheet-add-button img,
  body .layers .sheet-close-button img {
    width: 19px !important;
    height: 19px !important;
  }

  body .layers > .inspector-view[data-inspector-view="library"] > .panel > h2 {
    display: none !important;
  }

  body .layers > .inspector-view[data-inspector-view="library"] {
    padding-top: 0 !important;
  }

  body .layers .library-section-tabs {
    width: calc(100% + 28px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 -14px 8px !important;
    padding: 0 8px !important;
    border-top: 1px solid var(--curve-line) !important;
    border-bottom: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
    background: #f1f2f4 !important;
  }

  body .layers .library-section-tabs button {
    position: relative !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-rows: 22px 14px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    padding: 3px 1px 2px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid rgba(132, 135, 141, 0.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--curve-muted) !important;
    font-size: 9px !important;
    font-weight: 560 !important;
  }

  body .layers .library-section-tabs button:last-child {
    border-right: 0 !important;
  }

  body .layers .library-section-tabs button.is-active {
    color: var(--curve-text) !important;
    background: #e3e5e8 !important;
    box-shadow: inset 0 -2px 0 var(--curve-accent) !important;
  }

  body .layers .library-section-tabs img {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.78 !important;
  }

  body .layers .library-section-tabs button.is-active img {
    opacity: 1 !important;
  }

  body .layers #libraryStatus {
    min-height: 30px !important;
    margin: 0 0 8px !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--curve-muted) !important;
    font-size: 10px !important;
  }

  body .layers .library-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
  }

  body .layers .library-actions button {
    width: auto !important;
    min-width: 122px !important;
    min-height: 36px !important;
    display: inline-grid !important;
    grid-template-columns: 18px auto !important;
    gap: 6px !important;
    padding: 6px 9px !important;
    border: 1px solid var(--curve-line) !important;
    border-radius: 4px !important;
    background: #f7f7f8 !important;
    color: var(--curve-text) !important;
    font-size: 10px !important;
    font-weight: 560 !important;
  }

  body .layers .library-actions button:disabled {
    background: #eeeeef !important;
    opacity: 0.5 !important;
  }

  body .layers .library-actions img {
    width: 17px !important;
    height: 17px !important;
  }

  body .layers .library-browse-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
  }

  body .layers .library-browse-controls #librarySearch {
    grid-column: 1 / -1 !important;
  }

  body .layers .library-browse-controls input,
  body .layers .library-browse-controls select {
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 9px !important;
    border: 1px solid #c8cace !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: var(--curve-text) !important;
    font-size: 11px !important;
  }

  body .layers .library-section > h3 {
    margin: 0 0 7px !important;
    font-size: 13px !important;
    font-weight: 680 !important;
  }

  body .layers .library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body .layers .saved-library-asset,
  body .layers .saved-library-asset > button:first-child,
  body .layers .library-asset {
    border-radius: 4px !important;
  }

  body .layers .saved-library-asset > button:first-child {
    min-height: 76px !important;
    padding: 7px 4px !important;
    background: #f7f7f8 !important;
  }

  body .layers .saved-library-delete {
    top: 1px !important;
    right: 1px !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    border-radius: 3px !important;
    background: rgba(247, 247, 248, 0.92) !important;
  }
}

/* v289: flat, hierarchy-first Layers panel with integrated four-tab dock. */
@media (max-width: 760px) {
  body .layers .layers-panel {
    position: relative !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  body .layers .layer-primary-toolbar {
    order: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border-top: 1px solid var(--curve-line) !important;
    border-bottom: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
    background: var(--curve-sheet) !important;
  }

  body .layers .layer-primary-toolbar button {
    all: unset !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 52px !important;
    display: grid !important;
    grid-template-rows: 23px 14px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    padding: 3px 1px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid rgba(132, 135, 141, 0.2) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--curve-text) !important;
    cursor: pointer !important;
  }

  body .layers .layer-primary-toolbar button:last-child {
    border-right: 0 !important;
  }

  body .layers .layer-primary-toolbar button:active,
  body .layers .layer-primary-toolbar button[aria-expanded="true"] {
    background: #e5e7ea !important;
  }

  body .layers .layer-primary-toolbar button:disabled {
    opacity: 0.32 !important;
    pointer-events: none !important;
  }

  body .layers .layer-primary-toolbar img {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 0.82 !important;
  }

  body .layers .layer-primary-toolbar span {
    width: 100% !important;
    overflow: hidden !important;
    color: var(--curve-text) !important;
    font-size: 9.5px !important;
    font-weight: 560 !important;
    line-height: 13px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-add-menu,
  body .layers .layer-more-actions,
  body .layers .layer-appearance-panel[open] {
    position: absolute !important;
    z-index: 90 !important;
    top: 61px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-height: min(340px, 44dvh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden auto !important;
    border: 1px solid #bfc2c7 !important;
    border-radius: 4px !important;
    background: #f8f8f9 !important;
    box-shadow: 0 10px 24px rgba(23, 25, 30, 0.18) !important;
  }

  body .layers .layer-add-menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  body .layers .layer-more-actions {
    display: block !important;
  }

  body .layers .layer-add-menu[hidden],
  body .layers .layer-more-actions[hidden],
  body .layers .layer-appearance-panel:not([open]) {
    display: none !important;
  }

  body .layers .layer-add-menu > header,
  body .layers .layer-more-actions > header {
    min-height: 45px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 11px !important;
    border-bottom: 1px solid var(--curve-line) !important;
    background: #eef0f2 !important;
  }

  body .layers .layer-add-menu > header strong,
  body .layers .layer-more-actions > header strong {
    color: var(--curve-text) !important;
    font-size: 13px !important;
    font-weight: 680 !important;
  }

  body .layers .layer-add-menu > header span,
  body .layers .layer-more-actions > header span {
    color: var(--curve-muted) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  body .layers .layer-add-menu > button,
  body .layers .layer-more-grid > button {
    all: unset !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 40px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(132, 135, 141, 0.22) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--curve-text) !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    line-height: 15px !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  body .layers .layer-add-menu > button:last-child {
    border-bottom: 0 !important;
  }

  body .layers .layer-add-menu > button:active,
  body .layers .layer-more-grid > button:active {
    background: #e5e7ea !important;
  }

  body .layers .layer-add-menu > button img,
  body .layers .layer-more-grid > button img {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 0.78 !important;
  }

  body .layers .layer-add-menu > button span,
  body .layers .layer-more-grid > button span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .layer-more-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  body .layers .layer-more-grid > button:nth-child(odd) {
    border-right: 1px solid rgba(132, 135, 141, 0.22) !important;
  }

  body .layers .layer-symbol-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--curve-line) !important;
  }

  body .layers .layer-symbol-actions button {
    all: unset !important;
    box-sizing: border-box !important;
    min-height: 38px !important;
    display: grid !important;
    place-items: center !important;
    padding: 6px 8px !important;
    border-right: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
    color: var(--curve-text) !important;
    font-size: 10px !important;
    font-weight: 560 !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  body .layers .layer-symbol-actions button:last-child {
    border-right: 0 !important;
  }

  body .layers .layer-appearance-panel[open] {
    display: block !important;
    border-top: 1px solid #bfc2c7 !important;
  }

  body .layers .layer-appearance-panel > summary {
    min-height: 46px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 0 8px !important;
    padding: 7px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--curve-line) !important;
    background: #eef0f2 !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  body .layers .layer-appearance-panel > summary::-webkit-details-marker {
    display: none !important;
  }

  body .layers .layer-appearance-panel > summary::after {
    content: "×" !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    color: var(--curve-muted) !important;
    font-size: 19px !important;
    font-weight: 400 !important;
  }

  body .layers .layer-appearance-panel > summary strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    color: var(--curve-text) !important;
    font-size: 13px !important;
    font-weight: 680 !important;
  }

  body .layers .layer-appearance-panel > summary span {
    grid-column: 1 !important;
    grid-row: 2 !important;
    color: var(--curve-muted) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  body .layers .layer-appearance-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  body .layers .layer-appearance-controls label {
    display: grid !important;
    gap: 5px !important;
    color: var(--curve-text) !important;
    font-size: 11px !important;
    font-weight: 560 !important;
  }

  body .layers .layer-appearance-controls label > span {
    min-height: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    color: var(--curve-text) !important;
    font-size: 11px !important;
  }

  body .layers .layer-appearance-controls select {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 28px 6px 8px !important;
    border: 1px solid #c7c9cd !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: var(--curve-text) !important;
    font-size: 12px !important;
  }

  body .layers .layer-list {
    order: 1 !important;
    min-height: 238px !important;
    max-height: min(410px, 50dvh) !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
    background: #f5f6f7 !important;
  }

  body .layers .layer-list li {
    min-height: 51px !important;
    padding: 5px 3px !important;
    border-bottom: 1px solid #d3d5d8 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body .layers .layer-list li.is-selected {
    padding-left: 6px !important;
    background: #e4e7ea !important;
    box-shadow: inset 3px 0 0 var(--curve-accent, #c98a2a) !important;
  }

  body .layers .layer-thumbnail {
    border-radius: 4px !important;
    background: #fff !important;
  }

  body .layers .layer-toggle {
    border-radius: 4px !important;
  }

  body .bottom-workflows {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body .bottom-workflows button,
  body .bottom-workflows button[data-workflow] {
    display: grid !important;
    border-radius: 0 !important;
  }

  body .bottom-workflows button:nth-child(-n + 4) {
    display: grid !important;
  }

  body .bottom-workflows button:nth-child(n + 5) {
    display: none !important;
  }

  body .bottom-workflows button.is-active {
    border-radius: 0 !important;
    background: #e6e8eb !important;
    box-shadow: inset 0 2px 0 var(--curve-accent, #c98a2a) !important;
  }
}

/* Source: release-320.css */
/* Release 308 must load after the legacy iOS inspector styles. */

#exportPdfCurrentPageButton img,
#exportPdfAllPagesButton img {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

/* Imported mesh editing remains part of the integrated 3D control strip. */
.preview3d-editor-modes {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.preview3d-mesh-controls {
  grid-area: 1 / 1;
  width: min(100%, 1080px);
  min-height: 65px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(132px, 0.8fr) minmax(190px, 1fr) minmax(210px, 1.05fr) minmax(236px, 1.2fr) minmax(150px, 0.85fr);
  align-items: stretch;
}

.preview3d-mesh-controls[hidden] {
  display: none;
}

.preview3d-mesh-modes,
.preview3d-mesh-delta,
.preview3d-mesh-actions,
.preview3d-mesh-topology {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  padding: 7px;
  border-right: 1px solid rgba(23, 33, 43, 0.08);
}

.preview3d-mesh-topology {
  grid-template-columns: minmax(126px, 1.35fr) minmax(84px, 0.85fr) 48px;
}

.preview3d-mesh-topology label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  color: #626b76;
  font: 700 8px/1 system-ui, sans-serif;
}

.preview3d-mesh-topology select,
.preview3d-mesh-topology input,
.preview3d-mesh-topology button {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 5px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.76);
  color: #37414c;
  font: 600 9px/1 system-ui, sans-serif;
}

.preview3d-mesh-topology select {
  padding-right: 1px;
}

.preview3d-mesh-modes button,
.preview3d-mesh-actions button {
  min-width: 0;
  height: 30px;
  padding: 0 4px;
  border: 1px solid rgba(23, 33, 43, 0.13);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  color: #37414c;
  font: 600 9px/11px system-ui, sans-serif;
}

.preview3d-mesh-modes button.is-active {
  border-color: rgba(20, 115, 230, 0.42);
  background: rgba(20, 115, 230, 0.1);
  color: #1167c9;
}

.preview3d-mesh-modes button:disabled,
.preview3d-mesh-actions button:disabled,
.preview3d-mesh-delta input:disabled,
.preview3d-mesh-topology select:disabled,
.preview3d-mesh-topology input:disabled,
.preview3d-mesh-topology button:disabled {
  opacity: 0.42;
}

.preview3d-mesh-delta label {
  min-width: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  color: #626b76;
  font: 700 9px/1 system-ui, sans-serif;
}

.preview3d-mesh-delta input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 4px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: 500 11px/1 system-ui, sans-serif;
}

.preview3d-mesh-controls output {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  overflow: hidden;
  color: #626b76;
  font: 500 10px/13px system-ui, sans-serif;
  text-overflow: ellipsis;
}

html[data-theme="dark"] .preview3d-mesh-modes,
html[data-theme="dark"] .preview3d-mesh-delta,
html[data-theme="dark"] .preview3d-mesh-actions,
html[data-theme="dark"] .preview3d-mesh-topology {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .preview3d-mesh-modes button,
html[data-theme="dark"] .preview3d-mesh-actions button,
html[data-theme="dark"] .preview3d-mesh-delta input,
html[data-theme="dark"] .preview3d-mesh-topology select,
html[data-theme="dark"] .preview3d-mesh-topology input,
html[data-theme="dark"] .preview3d-mesh-topology button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(17, 20, 25, 0.5);
  color: #eef2f7;
}

html[data-theme="dark"] .preview3d-mesh-modes button.is-active {
  border-color: rgba(94, 166, 255, 0.45);
  background: rgba(73, 151, 245, 0.15);
  color: #86baff;
}

html[data-theme="dark"] .preview3d-mesh-delta label,
html[data-theme="dark"] .preview3d-mesh-topology label,
html[data-theme="dark"] .preview3d-mesh-controls output {
  color: #c4cbd5;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-mesh-modes,
  html[data-theme="auto"] .preview3d-mesh-delta,
  html[data-theme="auto"] .preview3d-mesh-actions,
  html[data-theme="auto"] .preview3d-mesh-topology {
    border-color: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="auto"] .preview3d-mesh-modes button,
  html[data-theme="auto"] .preview3d-mesh-actions button,
  html[data-theme="auto"] .preview3d-mesh-delta input,
  html[data-theme="auto"] .preview3d-mesh-topology select,
  html[data-theme="auto"] .preview3d-mesh-topology input,
  html[data-theme="auto"] .preview3d-mesh-topology button {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(17, 20, 25, 0.5);
    color: #eef2f7;
  }

  html[data-theme="auto"] .preview3d-mesh-modes button.is-active {
    border-color: rgba(94, 166, 255, 0.45);
    background: rgba(73, 151, 245, 0.15);
    color: #86baff;
  }

  html[data-theme="auto"] .preview3d-mesh-delta label,
  html[data-theme="auto"] .preview3d-mesh-topology label,
  html[data-theme="auto"] .preview3d-mesh-controls output {
    color: #c4cbd5;
  }
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-controls:not([hidden])) {
    min-height: 166px;
  }

  .preview3d-mesh-controls {
    grid-template-columns: minmax(118px, 0.85fr) minmax(176px, 1.15fr);
    grid-template-areas:
      "modes status"
      "delta actions"
      "topology topology";
    min-height: 118px;
  }

  .preview3d-mesh-modes {
    grid-area: modes;
  }

  .preview3d-mesh-delta {
    grid-area: delta;
  }

  .preview3d-mesh-actions {
    grid-area: actions;
  }

  .preview3d-mesh-topology {
    grid-area: topology;
    grid-template-columns: minmax(142px, 1.35fr) minmax(92px, 0.85fr) 48px;
    border-top: 1px solid rgba(23, 33, 43, 0.07);
  }

  .preview3d-mesh-controls output {
    grid-area: status;
    min-height: 22px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(23, 33, 43, 0.07);
  }

  .preview3d-mesh-modes,
  .preview3d-mesh-delta,
  .preview3d-mesh-actions,
  .preview3d-mesh-topology {
    gap: 3px;
    padding: 5px 4px;
  }

  .preview3d-mesh-modes button,
  .preview3d-mesh-actions button,
  .preview3d-mesh-delta input,
  .preview3d-mesh-topology select,
  .preview3d-mesh-topology input,
  .preview3d-mesh-topology button {
    height: 28px;
  }

  .preview3d-editor:has(.preview3d-mesh-controls:not([hidden])) ~ .preview3d-status {
    bottom: calc(176px + env(safe-area-inset-bottom));
  }
}

/* Tags and object hierarchy stay inside the 3D surface, like the other build inspectors. */
.preview3d-outliner-panel {
  position: absolute;
  z-index: 8;
  top: calc(66px + env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(306px, calc(100vw - 24px));
  max-height: calc(100dvh - 142px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(72px, 1fr);
  overflow: hidden;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 7px;
  background: rgba(250, 251, 252, 0.98);
  color: #17212b;
  box-shadow: 0 10px 30px rgba(30, 39, 52, 0.15);
  backdrop-filter: blur(18px) saturate(140%);
}

.preview3d-outliner-panel[hidden] {
  display: none;
}

.preview3d-outliner-panel > header,
.preview3d-outliner-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(23, 33, 43, 0.12);
}

.preview3d-outliner-panel > header strong {
  font-size: 13px;
  font-weight: 700;
}

.preview3d-outliner-panel > header button,
.preview3d-tag-list button,
.preview3d-object-list > li > button:first-child {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
}

.preview3d-outliner-panel button img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.preview3d-outliner-search,
.preview3d-tag-create {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
}

.preview3d-outliner-search {
  grid-template-columns: 18px minmax(0, 1fr);
}

.preview3d-outliner-search img {
  width: 16px;
  height: 16px;
  opacity: 0.62;
}

.preview3d-outliner-search input,
.preview3d-tag-create input,
.preview3d-object-list select {
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font: 500 11px/1 system-ui, sans-serif;
}

.preview3d-outliner-search input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: 0;
}

.preview3d-tag-create {
  grid-template-columns: minmax(0, 1fr) 30px;
}

.preview3d-tag-create button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #167c80;
}

.preview3d-tag-create button img {
  width: 16px;
  height: 16px;
  filter: invert(1);
}

.preview3d-tag-create button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.preview3d-outliner-heading {
  min-height: 28px;
  border-bottom: 0;
  background: rgba(23, 33, 43, 0.035);
}

.preview3d-outliner-heading strong,
.preview3d-outliner-heading output {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.preview3d-outliner-heading output {
  color: #69737d;
}

.preview3d-tag-list,
.preview3d-object-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview3d-tag-list {
  max-height: 132px;
  overflow-y: auto;
}

.preview3d-object-list {
  overflow-y: auto;
}

.preview3d-tag-list li,
.preview3d-object-list li {
  min-width: 0;
  min-height: 42px;
  display: grid;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-top: 1px solid rgba(23, 33, 43, 0.09);
}

.preview3d-tag-list li {
  grid-template-columns: 30px minmax(0, 1fr) auto;
}

.preview3d-object-list li {
  grid-template-columns: 30px minmax(0, 1fr) 86px;
}

.preview3d-object-list li.is-selected {
  background: rgba(22, 124, 128, 0.1);
  box-shadow: inset 2px 0 0 #167c80;
}

.preview3d-tag-list li > span,
.preview3d-object-select span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.preview3d-tag-list strong,
.preview3d-object-select strong,
.preview3d-tag-list small,
.preview3d-object-select small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-tag-list strong,
.preview3d-object-select strong {
  font-size: 11px;
  font-weight: 650;
}

.preview3d-tag-list small,
.preview3d-object-select small,
.preview3d-tag-fixed {
  color: #6d7680;
  font-size: 9px;
}

.preview3d-tag-fixed {
  padding-right: 4px;
}

.preview3d-object-select {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.preview3d-object-select > img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.preview3d-object-list li.is-empty,
.preview3d-tag-list li.is-empty {
  display: block;
  min-height: 52px;
  padding: 18px 10px;
  color: #6d7680;
  font-size: 11px;
  text-align: center;
}

html[data-theme="dark"] .preview3d-outliner-panel {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(36, 39, 44, 0.98);
  color: #f3f5f7;
}

html[data-theme="dark"] .preview3d-outliner-panel > header,
html[data-theme="dark"] .preview3d-outliner-search,
html[data-theme="dark"] .preview3d-tag-create,
html[data-theme="dark"] .preview3d-tag-list li,
html[data-theme="dark"] .preview3d-object-list li {
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .preview3d-outliner-heading,
html[data-theme="dark"] .preview3d-object-list li.is-selected {
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .preview3d-tag-create input,
html[data-theme="dark"] .preview3d-object-list select {
  border-color: rgba(255, 255, 255, 0.14);
  background: #181b20;
  color: #f3f5f7;
}

html[data-theme="dark"] .preview3d-outliner-panel button img,
html[data-theme="dark"] .preview3d-outliner-search img,
html[data-theme="dark"] .preview3d-object-select > img {
  filter: invert(1);
}

html[data-theme="dark"] .preview3d-tag-create button img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-outliner-panel {
    border-color: rgba(255, 255, 255, 0.13);
    background: rgba(36, 39, 44, 0.98);
    color: #f3f5f7;
  }

  html[data-theme="auto"] .preview3d-outliner-panel > header,
  html[data-theme="auto"] .preview3d-outliner-search,
  html[data-theme="auto"] .preview3d-tag-create,
  html[data-theme="auto"] .preview3d-tag-list li,
  html[data-theme="auto"] .preview3d-object-list li {
    border-color: rgba(255, 255, 255, 0.1);
  }

  html[data-theme="auto"] .preview3d-outliner-heading,
  html[data-theme="auto"] .preview3d-object-list li.is-selected {
    background: rgba(255, 255, 255, 0.055);
  }

  html[data-theme="auto"] .preview3d-tag-create input,
  html[data-theme="auto"] .preview3d-object-list select {
    border-color: rgba(255, 255, 255, 0.14);
    background: #181b20;
    color: #f3f5f7;
  }

  html[data-theme="auto"] .preview3d-outliner-panel button img,
  html[data-theme="auto"] .preview3d-outliner-search img,
  html[data-theme="auto"] .preview3d-object-select > img {
    filter: invert(1);
  }
}

@media (max-width: 520px) {
  .preview3d-outliner-panel {
    top: calc(58px + env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: min(306px, calc(100vw - 16px));
    max-height: calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .preview3d-surface .modal-header > div:first-child {
    max-width: 58px;
  }

  .preview3d-view-control select {
    width: 52px;
  }
}

.drawer-tool[data-icon="object-select"] {
  --drawer-icon: url("assets/lucide/scan-search.svg");
}

.drawer-tool[data-icon="width"] {
  --drawer-icon: url("assets/lucide/move-horizontal.svg");
}

.drawer-tool[data-icon="shape-builder"] {
  --drawer-icon: url("assets/lucide/combine.svg");
}

.drawer-tool[data-icon="ellipse"] {
  --drawer-icon: url("assets/lucide/circle.svg");
}

.drawer-tool[data-icon="rotate"] {
  --drawer-icon: url("assets/lucide/rotate-cw.svg");
}

.drawer-tool[data-icon="component"] {
  --drawer-icon: url("assets/lucide/component.svg");
}

.drawer-tool[data-icon="fill"] {
  --drawer-icon: url("assets/lucide/paint-bucket.svg");
}

.drawer-tool[data-icon="line"] {
  --drawer-icon: url("assets/sent-icons/line.png");
}

.drawer-tool[data-icon="rectangle"] {
  --drawer-icon: url("assets/lucide/square.svg");
}

.drawer-tool[data-icon="offset"] {
  --drawer-icon: url("assets/lucide/move-horizontal.svg");
}

.drawer-tool[data-icon="follow-me"] {
  --drawer-icon: url("assets/lucide/route.svg");
}

.drawer-tool[data-icon="camera"] {
  --drawer-icon: url("assets/lucide/camera.svg");
}

.drawer-tool[data-icon="section"] {
  --drawer-icon: url("assets/lucide/slice.svg");
}

.drawer-tool[data-icon="outliner"] {
  --drawer-icon: url("assets/lucide/layers-3.svg");
}

.drawer-tool[data-icon="axes"] {
  --drawer-icon: url("assets/lucide/move-3d.svg");
}

.drawer-tool[data-icon="solid"] {
  --drawer-icon: url("assets/lucide/combine.svg");
}

body .tool-flyout .solid3d-flyout .flyout-adjustment-actions button:disabled {
  opacity: 0.38 !important;
  cursor: default !important;
}

body .tool-flyout .build-components-flyout .flyout-adjustment-actions button:disabled {
  opacity: 0.38 !important;
  cursor: default !important;
}

.preview3d-axes-panel {
  position: absolute;
  z-index: 8;
  top: calc(66px + env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(294px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 7px;
  background: rgba(250, 251, 252, 0.98);
  color: #17212b;
  box-shadow: 0 10px 30px rgba(30, 39, 52, 0.15);
  backdrop-filter: blur(18px) saturate(140%);
}

.preview3d-axes-panel[hidden] {
  display: none;
}

.preview3d-axes-panel > header,
.preview3d-axes-toggle,
.preview3d-axes-heading-control {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.preview3d-axes-panel > header {
  border-bottom: 1px solid rgba(23, 33, 43, 0.12);
}

.preview3d-axes-panel > header strong {
  font-size: 13px;
  font-weight: 700;
}

.preview3d-axes-panel > header button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
}

.preview3d-axes-panel > header img,
.preview3d-axes-actions img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.preview3d-axes-toggle {
  color: #48525c;
  font-size: 11px;
  font-weight: 600;
}

.preview3d-axes-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
  border-top: 1px solid rgba(23, 33, 43, 0.1);
}

.preview3d-axes-heading strong {
  font-size: 10px;
  text-transform: uppercase;
}

.preview3d-axes-heading span {
  color: #727b84;
  font-size: 9px;
}

.preview3d-axes-coordinates {
  display: grid;
  gap: 5px;
}

.preview3d-axes-coordinates label,
.preview3d-axes-heading-control {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.preview3d-axes-coordinates label > span {
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.preview3d-axes-coordinates .axis-x {
  color: #c93f3a;
}

.preview3d-axes-coordinates .axis-y {
  color: #287e4a;
}

.preview3d-axes-coordinates .axis-z {
  color: #176bc2;
}

.preview3d-axes-coordinates input,
.preview3d-axes-heading-control input {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 0 7px;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font: 550 11px/1 system-ui, sans-serif;
}

.preview3d-axes-coordinates small,
.preview3d-axes-heading-control small {
  overflow: hidden;
  color: #727b84;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-axes-heading-control {
  grid-template-columns: 70px minmax(0, 1fr) 34px;
  padding-top: 7px;
  border-top: 1px solid rgba(23, 33, 43, 0.1);
  color: #48525c;
  font-weight: 600;
}

.preview3d-axes-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 5px;
}

.preview3d-axes-actions button {
  min-width: 0;
  height: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  border: 0;
  border-right: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 10px;
}

.preview3d-axes-actions button:last-child {
  border-right: 0;
}

html[data-theme="dark"] .preview3d-axes-panel {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(36, 39, 44, 0.98);
  color: #f3f5f7;
}

html[data-theme="dark"] .preview3d-axes-panel > header,
html[data-theme="dark"] .preview3d-axes-heading,
html[data-theme="dark"] .preview3d-axes-heading-control,
html[data-theme="dark"] .preview3d-axes-actions,
html[data-theme="dark"] .preview3d-axes-actions button {
  border-color: rgba(255, 255, 255, 0.11);
}

html[data-theme="dark"] .preview3d-axes-toggle,
html[data-theme="dark"] .preview3d-axes-heading-control {
  color: #c8ced7;
}

html[data-theme="dark"] .preview3d-axes-coordinates input,
html[data-theme="dark"] .preview3d-axes-heading-control input {
  border-color: rgba(255, 255, 255, 0.14);
  background: #181b20;
  color: #f3f5f7;
}

html[data-theme="dark"] .preview3d-axes-panel button img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-axes-panel {
    border-color: rgba(255, 255, 255, 0.13);
    background: rgba(36, 39, 44, 0.98);
    color: #f3f5f7;
  }

  html[data-theme="auto"] .preview3d-axes-panel > header,
  html[data-theme="auto"] .preview3d-axes-heading,
  html[data-theme="auto"] .preview3d-axes-heading-control,
  html[data-theme="auto"] .preview3d-axes-actions,
  html[data-theme="auto"] .preview3d-axes-actions button {
    border-color: rgba(255, 255, 255, 0.11);
  }

  html[data-theme="auto"] .preview3d-axes-toggle,
  html[data-theme="auto"] .preview3d-axes-heading-control {
    color: #c8ced7;
  }

  html[data-theme="auto"] .preview3d-axes-coordinates input,
  html[data-theme="auto"] .preview3d-axes-heading-control input {
    border-color: rgba(255, 255, 255, 0.14);
    background: #181b20;
    color: #f3f5f7;
  }

  html[data-theme="auto"] .preview3d-axes-panel button img {
    filter: invert(1);
  }
}

@media (max-width: 520px) {
  .preview3d-axes-panel {
    top: calc(58px + env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: min(294px, calc(100vw - 16px));
    max-height: calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

.preview3d-camera-panel {
  position: absolute;
  z-index: 7;
  top: calc(66px + env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(306px, calc(100vw - 24px));
  max-height: calc(100dvh - 142px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: grid;
  gap: 9px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 7px;
  background: rgba(250, 251, 252, 0.98);
  color: #17212b;
  box-shadow: 0 10px 30px rgba(30, 39, 52, 0.15);
  backdrop-filter: blur(18px) saturate(140%);
}

.preview3d-camera-panel[hidden] {
  display: none;
}

.preview3d-camera-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  border-bottom: 1px solid rgba(23, 33, 43, 0.12);
}

.preview3d-camera-panel > header strong {
  font-size: 13px;
  font-weight: 700;
}

.preview3d-camera-panel > header button,
.saved3d-scene-delete {
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

.preview3d-camera-panel > header img,
.saved3d-scene-delete img {
  width: 17px;
  height: 17px;
}

.preview3d-camera-modes,
.preview3d-camera-views {
  display: grid;
  gap: 0;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 6px;
  overflow: hidden;
}

.preview3d-camera-modes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preview3d-camera-views {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.preview3d-camera-modes button,
.preview3d-camera-views button {
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  border: 0;
  border-right: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 10px;
}

.preview3d-camera-modes button:last-child,
.preview3d-camera-views button:last-child {
  border-right: 0;
}

.preview3d-camera-modes button.is-active,
.preview3d-camera-views button.is-active {
  background: rgba(22, 124, 128, 0.12);
  box-shadow: inset 0 -2px 0 #167c80;
}

.preview3d-camera-modes img {
  width: 17px;
  height: 17px;
}

.preview3d-eye-height {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
  font-size: 11px;
}

.preview3d-eye-height input,
.preview3d-scene-save input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 5px;
  background: #fff;
  color: inherit;
  font-size: 12px;
}

.preview3d-position-camera,
.preview3d-scene-save button {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(23, 33, 43, 0.15);
  border-radius: 5px;
  background: rgba(127, 127, 127, 0.08);
  color: inherit;
  font-size: 11px;
}

.preview3d-position-camera img,
.preview3d-scene-save button img,
.saved3d-scene-restore img {
  width: 17px;
  height: 17px;
}

.preview3d-camera-pad {
  display: grid;
  grid-template-columns: repeat(3, 38px);
  grid-template-rows: 18px repeat(3, 34px);
  justify-content: center;
  gap: 3px;
}

.preview3d-camera-pad[hidden] {
  display: none;
}

.preview3d-camera-pad > span {
  grid-column: 1 / -1;
  color: #66707c;
  font-size: 10px;
  text-align: center;
}

.preview3d-camera-pad button {
  width: 38px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(23, 33, 43, 0.15);
  border-radius: 5px;
  background: rgba(127, 127, 127, 0.08);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 15px;
}

.preview3d-camera-pad [data-camera-step="forward"] {
  grid-column: 2;
}

.preview3d-camera-pad [data-camera-step="left"] {
  grid-column: 1;
  grid-row: 3;
}

.preview3d-camera-pad [data-camera-step="right"] {
  grid-column: 3;
  grid-row: 3;
}

.preview3d-camera-pad [data-camera-step="back"] {
  grid-column: 2;
  grid-row: 4;
}

.preview3d-scene-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(23, 33, 43, 0.12);
}

.saved3d-scene-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(23, 33, 43, 0.1);
}

.saved3d-scene-list li {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
}

.saved3d-scene-list li.is-empty {
  display: block;
  padding: 10px 4px;
  color: #66707c;
  font-size: 11px;
  text-align: center;
}

.saved3d-scene-restore {
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 11px;
  text-align: left;
}

.saved3d-scene-restore span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-camera-panel,
  html[data-theme="dark"] .preview3d-camera-panel {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(36, 39, 44, 0.98);
    color: #f3f5f7;
  }

  html[data-theme="auto"] .preview3d-eye-height input,
  html[data-theme="auto"] .preview3d-scene-save input,
  html[data-theme="dark"] .preview3d-eye-height input,
  html[data-theme="dark"] .preview3d-scene-save input {
    border-color: rgba(255, 255, 255, 0.16);
    background: #2e3238;
    color: #f3f5f7;
  }

  html[data-theme="auto"] .preview3d-camera-panel img,
  html[data-theme="dark"] .preview3d-camera-panel img {
    filter: invert(1);
  }
}

@media (max-width: 520px) {
  .preview3d-camera-panel {
    top: calc(58px + env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: min(306px, calc(100vw - 16px));
    max-height: calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .preview3d-camera-views button {
    font-size: 9px;
  }
}

.preview3d-section-panel {
  position: absolute;
  z-index: 6;
  top: calc(66px + env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(286px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 7px;
  background: rgba(250, 251, 252, 0.97);
  color: #17212b;
  box-shadow: 0 10px 30px rgba(30, 39, 52, 0.15);
  backdrop-filter: blur(18px) saturate(140%);
}

.preview3d-section-panel[hidden] {
  display: none;
}

.preview3d-section-panel > header,
.preview3d-section-panel > label,
.preview3d-section-flip {
  display: flex;
  align-items: center;
}

.preview3d-section-panel > header {
  min-height: 28px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
  font-size: 12px;
}

.preview3d-section-panel > header button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
}

.preview3d-section-panel > header img,
.preview3d-section-flip img {
  width: 16px;
  height: 16px;
}

.preview3d-section-panel > label {
  min-height: 32px;
  justify-content: space-between;
  gap: 10px;
  color: #515a68;
  font-size: 11px;
  font-weight: 600;
}

.preview3d-section-panel select {
  width: 132px;
  height: 31px;
  padding: 0 7px;
  border: 1px solid rgba(23, 33, 43, 0.15);
  border-radius: 5px;
  background: #fff;
  color: #17212b;
  font-size: 11px;
}

.preview3d-section-toggle input {
  width: 18px;
  height: 18px;
}

.preview3d-section-depth {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
}

.preview3d-section-depth input {
  width: 100%;
}

.preview3d-section-depth output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.preview3d-section-flip {
  min-height: 34px;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(23, 33, 43, 0.15);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  color: #343b45;
  font-size: 11px;
  font-weight: 650;
}

.preview3d-section-flip.is-active {
  border-color: rgba(20, 115, 230, 0.38);
  background: rgba(20, 115, 230, 0.1);
  color: #1167c9;
}

html[data-theme="dark"] .preview3d-section-panel {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(39, 44, 52, 0.97);
  color: #eef2f7;
}

html[data-theme="dark"] .preview3d-section-panel > header,
html[data-theme="dark"] .preview3d-section-panel select,
html[data-theme="dark"] .preview3d-section-flip {
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .preview3d-section-panel > label {
  color: #c4cbd5;
}

html[data-theme="dark"] .preview3d-section-panel select,
html[data-theme="dark"] .preview3d-section-flip {
  background: rgba(17, 20, 25, 0.72);
  color: #eef2f7;
}

html[data-theme="dark"] .preview3d-section-panel img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-section-panel {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(39, 44, 52, 0.97);
    color: #eef2f7;
  }

  html[data-theme="auto"] .preview3d-section-panel > header,
  html[data-theme="auto"] .preview3d-section-panel select,
  html[data-theme="auto"] .preview3d-section-flip {
    border-color: rgba(255, 255, 255, 0.12);
  }

  html[data-theme="auto"] .preview3d-section-panel > label {
    color: #c4cbd5;
  }

  html[data-theme="auto"] .preview3d-section-panel select,
  html[data-theme="auto"] .preview3d-section-flip {
    background: rgba(17, 20, 25, 0.72);
    color: #eef2f7;
  }

  html[data-theme="auto"] .preview3d-section-panel img {
    filter: invert(1);
  }
}

@media (max-width: 520px) {
  .preview3d-section-panel {
    top: calc(58px + env(safe-area-inset-top));
  }

  .preview3d-surface .modal-header > div:first-child {
    max-width: 74px;
  }

  .preview3d-surface .modal-header h2 {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
  }

  .preview3d-surface .modal-header p {
    display: none;
  }

  .preview3d-actions {
    gap: 2px;
  }

  .preview3d-action {
    width: 30px;
    min-width: 30px;
    height: 32px;
    min-height: 32px;
  }

  .preview3d-view-control {
    height: 32px;
    padding: 0 3px;
  }

  .preview3d-view-control select {
    width: 60px;
    height: 30px;
  }

  .preview3d-done {
    min-height: 32px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
  }
}
@media (max-width: 1400px) {
  body .tool[data-tool="transform"]::before {
    background-image: url("assets/sent-icons/transform.png") !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  body .bottom-workflows {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body .style-section-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body .bottom-workflows button[data-workflow="select"],
  body .bottom-workflows button[data-workflow="adjust"],
  body .bottom-workflows button[data-workflow="artboard"],
  body .bottom-workflows button[data-workflow="vector"] {
    display: grid !important;
  }

  body .bottom-workflows button[data-workflow="select"]::after { content: "Layers" !important; }
  body .bottom-workflows button[data-workflow="adjust"]::after { content: "Style" !important; }
  body .bottom-workflows button[data-workflow="artboard"]::after { content: "Artboard" !important; }
  body .bottom-workflows button[data-workflow="vector"]::after { content: "Library" !important; }

  body .transform-reference-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 66px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body .transform-reference-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 18px) !important;
    gap: 3px !important;
    justify-content: end !important;
  }

  body .transform-reference-grid button {
    position: relative !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    border: 1px solid #c8cdd4 !important;
    border-radius: 2px !important;
    background: #fff !important;
  }

  body .transform-reference-grid button::after {
    position: absolute !important;
    inset: 5px !important;
    border-radius: 50% !important;
    background: #8b929b !important;
    content: "" !important;
  }

  body .transform-reference-grid button.is-active {
    border-color: #1677dc !important;
    background: #eaf3ff !important;
  }

  body .transform-reference-grid button.is-active::after {
    background: #1677dc !important;
  }

  body .transform-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body .flyout-transform-grid,
  body .artboard-grid-settings {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .artboard-view-toggles {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow: hidden !important;
    border: 1px solid #d5d9df !important;
    border-radius: 4px !important;
  }

  body .artboard-view-toggles button {
    display: grid !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 4px 2px !important;
    place-items: center !important;
    border: 0 !important;
    border-right: 1px solid #d5d9df !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #5b626b !important;
    font-size: 9px !important;
  }

  body .artboard-view-toggles button.is-active {
    background: #eaf3ff !important;
    color: #126bc7 !important;
  }

  body .canvas-wrap.rulers-hidden .canvas-rulers,
  body .canvas-rulers[hidden] {
    display: none !important;
  }

  body .library-catalog-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 2px 0 10px !important;
  }

  body .library-background-grid,
  body .stock-icon-grid,
  body .emoji-library-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body .catalog-asset {
    display: grid !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 6px 3px 5px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    border: 1px solid #d9dde3 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #343940 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  body .catalog-asset img {
    width: 27px !important;
    height: 27px !important;
    object-fit: contain !important;
  }

  body .catalog-asset img.background-preview {
    display: block !important;
    width: 100% !important;
    height: 36px !important;
    border-radius: 2px !important;
    object-fit: cover !important;
    opacity: 1 !important;
  }

  body .emoji-asset strong {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 760px) {
  body .layers .layer-primary-toolbar,
  body .layers .style-section-nav,
  body .layers .library-section-tabs,
  body .layers .artboard-view-toggles {
    position: sticky !important;
    z-index: 8 !important;
    top: 32px !important;
    background: rgba(248, 248, 249, 0.98) !important;
    box-shadow: 0 1px 0 #d1d3d6 !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }

  body .layers .layer-primary-toolbar {
    width: calc(100% + 28px) !important;
    min-height: 52px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin: 0 -14px 8px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border-top: 1px solid var(--curve-line, #d0d1d4) !important;
    border-bottom: 1px solid var(--curve-line, #d0d1d4) !important;
    border-radius: 0 !important;
    background: #f1f2f4 !important;
  }

  body .layers .layer-primary-toolbar button {
    min-height: 48px !important;
    grid-template-rows: 22px 14px !important;
    padding: 3px 1px 2px !important;
    color: var(--curve-muted, #6f7278) !important;
  }

  body .layers .layer-primary-toolbar button:active,
  body .layers .layer-primary-toolbar button[aria-expanded="true"] {
    color: var(--curve-text, #151619) !important;
    background: #e3e5e8 !important;
    box-shadow: inset 0 -2px 0 var(--curve-accent, #c98a2a) !important;
  }

  body .layers .layer-primary-toolbar img {
    width: 18px !important;
    height: 18px !important;
  }

  body .layers .layer-primary-toolbar span {
    font-size: 8px !important;
    line-height: 13px !important;
  }

  body .layers .style-section-nav {
    width: calc(100% + 28px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 -14px 8px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border-top: 1px solid var(--curve-line, #d0d1d4) !important;
    border-bottom: 1px solid var(--curve-line, #d0d1d4) !important;
    border-radius: 0 !important;
    background: #f1f2f4 !important;
    box-shadow: 0 1px 0 #d1d3d6 !important;
  }

  body .layers .style-section-nav button {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    min-width: 0 !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-rows: 22px 14px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    padding: 3px 1px 2px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid rgba(132, 135, 141, 0.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--curve-muted, #6f7278) !important;
    cursor: pointer !important;
  }

  body .layers .style-section-nav button:last-child {
    border-right: 0 !important;
  }

  body .layers .style-section-nav button img {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 0.78 !important;
  }

  body .layers .style-section-nav button span {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    font-size: 9px !important;
    font-weight: 560 !important;
    line-height: 13px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .style-section-nav button.is-active {
    color: var(--curve-text, #151619) !important;
    background: #e3e5e8 !important;
    box-shadow: inset 0 -2px 0 var(--curve-accent, #c98a2a) !important;
  }

  body .layers .style-section-nav button.is-active img {
    opacity: 1 !important;
  }

  body .layers .library-section-tabs {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  body .layers .artboard-view-toggles {
    width: calc(100% + 28px) !important;
    margin: 0 -14px 10px !important;
    padding: 0 8px !important;
    border-top: 1px solid var(--curve-line, #d0d1d4) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--curve-line, #d0d1d4) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: #f1f2f4 !important;
  }

  body .layers .artboard-view-toggles button {
    min-height: 48px !important;
    grid-template-rows: 22px 14px !important;
    gap: 1px !important;
    padding: 3px 1px 2px !important;
    border-right: 1px solid rgba(132, 135, 141, 0.16) !important;
    background: transparent !important;
    color: var(--curve-muted, #6f7278) !important;
  }

  body .layers .artboard-view-toggles button img {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.78 !important;
  }

  body .layers .artboard-view-toggles button span {
    font-size: 9px !important;
    font-weight: 560 !important;
    line-height: 13px !important;
  }

  body .layers .artboard-view-toggles button.is-active {
    color: var(--curve-text, #151619) !important;
    background: #e3e5e8 !important;
    box-shadow: inset 0 -2px 0 var(--curve-accent, #c98a2a) !important;
  }

  body .layers .artboard-view-toggles button.is-active img {
    filter: none !important;
    opacity: 1 !important;
  }
}

/* Release 318: contextual, single-layer Smart Object workflow. */
.smart-object-panel[hidden] {
  display: none !important;
}

.smart-object-panel {
  margin: 0;
  padding: 8px 0 7px;
  border-top: 1px solid var(--curve-hairline, #d9dce1);
  border-bottom: 1px solid var(--curve-hairline, #d9dce1);
  background: transparent;
}

.smart-object-panel > header {
  min-height: 32px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 4px 7px;
}

.smart-object-panel > header > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.smart-object-panel > header strong {
  font-size: 11px;
  line-height: 14px;
}

.smart-object-panel > header small,
.smart-object-panel > header output {
  min-width: 0;
  overflow: hidden;
  color: var(--curve-muted, #6f7278);
  font-size: 9px;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-object-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--curve-hairline, #d9dce1);
  border-radius: 4px;
  background: var(--curve-panel, #ffffff);
}

.smart-object-mark img {
  width: 16px;
  height: 16px;
}

.smart-object-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--curve-hairline, #d9dce1);
  border-bottom: 1px solid var(--curve-hairline, #d9dce1);
}

.smart-object-actions button {
  min-width: 0 !important;
  min-height: 46px !important;
  display: grid !important;
  grid-template-rows: 18px 12px !important;
  place-items: center !important;
  gap: 3px !important;
  padding: 5px 2px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-hairline, #d9dce1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--curve-ink, #17191c) !important;
}

.smart-object-actions button:last-child {
  border-right: 0 !important;
}

.smart-object-actions button:disabled {
  opacity: 0.34 !important;
}

.smart-object-actions img {
  width: 16px;
  height: 16px;
}

.smart-object-actions span {
  max-width: 100%;
  overflow: hidden;
  font-size: 8px;
  line-height: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-object-panel > p {
  margin: 6px 4px 0;
  color: var(--curve-muted, #6f7278);
  font-size: 9px;
  line-height: 13px;
}

@media (max-width: 760px) {
  body .layers .smart-object-panel {
    padding: 7px 0 6px !important;
  }

  body .layers .smart-object-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body .layers .smart-object-actions button:nth-child(3) {
    border-right: 0 !important;
  }

  body .layers .smart-object-actions button:nth-child(-n + 3) {
    border-bottom: 1px solid var(--curve-hairline, #d9dce1) !important;
  }

  body .layers .smart-object-actions button {
    min-height: 44px !important;
  }

  body .layers .smart-object-actions span {
    font-size: 9px !important;
  }
}

@media (max-width: 760px) {
  body .layers {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body > .app-shell > .bottom-workflows-dock {
    position: fixed !important;
    z-index: 4800 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 2px 4px env(safe-area-inset-bottom, 0px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid #cfd1d4 !important;
    border-radius: 0 !important;
    background: rgba(248, 248, 249, 0.98) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }

  body > .app-shell > .bottom-workflows-dock button {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    min-width: 0 !important;
    height: 61px !important;
    display: grid !important;
    grid-template-rows: 28px 15px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    color: #6f7379 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  body > .app-shell > .bottom-workflows-dock button::before,
  body > .app-shell > .bottom-workflows-dock button::after {
    content: none !important;
    display: none !important;
  }

  body > .app-shell > .bottom-workflows-dock button img {
    width: 23px !important;
    height: 23px !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 0.76 !important;
  }

  body > .app-shell > .bottom-workflows-dock button span {
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
    font-size: 10px !important;
    font-weight: 610 !important;
    line-height: 14px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body > .app-shell > .bottom-workflows-dock button.is-active {
    color: #17191c !important;
    background: #e5e7e9 !important;
    box-shadow: inset 0 2px 0 var(--curve-accent, #c98a2a) !important;
  }

  body > .app-shell > .bottom-workflows-dock button.is-active img {
    opacity: 1 !important;
  }

  body .layers > .bottom-workflows {
    position: sticky !important;
    z-index: 10 !important;
    top: 46px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% + 28px) !important;
    height: 54px !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: -8px -14px 12px !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    border-top: 1px solid #d7d9dc !important;
    border-bottom: 1px solid #d0d2d5 !important;
    border-radius: 0 !important;
    background: rgba(248, 248, 249, 0.97) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }

  body .layers > .bottom-workflows button {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    min-width: 0 !important;
    height: 53px !important;
    display: grid !important;
    grid-template-rows: 26px 15px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    color: #71757b !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  body .layers > .bottom-workflows button::before,
  body .layers > .bottom-workflows button::after {
    content: none !important;
    display: none !important;
  }

  body .layers > .bottom-workflows button img {
    width: 21px !important;
    height: 21px !important;
    display: block !important;
    object-fit: contain !important;
    opacity: 0.72 !important;
  }

  body .layers > .bottom-workflows button span {
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
    font-size: 10px !important;
    font-weight: 610 !important;
    line-height: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers > .bottom-workflows button.is-active {
    color: #17191c !important;
    background: #e5e7e9 !important;
    box-shadow: inset 0 2px 0 var(--curve-accent, #c98a2a) !important;
  }

  body .layers > .bottom-workflows button.is-active img {
    opacity: 1 !important;
  }
}

@media (max-width: 520px) {
  .preview3d-surface .modal-header > div:first-child {
    max-width: 58px;
  }

  .preview3d-view-control select {
    width: 52px;
  }
}

/* Release 309: compact Photoshop-style Channels palette. */
body .drawer-tool[data-icon="layers"]::before {
  background-image: url("assets/sent-icons/layers.png") !important;
}

.channels-panel {
  gap: 0 !important;
}

.channels-panel > h2 {
  margin-bottom: 4px !important;
}

.channel-section-heading {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 2px;
  border-bottom: 1px solid #d7d9dd;
}

.channel-section-heading h3 {
  margin: 0;
  color: #22252a;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.channel-section-heading > span {
  color: #7c8189;
  font-size: 10px;
  line-height: 14px;
}

.channel-alpha-heading {
  margin-top: 10px;
}

.channels-panel .channel-heading-action {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: #25282d !important;
  background: transparent !important;
  box-shadow: none !important;
}

.channels-panel .channel-heading-action:hover,
.channels-panel .channel-heading-action:focus-visible {
  background: #e8eaed !important;
}

.channels-panel .channel-heading-action:disabled {
  opacity: 0.34 !important;
}

.channels-panel .channel-heading-action img {
  width: 17px;
  height: 17px;
}

.channel-list,
.alpha-channel-list {
  overflow: hidden;
  border-bottom: 1px solid #d7d9dd;
  background: #f7f8f9;
}

.channels-panel .channel-row {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 5px;
  border-bottom: 1px solid #e1e3e6;
  color: #282b30;
  background: transparent;
  cursor: pointer;
}

.channels-panel .channel-row:last-child {
  border-bottom: 0;
}

.channels-panel .channel-row:hover,
.channels-panel .channel-row:focus-visible {
  background: #eceef1;
}

.channels-panel .channel-row.is-active {
  padding-left: 3px;
  border-left: 2px solid var(--curve-accent, #c98a2a);
  background: #e5e8ec;
}

.channel-visibility {
  width: 22px;
  height: 30px;
  display: grid;
  place-items: center;
}

.channel-visibility img {
  width: 14px;
  height: 14px;
  opacity: 0.74;
}

.channel-swatch {
  width: 16px;
  height: 16px;
  display: block;
  border: 1px solid rgba(28, 31, 36, 0.18);
  border-radius: 2px;
}

.channel-swatch-rgb {
  background: conic-gradient(from 45deg, #df3d43, #4aa567, #3978d8, #df3d43);
}

.channel-swatch-red {
  background: #d94a50;
}

.channel-swatch-green {
  background: #4c9c61;
}

.channel-swatch-blue {
  background: #457ad0;
}

.channel-row-label {
  min-width: 0;
  display: grid;
  gap: 0;
}

.channel-row-label strong,
.channel-row-label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-row-label strong {
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
}

.channel-row-label small {
  color: #777c84;
  font-size: 10px;
  line-height: 13px;
}

.alpha-channel-row {
  min-height: 44px;
  display: grid;
  grid-template-columns: 52px minmax(72px, 1fr) 88px;
  align-items: center;
  gap: 4px;
  padding: 4px 3px;
  border-bottom: 1px solid #e1e3e6;
  background: transparent;
}

.alpha-channel-row:last-child {
  border-bottom: 0;
}

.alpha-channel-row.is-active {
  padding-left: 1px;
  border-left: 2px solid var(--curve-accent, #c98a2a);
  background: #e5e8ec;
}

.channels-panel .alpha-channel-view {
  all: unset;
  box-sizing: border-box;
  width: 52px;
  height: 34px;
  display: grid;
  grid-template-columns: 15px 30px;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.channels-panel .alpha-channel-view > img {
  width: 14px;
  height: 14px;
  opacity: 0.74;
}

.alpha-channel-thumbnail {
  width: 30px;
  height: 30px;
  display: block;
  border: 1px solid #bfc3c9;
  border-radius: 2px;
  background: #111318;
}

.channels-panel .alpha-channel-name {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #282b30;
  background: transparent;
  font: inherit;
  font-size: 11px;
  line-height: 16px;
}

.channels-panel .alpha-channel-name:hover,
.channels-panel .alpha-channel-name:focus {
  border-color: #bfc3c9;
  background: #ffffff;
  outline: none;
}

.alpha-channel-actions {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  align-items: center;
  gap: 1px;
}

.channels-panel .alpha-channel-action {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #35393f !important;
  background: transparent !important;
  box-shadow: none !important;
}

.channels-panel .alpha-channel-action:hover,
.channels-panel .alpha-channel-action:focus-visible {
  background: #dfe2e6 !important;
}

.channels-panel .alpha-channel-action img {
  width: 15px;
  height: 15px;
}

.channel-empty-state {
  min-height: 48px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 8px;
  color: #7a7f87;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.channels-panel > .mini-status {
  margin: 7px 2px 0 !important;
}

html[data-theme="dark"] .channel-section-heading {
  border-color: #3d4148;
}

html[data-theme="dark"] .channel-section-heading h3,
html[data-theme="dark"] .channels-panel .channel-row,
html[data-theme="dark"] .channels-panel .alpha-channel-name {
  color: #eef0f3;
}

html[data-theme="dark"] .channel-list,
html[data-theme="dark"] .alpha-channel-list {
  border-color: #3d4148;
  background: #22252a;
}

html[data-theme="dark"] .channels-panel .channel-row,
html[data-theme="dark"] .alpha-channel-row {
  border-color: #353940;
}

html[data-theme="dark"] .channels-panel .channel-row:hover,
html[data-theme="dark"] .channels-panel .channel-row:focus-visible,
html[data-theme="dark"] .channels-panel .channel-row.is-active,
html[data-theme="dark"] .alpha-channel-row.is-active,
html[data-theme="dark"] .channels-panel .alpha-channel-action:hover,
html[data-theme="dark"] .channels-panel .alpha-channel-action:focus-visible {
  background: #30343a !important;
}

html[data-theme="dark"] .channels-panel .alpha-channel-name:hover,
html[data-theme="dark"] .channels-panel .alpha-channel-name:focus {
  border-color: #555b64;
  background: #292d32;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .channel-section-heading {
    border-color: #3d4148;
  }

  html[data-theme="auto"] .channel-section-heading h3,
  html[data-theme="auto"] .channels-panel .channel-row,
  html[data-theme="auto"] .channels-panel .alpha-channel-name {
    color: #eef0f3;
  }

  html[data-theme="auto"] .channel-list,
  html[data-theme="auto"] .alpha-channel-list {
    border-color: #3d4148;
    background: #22252a;
  }

  html[data-theme="auto"] .channels-panel .channel-row,
  html[data-theme="auto"] .alpha-channel-row {
    border-color: #353940;
  }

  html[data-theme="auto"] .channels-panel .channel-row:hover,
  html[data-theme="auto"] .channels-panel .channel-row:focus-visible,
  html[data-theme="auto"] .channels-panel .channel-row.is-active,
  html[data-theme="auto"] .alpha-channel-row.is-active,
  html[data-theme="auto"] .channels-panel .alpha-channel-action:hover,
  html[data-theme="auto"] .channels-panel .alpha-channel-action:focus-visible {
    background: #30343a !important;
  }

  html[data-theme="auto"] .channels-panel .alpha-channel-name:hover,
  html[data-theme="auto"] .channels-panel .alpha-channel-name:focus {
    border-color: #555b64;
    background: #292d32;
  }
}

/* Release 310: integrated brush tip and dynamics controls. */
body .layers .retouch-dynamics {
  width: 100% !important;
  margin: 8px 0 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid #d7d9dd !important;
  border-bottom: 1px solid #d7d9dd !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .layers .retouch-dynamics > summary {
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 24px 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #272a2f !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body .layers .retouch-dynamics > summary:hover,
body .layers .retouch-dynamics > summary:focus-visible {
  background: #eceef1 !important;
}

body .layers .retouch-dynamics > summary::after {
  right: 5px !important;
  width: 14px !important;
  height: 14px !important;
  opacity: 0.62 !important;
}

body .layers .retouch-dynamics-grid {
  margin: 0 !important;
  padding: 8px 2px 10px !important;
}

body .layers .retouch-dynamics-grid .retouch-pressure-field {
  grid-column: 1 / -1;
}

body .layers .retouch-dynamics-grid select {
  width: 100%;
  height: 32px;
  min-width: 0;
}

html[data-theme="dark"] body .layers .retouch-dynamics {
  border-color: #3d4148 !important;
}

html[data-theme="dark"] body .layers .retouch-dynamics > summary {
  color: #eef0f3 !important;
}

html[data-theme="dark"] body .layers .retouch-dynamics > summary:hover,
html[data-theme="dark"] body .layers .retouch-dynamics > summary:focus-visible {
  background: #30343a !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body .layers .retouch-dynamics {
    border-color: #3d4148 !important;
  }

  html[data-theme="auto"] body .layers .retouch-dynamics > summary {
    color: #eef0f3 !important;
  }

  html[data-theme="auto"] body .layers .retouch-dynamics > summary:hover,
  html[data-theme="auto"] body .layers .retouch-dynamics > summary:focus-visible {
    background: #30343a !important;
  }
}

@media (max-width: 380px) {
  body .layers .retouch-dynamics-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .layers .retouch-dynamics-grid .retouch-pressure-field {
    grid-column: auto;
  }
}

/* Release 314: compact Mixer Brush controls */
.drawer-tool[data-icon="mixer-brush"] {
  --drawer-icon: url("assets/lucide/paintbrush.svg");
}

.mixer-brush-controls[hidden] {
  display: none !important;
}

.mixer-brush-grid .wide-button {
  grid-column: 1 / -1;
}

.mixer-brush-clean-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin: 0;
  font-size: 10px;
}

.mixer-brush-clean-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

body .layers .mixer-brush-grid .wide-button {
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
}

body .layers .mixer-brush-grid .wide-button img {
  width: 14px !important;
  height: 14px !important;
}

body .tool-flyout .flyout-subsection {
  display: contents;
}

body .tool-flyout .flyout-subsection > strong {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--curve-line, #d0d1d4);
  color: var(--curve-muted, #6f7278);
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  text-transform: uppercase;
}

body .tool-flyout.is-open {
  grid-auto-rows: max-content !important;
  align-content: start !important;
}

body .tool-flyout .flyout-adjustments {
  position: relative !important;
  z-index: 1 !important;
  bottom: auto !important;
}

@media (max-width: 760px) {
  body .layers .mixer-brush-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .layers .mixer-brush-clean-toggle {
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    font-size: 10px !important;
  }

  body .layers .mixer-brush-clean-toggle input[type="checkbox"] {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 380px) {
  body .layers .mixer-brush-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Release 311: editable frequency separation. */
body .drawer-tool[data-icon="frequency"]::before {
  background-image: url("assets/lucide/waves.svg") !important;
}

.frequency-separation-panel > .compact-field {
  margin: 5px 0 !important;
}

.frequency-separation-panel > .filter-toggle {
  min-height: 36px;
  margin: 4px 0 8px !important;
  padding: 0 2px;
  border-top: 1px solid #d7d9dd;
  border-bottom: 1px solid #d7d9dd;
}

.frequency-separation-panel > .wide-button {
  min-height: 36px !important;
  margin-top: 2px !important;
}

html[data-theme="dark"] .frequency-separation-panel > .filter-toggle {
  border-color: #3d4148;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .frequency-separation-panel > .filter-toggle {
    border-color: #3d4148;
  }
}

/* Release 312: saved-channel options, spot color, and calculations. */
.channel-heading-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.alpha-channel-row.is-selected:not(.is-active) {
  background: #eef0f3;
}

.alpha-channel-row.is-spot .alpha-channel-thumbnail {
  border-color: #b27a86;
}

body .layers .channel-settings-disclosure {
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid #d7d9dd !important;
  border-bottom: 1px solid #d7d9dd !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .layers .channel-settings-disclosure + .channel-settings-disclosure {
  margin-top: 0 !important;
  border-top: 0 !important;
}

body .layers .channel-settings-disclosure > summary {
  position: relative;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 24px 0 2px !important;
  list-style: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #272a2f !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  cursor: pointer;
}

body .layers .channel-settings-disclosure > summary::-webkit-details-marker {
  display: none;
}

body .layers .channel-settings-disclosure > summary::after {
  content: none !important;
  display: none !important;
}

.channel-disclosure-icon {
  position: absolute;
  right: 6px;
  width: 15px;
  height: 15px;
  opacity: 0.6;
  transform: rotate(-90deg);
  transition: transform 120ms ease;
}

.channel-settings-disclosure[open] .channel-disclosure-icon {
  transform: rotate(90deg);
}

body .layers .channel-settings-disclosure > summary:hover,
body .layers .channel-settings-disclosure > summary:focus-visible {
  background: #eceef1 !important;
}

.channel-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 2px 10px;
}

.channel-settings-grid .compact-field {
  min-width: 0;
  margin: 0 !important;
}

.channel-settings-grid select,
.channel-settings-grid input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 32px;
}

.channel-settings-grid input[type="color"] {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 3px;
}

.spot-channel-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.spot-channel-controls[hidden] {
  display: none !important;
}

.channel-invert-toggle {
  min-height: 32px;
  align-self: end;
  margin: 0 !important;
  padding: 0 2px !important;
}

.channel-settings-grid > .wide-button {
  grid-column: 1 / -1;
  min-height: 36px !important;
  margin: 0 !important;
}

html[data-theme="dark"] .alpha-channel-row.is-selected:not(.is-active) {
  background: #292d32;
}

html[data-theme="dark"] body .layers .channel-settings-disclosure {
  border-color: #3d4148 !important;
}

html[data-theme="dark"] body .layers .channel-settings-disclosure > summary {
  color: #eef0f3 !important;
}

html[data-theme="dark"] body .layers .channel-settings-disclosure > summary:hover,
html[data-theme="dark"] body .layers .channel-settings-disclosure > summary:focus-visible {
  background: #30343a !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .alpha-channel-row.is-selected:not(.is-active) {
    background: #292d32;
  }

  html[data-theme="auto"] body .layers .channel-settings-disclosure {
    border-color: #3d4148 !important;
  }

  html[data-theme="auto"] body .layers .channel-settings-disclosure > summary {
    color: #eef0f3 !important;
  }

  html[data-theme="auto"] body .layers .channel-settings-disclosure > summary:hover,
  html[data-theme="auto"] body .layers .channel-settings-disclosure > summary:focus-visible {
    background: #30343a !important;
  }
}

@media (max-width: 380px) {
  .channel-settings-grid,
  .spot-channel-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .spot-channel-controls,
  .channel-settings-grid > .wide-button {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  body .layers .channel-section-heading {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 4px 2px !important;
    border-bottom: 1px solid var(--curve-line, #d0d1d4) !important;
  }

  body .layers .channel-section-heading h3 {
    display: block !important;
    margin: 0 !important;
    color: var(--curve-text, #151619) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-transform: uppercase !important;
  }

  body .layers .channel-section-heading > span {
    display: block !important;
    color: var(--curve-muted, #6f7278) !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  body .layers .channel-heading-actions {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }

  body .layers .channels-panel .channel-heading-action {
    all: unset !important;
    box-sizing: border-box !important;
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 4px !important;
    cursor: pointer !important;
  }

  body .layers .channels-panel .channel-heading-action:disabled {
    opacity: 0.34 !important;
  }

  body .layers .channels-panel .channel-heading-action img {
    width: 17px !important;
    height: 17px !important;
  }

  body .layers .channel-list,
  body .layers .alpha-channel-list {
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    border-bottom: 1px solid var(--curve-line, #d0d1d4) !important;
    background: #f7f8f9 !important;
  }

  body .layers .channels-panel .channel-row {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: 22px 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 4px 8px 4px 5px !important;
    border-bottom: 1px solid #e1e3e6 !important;
    color: var(--curve-text, #151619) !important;
    cursor: pointer !important;
  }

  body .layers .channels-panel .channel-row.is-active {
    padding-left: 3px !important;
    border-left: 2px solid var(--curve-accent, #c98a2a) !important;
    background: #e5e8ec !important;
  }

  body .layers .channel-visibility {
    width: 22px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
  }

  body .layers .channel-visibility img,
  body .layers .channels-panel .alpha-channel-view > img {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.74 !important;
  }

  body .layers .channel-swatch {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    border: 1px solid rgba(28, 31, 36, 0.18) !important;
    border-radius: 2px !important;
  }

  body .layers .channel-row-label {
    min-width: 0 !important;
    display: grid !important;
  }

  body .layers .channel-row-label strong,
  body .layers .channel-row-label small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .channel-row-label strong {
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 16px !important;
  }

  body .layers .channel-row-label small {
    color: var(--curve-muted, #6f7278) !important;
    font-size: 10px !important;
    line-height: 13px !important;
  }

  body .layers .alpha-channel-row {
    width: 100% !important;
    min-height: 44px !important;
    display: grid !important;
    grid-template-columns: 52px minmax(60px, 1fr) 88px !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 3px !important;
    border-bottom: 1px solid #e1e3e6 !important;
  }

  body .layers .channels-panel .alpha-channel-view {
    all: unset !important;
    box-sizing: border-box !important;
    width: 52px !important;
    height: 34px !important;
    display: grid !important;
    grid-template-columns: 15px 30px !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
  }

  body .layers .alpha-channel-thumbnail {
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    border: 1px solid #bfc3c9 !important;
    border-radius: 2px !important;
  }

  body .layers .channels-panel .alpha-channel-name {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 5px !important;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    color: var(--curve-text, #151619) !important;
    background: transparent !important;
    font: inherit !important;
    font-size: 11px !important;
  }

  body .layers .alpha-channel-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 28px) !important;
    align-items: center !important;
    gap: 1px !important;
  }

  body .layers .channels-panel .alpha-channel-action {
    all: unset !important;
    box-sizing: border-box !important;
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 3px !important;
    cursor: pointer !important;
  }

  body .layers .channels-panel .alpha-channel-action img {
    width: 15px !important;
    height: 15px !important;
  }

  body .layers .channel-settings-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px 2px 10px !important;
  }

  body .layers .channel-settings-grid .compact-field {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    margin: 0 !important;
    font-size: 10px !important;
  }

  body .layers .channel-settings-grid select,
  body .layers .channel-settings-grid input[type="text"],
  body .layers .channel-settings-grid input[type="color"] {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
  }

  body .layers .channel-invert-toggle {
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    align-self: end !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  body .layers .channel-invert-toggle input[type="checkbox"] {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .layers .spot-channel-controls .retouch-range {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 6px !important;
  }

  body .layers .spot-channel-controls input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body .layers .spot-channel-controls output {
    display: block !important;
    color: var(--curve-muted, #6f7278) !important;
    font-size: 10px !important;
    line-height: 14px !important;
    text-align: right !important;
  }

  body .layers .spot-channel-controls {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body .layers .spot-channel-controls[hidden] {
    display: none !important;
  }

  body .layers .channel-disclosure-icon {
    position: absolute !important;
    right: 6px !important;
    width: 15px !important;
    height: 15px !important;
    opacity: 0.6 !important;
    transform: rotate(-90deg) !important;
  }

  body .layers .channel-settings-disclosure[open] .channel-disclosure-icon {
    transform: rotate(90deg) !important;
  }
}

@media (max-width: 380px) {
  body .layers .channel-settings-grid,
  body .layers .spot-channel-controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .layers .spot-channel-controls {
    grid-column: auto !important;
  }
}

/* Release 313: local custom brush tips and textured stamping. */
.custom-brush-tip-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid #d7d9dd;
}

.custom-brush-tip-preview {
  width: 56px;
  height: 56px;
  display: block;
  border: 1px solid #c7cad0;
  border-radius: 4px;
  background: #ffffff;
}

.custom-brush-tip-preview.is-active {
  border-color: var(--curve-accent, #c98a2a);
  box-shadow: inset 0 0 0 1px var(--curve-accent, #c98a2a);
}

.custom-brush-tip-info {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.custom-brush-tip-info strong,
.custom-brush-tip-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-brush-tip-info strong {
  color: #272a2f;
  font-size: 11px;
  line-height: 15px;
}

.custom-brush-tip-info small {
  color: #757a82;
  font-size: 9px;
  line-height: 13px;
}

.custom-brush-tip-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
}

body .layers .custom-brush-tip-actions button {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 8px !important;
  border: 1px solid #c7cad0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
}

body .layers .custom-brush-tip-actions button:last-of-type {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}

.custom-brush-tip-actions button img {
  width: 14px;
  height: 14px;
}

.custom-brush-tip-toggle,
.custom-brush-tip-source {
  margin: 0 !important;
}

html[data-theme="dark"] .custom-brush-tip-controls {
  border-color: #3d4148;
}

html[data-theme="dark"] .custom-brush-tip-info strong {
  color: #eef0f3;
}

html[data-theme="dark"] .custom-brush-tip-preview {
  border-color: #555b64;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .custom-brush-tip-controls {
    border-color: #3d4148;
  }

  html[data-theme="auto"] .custom-brush-tip-info strong {
    color: #eef0f3;
  }

  html[data-theme="auto"] .custom-brush-tip-preview {
    border-color: #555b64;
  }
}

@media (max-width: 760px) {
  body .layers .retouch-dynamics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px 2px 10px !important;
  }

  body .layers .retouch-dynamics-grid .compact-field {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  body .layers .retouch-dynamics-grid .retouch-range {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 5px !important;
  }

  body .layers .retouch-dynamics-grid input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body .layers .retouch-dynamics-grid output {
    display: block !important;
    color: var(--curve-muted, #6f7278) !important;
    font-size: 9px !important;
    line-height: 13px !important;
    text-align: right !important;
  }

  body .layers .custom-brush-tip-controls {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid var(--curve-line, #d0d1d4) !important;
  }

  body .layers .custom-brush-tip-preview {
    width: 56px !important;
    height: 56px !important;
    display: block !important;
    border: 1px solid #c7cad0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
  }

  body .layers .custom-brush-tip-preview.is-active {
    border-color: var(--curve-accent, #c98a2a) !important;
    box-shadow: inset 0 0 0 1px var(--curve-accent, #c98a2a) !important;
  }

  body .layers .custom-brush-tip-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  body .layers .custom-brush-tip-info strong,
  body .layers .custom-brush-tip-info small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .custom-brush-tip-info strong {
    color: var(--curve-text, #151619) !important;
    font-size: 11px !important;
    line-height: 15px !important;
  }

  body .layers .custom-brush-tip-info small {
    color: var(--curve-muted, #6f7278) !important;
    font-size: 9px !important;
    line-height: 13px !important;
  }

  body .layers .custom-brush-tip-actions {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-top: 3px !important;
  }

  body .layers .custom-brush-tip-actions button {
    all: unset !important;
    box-sizing: border-box !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 8px !important;
    border: 1px solid #c7cad0 !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    cursor: pointer !important;
  }

  body .layers .custom-brush-tip-actions button:last-of-type {
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
  }

  body .layers .custom-brush-tip-actions button:disabled {
    opacity: 0.34 !important;
    cursor: default !important;
  }

  body .layers .custom-brush-tip-actions img {
    width: 14px !important;
    height: 14px !important;
  }

  body .layers .custom-brush-tip-toggle {
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    font-size: 10px !important;
  }

  body .layers .custom-brush-tip-toggle input[type="checkbox"] {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .layers .custom-brush-tip-source select,
  body .layers .retouch-pressure-field select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
  }
}

@media (max-width: 380px) {
  body .layers .retouch-dynamics-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .layers .custom-brush-tip-controls {
    grid-column: auto !important;
  }
}

/* Release 315: local Content-Aware Fill. */
.drawer-tool[data-icon="content-aware"] {
  --drawer-icon: url("assets/lucide/replace.svg");
}

.content-aware-fill-panel > .compact-field {
  margin: 5px 0 !important;
}

.content-aware-fill-panel > .wide-button {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 5px !important;
  border-radius: 4px !important;
}

.content-aware-fill-panel > .wide-button img {
  width: 15px;
  height: 15px;
}

@media (max-width: 760px) {
  body .layers .content-aware-fill-panel > .compact-field {
    min-width: 0 !important;
    min-height: 34px !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 3px 0 !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  body .layers .content-aware-fill-panel > .compact-field > select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    font-size: 10px !important;
  }

  body .layers .content-aware-fill-panel .retouch-range {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 5px !important;
  }

  body .layers .content-aware-fill-panel input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body .layers .content-aware-fill-panel output {
    color: var(--curve-muted, #6f7278) !important;
    font-size: 9px !important;
    line-height: 13px !important;
    text-align: right !important;
  }

  body .layers .content-aware-fill-panel > .wide-button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
  }

  body .layers .content-aware-fill-panel > .wide-button img {
    width: 15px !important;
    height: 15px !important;
  }
}

/* Release 316: local Photoshop-style Apply Image. */
.drawer-tool[data-icon="apply-image"] {
  --drawer-icon: url("assets/lucide/combine.svg");
}

.apply-image-panel > .compact-field,
.apply-image-panel .apply-image-pair > .compact-field {
  margin: 5px 0 !important;
}

.apply-image-target {
  min-height: 34px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  border-top: 1px solid var(--curve-hairline, #d9dce1);
  border-bottom: 1px solid var(--curve-hairline, #d9dce1);
  font-size: 11px;
}

.apply-image-target output {
  min-width: 0;
  overflow: hidden;
  color: var(--curve-muted, #6f7278);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apply-image-pair,
.apply-image-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.apply-image-toggles {
  margin: 4px 0;
  padding: 6px 2px;
  border-top: 1px solid var(--curve-hairline, #d9dce1);
  border-bottom: 1px solid var(--curve-hairline, #d9dce1);
}

.apply-image-toggles .filter-toggle {
  min-width: 0;
  margin: 0 !important;
  font-size: 10px;
  line-height: 13px;
}

.apply-image-panel > .wide-button {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 5px !important;
  border-radius: 4px !important;
}

.apply-image-panel > .wide-button img {
  width: 15px;
  height: 15px;
}

@media (max-width: 760px) {
  body .layers .apply-image-panel > .compact-field {
    min-width: 0 !important;
    min-height: 34px !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 3px 0 !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  body .layers .apply-image-target {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 32px !important;
    font-size: 10px !important;
  }

  body .layers .apply-image-panel select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    font-size: 10px !important;
  }

  body .layers .apply-image-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body .layers .apply-image-pair > .compact-field {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    margin: 3px 0 !important;
    font-size: 10px !important;
  }

  body .layers .apply-image-panel .retouch-range {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 5px !important;
  }

  body .layers .apply-image-panel input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body .layers .apply-image-panel output {
    color: var(--curve-muted, #6f7278) !important;
    font-size: 9px !important;
  }

  body .layers .apply-image-toggles {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) !important;
    gap: 6px !important;
  }

  body .layers .apply-image-toggles input[type="checkbox"] {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
  }

  body .layers .apply-image-panel > .wide-button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 34px !important;
    margin-top: 5px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
  }
}

/* Release 317: local Camera Raw-style Develop controls. */
.drawer-tool[data-icon="camera-raw"] {
  --drawer-icon: url("assets/lucide/camera.svg");
}

.camera-raw-target {
  min-height: 34px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  border-top: 1px solid var(--curve-hairline, #d9dce1);
  border-bottom: 1px solid var(--curve-hairline, #d9dce1);
  font-size: 11px;
}

.camera-raw-target output {
  min-width: 0;
  overflow: hidden;
  color: var(--curve-muted, #6f7278);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-raw-panel > .compact-field,
.camera-raw-controls > .compact-field {
  margin: 5px 0 !important;
}

.camera-raw-controls {
  display: grid;
  gap: 1px;
}

.camera-raw-actions {
  margin-top: 7px !important;
}

.camera-raw-actions button {
  min-width: 0 !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 4px !important;
}

.camera-raw-actions img {
  width: 15px;
  height: 15px;
}

@media (max-width: 760px) {
  body .layers .camera-raw-target,
  body .layers .camera-raw-panel > .compact-field,
  body .layers .camera-raw-controls > .compact-field {
    min-width: 0 !important;
    min-height: 34px !important;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 3px 0 !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  body .layers .camera-raw-target {
    min-height: 32px !important;
    margin: 0 !important;
  }

  body .layers .camera-raw-panel select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    font-size: 10px !important;
  }

  body .layers .camera-raw-panel .retouch-range {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 5px !important;
  }

  body .layers .camera-raw-panel input[type="range"] {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body .layers .camera-raw-panel output {
    color: var(--curve-muted, #6f7278) !important;
    font-size: 9px !important;
    line-height: 13px !important;
    text-align: right !important;
  }

  body .layers .camera-raw-target output {
    text-align: left !important;
  }

  body .layers .camera-raw-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }

  body .layers .camera-raw-actions button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }
}

/* Release 319: multi-layer Smart Object source summaries. */
.smart-object-panel > header output {
  max-width: 128px;
  text-align: right;
}

@media (max-width: 760px) {
  body .layers .smart-object-panel > header {
    grid-template-columns: 30px minmax(0, 1fr) minmax(74px, 96px) !important;
  }

  body .layers .smart-object-panel > header output {
    max-width: 96px !important;
    line-height: 11px !important;
    white-space: normal !important;
  }
}

/* Release 320: editable Smart Filter stacks. */
.smart-filters-panel {
  margin: 7px 0 0;
  border-top: 1px solid var(--curve-hairline, #d9dce1);
  border-bottom: 1px solid var(--curve-hairline, #d9dce1);
}

.smart-filters-panel > summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  cursor: pointer;
  list-style: none;
}

.smart-filters-panel > summary::-webkit-details-marker {
  display: none;
}

.smart-filters-panel > summary > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}

.smart-filters-panel > summary img {
  width: 15px;
  height: 15px;
}

.smart-filters-panel > summary output {
  color: var(--curve-muted, #6f7278);
  font-size: 9px;
}

.smart-filter-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  padding: 8px 4px;
  border-top: 1px solid var(--curve-hairline, #d9dce1);
}

.smart-filter-editor-heading {
  grid-column: 1 / -1;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--curve-muted, #6f7278);
  font-size: 9px;
  text-transform: uppercase;
}

.smart-filter-editor-heading button {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--curve-hairline, #d9dce1) !important;
  border-radius: 3px !important;
  background: transparent !important;
}

.smart-filter-editor-heading img {
  width: 14px;
  height: 14px;
}

.smart-filter-editor > label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--curve-muted, #6f7278);
  font-size: 9px;
}

.smart-filter-editor > label > span {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.smart-filter-editor select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--curve-hairline, #d9dce1);
  border-radius: 3px;
  background: var(--curve-panel, #fff);
  color: var(--curve-ink, #17191c);
  font-size: 9px;
}

.smart-filter-editor input[type="range"] {
  width: 100%;
  min-width: 0;
  margin: 4px 0;
}

.smart-filter-editor output {
  color: var(--curve-ink, #17191c);
  white-space: nowrap;
}

.smart-filter-commit {
  grid-column: 1 / -1;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 8px !important;
  border: 1px solid var(--curve-hairline, #d9dce1) !important;
  border-radius: 3px !important;
  background: transparent !important;
  font-size: 10px !important;
}

.smart-filter-commit img {
  width: 14px;
  height: 14px;
}

.smart-filter-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.smart-filter-list > li {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-top: 1px solid var(--curve-hairline, #d9dce1);
}

.smart-filter-list > li.is-selected {
  box-shadow: inset 2px 0 0 var(--curve-accent, #c98a2a);
}

.smart-filter-select {
  min-width: 0 !important;
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.smart-filter-select > img {
  width: 15px;
  height: 15px;
}

.smart-filter-select > span {
  min-width: 0;
  display: grid;
}

.smart-filter-select strong,
.smart-filter-select small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-filter-select strong {
  font-size: 9px;
  line-height: 13px;
}

.smart-filter-select small {
  color: var(--curve-muted, #6f7278);
  font-size: 8px;
  line-height: 11px;
}

.smart-filter-row-actions {
  display: grid;
  grid-template-columns: repeat(4, 26px);
  padding-right: 3px;
}

.smart-filter-row-actions button {
  width: 26px !important;
  min-width: 26px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.smart-filter-row-actions img {
  width: 13px;
  height: 13px;
}

.smart-filter-row-actions button:disabled {
  opacity: 0.25 !important;
}

.smart-filter-up img {
  transform: rotate(90deg);
}

.smart-filter-down img {
  transform: rotate(-90deg);
}

.smart-filter-empty {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 5px !important;
  color: var(--curve-muted, #6f7278);
  font-size: 9px;
}

@media (max-width: 760px) {
  body .layers .smart-filter-editor {
    gap: 6px !important;
    padding: 7px 4px !important;
  }

  body .layers .smart-filter-editor select {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 9px !important;
  }

  body .layers .smart-filter-list > li {
    grid-template-columns: minmax(0, 1fr) 108px !important;
  }

  body .layers .smart-filter-row-actions {
    grid-template-columns: repeat(4, 26px) !important;
  }
}

/* Source: release-321.css */
/* Release 321: integrated Select Subject controls. */

.select-subject-panel {
  margin: 0 0 10px;
  border-top: 1px solid rgba(23, 33, 43, 0.1);
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
  background: transparent;
}

.select-subject-panel > summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  color: var(--ink);
  cursor: pointer;
  font: 650 12px/1 system-ui, sans-serif;
  list-style: none;
}

.select-subject-panel > summary::-webkit-details-marker {
  display: none;
}

.select-subject-panel > summary::after {
  width: 7px;
  height: 7px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  content: "";
  opacity: 0.58;
  transform: rotate(45deg) translate(-2px, 2px);
  transition: transform 140ms ease;
}

.select-subject-panel[open] > summary::after {
  transform: rotate(225deg) translate(-2px, 2px);
}

.select-subject-panel > summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.select-subject-panel > summary img,
#selectSubjectButton img {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.select-subject-content {
  display: grid;
  gap: 8px;
  padding: 0 0 10px;
}

.select-subject-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.select-subject-content select {
  min-width: 0;
  width: 100%;
}

.select-subject-tolerance {
  min-width: 0;
}

#selectSubjectButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

html[data-theme="dark"] .select-subject-panel {
  border-color: rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .select-subject-panel {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 440px) {
  .select-subject-panel > summary {
    min-height: 38px;
  }

  .select-subject-settings {
    gap: 6px;
  }
}

/* Source: release-322.css */
/* Release 322: Photoshop-style editable pixel mask properties. */

body .layers .layer-mask-properties {
  order: 2 !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--ios-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .layers .layer-mask-properties[hidden] {
  display: none !important;
}

body .layers .layer-mask-properties > summary {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 11px !important;
  color: var(--ios-text, #22262b) !important;
  cursor: pointer !important;
  list-style: none !important;
}

body .layers .layer-mask-properties > summary::-webkit-details-marker {
  display: none !important;
}

body .layers .layer-mask-properties > summary span {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font: 650 12px/1 system-ui, sans-serif !important;
}

body .layers .layer-mask-properties > summary img {
  width: 17px !important;
  height: 17px !important;
}

body .layers .layer-mask-properties > summary output {
  color: var(--ios-muted, #6f7680) !important;
  font: 550 10px/1 system-ui, sans-serif !important;
}

body .layers .layer-mask-controls {
  display: grid !important;
  gap: 9px !important;
  padding: 9px 11px 11px !important;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.1)) !important;
}

body .layers .layer-mask-controls > label {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  color: var(--ios-text, #22262b) !important;
  font: 560 10px/1 system-ui, sans-serif !important;
}

body .layers .layer-mask-controls > label > span {
  display: flex !important;
  justify-content: space-between !important;
}

body .layers .layer-mask-actions {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.1)) !important;
  border-bottom: 1px solid var(--ios-line, rgba(23, 33, 43, 0.1)) !important;
}

body .layers .layer-mask-actions button {
  min-width: 0 !important;
  min-height: 47px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-right: 1px solid var(--ios-line, rgba(23, 33, 43, 0.1)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ios-text, #22262b) !important;
}

body .layers .layer-mask-actions button:last-child {
  border-right: 0 !important;
}

body .layers .layer-mask-actions button.is-active {
  background: var(--ios-selected, rgba(20, 115, 230, 0.1)) !important;
  color: var(--ios-active, #1473e6) !important;
}

body .layers .layer-mask-actions button:disabled {
  opacity: 0.38 !important;
}

body .layers .layer-mask-actions img {
  width: 16px !important;
  height: 16px !important;
}

body .layers .layer-mask-actions span {
  max-width: 100% !important;
  overflow: hidden !important;
  font: 560 8px/10px system-ui, sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .layer-mask-thumbnail {
  width: 28px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 3px !important;
  background:
    linear-gradient(45deg, rgba(23, 33, 43, 0.08) 25%, transparent 25%, transparent 75%, rgba(23, 33, 43, 0.08) 75%),
    linear-gradient(45deg, rgba(23, 33, 43, 0.08) 25%, #fff 25%, #fff 75%, rgba(23, 33, 43, 0.08) 75%) !important;
  background-position: 0 0, 4px 4px !important;
  background-size: 8px 8px !important;
}

body .layers .layer-mask-thumbnail img {
  width: 17px !important;
  height: 17px !important;
  padding: 2px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

body .layers .layer-mask-thumbnail.disabled {
  opacity: 0.42 !important;
}

body .layers .layer-mask-thumbnail.inverted img {
  filter: invert(1) !important;
  background: rgba(0, 0, 0, 0.82) !important;
}

body .layers .layer-list li:has(.layer-mask-thumbnail):not(.layer-group-row):not(.layer-empty) {
  grid-template-columns: 22px 36px 28px minmax(0, 1fr) auto !important;
  gap: 6px !important;
}

body .layers .layer-list li.is-group-child:has(.layer-mask-thumbnail) {
  grid-template-columns: 22px 30px 28px minmax(0, 1fr) auto !important;
}

@media (max-width: 390px) {
  body .layers .layer-mask-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body .layers .layer-mask-actions button:nth-child(3) {
    border-right: 0 !important;
  }

  body .layers .layer-mask-actions button:nth-child(-n + 3) {
    border-bottom: 1px solid var(--ios-line, rgba(23, 33, 43, 0.1)) !important;
  }
}

/* Source: release-323.css */
/* Release 323: compact editable Layer Styles. */

body .layers .layer-style-content {
  gap: 9px !important;
}

body .layers .layer-style-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .layers .layer-style-toolbar select {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 26px 0 8px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 4px !important;
  background: var(--curve-panel, #fff) !important;
  color: var(--curve-text, #22262b) !important;
  font: 600 11px/1 system-ui, sans-serif !important;
}

body .layers .layer-style-enabled {
  min-height: 34px !important;
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  color: var(--curve-text, #22262b) !important;
  font: 600 10px/1 system-ui, sans-serif !important;
  white-space: nowrap !important;
}

body .layers .layer-style-enabled input {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  accent-color: var(--curve-accent, #1473e6) !important;
}

body .layers .layer-style-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
}

body .layers .layer-style-fields > label {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: none !important;
  gap: 4px !important;
  margin: 0 !important;
  color: var(--curve-text, #22262b) !important;
  font: 560 10px/1 system-ui, sans-serif !important;
}

body .layers .layer-style-fields > label[hidden] {
  display: none !important;
}

body .layers .layer-style-fields > label > span {
  min-height: 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  color: var(--curve-text, #22262b) !important;
  font: 560 10px/1 system-ui, sans-serif !important;
}

body .layers .layer-style-fields input[type="color"] {
  width: 100% !important;
  height: 30px !important;
  padding: 2px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 4px !important;
  background: transparent !important;
}

body .layers .layer-style-fields select {
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  padding: 0 24px 0 7px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 4px !important;
  background: var(--curve-panel, #fff) !important;
  color: var(--curve-text, #22262b) !important;
  font: 560 10px/1 system-ui, sans-serif !important;
}

body .layers .layer-style-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .layers .layer-style-actions button {
  min-height: 34px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--curve-text, #22262b) !important;
  font: 600 10px/1 system-ui, sans-serif !important;
}

body .layers .layer-style-actions button:last-child {
  border-right: 0 !important;
}

body .layers .layer-styles-panel .mini-status {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 9px !important;
  line-height: 13px !important;
}

@media (max-width: 390px) {
  body .layers .layer-style-fields {
    gap: 7px !important;
  }

  body .layers .layer-style-toolbar {
    gap: 5px !important;
  }
}

/* Source: release-324.css */
/* Release 324: compact Illustrator-style Vector Blend controls. */

body .drawer-tool[data-icon="blend"]::before {
  background-image: url("assets/sent-icons/blend.png") !important;
}

body #vectorBlendPanel {
  gap: 9px !important;
}

body #vectorBlendPanel > h2 {
  margin: 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  color: var(--curve-text, #22262b) !important;
  font: 650 12px/1 system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

body #vectorBlendPanel .vector-blend-settings {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body #vectorBlendPanel .compact-field {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: none !important;
  gap: 5px !important;
  margin: 0 !important;
  color: var(--curve-text, #22262b) !important;
  font: 560 10px/1 system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

body #vectorBlendPanel .compact-field[hidden] {
  display: none !important;
}

body #vectorBlendPanel select {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 25px 0 8px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 4px !important;
  background-color: var(--curve-panel, #fff) !important;
  color: var(--curve-text, #22262b) !important;
  font: 560 10px/1 system-ui, sans-serif !important;
}

body #vectorBlendPanel .pixel-feather-control {
  min-width: 0 !important;
  min-height: 32px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 8px !important;
}

body #vectorBlendPanel input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  accent-color: var(--curve-accent, #1473e6) !important;
}

body #vectorBlendPanel output {
  min-width: 34px !important;
  color: var(--curve-text, #22262b) !important;
  font: 650 10px/1 system-ui, sans-serif !important;
  text-align: right !important;
}

body #vectorBlendPanel .vector-blend-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body #vectorBlendPanel .vector-blend-actions button {
  min-width: 0 !important;
  min-height: 35px !important;
  padding: 0 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--curve-text, #22262b) !important;
  font: 620 9px/1 system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #vectorBlendPanel .vector-blend-actions button:last-child {
  border-right: 0 !important;
}

body #vectorBlendPanel .vector-blend-actions button:disabled {
  opacity: 0.34 !important;
}

body #vectorBlendPanel .mini-status {
  min-height: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--curve-muted, #69717a) !important;
  font-size: 9px !important;
  line-height: 13px !important;
}

@media (max-width: 390px) {
  body #vectorBlendPanel .vector-blend-settings {
    gap: 6px !important;
  }

  body #vectorBlendPanel .vector-blend-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #vectorBlendPanel .vector-blend-actions button:nth-child(2) {
    border-right: 0 !important;
  }

  body #vectorBlendPanel .vector-blend-actions button:nth-child(-n + 2) {
    border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  }
}

/* Source: release-325.css */
/* Release 325: editable Vector Blend spines. */

body #vectorBlendPanel .vector-blend-spine-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body #vectorBlendPanel .vector-blend-spine-actions button {
  min-width: 0 !important;
  min-height: 35px !important;
  padding: 0 7px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--curve-text, #22262b) !important;
  font: 620 9px/1 system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #vectorBlendPanel .vector-blend-spine-actions button:last-child {
  border-right: 0 !important;
}

body #vectorBlendPanel .vector-blend-spine-actions button:disabled {
  opacity: 0.34 !important;
}

body .layer-state-badges img[src$="route.svg"] {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 1.5 !important;
}

@media (max-width: 390px) {
  body #vectorBlendPanel .vector-blend-spine-actions button {
    min-height: 34px !important;
    padding: 0 5px !important;
  }
}

/* Source: release-326.css */
/* Release 326: editable variable-width vector strokes. */

body .tool-flyout .width-tool-adjustments {
  gap: 7px !important;
}

body .tool-flyout .width-tool-adjustments .width-point-controls {
  display: grid !important;
  gap: 5px !important;
  margin: 1px 0 0 !important;
  padding: 7px 0 0 !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .tool-flyout .width-tool-adjustments .width-point-controls > strong {
  color: var(--curve-muted, #68717b) !important;
  font-size: 9px !important;
  font-weight: 680 !important;
  line-height: 12px !important;
  text-transform: uppercase !important;
}

body .tool-flyout .width-tool-adjustments .width-profile-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 1px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

body .tool-flyout .width-tool-adjustments .width-profile-actions button {
  min-height: 43px !important;
  padding: 3px 2px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

body .tool-flyout .width-tool-adjustments .width-profile-actions button:last-child {
  border-right: 0 !important;
}

body .tool-flyout .width-tool-adjustments .width-profile-actions button:disabled {
  opacity: 0.34 !important;
}

body .layer-state-badges img[src$="move-horizontal.svg"] {
  width: 12px !important;
  height: 12px !important;
}

@media (max-width: 390px) {
  body .tool-flyout .width-tool-adjustments .width-profile-actions button {
    min-height: 41px !important;
  }
}

/* Source: release-327.css */
/* Release 327: region-based Shape Builder. */

body .tool-flyout .shape-builder-adjustments {
  gap: 7px !important;
}

body .tool-flyout .shape-builder-adjustments .shape-builder-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

body .tool-flyout .shape-builder-adjustments .shape-builder-actions button {
  min-height: 43px !important;
  padding: 3px 2px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

body .tool-flyout .shape-builder-adjustments .shape-builder-actions button:last-child {
  border-right: 0 !important;
}

body .tool-flyout .shape-builder-adjustments .shape-builder-actions button:disabled {
  opacity: 0.34 !important;
}

@media (max-width: 390px) {
  body .tool-flyout .shape-builder-adjustments .shape-builder-actions button {
    min-height: 41px !important;
  }
}

/* Source: release-328.css */
/* Release 328: closed-loop and compound-contour Vector Blend spines. */

body #vectorBlendPanel .vector-blend-spine-settings {
  display: grid !important;
  gap: 8px !important;
  padding: 8px 0 1px !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body #vectorBlendPanel .vector-blend-spine-settings[hidden],
body #vectorBlendPanel .vector-blend-spine-settings [hidden] {
  display: none !important;
}

body #vectorBlendPanel .vector-blend-spine-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body #vectorBlendPanel #vectorBlendSpineStartValue {
  min-width: 38px !important;
}

body #vectorBlendPanel #vectorBlendSpineMeta {
  padding-top: 1px !important;
}

@media (max-width: 390px) {
  body #vectorBlendPanel .vector-blend-spine-settings,
  body #vectorBlendPanel .vector-blend-spine-options {
    gap: 6px !important;
  }
}

/* Source: release-329.css */
/* Release 329: editable Gradient Mesh nodes and compact vector controls. */

body .tool-flyout .gradient-mesh-adjustments {
  gap: 7px !important;
}

body .tool-flyout .gradient-mesh-adjustments .gradient-mesh-point-controls {
  display: grid !important;
  gap: 5px !important;
  margin: 1px 0 0 !important;
  padding: 7px 0 0 !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .tool-flyout .gradient-mesh-adjustments .gradient-mesh-point-controls > strong {
  color: var(--curve-muted, #68717b) !important;
  font-size: 9px !important;
  font-weight: 680 !important;
  line-height: 12px !important;
  text-transform: uppercase !important;
}

body .tool-flyout .gradient-mesh-adjustments .gradient-mesh-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 1px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

body .tool-flyout .gradient-mesh-adjustments .gradient-mesh-actions button {
  min-height: 43px !important;
  padding: 3px 2px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

body .tool-flyout .gradient-mesh-adjustments .gradient-mesh-actions button:last-child {
  border-right: 0 !important;
}

body .tool-flyout .gradient-mesh-adjustments .gradient-mesh-actions button:disabled {
  opacity: 0.34 !important;
}

@media (max-width: 390px) {
  body .tool-flyout .gradient-mesh-adjustments .gradient-mesh-actions button {
    min-height: 41px !important;
  }
}

/* Source: release-330.css */
/* Release 330: integrated editable Pattern tool. */

body .tool-flyout .pattern-tool-adjustments {
  gap: 6px !important;
}

body .tool-flyout .pattern-tool-adjustments .pattern-tool-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 1px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

body .tool-flyout .pattern-tool-adjustments .pattern-tool-actions button {
  min-height: 43px !important;
  padding: 3px 2px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

body .tool-flyout .pattern-tool-adjustments .pattern-tool-actions button:last-child {
  border-right: 0 !important;
}

body .tool-flyout .pattern-tool-adjustments .pattern-tool-actions button:disabled {
  opacity: 0.34 !important;
}

body .tool-flyout .pattern-tool-adjustments .flyout-mini-status {
  min-height: 26px !important;
  white-space: normal !important;
}

@media (max-width: 390px) {
  body .tool-flyout .pattern-tool-adjustments {
    gap: 5px !important;
  }

  body .tool-flyout .pattern-tool-adjustments .pattern-tool-actions button {
    min-height: 41px !important;
  }
}

/* Source: release-331.css */
/* Release 331: non-destructive Envelope Warp for vectors, text, and images. */

body .tool-flyout .envelope-warp-adjustments {
  gap: 6px !important;
}

body .tool-flyout .envelope-warp-adjustments .envelope-warp-point-controls {
  margin-top: 1px !important;
  padding-top: 6px !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .tool-flyout .envelope-warp-adjustments .envelope-warp-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 1px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

body .tool-flyout .envelope-warp-adjustments .envelope-warp-actions button {
  min-width: 0 !important;
  min-height: 43px !important;
  padding: 3px 2px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

body .tool-flyout .envelope-warp-adjustments .envelope-warp-actions button:last-child {
  border-right: 0 !important;
}

body .tool-flyout .envelope-warp-adjustments .envelope-warp-actions button:disabled {
  opacity: 0.34 !important;
}

body .tool-flyout .envelope-warp-adjustments .flyout-mini-status {
  min-height: 26px !important;
  white-space: normal !important;
}

@media (max-width: 390px) {
  body .tool-flyout .envelope-warp-adjustments {
    gap: 5px !important;
  }

  body .tool-flyout .envelope-warp-adjustments .envelope-warp-actions button {
    min-height: 41px !important;
  }
}

/* Source: release-332.css */
/* Release 332: editable vector Art Brush profiles. */

body .tool-flyout .art-brush-adjustments {
  gap: 5px !important;
}

body .tool-flyout .art-brush-adjustments > label {
  min-height: 30px !important;
}

body .tool-flyout .art-brush-adjustments > label > span {
  min-width: 66px !important;
}

body .tool-flyout .art-brush-adjustments input[type="range"] {
  min-width: 0 !important;
}

body .tool-flyout .art-brush-adjustments output {
  width: 38px !important;
  min-width: 38px !important;
  font-variant-numeric: tabular-nums;
}

body .tool-flyout .art-brush-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 2px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

body .tool-flyout .art-brush-actions button {
  min-width: 0 !important;
  min-height: 43px !important;
  padding: 3px 2px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

body .tool-flyout .art-brush-actions button:last-child {
  border-right: 0 !important;
}

body .tool-flyout .art-brush-actions button:disabled {
  opacity: 0.34 !important;
}

body .tool-flyout .art-brush-adjustments .flyout-mini-status {
  min-height: 27px !important;
  white-space: normal !important;
}

@media (max-width: 390px) {
  body .tool-flyout .art-brush-adjustments {
    gap: 4px !important;
  }

  body .tool-flyout .art-brush-actions button {
    min-height: 41px !important;
  }
}

/* Source: release-333.css */
/* Release 333: reusable local Art Brush library and custom vector tips. */

body .tool-flyout .art-brush-library-controls {
  gap: 5px !important;
  margin: 0 0 2px !important;
  padding: 0 0 7px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .tool-flyout .art-brush-library-controls > strong {
  font-size: 9px !important;
  line-height: 12px !important;
  color: var(--muted, #667085) !important;
  text-transform: uppercase;
}

body .tool-flyout .art-brush-library-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

body .tool-flyout .art-brush-library-actions button {
  min-width: 0 !important;
  min-height: 41px !important;
  padding: 3px 2px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

body .tool-flyout .art-brush-library-actions button:last-child {
  border-right: 0 !important;
}

body .tool-flyout .art-brush-library-actions button:disabled {
  opacity: 0.34 !important;
}

body .tool-flyout .art-brush-library-actions img {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 390px) {
  body .tool-flyout .art-brush-library-controls {
    padding-bottom: 6px !important;
  }

  body .tool-flyout .art-brush-library-actions button {
    min-height: 39px !important;
  }
}

/* Source: release-334.css */
/* Release 334: imported image Art Brushes and searchable brush collections. */

body .tool-flyout .art-brush-library-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body .tool-flyout .art-brush-library-controls input[type="search"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 3px 7px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 5px !important;
  background: var(--panel, #ffffff) !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
}

body .tool-flyout .art-brush-library-controls input[type="search"]::placeholder {
  color: var(--muted, #667085) !important;
}

body .tool-flyout .art-brush-library-controls select {
  height: 28px !important;
  min-height: 28px !important;
  font-size: 10px !important;
}

body .tool-flyout .art-brush-library-actions button {
  min-height: 40px !important;
}

@media (max-width: 390px) {
  body .tool-flyout .art-brush-library-actions button {
    min-height: 38px !important;
    font-size: 7.5px !important;
  }
}

/* Source: release-335.css */
/* Release 335: organized Art Brush collections. */

body .tool-flyout .art-brush-organize {
  margin-top: 2px !important;
  padding-top: 5px !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .tool-flyout .art-brush-organize > summary {
  min-height: 28px !important;
  padding: 5px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
  cursor: pointer;
}

body .tool-flyout .art-brush-organize[open] > summary {
  margin-bottom: 4px !important;
}

body .tool-flyout .art-brush-organize input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 3px 7px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 5px !important;
  background: var(--panel, #ffffff) !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
}

body .tool-flyout .art-brush-organize-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  margin-top: 4px !important;
}

body .tool-flyout .art-brush-organize-actions button {
  min-height: 34px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 5px !important;
  background: transparent !important;
  font-size: 8px !important;
}

@media (max-width: 390px) {
  body .tool-flyout .art-brush-organize > summary {
    min-height: 27px !important;
  }
}

/* Source: release-336.css */
/* Release 336: compact batch brush management and portable brush packs. */

body .tool-flyout .art-brush-batch {
  margin-top: 2px !important;
  padding-top: 5px !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .tool-flyout .art-brush-batch > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 28px !important;
  padding: 5px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
  cursor: pointer;
}

body .tool-flyout .art-brush-batch > summary small {
  color: var(--muted, #64717d) !important;
  font-size: 8px !important;
  font-weight: 500 !important;
}

body .tool-flyout .art-brush-batch-select-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}

body .tool-flyout .art-brush-batch-select-actions button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 4px 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink, #17212b) !important;
  font-size: 8px !important;
}

body .tool-flyout .art-brush-batch-select-actions button + button {
  border-left: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .tool-flyout .art-brush-batch-select-actions img,
body .tool-flyout .art-brush-batch-actions img {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
}

body .tool-flyout .art-brush-batch-list {
  max-height: 152px !important;
  margin: 5px 0 !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.1)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.1)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

body .tool-flyout .art-brush-batch-item {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 4px 2px !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.08)) !important;
  font-size: 9px !important;
}

body .tool-flyout .art-brush-batch-item:last-child {
  border-bottom: 0 !important;
}

body .tool-flyout .art-brush-batch-item input {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
}

body .tool-flyout .art-brush-batch-item span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ink, #17212b) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .tool-flyout .art-brush-batch-item small {
  max-width: 72px !important;
  overflow: hidden !important;
  color: var(--muted, #64717d) !important;
  font-size: 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .tool-flyout .art-brush-batch input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 3px 7px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 5px !important;
  background: var(--panel, #ffffff) !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
}

body .tool-flyout .art-brush-batch-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 5px !important;
}

body .tool-flyout .art-brush-batch-actions button {
  min-height: 34px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 5px !important;
  background: transparent !important;
  font-size: 8px !important;
}

body .tool-flyout .art-brush-batch button:disabled {
  opacity: 0.35 !important;
}

@media (max-width: 390px) {
  body .tool-flyout .art-brush-batch-list {
    max-height: 132px !important;
  }
}

/* Source: release-337.css */
/* Release 337: visual Art Brush previews and exact duplicate detection. */

body .tool-flyout .art-brush-batch-item {
  grid-template-columns: 18px 76px minmax(0, 1fr) !important;
  min-height: 42px !important;
  padding: 4px 2px !important;
}

body .tool-flyout .art-brush-preview {
  display: block !important;
  width: 76px !important;
  height: 30px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.1)) !important;
  border-radius: 4px !important;
  background-color: var(--panel, #ffffff) !important;
  background-image:
    linear-gradient(45deg, rgba(100, 113, 125, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(100, 113, 125, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(100, 113, 125, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(100, 113, 125, 0.08) 75%) !important;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0 !important;
  background-size: 8px 8px !important;
}

body .tool-flyout .art-brush-batch-copy {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 1px !important;
  overflow: hidden !important;
}

body .tool-flyout .art-brush-batch-copy > span,
body .tool-flyout .art-brush-batch-copy > small {
  display: block !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .tool-flyout .art-brush-batch-copy > span {
  color: var(--ink, #17212b) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
}

body .tool-flyout .art-brush-batch-copy > small {
  color: var(--muted, #64717d) !important;
  font-size: 7.5px !important;
  font-weight: 500 !important;
}

@media (max-width: 390px) {
  body .tool-flyout .art-brush-batch-item {
    grid-template-columns: 17px 64px minmax(0, 1fr) !important;
  }

  body .tool-flyout .art-brush-preview {
    width: 64px !important;
  }
}

/* Source: release-338.css */
/* Release 338: touch-safe custom Art Brush ordering within folders. */

body .tool-flyout .art-brush-batch-item {
  grid-template-columns: 18px 76px minmax(0, 1fr) 24px !important;
}

body .tool-flyout .art-brush-drag-handle {
  display: grid !important;
  width: 24px !important;
  height: 30px !important;
  min-width: 24px !important;
  min-height: 30px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-left: 1px solid var(--curve-line, rgba(23, 33, 43, 0.1)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted, #64717d) !important;
  cursor: grab !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

body .tool-flyout .art-brush-drag-handle:active {
  cursor: grabbing !important;
}

body .tool-flyout .art-brush-drag-handle img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

body .tool-flyout .art-brush-batch-item.is-dragging {
  background: color-mix(in srgb, var(--accent, #167c80) 8%, var(--panel, #ffffff)) !important;
  outline: 1px solid color-mix(in srgb, var(--accent, #167c80) 35%, transparent) !important;
  outline-offset: -1px !important;
}

body .tool-flyout .art-brush-batch-item.is-dragging .art-brush-drag-handle {
  color: var(--accent, #167c80) !important;
}

@media (max-width: 390px) {
  body .tool-flyout .art-brush-batch-item {
    grid-template-columns: 17px 58px minmax(0, 1fr) 23px !important;
  }

  body .tool-flyout .art-brush-preview {
    width: 58px !important;
  }

  body .tool-flyout .art-brush-drag-handle {
    width: 23px !important;
    min-width: 23px !important;
  }
}

/* Source: release-339.css */
/* Release 339: Art Brush collection defaults and folder export shortcuts. */

body .tool-flyout .art-brush-collection {
  margin-top: 2px !important;
  padding-top: 5px !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .tool-flyout .art-brush-collection > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 28px !important;
  gap: 6px !important;
  padding: 5px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  line-height: 14px !important;
  cursor: pointer;
}

body .tool-flyout .art-brush-collection > summary span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .tool-flyout .art-brush-collection > summary small {
  flex: 0 0 auto !important;
  color: var(--muted, #64717d) !important;
  font-size: 8px !important;
  font-weight: 500 !important;
}

body .tool-flyout .art-brush-collection > .art-brush-preview {
  width: 100% !important;
  height: 34px !important;
  margin: 3px 0 4px !important;
}

body .tool-flyout .art-brush-collection > .flyout-mini-status {
  margin: 2px 0 5px !important;
  font-size: 8px !important;
}

body .tool-flyout .art-brush-collection-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-top: 4px !important;
}

body .tool-flyout .art-brush-collection-actions button {
  min-height: 34px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 5px !important;
  background: transparent !important;
  font-size: 8px !important;
}

body .tool-flyout .art-brush-collection-actions img {
  width: 14px !important;
  height: 14px !important;
}

body .tool-flyout .art-brush-collection-actions button:disabled {
  opacity: 0.35 !important;
}

/* Source: release-340.css */
/* Release 340: folder rename/merge and metadata-aware brush packs. */

body .tool-flyout .art-brush-collection > label {
  margin-top: 4px !important;
}

body .tool-flyout .art-brush-collection > label select {
  width: 100% !important;
  min-width: 0 !important;
  height: 29px !important;
  padding: 3px 22px 3px 7px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 5px !important;
  background-color: var(--panel, #ffffff) !important;
  color: var(--ink, #17212b) !important;
  font-size: 9px !important;
}

body .tool-flyout .art-brush-collection-actions {
  grid-auto-rows: minmax(34px, auto) !important;
}

body .tool-flyout .art-brush-collection-actions button span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Source: release-341.css */
/* Release 341: variable-font axes and OpenType typography controls. */

body .type-advanced-panel {
  margin: 3px 0 7px !important;
  padding-top: 4px !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .type-advanced-panel > summary,
body .tool-flyout .type-advanced-flyout > summary {
  min-height: 32px !important;
  padding: 7px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

body .type-advanced-panel h3 {
  margin: 8px 0 4px !important;
  color: var(--muted, #64717d) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

body .type-advanced-panel > label:not(.filter-toggle) {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 32px !important;
  margin: 0 !important;
  font-size: 10px !important;
}

body .type-advanced-panel > label:not(.filter-toggle) select {
  grid-column: 2 / 4 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  font-size: 10px !important;
}

body .type-advanced-panel input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
}

body .type-advanced-panel output {
  overflow: hidden !important;
  color: var(--muted, #64717d) !important;
  font-size: 9px !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .type-advanced-panel > .filter-toggle {
  display: flex !important;
  align-items: center !important;
  min-height: 30px !important;
  gap: 7px !important;
  margin: 0 !important;
  font-size: 10px !important;
}

body .tool-flyout .type-advanced-flyout {
  margin: 2px 0 !important;
  padding-top: 3px !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .tool-flyout .type-advanced-flyout > strong {
  display: block !important;
  margin: 7px 0 3px !important;
  color: var(--muted, #64717d) !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
}

@media (max-width: 390px) {
  body .type-advanced-panel > label:not(.filter-toggle) {
    grid-template-columns: 68px minmax(0, 1fr) 40px !important;
  }
}

/* Source: release-342.css */
/* Release 342: local fonts plus reusable character and paragraph styles. */

body .type-font-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;
  margin: 4px 0 2px !important;
}

body .type-font-actions button,
body .tool-flyout .flyout-wide-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 5px 8px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

body .type-font-actions button img,
body .tool-flyout .flyout-wide-action img {
  width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
}

body .type-font-actions button:disabled,
body .text-style-editor button:disabled {
  opacity: 0.35 !important;
}

body .text-styles-panel,
body .tool-flyout .type-style-flyout {
  margin: 5px 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .text-styles-panel > summary,
body .tool-flyout .type-style-flyout > summary {
  min-height: 34px !important;
  padding: 8px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

body .text-style-group {
  padding: 6px 0 !important;
}

body .text-style-group + .text-style-group {
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.09)) !important;
}

body .text-style-group > label,
body .tool-flyout .type-style-flyout > label {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  margin: 0 !important;
  font-size: 10px !important;
}

body .text-style-group select {
  width: 100% !important;
  min-width: 0 !important;
  height: 29px !important;
  font-size: 10px !important;
}

body .text-style-editor {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 32px 32px !important;
  gap: 5px !important;
  margin-top: 4px !important;
}

body .text-style-editor input {
  width: 100% !important;
  min-width: 0 !important;
  height: 31px !important;
  padding: 5px 7px !important;
  font-size: 10px !important;
}

body .text-style-editor button {
  display: grid !important;
  width: 32px !important;
  height: 31px !important;
  min-width: 32px !important;
  padding: 0 !important;
  place-items: center !important;
}

body .text-style-editor button img {
  width: 15px !important;
  height: 15px !important;
}

body .tool-flyout .flyout-wide-action {
  width: 100% !important;
  margin: 3px 0 5px !important;
}

@media (max-width: 390px) {
  body .text-style-group > label,
  body .tool-flyout .type-style-flyout > label {
    grid-template-columns: 66px minmax(0, 1fr) !important;
  }
}

/* Source: release-343.css */
/* Release 343: paragraph indents, spacing, columns, gutters, and overflow. */

body .paragraph-layout-panel,
body .tool-flyout .paragraph-layout-flyout {
  margin: 5px 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .paragraph-layout-panel > summary,
body .tool-flyout .paragraph-layout-flyout > summary {
  min-height: 34px !important;
  padding: 8px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

body .paragraph-layout-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px 7px !important;
  padding: 5px 0 7px !important;
}

body .paragraph-layout-grid label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 58px !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 31px !important;
  margin: 0 !important;
  font-size: 10px !important;
}

body .paragraph-layout-grid label span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .paragraph-layout-grid input,
body .paragraph-layout-grid select {
  width: 58px !important;
  min-width: 0 !important;
  height: 29px !important;
  padding: 4px 5px !important;
  font-size: 10px !important;
}

body .tool-flyout .paragraph-layout-flyout > label {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  margin: 0 !important;
  font-size: 10px !important;
}

body .tool-flyout .paragraph-layout-flyout input,
body .tool-flyout .paragraph-layout-flyout select {
  width: 100% !important;
  min-width: 0 !important;
  height: 29px !important;
  font-size: 10px !important;
}

@media (max-width: 390px) {
  body .paragraph-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  body .paragraph-layout-grid label {
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }

  body .paragraph-layout-grid input,
  body .paragraph-layout-grid select {
    width: 72px !important;
  }
}

/* Source: release-344.css */
/* Release 344: linked area-text frames and compact thread navigation. */

body .text-thread-toolbar,
body .tool-flyout .flyout-thread-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 32px 32px minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  background: var(--curve-panel, #f8f9fa) !important;
}

body .text-thread-toolbar button,
body .tool-flyout .flyout-thread-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

body .text-thread-toolbar button:last-child,
body .tool-flyout .flyout-thread-actions button:last-child {
  border-right: 0 !important;
}

body .text-thread-toolbar button:not(:disabled):hover,
body .tool-flyout .flyout-thread-actions button:not(:disabled):hover {
  background: var(--curve-selected, rgba(15, 127, 131, 0.1)) !important;
}

body .text-thread-toolbar button:disabled,
body .tool-flyout .flyout-thread-actions button:disabled {
  opacity: 0.34 !important;
}

body .text-thread-toolbar img,
body .tool-flyout .flyout-thread-actions img {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  object-fit: contain !important;
}

body .text-thread-toolbar .is-next img,
body .tool-flyout .flyout-thread-actions .is-next img {
  transform: rotate(180deg) !important;
}

body .text-thread-status {
  margin: 6px 0 1px !important;
  color: var(--ink-muted, #5e6872) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

body .tool-flyout .flyout-thread-actions {
  grid-template-columns: 1fr 1fr !important;
  margin: 6px 0 2px !important;
}

body .tool-flyout .flyout-thread-actions button:nth-child(2) {
  border-right: 0 !important;
}

body .tool-flyout .flyout-thread-actions button:nth-child(-n + 2) {
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
}

@media (max-width: 390px) {
  body .text-thread-toolbar {
    grid-template-columns: minmax(0, 1fr) 34px 34px minmax(0, 1fr) !important;
  }

  body .text-thread-toolbar button {
    height: 34px !important;
    padding: 0 5px !important;
  }
}

/* Source: release-345.css */
/* Release 345: font metadata and opt-in project font collection. */

body .font-info-panel {
  margin: 5px 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .font-info-panel > summary {
  min-height: 34px !important;
  padding: 8px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
}

body .font-metadata-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  margin: 2px 0 6px !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.1)) !important;
}

body .font-metadata-grid > div {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 7px !important;
  min-height: 27px !important;
  padding: 6px 2px !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.1)) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

body .font-metadata-grid span {
  color: var(--ink-muted, #66717d) !important;
}

body .font-metadata-grid strong {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  color: var(--ink, #17212b) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

body .font-collection-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 6px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 550 !important;
}

body .font-collection-toggle input {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  margin: 0 !important;
  accent-color: var(--curve-accent, #0f7f83) !important;
}

body .font-collection-actions,
body .tool-flyout .flyout-font-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 3px 0 5px !important;
  overflow: hidden !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 5px !important;
}

body .font-collection-actions button,
body .tool-flyout .flyout-font-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-right: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

body .font-collection-actions button:last-child,
body .tool-flyout .flyout-font-actions button:last-child {
  border-right: 0 !important;
}

body .font-collection-actions button:not(:disabled):hover,
body .tool-flyout .flyout-font-actions button:not(:disabled):hover,
body .tool-flyout .flyout-font-actions button.is-active {
  background: var(--curve-selected, rgba(15, 127, 131, 0.1)) !important;
}

body .font-collection-actions button:disabled {
  opacity: 0.34 !important;
}

body .font-collection-actions img,
body .tool-flyout .flyout-font-actions img {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  object-fit: contain !important;
}

body .tool-flyout .flyout-font-actions {
  margin: 4px 0 6px !important;
}

@media (max-width: 390px) {
  body .font-metadata-grid > div {
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }

  body .font-collection-actions button {
    height: 34px !important;
  }
}

/* Source: release-346.css */
/* Release 346: paragraph composition, hyphenation, baseline grid, and keep rules. */

body .paragraph-composition-panel,
body .tool-flyout .paragraph-composition-flyout {
  margin: 2px 0 7px !important;
  padding: 0 !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .paragraph-composition-panel > summary,
body .tool-flyout .paragraph-composition-flyout > summary {
  min-height: 32px !important;
  padding: 8px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

body .paragraph-composition-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 1px 0 5px !important;
}

body .paragraph-composition-grid label,
body .tool-flyout .paragraph-composition-flyout > label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 1px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body .paragraph-composition-grid label + label,
body .tool-flyout .paragraph-composition-flyout > label + label {
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.08)) !important;
}

body .paragraph-composition-grid select,
body .tool-flyout .paragraph-composition-flyout select {
  width: 112px !important;
  min-width: 0 !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 3px 22px 3px 6px !important;
  font-size: 10px !important;
}

body .paragraph-composition-grid .composition-toggle,
body .tool-flyout .paragraph-composition-flyout .flyout-composition-toggle {
  grid-template-columns: minmax(0, 1fr) 18px !important;
}

body .paragraph-composition-grid input[type="checkbox"],
body .tool-flyout .paragraph-composition-flyout input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  margin: 0 !important;
  accent-color: var(--curve-accent, #0f7f83) !important;
}

body .tool-flyout .paragraph-composition-flyout {
  margin-top: 5px !important;
}

@media (min-width: 700px) {
  body .paragraph-composition-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 9px !important;
  }
}

/* Source: release-347.css */
/* Release 347: editable area-text frame geometry and vertical alignment. */

body .text-frame-panel,
body .tool-flyout .text-frame-flyout {
  margin: 2px 0 7px !important;
  padding: 0 !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .text-frame-panel > summary,
body .tool-flyout .text-frame-flyout > summary {
  min-height: 32px !important;
  padding: 8px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

body .text-frame-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 1px 0 5px !important;
}

body .text-frame-grid label,
body .tool-flyout .text-frame-flyout > label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 1px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body .text-frame-grid label + label,
body .tool-flyout .text-frame-flyout > label + label {
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.08)) !important;
}

body .text-frame-grid input[type="number"],
body .text-frame-grid select,
body .tool-flyout .text-frame-flyout input[type="number"],
body .tool-flyout .text-frame-flyout select {
  width: 112px !important;
  min-width: 0 !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 3px 22px 3px 6px !important;
  font-size: 10px !important;
}

body .text-frame-grid .text-frame-toggle,
body .tool-flyout .text-frame-flyout .flyout-frame-toggle {
  grid-template-columns: minmax(0, 1fr) 18px !important;
}

body .text-frame-grid input[type="checkbox"],
body .tool-flyout .text-frame-flyout input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  margin: 0 !important;
  accent-color: var(--curve-accent, #0f7f83) !important;
}

body .text-frame-grid select:disabled,
body .tool-flyout .text-frame-flyout select:disabled {
  opacity: 0.45 !important;
}

body .tool-flyout .text-frame-flyout {
  margin-top: 5px !important;
}

@media (min-width: 700px) {
  body .text-frame-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 9px !important;
  }
}

/* Source: release-348.css */
/* Release 348: compact Type on a Path controls. */

body .type-path-panel,
body .tool-flyout .type-path-flyout {
  margin: 2px 0 7px !important;
  padding: 0 !important;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .type-path-panel > summary,
body .tool-flyout .type-path-flyout > summary {
  min-height: 32px !important;
  padding: 8px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
}

body .type-path-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 1px 0 4px !important;
}

body .type-path-grid label,
body .tool-flyout .type-path-flyout > label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 94px 18px !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 1px 2px !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body .tool-flyout .type-path-flyout > label {
  grid-template-columns: minmax(0, 1fr) 112px !important;
}

body .type-path-grid label + label,
body .tool-flyout .type-path-flyout > label + label {
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.08)) !important;
}

body .type-path-grid input[type="number"],
body .type-path-grid select,
body .tool-flyout .type-path-flyout input[type="number"],
body .tool-flyout .type-path-flyout select {
  width: 94px !important;
  min-width: 0 !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 3px 22px 3px 6px !important;
  color: var(--ink, #17212b) !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
}

body .tool-flyout .type-path-flyout input[type="number"],
body .tool-flyout .type-path-flyout select {
  width: 112px !important;
}

body .type-path-grid output {
  color: var(--muted, #66717c) !important;
  font-size: 9px !important;
  text-align: left !important;
}

body .type-path-actions,
body .tool-flyout .flyout-path-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  margin: 4px 0 5px !important;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  background: var(--panel-soft, rgba(255, 255, 255, 0.45)) !important;
}

body .type-path-actions button,
body .tool-flyout .flyout-path-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 4px 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink, #17212b) !important;
  font-size: 9px !important;
  font-weight: 550 !important;
  letter-spacing: 0 !important;
}

body .type-path-actions button + button,
body .tool-flyout .flyout-path-actions button + button {
  border-left: 1px solid var(--curve-line, rgba(23, 33, 43, 0.12)) !important;
}

body .type-path-actions img,
body .tool-flyout .flyout-path-actions img {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}

body .type-path-actions button:disabled,
body .tool-flyout .flyout-path-actions button:disabled {
  opacity: 0.38 !important;
}

body .type-path-panel #typePathStatus {
  margin: 0 2px 6px !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}

@media (min-width: 700px) {
  body .type-path-grid {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 9px !important;
  }
}

/* Source: release-349.css */
/* Release 349: editable stroke outlines and expanded vector appearances. */

body .drawer-tool[data-icon="outline"]::before {
  background-image: url("assets/lucide/scan-line.svg") !important;
}

body .drawer-tool[data-icon="expand"]::before {
  background-image: url("assets/lucide/combine.svg") !important;
}

body .tool-flyout .vector-outline-action {
  border-color: color-mix(in srgb, var(--accent, #167c80) 32%, var(--curve-line, rgba(23, 33, 43, 0.14))) !important;
}

body .tool-flyout .vector-outline-action:not(:disabled):hover,
body .tool-flyout .vector-outline-action:not(:disabled):focus-visible {
  background: color-mix(in srgb, var(--accent, #167c80) 8%, transparent) !important;
}

body .tool-flyout .flyout-wide-action:disabled {
  opacity: 0.36 !important;
}

body .tool-flyout .flyout-wide-action span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Source: release-350.css */
/* Release 350: local Create Outlines workflow for editable typography. */

body .drawer-tool[data-icon="text-outline"]::before {
  background-image: url("assets/lucide/scan-text.svg") !important;
}

body .tool-flyout .text-outline-action {
  border-color: color-mix(in srgb, var(--accent, #167c80) 32%, var(--curve-line, rgba(23, 33, 43, 0.14))) !important;
}

body .tool-flyout .text-outline-action:not(:disabled):hover,
body .tool-flyout .text-outline-action:not(:disabled):focus-visible {
  background: color-mix(in srgb, var(--accent, #167c80) 8%, transparent) !important;
}

/* Source: release-351.css */
/* Release 351: compact professional stroke controls. */

body .stroke-options-panel {
  margin: 4px 0 0;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14));
}

body .stroke-options-panel > summary {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 2px;
  color: var(--curve-ink, #17212b);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

body .stroke-options-panel > summary::-webkit-details-marker {
  display: none;
}

body .stroke-options-panel > summary::after {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

body .stroke-options-panel[open] > summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

body .stroke-options-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px 8px;
  padding: 2px 0 8px;
}

body .stroke-options-grid label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--curve-muted, #66717d);
  font-size: 10px;
  font-weight: 600;
}

body .stroke-options-grid select,
body .stroke-options-grid input[type="text"],
body .stroke-options-grid input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14));
  border-radius: 5px;
  background: var(--curve-panel, #ffffff);
  color: var(--curve-ink, #17212b);
  font: inherit;
  font-size: 12px;
}

body .stroke-options-grid .stroke-custom-dash {
  grid-column: 1 / -1;
}

body .stroke-options-grid #strokeSwapArrowsButton {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14));
  border-radius: 5px;
  background: transparent;
  color: var(--curve-ink, #17212b);
  font-size: 11px;
  font-weight: 650;
}

body .stroke-options-grid #strokeSwapArrowsButton img {
  width: 15px;
  height: 15px;
}

body .tool-flyout .stroke-options-flyout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px 8px;
  border-top: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14));
  border-radius: 0;
  padding: 0;
}

body .tool-flyout .stroke-options-flyout > summary {
  grid-column: 1 / -1;
  min-height: 34px;
  padding: 0 1px;
  font-size: 12px;
  font-weight: 650;
}

body .tool-flyout .stroke-options-flyout:not([open]) > :not(summary) {
  display: none;
}

body .tool-flyout .stroke-options-flyout label {
  min-width: 0;
}

body .tool-flyout .stroke-options-flyout label span {
  font-size: 10px;
}

body .tool-flyout .stroke-options-flyout input,
body .tool-flyout .stroke-options-flyout select {
  width: 100%;
  min-width: 0;
  height: 29px;
  font-size: 11px;
}

body .tool-flyout .stroke-options-flyout .stroke-swap-action {
  grid-column: 1 / -1;
  min-height: 31px;
  border-radius: 5px;
}

body[data-theme="dark"] .stroke-options-grid select,
body[data-theme="dark"] .stroke-options-grid input[type="text"],
body[data-theme="dark"] .stroke-options-grid input[type="number"] {
  background: var(--curve-panel, #24272c);
}

@media (max-width: 430px) {
  body .stroke-options-grid,
  body .tool-flyout .stroke-options-flyout {
    gap: 6px;
  }
}

/* Source: release-352.css */
/* Release 352: integrated Vector Offset Path controls. */

body .tool-flyout .offset-path-adjustments {
  gap: 7px;
}

body .tool-flyout .offset-path-adjustments > strong {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14));
}

body .tool-flyout .offset-path-adjustments > label:not(.flyout-toggle) {
  display: grid;
  grid-template-columns: minmax(68px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 8px;
}

body .tool-flyout .offset-path-adjustments > label:not(.flyout-toggle) > span {
  overflow: hidden;
  color: var(--curve-muted, #66717d);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .tool-flyout .offset-path-adjustments input[type="number"],
body .tool-flyout .offset-path-adjustments select {
  width: 100%;
  min-width: 0;
  height: 30px;
  border-radius: 5px;
}

body .tool-flyout .offset-path-adjustments .flyout-toggle {
  min-height: 32px;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.1));
}

body .tool-flyout .offset-path-adjustments input:disabled {
  opacity: 0.46;
}

body .tool-flyout .offset-path-adjustments .flyout-mini-status {
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.35;
}

/* Source: release-353.css */
/* Release 353: Pathfinder Divide. */

body #pathfinderDivideButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 7px;
  border: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14));
  border-radius: 5px;
  background: transparent;
  color: var(--curve-ink, #17212b);
  font-size: 11px;
  font-weight: 650;
}

body #pathfinderDivideButton:hover,
body #pathfinderDivideButton:focus-visible {
  border-color: color-mix(in srgb, var(--accent, #167c80) 42%, var(--curve-line, rgba(23, 33, 43, 0.14)));
  background: color-mix(in srgb, var(--accent, #167c80) 8%, transparent);
}

/* Source: release-354.css */
/* Release 354: compact Simplify Path workflow. */

body .drawer-tool[data-icon="simplify"]::before {
  background-image: url("assets/lucide/spline.svg") !important;
}

body .tool-flyout .simplify-path-adjustments {
  gap: 7px;
}

body .tool-flyout .simplify-path-adjustments > strong {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14));
}

body .tool-flyout .simplify-path-adjustments > label:not(.flyout-toggle) {
  display: grid;
  grid-template-columns: minmax(72px, 0.76fr) minmax(0, 1fr) 42px;
  align-items: center;
  gap: 6px;
}

body .tool-flyout .simplify-path-adjustments input[type="range"] {
  width: 100%;
  min-width: 0;
}

body .tool-flyout .simplify-path-adjustments output {
  overflow: hidden;
  color: var(--curve-muted, #66717d);
  font-size: 10px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .tool-flyout .simplify-path-adjustments .flyout-toggle {
  min-height: 31px;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.09));
}

body .tool-flyout .simplify-path-adjustments .flyout-mini-status {
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.35;
}

/* Source: release-355.css */
/* Release 355: compact Join Paths workflow. */

body .drawer-tool[data-icon="join-paths"]::before {
  background-image: url("assets/lucide/link.svg") !important;
}

body .tool-flyout .join-paths-adjustments {
  gap: 7px;
}

body .tool-flyout .join-paths-adjustments > strong {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14));
}

body .tool-flyout .join-paths-adjustments > label:not(.flyout-toggle) {
  display: grid;
  grid-template-columns: minmax(74px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 7px;
}

body .tool-flyout .join-paths-adjustments select {
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

body .tool-flyout .join-paths-adjustments .flyout-toggle {
  min-height: 31px;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.09));
}

body .tool-flyout .join-paths-adjustments .flyout-mini-status {
  margin-top: 1px;
  color: var(--curve-muted, #66717d);
  font-size: 10px;
  line-height: 1.35;
}

/* Source: release-356.css */
/* Release 356: compact Compound Path workflow. */

body .drawer-tool[data-icon="compound-path"]::before {
  background-image: url("assets/lucide/component.svg") !important;
}

body .tool-flyout .compound-path-adjustments {
  gap: 8px;
}

body .tool-flyout .compound-path-adjustments > strong {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--curve-line, rgba(23, 33, 43, 0.14));
}

body .tool-flyout .compound-path-adjustments > label {
  display: grid;
  grid-template-columns: minmax(72px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 7px;
  min-height: 32px;
}

body .tool-flyout .compound-path-adjustments select {
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

body .tool-flyout .compound-path-adjustments .flyout-mini-status {
  margin-top: 1px;
  color: var(--curve-muted, #66717d);
  font-size: 10px;
  line-height: 1.35;
}

/* Source: release-357.css */
/* Release 357: directional Motion Blur for pixels and Smart Objects. */

body .drawer-tool[data-icon="motion-blur"]::before {
  background-image: url("assets/lucide/wind.svg") !important;
}

body #pixelFilterMotionDistanceControl .retouch-range,
body #pixelFilterMotionAngleControl .retouch-range,
body #smartFilterAngleControl {
  min-width: 0;
}

body #smartFilterAngleControl[hidden],
body #pixelFilterMotionDistanceControl[hidden],
body #pixelFilterMotionAngleControl[hidden] {
  display: none !important;
}

body #smartFilterAngleControl output,
body #pixelFilterMotionDistanceValue,
body #pixelFilterMotionAngleValue {
  min-width: 42px;
  color: var(--curve-muted, #66717d);
  font-size: 10px;
  text-align: right;
}

/* Source: release-358.css */
/* Release 358: editable PDF Bates numbering, page numbers, headers, and footers. */

body .drawer-tool[data-icon="page-marks"]::before {
  background-image: url("assets/lucide/hash.svg") !important;
}

body .pdf-page-mark-adjustments label > span {
  min-width: 82px;
}

body .pdf-page-mark-adjustments input[type="text"],
body .pdf-page-mark-adjustments input[type="number"],
body .pdf-page-mark-adjustments select {
  min-width: 0;
}

body .pdf-page-mark-adjustments .flyout-mini-status {
  color: var(--curve-muted, #66717d);
  font-size: 10px;
  line-height: 1.3;
}

/* Source: release-359.css */
/* Release 359: integrated multi-page PDF redaction review. */

body .pdf-redaction-review-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 30px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--curve-line, #d9dde2);
  color: var(--curve-muted, #66717d);
  font-size: 10px;
}

body .pdf-redaction-review-summary strong {
  color: var(--curve-text, #17212b);
  font-size: 16px;
}

body .pdf-redaction-review-list {
  max-height: 196px;
  overflow-y: auto;
  border-bottom: 1px solid var(--curve-line, #d9dde2);
}

body .pdf-redaction-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px 32px;
  min-height: 38px;
  border-bottom: 1px solid color-mix(in srgb, var(--curve-line, #d9dde2) 70%, transparent);
}

body .pdf-redaction-review-row:last-child {
  border-bottom: 0;
}

body .pdf-redaction-review-row.is-selected {
  box-shadow: inset 2px 0 var(--curve-accent, #147d82);
  background: color-mix(in srgb, var(--curve-accent, #147d82) 7%, transparent);
}

body .pdf-redaction-review-row button {
  min-width: 0;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--curve-text, #17212b);
}

body .pdf-redaction-review-row button + button {
  border-left: 1px solid color-mix(in srgb, var(--curve-line, #d9dde2) 70%, transparent);
}

body .pdf-redaction-review-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px !important;
  text-align: left;
}

body .pdf-redaction-review-target strong {
  font-size: 11px;
}

body .pdf-redaction-review-target span {
  overflow: hidden;
  color: var(--curve-muted, #66717d);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .pdf-redaction-review-row img,
body .pdf-redaction-clear img {
  width: 15px;
  height: 15px;
}

body .pdf-redaction-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--curve-danger, #a33b45);
  font-size: 10px;
}

/* Source: release-360.css */
/* Release 360: contextual PDF form authoring and AcroForm export. */

body .pdf-form-field-adjustments label[hidden] {
  display: none !important;
}

body .pdf-form-field-adjustments label > span {
  min-width: 80px;
}

body .pdf-form-field-adjustments input[type="text"],
body .pdf-form-field-adjustments select {
  min-width: 0;
}

body .pdf-form-export {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 36px;
  margin-top: 5px;
  border: 1px solid var(--curve-line, #d9dde2);
  border-radius: 4px;
  background: var(--curve-panel, #f8f9fa);
  color: var(--curve-text, #17212b);
  font-size: 10px;
  font-weight: 600;
}

body .pdf-form-export img {
  width: 16px;
  height: 16px;
}

body .pdf-form-export:disabled {
  opacity: 0.4;
}

/* Source: release-361.css */
/* Release 361: local PDF and image comparison. */

body .pdf-compare-adjustments label[hidden] {
  display: none !important;
}

body .pdf-compare-adjustments label > span {
  min-width: 84px;
}

body .pdf-compare-reference,
body .pdf-compare-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--curve-line, #d9dde2);
  border-radius: 4px;
  background: var(--curve-panel, #f8f9fa);
  color: var(--curve-text, #17212b);
  font-size: 10px;
  font-weight: 600;
  text-align: left;
}

body .pdf-compare-reference span,
body .pdf-compare-clear span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .pdf-compare-reference img,
body .pdf-compare-clear img {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

body .pdf-compare-clear {
  justify-content: center;
  margin-top: 4px;
  color: var(--curve-muted, #5f6975);
}

body .pdf-compare-reference:disabled,
body .pdf-compare-clear:disabled {
  opacity: 0.4;
}

body .pdf-compare-preview {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 6px;
  border-block: 1px solid var(--curve-line, #d9dde2);
  color: var(--curve-text, #17212b);
  font-size: 10px;
  line-height: 1.35;
}

body .pdf-compare-preview img {
  width: 54px;
  height: 42px;
  border: 1px solid var(--curve-line, #d9dde2);
  border-radius: 2px;
  background: #fff;
  object-fit: contain;
}

body .drawer-tool[data-icon="pdf-compare"]::before {
  background-image: url("assets/lucide/scan-search.svg") !important;
}

/* Source: release-362.css */
/* Release 362: integrated PDF preflight and export metadata. */

body .pdf-preflight-adjustments label[hidden] {
  display: none !important;
}

body .pdf-preflight-adjustments label > span {
  min-width: 88px;
}

body .pdf-preflight-adjustments input[type="text"],
body .pdf-preflight-adjustments select {
  min-width: 0;
}

body .pdf-preflight-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--curve-line, #d9dde2);
}

body .pdf-preflight-summary span {
  padding: 6px 3px;
  color: var(--curve-muted, #5f6975);
  font-size: 9px;
  font-weight: 650;
  text-align: center;
}

body .pdf-preflight-summary span + span {
  border-left: 1px solid var(--curve-line, #d9dde2);
}

body .pdf-preflight-summary .is-error {
  color: #b42318;
}

body .pdf-preflight-summary .is-warning {
  color: #9a6700;
}

body .pdf-preflight-summary .is-info {
  color: #1261a0;
}

body .pdf-preflight-results {
  max-height: 184px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body .pdf-preflight-issue {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 7px 4px;
  border: 0;
  border-bottom: 1px solid var(--curve-line, #d9dde2);
  border-radius: 0;
  background: transparent;
  color: var(--curve-text, #17212b);
  text-align: left;
}

body .pdf-preflight-issue:disabled {
  opacity: 1;
}

body .pdf-preflight-issue > i {
  width: 6px;
  height: 6px;
  margin-top: 4px;
  border-radius: 50%;
  background: #1261a0;
}

body .pdf-preflight-issue.is-error > i {
  background: #d92d20;
}

body .pdf-preflight-issue.is-warning > i {
  background: #d69e00;
}

body .pdf-preflight-issue span,
body .pdf-preflight-issue strong,
body .pdf-preflight-issue small {
  display: block;
  min-width: 0;
}

body .pdf-preflight-issue strong {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .pdf-preflight-issue small {
  margin-top: 2px;
  color: var(--curve-muted, #5f6975);
  font-size: 9px;
  line-height: 1.3;
}

body .drawer-tool[data-icon="pdf-preflight"]::before {
  background-image: url("assets/lucide/list-checks.svg") !important;
}

/* Source: release-363.css */
/* Release 363: segmented face bevel for imported mesh editing. */

.preview3d-mesh-topology [hidden] {
  display: none !important;
}

@media (min-width: 621px) {
  .preview3d-mesh-controls {
    grid-template-columns: minmax(118px, 0.7fr) minmax(176px, 0.9fr) minmax(190px, 0.95fr) minmax(250px, 1.45fr) minmax(132px, 0.75fr);
  }

  .preview3d-mesh-topology.is-bevel {
    grid-template-columns: minmax(94px, 1.25fr) minmax(72px, 0.8fr) minmax(72px, 0.8fr) minmax(74px, 0.75fr) 46px;
  }

  .preview3d-mesh-topology.is-bevel label {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .preview3d-mesh-topology.is-bevel label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-bevel) {
    min-height: 205px;
  }

  .preview3d-mesh-topology.is-bevel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview3d-mesh-topology.is-bevel > button {
    grid-column: 1 / -1;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-bevel) ~ .preview3d-status {
    bottom: calc(214px + env(safe-area-inset-bottom));
  }
}

/* Source: release-364.css */
/* Release 364: touch-friendly multi-face mesh regions. */

.preview3d-mesh-modes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#meshFaceAddModeButton:disabled {
  opacity: 0.38;
}

@media (max-width: 620px) {
  .preview3d-mesh-modes button {
    padding-inline: 2px;
    font-size: 8px;
  }
}

/* Source: release-365.css */
/* Release 365: compact topology-aware face-region selection. */

.preview3d-mesh-controls {
  grid-template-columns: minmax(132px, 0.78fr) minmax(172px, 0.94fr) minmax(190px, 1fr) minmax(190px, 1fr) minmax(236px, 1.2fr) minmax(138px, 0.8fr);
}

.preview3d-mesh-selection-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  padding: 7px;
  border-right: 1px solid rgba(23, 33, 43, 0.08);
}

.preview3d-mesh-selection-actions button {
  min-width: 0;
  height: 30px;
  padding: 0 4px;
  overflow: hidden;
  border: 1px solid rgba(23, 33, 43, 0.13);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  color: #37414c;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-mesh-selection-actions button:disabled {
  opacity: 0.42;
}

html[data-theme="dark"] .preview3d-mesh-selection-actions {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .preview3d-mesh-selection-actions button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(17, 20, 25, 0.5);
  color: #eef2f7;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-mesh-selection-actions {
    border-color: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="auto"] .preview3d-mesh-selection-actions button {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(17, 20, 25, 0.5);
    color: #eef2f7;
  }
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-controls:not([hidden])) {
    min-height: 194px;
  }

  .preview3d-mesh-controls {
    grid-template-columns: minmax(118px, 0.85fr) minmax(176px, 1.15fr);
    grid-template-areas:
      "modes selection"
      "delta actions"
      "topology topology"
      "status status";
    min-height: 146px;
  }

  .preview3d-mesh-selection-actions {
    grid-area: selection;
    gap: 3px;
    padding: 5px 4px;
  }

  .preview3d-mesh-selection-actions button {
    height: 28px;
    padding-inline: 2px;
    font-size: 8px;
  }

  .preview3d-editor:has(.preview3d-mesh-controls:not([hidden])) ~ .preview3d-status {
    bottom: calc(204px + env(safe-area-inset-bottom));
  }
}

/* Source: release-372.css */
/* Release 372: four compact local build-scene export formats. */

.preview3d-build-actions {
  gap: 4px;
}

.preview3d-build-actions button {
  padding-inline: 7px;
}

@media (max-width: 620px) {
  .preview3d-build-footer {
    gap: 4px;
  }

  .preview3d-build-summary {
    flex: 1 1 72px;
    font-size: 9px;
  }

  .preview3d-build-actions button {
    gap: 3px;
    padding-inline: 4px;
  }

  .preview3d-build-actions img {
    width: 14px;
    height: 14px;
  }
}

/* Source: release-373.css */
/* Release 373: compact export menu for edited imported 3D models. */

.preview3d-export-panel {
  position: absolute;
  z-index: 9;
  top: calc(66px + env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(292px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid rgba(23, 33, 43, 0.16);
  border-radius: 7px;
  background: rgba(250, 251, 252, 0.98);
  color: #17212b;
  box-shadow: 0 8px 22px rgba(30, 39, 52, 0.13);
  backdrop-filter: blur(18px) saturate(140%);
}

.preview3d-export-panel[hidden] {
  display: none;
}

.preview3d-export-panel > header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  border-bottom: 1px solid rgba(23, 33, 43, 0.12);
}

.preview3d-export-panel > header strong {
  font-size: 12px;
  font-weight: 700;
}

.preview3d-export-panel > header button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.preview3d-export-panel > header img {
  width: 16px;
  height: 16px;
}

.preview3d-export-formats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 7px;
}

.preview3d-export-formats button {
  min-width: 0;
  height: 48px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 0 3px;
  border: 0;
  border-right: 1px solid rgba(23, 33, 43, 0.1);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 700 9px/1 system-ui, sans-serif;
}

.preview3d-export-formats button:last-child {
  border-right: 0;
}

.preview3d-export-formats button:active,
.preview3d-export-formats button:focus-visible {
  background: rgba(20, 115, 230, 0.1);
  outline: 0;
}

.preview3d-export-formats button:disabled {
  opacity: 0.42;
}

.preview3d-export-formats img {
  width: 17px;
  height: 17px;
}

html[data-theme="dark"] .preview3d-export-panel {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(27, 30, 35, 0.98);
  color: #f3f5f7;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .preview3d-export-panel > header,
html[data-theme="dark"] .preview3d-export-formats button {
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .preview3d-export-panel img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-export-panel {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(27, 30, 35, 0.98);
    color: #f3f5f7;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  }

  html[data-theme="auto"] .preview3d-export-panel > header,
  html[data-theme="auto"] .preview3d-export-formats button {
    border-color: rgba(255, 255, 255, 0.12);
  }

  html[data-theme="auto"] .preview3d-export-panel img {
    filter: invert(1);
  }
}

@media (max-width: 620px) {
  .preview3d-export-panel {
    top: calc(58px + env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: min(276px, calc(100vw - 16px));
  }
}

/* Source: release-374.css */
/* Release 374: PLY import/export and five compact format actions. */

.preview3d-export-formats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.preview3d-build-actions button {
  padding-inline: 6px;
}

@media (max-width: 620px) {
  .preview3d-build-summary {
    flex-basis: 50px;
  }

  .preview3d-build-actions {
    gap: 3px;
  }

  .preview3d-build-actions button {
    min-width: 0;
    gap: 2px;
    padding-inline: 3px;
    font-size: 9px;
  }

  body > .app-shell > .bottom-workflows-dock {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body > .app-shell > .bottom-workflows-dock button,
  body > .app-shell > .bottom-workflows-dock button[data-workflow] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding-inline: 2px !important;
  }
}

/* Source: release-375.css */
/* Release 375: USDZ round-trip with six compact 3D export formats. */

.preview3d-export-formats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 620px) {
  .preview3d-build-actions {
    gap: 2px;
  }

  .preview3d-build-actions button {
    padding-inline: 2px;
  }
}

@media (max-width: 380px) {
  .preview3d-build-summary {
    flex: 0 0 18px;
  }

  .preview3d-build-summary span {
    display: none;
  }
}

/* Source: release-376.css */
/* Release 376: contextual additive edge selection without expanding the mesh toolbar. */

#meshAddModeButton.is-active {
  font-weight: 600;
}

/* Source: release-377.css */
/* Release 377: Face and Edge modes share one compact relation-control row. */

.preview3d-mesh-selection-actions button {
  min-width: 0;
}

/* Source: release-378.css */
/* Release 378: adjustable Loop Cut stays inside the existing compact topology row. */

.preview3d-mesh-topology select {
  text-overflow: ellipsis;
}

/* Source: release-379.css */
/* Release 379: continuous boundary Chamfer reuses the compact Edge controls. */

/* Source: release-380.css */
/* Release 380: connected manifold Chamfer uses the existing compact Edge inspector. */

/* Source: release-381.css */
/* Release 381: compact nondestructive mesh modifier checkpoints. */

.preview3d-mesh-controls {
  width: min(100%, 1180px);
}

.preview3d-modifier-stack {
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
  border-right: 1px solid rgba(23, 33, 43, 0.08);
  background: rgba(255, 255, 255, 0.16);
}

.preview3d-modifier-stack > header {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid transparent;
}

.preview3d-modifier-stack.is-expanded > header {
  border-bottom-color: rgba(23, 33, 43, 0.09);
}

.preview3d-modifier-disclosure,
.preview3d-modifier-actions button,
.preview3d-modifier-stack li > button {
  min-width: 0;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #37414c;
}

.preview3d-modifier-disclosure {
  grid-template-columns: 17px minmax(0, 1fr) 18px 13px;
  justify-items: start;
  gap: 5px;
  padding: 0 5px 0 8px;
  font: 650 10px/1 system-ui, sans-serif;
}

.preview3d-modifier-disclosure > img:first-child,
.preview3d-modifier-actions img,
.preview3d-modifier-stack li > button img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  opacity: 0.78;
}

.preview3d-modifier-disclosure .preview3d-modifier-chevron {
  width: 12px;
  height: 12px;
  justify-self: center;
  opacity: 0.55;
  transition: transform 150ms ease;
}

.preview3d-modifier-stack.is-expanded .preview3d-modifier-chevron {
  transform: rotate(-90deg);
}

.preview3d-modifier-stack .preview3d-modifier-disclosure output {
  width: 18px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(23, 33, 43, 0.08);
  color: #58616b;
  font: 700 8px/1 system-ui, sans-serif;
}

.preview3d-modifier-actions {
  display: grid;
  grid-template-columns: repeat(2, 30px);
  align-items: center;
}

.preview3d-modifier-actions button {
  width: 30px;
  height: 30px;
}

.preview3d-modifier-actions button:disabled,
.preview3d-modifier-stack li > button:disabled {
  opacity: 0.3;
}

.preview3d-modifier-stack ul {
  max-height: 108px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.preview3d-modifier-stack ul[hidden] {
  display: none;
}

.preview3d-modifier-stack li {
  min-width: 0;
  min-height: 35px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  border-bottom: 1px solid rgba(23, 33, 43, 0.075);
}

.preview3d-modifier-stack li:last-child {
  border-bottom: 0;
}

.preview3d-modifier-stack li.is-selected {
  background: rgba(20, 115, 230, 0.09);
  box-shadow: inset 2px 0 0 #1675dc;
}

.preview3d-modifier-stack li.is-disabled {
  opacity: 0.52;
}

.preview3d-modifier-stack .preview3d-modifier-select {
  height: 35px;
  min-width: 0;
  display: grid;
  place-items: initial;
  align-content: center;
  gap: 1px;
  padding: 0 4px;
  overflow: hidden;
  text-align: left;
}

.preview3d-modifier-select strong,
.preview3d-modifier-select small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-modifier-select strong {
  font: 650 10px/12px system-ui, sans-serif;
}

.preview3d-modifier-select small {
  color: #717984;
  font: 500 8px/10px system-ui, sans-serif;
}

.preview3d-modifier-stack .preview3d-modifier-empty {
  min-height: 40px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  color: #737c86;
  font: 500 9px/1 system-ui, sans-serif;
}

html[data-theme="dark"] .preview3d-modifier-stack {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(17, 20, 25, 0.18);
}

html[data-theme="dark"] .preview3d-modifier-stack.is-expanded > header,
html[data-theme="dark"] .preview3d-modifier-stack li {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .preview3d-modifier-disclosure,
html[data-theme="dark"] .preview3d-modifier-actions button,
html[data-theme="dark"] .preview3d-modifier-stack li > button {
  color: #eef2f7;
}

html[data-theme="dark"] .preview3d-modifier-stack img {
  filter: invert(1);
}

html[data-theme="dark"] .preview3d-modifier-stack .preview3d-modifier-disclosure output {
  background: rgba(255, 255, 255, 0.11);
  color: #dce2e9;
}

html[data-theme="dark"] .preview3d-modifier-stack li.is-selected {
  background: rgba(73, 151, 245, 0.14);
  box-shadow: inset 2px 0 0 #67a8f5;
}

html[data-theme="dark"] .preview3d-modifier-select small {
  color: #aeb7c2;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-modifier-stack {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(17, 20, 25, 0.18);
  }

  html[data-theme="auto"] .preview3d-modifier-stack.is-expanded > header,
  html[data-theme="auto"] .preview3d-modifier-stack li {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] .preview3d-modifier-disclosure,
  html[data-theme="auto"] .preview3d-modifier-actions button,
  html[data-theme="auto"] .preview3d-modifier-stack li > button {
    color: #eef2f7;
  }

  html[data-theme="auto"] .preview3d-modifier-stack img {
    filter: invert(1);
  }

  html[data-theme="auto"] .preview3d-modifier-stack .preview3d-modifier-disclosure output {
    background: rgba(255, 255, 255, 0.11);
    color: #dce2e9;
  }

  html[data-theme="auto"] .preview3d-modifier-stack li.is-selected {
    background: rgba(73, 151, 245, 0.14);
    box-shadow: inset 2px 0 0 #67a8f5;
  }

  html[data-theme="auto"] .preview3d-modifier-select small {
    color: #aeb7c2;
  }
}

@media (min-width: 621px) {
  .preview3d-mesh-controls {
    grid-template-columns: minmax(132px, 0.78fr) minmax(172px, 0.94fr) minmax(190px, 1fr) minmax(190px, 1fr) minmax(236px, 1.2fr) minmax(188px, 0.95fr);
    grid-template-areas:
      "modes selection delta actions topology modifiers"
      "status status status status status modifiers";
  }

  .preview3d-mesh-modes { grid-area: modes; }
  .preview3d-mesh-selection-actions { grid-area: selection; }
  .preview3d-mesh-delta { grid-area: delta; }
  .preview3d-mesh-actions { grid-area: actions; }
  .preview3d-mesh-topology { grid-area: topology; }
  .preview3d-modifier-stack { grid-area: modifiers; }
  #meshSelectionStatus {
    grid-area: status;
    min-height: 24px;
    padding-block: 4px;
    border-top: 1px solid rgba(23, 33, 43, 0.07);
  }
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-controls:not([hidden])) {
    min-height: 228px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded) {
    min-height: 336px;
  }

  .preview3d-mesh-controls {
    grid-template-columns: minmax(118px, 0.85fr) minmax(176px, 1.15fr);
    grid-template-areas:
      "modes selection"
      "delta actions"
      "topology topology"
      "modifiers modifiers"
      "status status";
    min-height: 180px;
  }

  .preview3d-modifier-stack {
    grid-area: modifiers;
    border-top: 1px solid rgba(23, 33, 43, 0.07);
    border-right: 0;
  }

  #meshSelectionStatus {
    grid-area: status;
    min-height: 24px;
    padding: 4px 8px;
  }

  .preview3d-editor:has(.preview3d-mesh-controls:not([hidden])) ~ .preview3d-status {
    bottom: calc(238px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded) ~ .preview3d-status {
    bottom: calc(346px + env(safe-area-inset-bottom));
  }
}

/* Source: release-382.css */
/* Release 382: guarded modifier reordering with compact inline commands. */

.preview3d-modifier-stack li.has-actions {
  min-height: 68px;
  grid-template-rows: 35px 33px;
}

.preview3d-modifier-row-actions {
  min-width: 0;
  height: 33px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(23, 33, 43, 0.075);
  background: rgba(23, 33, 43, 0.025);
}

.preview3d-modifier-row-actions button {
  min-width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 3px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid rgba(23, 33, 43, 0.07);
  border-radius: 0;
  background: transparent;
  color: #4e5863;
  font: 600 8px/1 system-ui, sans-serif;
  white-space: nowrap;
}

.preview3d-modifier-row-actions button:last-child {
  border-right: 0;
}

.preview3d-modifier-row-actions button:disabled {
  opacity: 0.32;
}

.preview3d-modifier-row-actions img {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  object-fit: contain;
  opacity: 0.74;
}

.preview3d-modifier-row-actions img.is-up {
  transform: rotate(90deg);
}

.preview3d-modifier-row-actions img.is-down {
  transform: rotate(-90deg);
}

.preview3d-modifier-row-actions span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="dark"] .preview3d-modifier-row-actions {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.025);
}

html[data-theme="dark"] .preview3d-modifier-row-actions button {
  border-color: rgba(255, 255, 255, 0.08);
  color: #dce2e9;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-modifier-row-actions {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.025);
  }

  html[data-theme="auto"] .preview3d-modifier-row-actions button {
    border-color: rgba(255, 255, 255, 0.08);
    color: #dce2e9;
  }
}

@media (max-width: 620px) {
  .preview3d-modifier-row-actions button {
    gap: 5px;
    font-size: 9px;
  }
}

/* Source: release-383.css */
/* Release 383 persists topology-stable mesh targets without adding visual chrome. */

/* Source: release-384.css */
/* Release 384 enables guarded topology modifier ordering in the existing compact stack. */

/* Source: release-385.css */
/* Release 385: compact whole-mesh Mirror and Solidify controls. */

.preview3d-mesh-topology.is-mirror,
.preview3d-mesh-topology.is-solidify {
  grid-template-columns: minmax(88px, 1fr) minmax(78px, 0.9fr) 48px;
  grid-template-rows: repeat(2, 30px);
  grid-template-areas:
    "operation amount apply"
    "secondary tertiary final";
}

.preview3d-mesh-topology.is-mirror > label:first-child,
.preview3d-mesh-topology.is-solidify > label:first-child {
  grid-area: operation;
}

.preview3d-mesh-topology.is-mirror > label:nth-child(2),
.preview3d-mesh-topology.is-solidify > label:nth-child(2) {
  grid-area: amount;
}

.preview3d-mesh-topology.is-mirror > button,
.preview3d-mesh-topology.is-solidify > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-mirror label:has(#meshTopologyAxis),
.preview3d-mesh-topology.is-solidify label:has(#meshTopologyOffset) {
  grid-area: secondary;
}

.preview3d-mesh-topology.is-mirror label:has(#meshTopologyWeld),
.preview3d-mesh-topology.is-solidify label:has(#meshTopologySideMaterial) {
  grid-area: tertiary;
}

.preview3d-mesh-topology.is-solidify label:has(#meshTopologyRim) {
  grid-area: final;
}

.preview3d-mesh-check {
  grid-template-columns: auto 18px !important;
  justify-content: center;
}

.preview3d-mesh-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  justify-self: center;
  padding: 0;
  accent-color: #1473e6;
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-mirror),
  .preview3d-editor:has(.preview3d-mesh-topology.is-solidify) {
    min-height: 264px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-mirror) ~ .preview3d-status,
  .preview3d-editor:has(.preview3d-mesh-topology.is-solidify) ~ .preview3d-status {
    bottom: calc(274px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-mirror),
  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-solidify) {
    min-height: 372px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-mirror) ~ .preview3d-status,
  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-solidify) ~ .preview3d-status {
    bottom: calc(382px + env(safe-area-inset-bottom));
  }
}

/* Source: release-386.css */
/* Release 386: compact Array and Subdivision modifier controls. */

.preview3d-mesh-topology.is-array,
.preview3d-mesh-topology.is-subdivision {
  grid-template-columns: minmax(88px, 1fr) minmax(78px, 0.9fr) 48px;
  grid-template-rows: repeat(2, 30px);
  grid-template-areas:
    "operation amount apply"
    "secondary tertiary final";
}

.preview3d-mesh-topology.is-array > label:first-child,
.preview3d-mesh-topology.is-subdivision > label:first-child {
  grid-area: operation;
  grid-template-columns: minmax(0, 1fr);
}

.preview3d-mesh-topology.is-array > label:first-child > span,
.preview3d-mesh-topology.is-subdivision > label:first-child > span {
  display: none;
}

.preview3d-mesh-topology.is-array > label[data-mesh-amount-control] {
  grid-area: amount;
}

.preview3d-mesh-topology.is-array > button,
.preview3d-mesh-topology.is-subdivision > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-array label:has(#meshTopologyArrayX),
.preview3d-mesh-topology.is-subdivision label:has(#meshTopologySmooth) {
  grid-area: secondary;
}

.preview3d-mesh-topology.is-array label:has(#meshTopologyArrayY),
.preview3d-mesh-topology.is-subdivision label:has(#meshTopologyKeepBoundary) {
  grid-area: tertiary;
}

.preview3d-mesh-topology.is-array label:has(#meshTopologyArrayZ) {
  grid-area: final;
}

.preview3d-mesh-topology.is-subdivision label:has(#meshTopologySubdivisionLevels) {
  grid-area: amount;
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-array),
  .preview3d-editor:has(.preview3d-mesh-topology.is-subdivision) {
    min-height: 264px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-array) ~ .preview3d-status,
  .preview3d-editor:has(.preview3d-mesh-topology.is-subdivision) ~ .preview3d-status {
    bottom: calc(274px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-array),
  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-subdivision) {
    min-height: 372px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-array) ~ .preview3d-status,
  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-subdivision) ~ .preview3d-status {
    bottom: calc(382px + env(safe-area-inset-bottom));
  }
}

/* Source: release-387.css */
/* Release 387: compact Bend and Twist deformation controls. */

.preview3d-mesh-topology.is-deform {
  grid-template-columns: minmax(88px, 1fr) minmax(78px, 0.9fr) 48px;
  grid-template-rows: repeat(2, 30px);
  grid-template-areas:
    "operation amount apply"
    "axis origin range";
}

.preview3d-mesh-topology.is-deform > label:first-child {
  grid-area: operation;
  grid-template-columns: minmax(0, 1fr);
}

.preview3d-mesh-topology.is-deform > label:first-child > span {
  display: none;
}

.preview3d-mesh-topology.is-deform > label[data-mesh-amount-control] {
  grid-area: amount;
}

.preview3d-mesh-topology.is-deform > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-deform label:has(#meshTopologyAxis) {
  grid-area: axis;
}

.preview3d-mesh-topology.is-deform label:has(#meshTopologyDeformOrigin) {
  grid-area: origin;
}

.preview3d-mesh-topology.is-deform label:has(#meshTopologyDeformRange) {
  grid-area: range;
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-deform) {
    min-height: 264px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-deform) ~ .preview3d-status {
    bottom: calc(274px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-deform) {
    min-height: 372px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-deform) ~ .preview3d-status {
    bottom: calc(382px + env(safe-area-inset-bottom));
  }
}

/* Source: release-388.css */
/* Release 388: compact Taper and Shear deformation controls. */

.preview3d-mesh-topology.is-taper,
.preview3d-mesh-topology.is-shear {
  grid-template-columns: minmax(76px, 1fr) minmax(76px, 1fr) 48px;
  grid-template-rows: repeat(3, 30px);
  grid-template-areas:
    "operation amount apply"
    "axis secondary secondary"
    "origin range range";
}

.preview3d-mesh-topology.is-taper > label:first-child,
.preview3d-mesh-topology.is-shear > label:first-child {
  grid-area: operation;
  grid-template-columns: minmax(0, 1fr);
}

.preview3d-mesh-topology.is-taper > label:first-child > span,
.preview3d-mesh-topology.is-shear > label:first-child > span {
  display: none;
}

.preview3d-mesh-topology.is-taper > label[data-mesh-amount-control],
.preview3d-mesh-topology.is-shear > label[data-mesh-amount-control] {
  grid-area: amount;
}

.preview3d-mesh-topology.is-taper > button,
.preview3d-mesh-topology.is-shear > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-taper label:has(#meshTopologyAxis),
.preview3d-mesh-topology.is-shear label:has(#meshTopologyAxis) {
  grid-area: axis;
}

.preview3d-mesh-topology.is-taper label:has(#meshTopologyTaperStart),
.preview3d-mesh-topology.is-shear label:has(#meshTopologyShearAxis) {
  grid-area: secondary;
}

.preview3d-mesh-topology.is-taper label:has(#meshTopologyDeformOrigin),
.preview3d-mesh-topology.is-shear label:has(#meshTopologyDeformOrigin) {
  grid-area: origin;
}

.preview3d-mesh-topology.is-taper label:has(#meshTopologyDeformRange),
.preview3d-mesh-topology.is-shear label:has(#meshTopologyDeformRange) {
  grid-area: range;
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-taper),
  .preview3d-editor:has(.preview3d-mesh-topology.is-shear) {
    min-height: 294px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-taper) ~ .preview3d-status,
  .preview3d-editor:has(.preview3d-mesh-topology.is-shear) ~ .preview3d-status {
    bottom: calc(304px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-taper),
  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-shear) {
    min-height: 402px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-taper) ~ .preview3d-status,
  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-shear) ~ .preview3d-status {
    bottom: calc(412px + env(safe-area-inset-bottom));
  }
}

/* Source: release-389.css */
/* Release 389: compact three-slice Lattice deformation controls. */

.preview3d-mesh-topology.is-lattice {
  grid-template-columns: minmax(76px, 1fr) minmax(76px, 1fr) 48px;
  grid-template-rows: repeat(4, 30px);
  grid-template-areas:
    "operation operation apply"
    "axis slice slice"
    "u v v"
    "origin range range";
}

.preview3d-mesh-topology.is-lattice > label:first-child {
  grid-area: operation;
  grid-template-columns: minmax(0, 1fr);
}

.preview3d-mesh-topology.is-lattice > label:first-child > span {
  display: none;
}

.preview3d-mesh-topology.is-lattice > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-lattice label:has(#meshTopologyAxis) {
  grid-area: axis;
}

.preview3d-mesh-topology.is-lattice label:has(#meshTopologyLatticeSlice) {
  grid-area: slice;
}

.preview3d-mesh-topology.is-lattice label:has(#meshTopologyLatticeU) {
  grid-area: u;
}

.preview3d-mesh-topology.is-lattice label:has(#meshTopologyLatticeV) {
  grid-area: v;
}

.preview3d-mesh-topology.is-lattice label:has(#meshTopologyDeformOrigin) {
  grid-area: origin;
}

.preview3d-mesh-topology.is-lattice label:has(#meshTopologyDeformRange) {
  grid-area: range;
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-lattice) {
    min-height: 324px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-lattice) ~ .preview3d-status {
    bottom: calc(334px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-lattice) {
    min-height: 432px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-lattice) ~ .preview3d-status {
    bottom: calc(442px + env(safe-area-inset-bottom));
  }
}

/* Source: release-390.css */
/* Release 390: compact procedural Displace controls. */

.preview3d-mesh-topology.is-displace {
  grid-template-columns: minmax(76px, 1fr) minmax(76px, 1fr) 48px;
  grid-template-rows: repeat(3, 30px);
  grid-template-areas:
    "operation amount apply"
    "axis pattern pattern"
    "scale detail detail";
}

.preview3d-mesh-topology.is-displace > label:first-child {
  grid-area: operation;
  grid-template-columns: minmax(0, 1fr);
}

.preview3d-mesh-topology.is-displace > label:first-child > span {
  display: none;
}

.preview3d-mesh-topology.is-displace > label[data-mesh-amount-control] {
  grid-area: amount;
}

.preview3d-mesh-topology.is-displace > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-displace label:has(#meshTopologyAxis) {
  grid-area: axis;
}

.preview3d-mesh-topology.is-displace label:has(#meshTopologyDisplacePattern) {
  grid-area: pattern;
}

.preview3d-mesh-topology.is-displace label:has(#meshTopologyDisplaceScale) {
  grid-area: scale;
}

.preview3d-mesh-topology.is-displace label:has(#meshTopologyDisplaceDetail) {
  grid-area: detail;
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-displace) {
    min-height: 294px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-displace) ~ .preview3d-status {
    bottom: calc(304px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-displace) {
    min-height: 402px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-displace) ~ .preview3d-status {
    bottom: calc(412px + env(safe-area-inset-bottom));
  }
}

/* Source: release-391.css */
/* Release 391: compact Spherize and Shrink/Fatten controls. */

.preview3d-mesh-topology.is-spherize {
  grid-template-columns: minmax(76px, 1fr) minmax(76px, 1fr) 48px;
  grid-template-rows: repeat(2, 30px);
  grid-template-areas:
    "operation amount apply"
    "center radius radius";
}

.preview3d-mesh-topology.is-shrink-fatten {
  grid-template-columns: minmax(100px, 1.2fr) minmax(76px, 0.9fr) 48px;
  grid-template-rows: 30px;
  grid-template-areas: "operation amount apply";
}

.preview3d-mesh-topology.is-spherize > label:first-child,
.preview3d-mesh-topology.is-shrink-fatten > label:first-child {
  grid-area: operation;
  grid-template-columns: minmax(0, 1fr);
}

.preview3d-mesh-topology.is-spherize > label:first-child > span,
.preview3d-mesh-topology.is-shrink-fatten > label:first-child > span {
  display: none;
}

.preview3d-mesh-topology.is-spherize > label[data-mesh-amount-control],
.preview3d-mesh-topology.is-shrink-fatten > label[data-mesh-amount-control] {
  grid-area: amount;
}

.preview3d-mesh-topology.is-spherize > button,
.preview3d-mesh-topology.is-shrink-fatten > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-spherize label:has(#meshTopologyRadialCenter) {
  grid-area: center;
}

.preview3d-mesh-topology.is-spherize label:has(#meshTopologyRadialRadius) {
  grid-area: radius;
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-spherize) {
    min-height: 264px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-spherize) ~ .preview3d-status {
    bottom: calc(274px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-shrink-fatten) {
    min-height: 234px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-shrink-fatten) ~ .preview3d-status {
    bottom: calc(244px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-spherize) {
    min-height: 372px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-spherize) ~ .preview3d-status {
    bottom: calc(382px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-shrink-fatten) {
    min-height: 342px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-shrink-fatten) ~ .preview3d-status {
    bottom: calc(352px + env(safe-area-inset-bottom));
  }
}

/* Source: release-392.css */
/* Release 392: compact guarded Decimate controls. */

.preview3d-mesh-topology.is-decimate {
  grid-template-columns: minmax(88px, 1fr) minmax(76px, 0.9fr) 48px;
  grid-template-rows: repeat(2, 30px);
  grid-template-areas:
    "operation amount apply"
    "mode boundary boundary";
}

.preview3d-mesh-topology.is-decimate > label:first-child {
  grid-area: operation;
  grid-template-columns: minmax(0, 1fr);
}

.preview3d-mesh-topology.is-decimate > label:first-child > span {
  display: none;
}

.preview3d-mesh-topology.is-decimate > label[data-mesh-amount-control] {
  grid-area: amount;
}

.preview3d-mesh-topology.is-decimate > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-decimate label:has(#meshTopologyDecimateMode) {
  grid-area: mode;
}

.preview3d-mesh-topology.is-decimate label:has(#meshTopologyDecimateBoundary) {
  grid-area: boundary;
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-decimate) {
    min-height: 264px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-decimate) ~ .preview3d-status {
    bottom: calc(274px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-decimate) {
    min-height: 372px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-decimate) ~ .preview3d-status {
    bottom: calc(382px + env(safe-area-inset-bottom));
  }
}

/* Source: release-393.css */
/* Release 393: compact guarded Voxel Remesh controls. */

.preview3d-mesh-topology.is-remesh {
  grid-template-columns: minmax(96px, 1.1fr) minmax(92px, 1fr) 48px;
  grid-template-rows: repeat(2, 30px);
  grid-template-areas:
    "operation resolution apply"
    "smooth preserve preserve";
}

.preview3d-mesh-topology.is-remesh > label:first-child {
  grid-area: operation;
  grid-template-columns: minmax(0, 1fr);
}

.preview3d-mesh-topology.is-remesh > label:first-child > span {
  display: none;
}

.preview3d-mesh-topology.is-remesh > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-remesh label:has(#meshTopologyRemeshResolution) {
  grid-area: resolution;
}

.preview3d-mesh-topology.is-remesh label:has(#meshTopologyRemeshSmooth) {
  grid-area: smooth;
}

.preview3d-mesh-topology.is-remesh label:has(#meshTopologyRemeshPreserveSize) {
  grid-area: preserve;
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-remesh) {
    min-height: 264px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-remesh) ~ .preview3d-status {
    bottom: calc(274px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-remesh) {
    min-height: 372px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-remesh) ~ .preview3d-status {
    bottom: calc(382px + env(safe-area-inset-bottom));
  }
}

/* Source: release-394.css */
/* Release 394: compact guarded Mesh Repair controls. */

.preview3d-mesh-topology.is-repair {
  grid-template-columns: minmax(96px, 1.1fr) minmax(92px, 1fr) 48px;
  grid-template-rows: repeat(2, 30px);
  grid-template-areas:
    "operation action apply"
    "match match match";
}

.preview3d-mesh-topology.is-repair > label:first-child {
  grid-area: operation;
  grid-template-columns: minmax(0, 1fr);
}

.preview3d-mesh-topology.is-repair > label:first-child > span {
  display: none;
}

.preview3d-mesh-topology.is-repair > button {
  grid-area: apply;
}

.preview3d-mesh-topology.is-repair label:has(#meshTopologyRepairMode) {
  grid-area: action;
}

.preview3d-mesh-topology.is-repair label:has(#meshTopologyRepairTolerance) {
  grid-area: match;
  grid-template-columns: minmax(42px, auto) minmax(0, 1fr);
}

@media (max-width: 620px) {
  .preview3d-editor:has(.preview3d-mesh-topology.is-repair) {
    min-height: 264px;
  }

  .preview3d-editor:has(.preview3d-mesh-topology.is-repair) ~ .preview3d-status {
    bottom: calc(274px + env(safe-area-inset-bottom));
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-repair) {
    min-height: 372px;
  }

  .preview3d-editor:has(.preview3d-modifier-stack.is-expanded):has(.preview3d-mesh-topology.is-repair) ~ .preview3d-status {
    bottom: calc(382px + env(safe-area-inset-bottom));
  }
}

/* Source: release-395.css */
/* Release 395: integrated local 3D print preflight. */

#threeDPrintPanel > .quad-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#threeDPrintPanel > .quad-grid > label,
#threeDPrintPanel > .print-bed-grid > label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#threeDPrintPanel > .quad-grid input,
#threeDPrintPanel > .quad-grid select,
#threeDPrintPanel > .print-bed-grid input {
  width: 100%;
  min-width: 0;
}

#threeDPrintPanel > .print-bed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

body .layers #threeDPrintPanel .print-preflight-button {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 10px 0 6px !important;
  border-radius: 7px !important;
  font-weight: 650 !important;
}

#threeDPrintPanel .print-preflight-button img {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  opacity: 0.84;
}

.print-preflight-report[hidden] {
  display: none !important;
}

.print-preflight-report {
  margin-top: 11px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14));
  border-bottom: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14));
  border-radius: 0;
  background: transparent;
  color: var(--ios-text, #22262b);
}

.print-preflight-report > header {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.print-preflight-report > header strong {
  min-width: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.print-preflight-report[data-status="ready"] > header strong {
  color: #35705a;
}

.print-preflight-report[data-status="review"] > header strong {
  color: #886518;
}

.print-preflight-report[data-status="blocked"] > header strong {
  color: #a24a43;
}

.print-preflight-report > header span {
  flex: 0 0 auto;
  color: var(--ios-muted, #6f7680);
  font-size: 10px;
  line-height: 14px;
}

.print-preflight-report dl {
  display: grid;
  grid-template-columns: minmax(68px, 0.45fr) minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.1));
}

.print-preflight-report dt,
.print-preflight-report dd {
  min-width: 0;
  margin: 0;
  padding: 7px 2px;
  border-bottom: 1px solid var(--ios-line, rgba(23, 33, 43, 0.08));
  font-size: 11px;
  line-height: 15px;
}

.print-preflight-report dt {
  color: var(--ios-muted, #6f7680);
}

.print-preflight-report dd {
  overflow-wrap: anywhere;
  color: var(--ios-text, #22262b);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.print-preflight-report ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.print-preflight-report li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 9px 2px 9px 11px;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.1));
}

.print-preflight-report li::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 2px;
  width: 2px;
  border-radius: 1px;
  background: #6b7782;
  content: "";
}

.print-preflight-report li.is-error::before {
  background: #a24a43;
}

.print-preflight-report li.is-warning::before {
  background: #a47a24;
}

.print-preflight-report li.is-info::before {
  background: #35705a;
}

.print-preflight-report li strong {
  color: var(--ios-text, #22262b);
  font-size: 11px;
  line-height: 15px;
  font-weight: 650;
}

.print-preflight-report li span {
  color: var(--ios-muted, #6f7680);
  font-size: 10px;
  line-height: 14px;
}

@media (max-width: 620px) {
  #threeDPrintPanel > .quad-grid,
  #threeDPrintPanel > .print-bed-grid {
    gap: 6px;
  }

  #threeDPrintPanel > .print-bed-grid {
    grid-template-columns: repeat(3, minmax(56px, 1fr));
  }

  .print-preflight-report dl {
    grid-template-columns: 72px minmax(0, 1fr);
  }
}

/* Source: release-396.css */
/* Release 396: compact local printer and material profiles. */

#threeDPrintPanel .print-profile-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  align-items: end;
  gap: 6px;
  margin-bottom: 9px;
}

#threeDPrintPanel .print-profile-bar > label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#threeDPrintPanel .print-profile-bar select {
  width: 100%;
  min-width: 0;
}

body .layers #threeDPrintPanel .print-profile-bar > button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 7px !important;
  background: transparent !important;
}

#threeDPrintPanel .print-profile-bar button img {
  width: 16px;
  height: 16px;
  opacity: 0.82;
}

#threeDPrintPanel .print-profile-bar button:disabled {
  opacity: 0.34;
}

#threeDPrintPanel label:has(#printMaterialDensity),
#threeDPrintPanel label:has(#printMinimumWall) {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  #threeDPrintPanel .print-profile-bar {
    grid-template-columns: minmax(0, 1fr) 32px 32px;
  }

  body .layers #threeDPrintPanel .print-profile-bar > button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* Source: release-397.css */
/* Release 397: local print-orientation assistant. */

#threeDPrintPanel .print-orientation-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 34px);
  align-items: end;
  gap: 6px;
  margin: 9px 0;
}

#threeDPrintPanel .print-orientation-bar > label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#threeDPrintPanel .print-orientation-bar select {
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

body .layers #threeDPrintPanel .print-orientation-bar > button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 7px !important;
  background: transparent !important;
}

#threeDPrintPanel .print-orientation-bar button img {
  width: 16px;
  height: 16px;
  opacity: 0.82;
}

#threeDPrintPanel .print-orientation-bar button:disabled {
  opacity: 0.34;
}

@media (max-width: 620px) {
  #threeDPrintPanel .print-orientation-bar {
    grid-template-columns: minmax(0, 1fr) repeat(3, 30px);
    gap: 5px;
  }

  body .layers #threeDPrintPanel .print-orientation-bar > button {
    width: 30px !important;
    min-width: 30px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* Source: release-398.css */
/* Release 398: local overhang and wall-thickness inspection overlays. */

#threeDPrintPanel .print-inspection-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: end;
  gap: 6px;
  margin: 9px 0;
}

#threeDPrintPanel .print-inspection-bar > label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#threeDPrintPanel .print-inspection-bar select {
  width: 100%;
  min-width: 0;
}

body .layers #threeDPrintPanel .print-inspection-bar > button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 7px !important;
  background: transparent !important;
}

#threeDPrintPanel .print-inspection-bar button img {
  width: 16px;
  height: 16px;
  opacity: 0.82;
}

#threeDPrintPanel .print-inspection-bar button:disabled {
  opacity: 0.34;
}

.print-inspection-legend {
  position: absolute;
  z-index: 5;
  top: max(72px, calc(env(safe-area-inset-top) + 60px));
  left: max(12px, env(safe-area-inset-left));
  width: min(224px, calc(100vw - 24px));
  padding: 0 10px 9px;
  border: 1px solid rgba(48, 57, 68, 0.18);
  border-radius: 7px;
  background: rgba(250, 251, 252, 0.9);
  color: #22262b;
  box-shadow: 0 8px 22px rgba(23, 30, 39, 0.12);
  backdrop-filter: blur(16px) saturate(125%);
}

.print-inspection-legend[hidden] {
  display: none !important;
}

.print-inspection-legend > header {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(48, 57, 68, 0.12);
}

.print-inspection-legend > header strong {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.print-inspection-legend > header button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.print-inspection-legend > header img {
  width: 15px;
  height: 15px;
}

.print-inspection-legend-items {
  display: grid;
  gap: 6px;
  padding: 9px 0 7px;
}

.print-inspection-legend-items > span {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #515a65;
  font-size: 10px;
  line-height: 14px;
}

.print-inspection-legend-items i {
  width: 12px;
  height: 3px;
  border-radius: 1px;
}

.print-inspection-legend > p {
  margin: 0;
  color: #69717c;
  font-size: 10px;
  line-height: 14px;
}

html[data-theme="dark"] .print-inspection-legend {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(40, 45, 53, 0.91);
  color: #f3f4f6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .print-inspection-legend > header {
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .print-inspection-legend-items > span,
html[data-theme="dark"] .print-inspection-legend > p {
  color: #c6c9ce;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-inspection-legend {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(40, 45, 53, 0.91);
    color: #f3f4f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  html[data-theme="auto"] .print-inspection-legend > header {
    border-color: rgba(255, 255, 255, 0.12);
  }

  html[data-theme="auto"] .print-inspection-legend-items > span,
  html[data-theme="auto"] .print-inspection-legend > p {
    color: #c6c9ce;
  }
}

@media (max-width: 620px) {
  #threeDPrintPanel .print-inspection-bar {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  body .layers #threeDPrintPanel .print-inspection-bar > button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .print-inspection-legend {
    top: max(68px, calc(env(safe-area-inset-top) + 56px));
    width: min(208px, calc(100vw - 24px));
  }
}

/* Source: release-399.css */
/* Release 399: compact profile-aware slicer handoff. */

#threeDPrintPanel .print-handoff-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: end;
  gap: 6px;
  margin: 9px 0;
}

#threeDPrintPanel .print-handoff-bar > label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#threeDPrintPanel .print-handoff-bar select {
  width: 100%;
  min-width: 0;
}

body .layers #threeDPrintPanel .print-handoff-bar > button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 7px !important;
  background: transparent !important;
}

#threeDPrintPanel .print-handoff-bar button img {
  width: 16px;
  height: 16px;
  opacity: 0.82;
}

#threeDPrintPanel .print-handoff-bar button:disabled {
  opacity: 0.34;
}

@media (max-width: 620px) {
  #threeDPrintPanel .print-handoff-bar {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  body .layers #threeDPrintPanel .print-handoff-bar > button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* Source: release-400.css */
/* Release 400: local material-usage and cost estimate. */

#threeDPrintPanel .print-cost-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: end;
  gap: 6px;
  margin: 9px 0;
}

#threeDPrintPanel .print-cost-bar > label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#threeDPrintPanel .print-cost-bar input {
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

body .layers #threeDPrintPanel .print-cost-bar > button {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14)) !important;
  border-radius: 7px !important;
  background: transparent !important;
}

#threeDPrintPanel .print-cost-bar button img {
  width: 16px;
  height: 16px;
  opacity: 0.82;
}

#threeDPrintPanel .print-cost-bar button:disabled {
  opacity: 0.34;
}

.print-cost-report[hidden] {
  display: none !important;
}

.print-cost-report {
  margin: 9px 0 10px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14));
  border-bottom: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14));
  border-radius: 0;
  background: transparent;
}

.print-cost-report > header {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.print-cost-report > header strong {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.print-cost-report > header span,
.print-cost-report > p {
  color: var(--ios-muted, #6f7680);
  font-size: 10px;
  line-height: 14px;
}

.print-cost-report dl {
  display: grid;
  grid-template-columns: minmax(72px, 0.45fr) minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.1));
}

.print-cost-report dt,
.print-cost-report dd {
  min-width: 0;
  margin: 0;
  padding: 7px 2px;
  border-bottom: 1px solid var(--ios-line, rgba(23, 33, 43, 0.08));
  font-size: 11px;
  line-height: 15px;
}

.print-cost-report dt {
  color: var(--ios-muted, #6f7680);
}

.print-cost-report dd {
  overflow-wrap: anywhere;
  color: var(--ios-text, #22262b);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.print-cost-report > p {
  margin: 0;
  padding: 8px 2px 9px;
}

@media (max-width: 620px) {
  #threeDPrintPanel .print-cost-bar {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  body .layers #threeDPrintPanel .print-cost-bar > button {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* Source: release-401.css */
/* Release 401: integrated capped model splitting. */

#threeDPrintPanel .print-split-panel {
  margin: 10px 0;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14));
  border-bottom: 1px solid var(--ios-line, rgba(23, 33, 43, 0.14));
}

#threeDPrintPanel .print-split-panel > summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  color: var(--ios-text, #22262b);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
}

#threeDPrintPanel .print-split-panel > summary img {
  width: 16px;
  height: 16px;
  opacity: 0.82;
}

#threeDPrintPanel .print-split-controls {
  display: grid;
  grid-template-columns: minmax(82px, 0.65fr) minmax(0, 1.35fr);
  gap: 8px;
  padding: 8px 2px 7px;
  border-top: 1px solid var(--ios-line, rgba(23, 33, 43, 0.1));
}

#threeDPrintPanel .print-split-controls > label {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
}

#threeDPrintPanel .print-split-controls select,
#threeDPrintPanel .print-split-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
}

#threeDPrintPanel .print-split-controls output {
  color: var(--ios-muted, #6f7680);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

#threeDPrintPanel .print-split-controls .print-split-toggle {
  grid-column: 1 / -1;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#threeDPrintPanel .print-split-controls .print-split-toggle input {
  width: auto;
  min-width: 18px;
}

#threeDPrintPanel .print-split-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 2px 7px;
}

body .layers #threeDPrintPanel .print-split-actions > button {
  min-width: 0 !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
}

#threeDPrintPanel .print-split-actions img {
  width: 15px;
  height: 15px;
}

#threeDPrintPanel .print-split-panel > .mini-status {
  margin: 0;
  padding: 0 2px 9px;
}

@media (max-width: 620px) {
  #threeDPrintPanel .print-split-controls {
    gap: 6px;
  }

  body .layers #threeDPrintPanel .print-split-actions > button {
    min-height: 32px !important;
    font-size: 11px !important;
  }
}

/* Source: release-402.css */
/* Release 402: profile-aware keyed model-split connectors. */

#threeDPrintPanel .print-split-controls select:disabled {
  opacity: 0.45;
}

/* Source: release-403.css */
/* Release 403: integrated selected-part assembly handoff. */

#threeDPrintPanel .print-handoff-bar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
}

#threeDPrintPanel .print-handoff-bar > button {
  grid-column: 3;
  grid-row: 1;
}

#threeDPrintPanel .print-handoff-bar > .print-handoff-spacing {
  grid-column: 1 / 3;
  grid-row: 2;
}

#threeDPrintPanel .print-handoff-bar > [hidden] {
  display: none;
}

@media (max-width: 620px) {
  #threeDPrintPanel .print-handoff-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
  }
}

/* Source: release-404.css */
/* Release 404: read-only arranged printer-bed preview. */

#threeDPrintPanel .print-handoff-bar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px 34px;
}

#threeDPrintPanel .print-handoff-bar > .print-handoff-spacing {
  grid-column: 1;
  grid-row: 2;
}

#threeDPrintPanel .print-handoff-bar > .print-handoff-rotation {
  grid-column: 2;
  grid-row: 2;
}

body .layers #threeDPrintPanel .print-handoff-bar > #previewPrintAssemblyButton {
  grid-column: 3;
  grid-row: 1;
}

body .layers #threeDPrintPanel .print-handoff-bar > #exportPrintHandoffButton {
  grid-column: 4;
  grid-row: 1;
}

@media (max-width: 620px) {
  #threeDPrintPanel .print-handoff-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px 32px;
  }
}

/* Source: release-405.css */
/* Release 405: precise manual print-bed placement in the existing 3D viewer. */

.print-assembly-editor {
  position: relative;
  z-index: 3;
  display: grid;
  grid-row: 3;
  min-width: 0;
  min-height: 96px;
  grid-template-rows: 48px 48px;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid rgba(23, 33, 43, 0.13);
  background: rgba(249, 250, 252, 0.97);
  backdrop-filter: blur(18px) saturate(140%);
}

.print-assembly-editor[hidden] {
  display: none;
}

.print-assembly-editor-fields {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(76px, 0.34fr) minmax(112px, auto);
  min-width: 0;
  align-items: center;
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
}

.print-assembly-editor-fields label {
  display: grid;
  min-width: 0;
  height: 48px;
  align-content: center;
  gap: 2px;
  padding: 4px 10px;
  color: #626b76;
  font: 600 9px/11px system-ui, sans-serif;
}

.print-assembly-editor-fields label + label {
  border-left: 1px solid rgba(23, 33, 43, 0.07);
}

.print-assembly-editor-fields select {
  width: 100%;
  min-width: 0;
  height: 27px;
  padding: 0 6px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: 600 11px/1 system-ui, sans-serif;
}

#printAssemblyPosition {
  min-width: 0;
  padding: 0 10px;
  overflow: hidden;
  color: #515a68;
  font: 600 10px/14px system-ui, sans-serif;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-assembly-editor-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.print-assembly-editor-actions button {
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 3px 2px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #525b66;
  font: 600 9px/11px system-ui, sans-serif;
}

.print-assembly-editor-actions button + button {
  border-left: 1px solid rgba(23, 33, 43, 0.06);
}

.print-assembly-editor-actions button:active {
  background: rgba(20, 115, 230, 0.09);
  color: #1167c9;
}

.print-assembly-editor-actions img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  opacity: 0.82;
}

.print-assembly-chevron-up {
  transform: rotate(90deg);
}

.print-assembly-chevron-down {
  transform: rotate(-90deg);
}

.print-assembly-chevron-right {
  transform: rotate(180deg);
}

.print-assembly-editor:not([hidden]) ~ .preview3d-status {
  bottom: calc(106px + env(safe-area-inset-bottom));
}

html[data-theme="dark"] .print-assembly-editor {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(39, 44, 52, 0.96);
}

html[data-theme="dark"] .print-assembly-editor-fields,
html[data-theme="dark"] .print-assembly-editor-fields label + label,
html[data-theme="dark"] .print-assembly-editor-actions button + button {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .print-assembly-editor-fields label,
html[data-theme="dark"] #printAssemblyPosition,
html[data-theme="dark"] .print-assembly-editor-actions button {
  color: #d7dde6;
}

html[data-theme="dark"] .print-assembly-editor-fields select {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #eef2f7;
}

html[data-theme="dark"] .print-assembly-editor-actions img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-editor {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(39, 44, 52, 0.96);
  }

  html[data-theme="auto"] .print-assembly-editor-fields,
  html[data-theme="auto"] .print-assembly-editor-fields label + label,
  html[data-theme="auto"] .print-assembly-editor-actions button + button {
    border-color: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="auto"] .print-assembly-editor-fields label,
  html[data-theme="auto"] #printAssemblyPosition,
  html[data-theme="auto"] .print-assembly-editor-actions button {
    color: #d7dde6;
  }

  html[data-theme="auto"] .print-assembly-editor-fields select {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #eef2f7;
  }

  html[data-theme="auto"] .print-assembly-editor-actions img {
    filter: invert(1);
  }
}

@media (max-width: 620px) {
  .print-assembly-editor-fields {
    grid-template-columns: minmax(0, 1fr) 84px;
  }

  #printAssemblyPosition {
    display: none;
  }
}

/* Source: release-406.css */
/* Release 406: touch dragging, snapping, and per-part placement locks. */

.print-assembly-editor-fields {
  grid-template-columns: minmax(110px, 1fr) 78px 92px minmax(112px, auto);
}

.print-assembly-editor-actions {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

#lockPrintAssemblyPartButton.is-active {
  background: rgba(20, 115, 230, 0.09);
  color: #1167c9;
}

.preview3d-viewport.is-print-placement canvas {
  cursor: grab;
}

.preview3d-viewport.is-print-placement.is-dragging canvas {
  cursor: grabbing;
}

@media (max-width: 620px) {
  .print-assembly-editor-fields {
    grid-template-columns: minmax(0, 1fr) 68px 82px;
  }

  .print-assembly-editor-fields label {
    padding-inline: 7px;
  }

  .print-assembly-editor-actions button {
    font-size: 8px;
  }
}

/* Source: release-407.css */
/* Release 407: integrated multi-plate assembly navigation. */

.print-assembly-editor.has-multiple-plates {
  min-height: 132px;
  grid-template-rows: 36px 48px 48px;
}

.print-assembly-plate-navigation {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
}

.print-assembly-plate-navigation[hidden] {
  display: none;
}

.print-assembly-plate-navigation button {
  display: grid;
  width: 42px;
  height: 35px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.print-assembly-plate-navigation button:disabled {
  opacity: 0.3;
}

.print-assembly-plate-navigation img {
  width: 17px;
  height: 17px;
  opacity: 0.78;
}

#printAssemblyPlateStatus {
  min-width: 0;
  overflow: hidden;
  color: #515a68;
  font: 700 10px/14px system-ui, sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-assembly-editor.has-multiple-plates:not([hidden]) ~ .preview3d-status {
  bottom: calc(142px + env(safe-area-inset-bottom));
}

html[data-theme="dark"] .print-assembly-plate-navigation,
html[data-theme="dark"] #printAssemblyPlateStatus {
  border-color: rgba(255, 255, 255, 0.08);
  color: #d7dde6;
}

html[data-theme="dark"] .print-assembly-plate-navigation img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-plate-navigation,
  html[data-theme="auto"] #printAssemblyPlateStatus {
    border-color: rgba(255, 255, 255, 0.08);
    color: #d7dde6;
  }

  html[data-theme="auto"] .print-assembly-plate-navigation img {
    filter: invert(1);
  }
}

/* Source: release-408.css */
/* Release 408: direct printer-plate assignment in the existing editor. */

.print-assembly-editor-fields {
  grid-template-columns: minmax(104px, 1fr) 72px 86px 84px minmax(104px, auto);
}

#printAssemblyDestinationPlate:disabled {
  opacity: 0.48;
}

@media (max-width: 620px) {
  .print-assembly-editor-fields {
    grid-template-columns: minmax(0, 1fr) 57px 64px 62px;
  }

  .print-assembly-editor-fields label {
    padding-inline: 5px;
  }

  .print-assembly-editor-fields select {
    padding-inline: 4px;
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .print-assembly-editor-fields {
    grid-template-columns: minmax(0, 1fr) 52px 58px 58px;
  }

  .print-assembly-editor-fields label {
    padding-inline: 4px;
  }
}

/* Source: release-409.css */
/* Release 409: compact visual printer-plate strip and plate actions. */

.print-assembly-editor.has-multiple-plates {
  min-height: 138px;
  grid-template-rows: 42px 48px 48px;
}

.print-assembly-editor.has-multiple-plates.has-plate-actions {
  min-height: 180px;
  grid-template-rows: 42px 42px 48px 48px;
}

.print-assembly-plate-navigation {
  grid-template-columns: 36px minmax(0, 1fr) 36px 36px;
  min-height: 42px;
}

.print-assembly-plate-navigation > button {
  width: 36px;
  height: 41px;
}

.print-assembly-plate-center {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

#printAssemblyPlateStrip {
  display: flex;
  min-width: 0;
  height: 41px;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

#printAssemblyPlateStrip::-webkit-scrollbar {
  display: none;
}

#printAssemblyPlateStrip .print-assembly-plate-tab {
  position: relative;
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 34px;
  grid-template-columns: 29px 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.52);
  color: #59626d;
}

#printAssemblyPlateStrip .print-assembly-plate-tab.is-active {
  border-color: rgba(20, 115, 230, 0.58);
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-plate-thumbnail {
  position: relative;
  grid-row: 1 / -1;
  width: 27px;
  height: 26px;
  overflow: hidden;
  border: 1px solid rgba(23, 33, 43, 0.18);
  background-color: rgba(244, 246, 248, 0.94);
  background-image: linear-gradient(rgba(23, 33, 43, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 33, 43, 0.07) 1px, transparent 1px);
  background-size: 6px 6px;
}

.print-assembly-plate-thumbnail-part {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(54, 68, 80, 0.48);
  background: rgba(111, 133, 148, 0.58);
}

.print-assembly-plate-tab-number,
.print-assembly-plate-tab-count {
  display: grid;
  place-items: center;
  font: 700 8px/10px system-ui, sans-serif;
}

.print-assembly-plate-tab-count {
  color: #7b838d;
  font-weight: 600;
}

#printAssemblyPlateStatus {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.print-assembly-plate-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 56px 38px;
  min-width: 0;
  min-height: 42px;
  border-bottom: 1px solid rgba(23, 33, 43, 0.1);
}

.print-assembly-plate-actions[hidden] {
  display: none;
}

.print-assembly-plate-actions label {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  color: #626b76;
  font: 600 9px/11px system-ui, sans-serif;
}

#printAssemblyPlateName {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 7px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: 600 10px/1 system-ui, sans-serif;
}

.print-assembly-plate-actions button {
  display: grid;
  min-width: 0;
  min-height: 41px;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 2px;
  border: 0;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  border-radius: 0;
  background: transparent;
  color: #525b66;
  font: 600 8px/10px system-ui, sans-serif;
}

.print-assembly-plate-actions button:disabled {
  opacity: 0.34;
}

.print-assembly-plate-actions img {
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.print-assembly-editor.has-multiple-plates:not([hidden]) ~ .preview3d-status {
  bottom: calc(148px + env(safe-area-inset-bottom));
}

.print-assembly-editor.has-plate-actions:not([hidden]) ~ .preview3d-status {
  bottom: calc(190px + env(safe-area-inset-bottom));
}

html[data-theme="dark"] #printAssemblyPlateStrip .print-assembly-plate-tab,
html[data-theme="dark"] #printAssemblyPlateName {
  border-color: rgba(255, 255, 255, 0.13);
  background-color: rgba(255, 255, 255, 0.06);
  color: #e7ebf0;
}

html[data-theme="dark"] .print-assembly-plate-thumbnail {
  border-color: rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .print-assembly-plate-actions,
html[data-theme="dark"] .print-assembly-plate-actions button {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .print-assembly-plate-actions label,
html[data-theme="dark"] .print-assembly-plate-actions button {
  color: #d7dde6;
}

html[data-theme="dark"] .print-assembly-plate-actions img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #printAssemblyPlateStrip .print-assembly-plate-tab,
  html[data-theme="auto"] #printAssemblyPlateName {
    border-color: rgba(255, 255, 255, 0.13);
    background-color: rgba(255, 255, 255, 0.06);
    color: #e7ebf0;
  }

  html[data-theme="auto"] .print-assembly-plate-thumbnail {
    border-color: rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="auto"] .print-assembly-plate-actions,
  html[data-theme="auto"] .print-assembly-plate-actions button {
    border-color: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="auto"] .print-assembly-plate-actions label,
  html[data-theme="auto"] .print-assembly-plate-actions button {
    color: #d7dde6;
  }

  html[data-theme="auto"] .print-assembly-plate-actions img {
    filter: invert(1);
  }
}

@media (max-width: 360px) {
  #printAssemblyPlateStrip .print-assembly-plate-tab {
    flex-basis: 42px;
    width: 42px;
    grid-template-columns: 26px 1fr;
  }

  .print-assembly-plate-thumbnail {
    width: 24px;
  }

  .print-assembly-plate-actions {
    grid-template-columns: minmax(0, 1fr) 50px 50px 34px;
  }

  .print-assembly-plate-actions label {
    gap: 4px;
    padding-inline: 5px;
  }
}

/* Source: release-410.css */
/* Release 410: per-plate production settings and profile conflict state. */

.print-assembly-editor.has-multiple-plates.has-plate-actions {
  min-height: 222px;
  grid-template-rows: 42px 84px 48px 48px;
}

.print-assembly-plate-actions {
  min-height: 84px;
  grid-template-rows: 42px 42px;
}

.print-assembly-plate-production {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
  scrollbar-width: none;
}

.print-assembly-plate-production::-webkit-scrollbar {
  display: none;
}

.print-assembly-plate-actions .print-assembly-plate-production label {
  display: grid;
  flex: 0 0 78px;
  height: 41px;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2px;
  padding: 3px 6px;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #626b76;
  font: 600 8px/9px system-ui, sans-serif;
}

.print-assembly-plate-actions .print-assembly-plate-production label:first-child {
  flex-basis: 124px;
  border-left: 0;
}

.print-assembly-plate-actions .print-assembly-plate-production label:nth-child(2) {
  flex-basis: 76px;
}

.print-assembly-plate-actions .print-assembly-plate-production label:nth-child(3),
.print-assembly-plate-actions .print-assembly-plate-production label:last-child {
  flex-basis: 52px;
}

.print-assembly-plate-production select,
.print-assembly-plate-production input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: 600 9px/1 system-ui, sans-serif;
}

.print-assembly-plate-production input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 2px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: transparent;
}

#printAssemblyPlateStrip .print-assembly-plate-tab.has-conflict {
  border-color: rgba(190, 52, 52, 0.72);
}

#printAssemblyPlateStrip .print-assembly-plate-tab.has-conflict::after {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #be3434;
  content: "";
}

.print-assembly-editor.has-plate-actions:not([hidden]) ~ .preview3d-status {
  bottom: calc(232px + env(safe-area-inset-bottom));
}

html[data-theme="dark"] .print-assembly-plate-production,
html[data-theme="dark"] .print-assembly-plate-actions .print-assembly-plate-production label,
html[data-theme="dark"] .print-assembly-plate-production select,
html[data-theme="dark"] .print-assembly-plate-production input {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .print-assembly-plate-production select,
html[data-theme="dark"] .print-assembly-plate-production input[type="number"] {
  background: rgba(255, 255, 255, 0.06);
  color: #eef2f7;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-plate-production,
  html[data-theme="auto"] .print-assembly-plate-actions .print-assembly-plate-production label,
  html[data-theme="auto"] .print-assembly-plate-production select,
  html[data-theme="auto"] .print-assembly-plate-production input {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] .print-assembly-plate-production select,
  html[data-theme="auto"] .print-assembly-plate-production input[type="number"] {
    background: rgba(255, 255, 255, 0.06);
    color: #eef2f7;
  }
}

@media (max-width: 360px) {
  .print-assembly-plate-actions .print-assembly-plate-production label {
    flex-basis: 72px;
    padding-inline: 5px;
  }

  .print-assembly-plate-actions .print-assembly-plate-production label:first-child {
    flex-basis: 112px;
  }
}

/* Source: release-411.css */
/* Release 411: measured per-plate production estimates and job-sheet export. */

.print-assembly-editor.has-plate-navigation {
  min-height: 138px;
  grid-template-rows: 42px 48px 48px;
}

.print-assembly-editor.has-plate-navigation.has-plate-actions {
  min-height: 268px;
  grid-template-rows: 42px 130px 48px 48px;
}

.print-assembly-plate-actions {
  min-height: 130px;
  grid-template-rows: 42px 42px 46px;
}

.print-assembly-plate-estimate {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 46px;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
  scrollbar-width: none;
}

.print-assembly-plate-estimate::-webkit-scrollbar {
  display: none;
}

.print-assembly-plate-estimate > div {
  display: grid;
  flex: 0 0 72px;
  min-width: 0;
  align-content: center;
  gap: 2px;
  padding: 4px 7px;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #66707b;
  font: 600 8px/9px system-ui, sans-serif;
}

.print-assembly-plate-estimate > div:first-child {
  border-left: 0;
}

.print-assembly-plate-estimate > div:nth-child(3) {
  flex-basis: 84px;
}

.print-assembly-plate-estimate > div:nth-child(5) {
  flex-basis: 100px;
}

.print-assembly-plate-estimate strong {
  overflow: hidden;
  color: var(--ink);
  font: 700 10px/12px system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-assembly-plate-estimate[data-complete="false"] strong:not(#printAssemblyJobTotal) {
  color: #8a929b;
}

.print-assembly-plate-actions #exportPrintAssemblyJobSheetButton {
  flex: 0 0 46px;
  width: 46px;
  min-height: 45px;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
}

.print-assembly-plate-actions #exportPrintAssemblyJobSheetButton img {
  width: 16px;
  height: 16px;
}

.print-assembly-editor.has-plate-actions:not([hidden]) ~ .preview3d-status {
  bottom: calc(278px + env(safe-area-inset-bottom));
}

.print-assembly-editor.has-plate-navigation:not(.has-plate-actions):not([hidden]) ~ .preview3d-status {
  bottom: calc(148px + env(safe-area-inset-bottom));
}

html[data-theme="dark"] .print-assembly-plate-estimate,
html[data-theme="dark"] .print-assembly-plate-estimate > div,
html[data-theme="dark"] .print-assembly-plate-actions #exportPrintAssemblyJobSheetButton {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .print-assembly-plate-estimate > div {
  color: #aab2bc;
}

html[data-theme="dark"] .print-assembly-plate-estimate strong {
  color: #eef2f7;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-plate-estimate,
  html[data-theme="auto"] .print-assembly-plate-estimate > div,
  html[data-theme="auto"] .print-assembly-plate-actions #exportPrintAssemblyJobSheetButton {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] .print-assembly-plate-estimate > div {
    color: #aab2bc;
  }

  html[data-theme="auto"] .print-assembly-plate-estimate strong {
    color: #eef2f7;
  }
}

@media (max-width: 360px) {
  .print-assembly-plate-estimate > div {
    flex-basis: 68px;
    padding-inline: 6px;
  }

  .print-assembly-plate-estimate > div:nth-child(3) {
    flex-basis: 80px;
  }

  .print-assembly-plate-estimate > div:nth-child(5) {
    flex-basis: 94px;
  }
}

/* Source: release-412.css */
/* Release 412: nested production-estimate assumptions and calibrated overrides. */

.print-assembly-plate-estimate {
  min-height: 46px;
}

.print-assembly-plate-actions #togglePrintAssemblyEstimateSettingsButton {
  flex: 0 0 46px;
  width: 46px;
  min-height: 45px;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
}

.print-assembly-plate-actions #togglePrintAssemblyEstimateSettingsButton[aria-expanded="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-estimate-settings {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
  scrollbar-width: none;
}

.print-assembly-estimate-settings[hidden],
.print-assembly-estimate-settings label[hidden] {
  display: none;
}

.print-assembly-estimate-settings::-webkit-scrollbar {
  display: none;
}

.print-assembly-plate-actions .print-assembly-estimate-settings label {
  display: grid;
  flex: 0 0 82px;
  height: 41px;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2px;
  padding: 3px 6px;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #626b76;
  font: 600 8px/9px system-ui, sans-serif;
}

.print-assembly-plate-actions .print-assembly-estimate-settings label:first-child {
  border-left: 0;
}

.print-assembly-plate-actions .print-assembly-estimate-settings label:nth-child(3) {
  flex-basis: 62px;
}

.print-assembly-plate-actions .print-assembly-estimate-settings label:last-child {
  flex-basis: 76px;
}

.print-assembly-estimate-settings select,
.print-assembly-estimate-settings input {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: 600 9px/1 system-ui, sans-serif;
}

.print-assembly-editor.has-plate-navigation.has-plate-actions.has-estimate-settings {
  min-height: 310px;
  grid-template-rows: 42px 172px 48px 48px;
}

.print-assembly-editor.has-estimate-settings .print-assembly-plate-actions {
  min-height: 172px;
  grid-template-rows: 42px 42px 46px 42px;
}

.print-assembly-editor.has-estimate-settings:not([hidden]) ~ .preview3d-status {
  bottom: calc(320px + env(safe-area-inset-bottom));
}

html[data-theme="dark"] .print-assembly-estimate-settings,
html[data-theme="dark"] .print-assembly-plate-actions .print-assembly-estimate-settings label,
html[data-theme="dark"] .print-assembly-estimate-settings select,
html[data-theme="dark"] .print-assembly-estimate-settings input,
html[data-theme="dark"] .print-assembly-plate-actions #togglePrintAssemblyEstimateSettingsButton {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .print-assembly-estimate-settings select,
html[data-theme="dark"] .print-assembly-estimate-settings input {
  background: rgba(255, 255, 255, 0.06);
  color: #eef2f7;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-estimate-settings,
  html[data-theme="auto"] .print-assembly-plate-actions .print-assembly-estimate-settings label,
  html[data-theme="auto"] .print-assembly-estimate-settings select,
  html[data-theme="auto"] .print-assembly-estimate-settings input,
  html[data-theme="auto"] .print-assembly-plate-actions #togglePrintAssemblyEstimateSettingsButton {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] .print-assembly-estimate-settings select,
  html[data-theme="auto"] .print-assembly-estimate-settings input {
    background: rgba(255, 255, 255, 0.06);
    color: #eef2f7;
  }
}

@media (max-width: 360px) {
  .print-assembly-plate-actions .print-assembly-estimate-settings label {
    flex-basis: 76px;
    padding-inline: 5px;
  }
}

/* Source: release-413.css */
/* Release 413: attached offline filament and resin inventory. */

.print-assembly-plate-actions #togglePrintAssemblyInventoryButton {
  flex: 0 0 46px;
  width: 46px;
  min-height: 45px;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
}

.print-assembly-plate-actions #togglePrintAssemblyInventoryButton[aria-expanded="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-inventory-panel {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 84px;
  grid-template-rows: 42px 42px;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
}

.print-assembly-inventory-panel[hidden] {
  display: none;
}

.print-assembly-inventory-actions,
.print-assembly-inventory-fields {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}

.print-assembly-inventory-actions::-webkit-scrollbar,
.print-assembly-inventory-fields::-webkit-scrollbar {
  display: none;
}

.print-assembly-inventory-fields {
  border-top: 1px solid rgba(23, 33, 43, 0.07);
}

.print-assembly-plate-actions .print-assembly-inventory-panel label {
  display: grid;
  flex: 0 0 82px;
  height: 41px;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2px;
  padding: 3px 6px;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #626b76;
  font: 600 8px/9px system-ui, sans-serif;
}

.print-assembly-plate-actions .print-assembly-inventory-actions label:first-child,
.print-assembly-plate-actions .print-assembly-inventory-fields label:first-child {
  border-left: 0;
}

.print-assembly-plate-actions .print-assembly-inventory-actions label {
  flex-basis: 142px;
}

.print-assembly-plate-actions .print-assembly-inventory-fields label:first-child {
  flex-basis: 122px;
}

.print-assembly-plate-actions .print-assembly-inventory-fields label:nth-child(3) {
  flex-basis: 52px;
}

.print-assembly-inventory-panel select,
.print-assembly-inventory-panel input {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: 600 9px/1 system-ui, sans-serif;
}

.print-assembly-inventory-panel input[type="color"] {
  width: 28px;
  padding: 2px;
  background: transparent;
}

#printAssemblyInventoryStatus {
  display: grid;
  flex: 0 0 170px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
}

#printAssemblyInventoryStatus[data-state="ready"] {
  color: #27704f;
}

#printAssemblyInventoryStatus[data-state="low"] {
  color: #9a651a;
}

#printAssemblyInventoryStatus[data-state="short"] {
  color: #b13c3c;
}

.print-assembly-plate-actions .print-assembly-inventory-actions > button {
  flex: 0 0 46px;
  width: 46px;
  min-height: 41px;
}

.print-assembly-editor.has-plate-navigation.has-plate-actions.has-inventory-panel {
  min-height: 352px;
  grid-template-rows: 42px 214px 48px 48px;
}

.print-assembly-editor.has-inventory-panel .print-assembly-plate-actions {
  min-height: 214px;
  grid-template-rows: 42px 42px 46px 84px;
}

.print-assembly-editor.has-inventory-panel:not([hidden]) ~ .preview3d-status {
  bottom: calc(362px + env(safe-area-inset-bottom));
}

html[data-theme="dark"] .print-assembly-inventory-panel,
html[data-theme="dark"] .print-assembly-inventory-fields,
html[data-theme="dark"] .print-assembly-plate-actions .print-assembly-inventory-panel label,
html[data-theme="dark"] .print-assembly-inventory-panel select,
html[data-theme="dark"] .print-assembly-inventory-panel input,
html[data-theme="dark"] #printAssemblyInventoryStatus,
html[data-theme="dark"] .print-assembly-plate-actions #togglePrintAssemblyInventoryButton {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .print-assembly-inventory-panel select,
html[data-theme="dark"] .print-assembly-inventory-panel input {
  background: rgba(255, 255, 255, 0.06);
  color: #eef2f7;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-inventory-panel,
  html[data-theme="auto"] .print-assembly-inventory-fields,
  html[data-theme="auto"] .print-assembly-plate-actions .print-assembly-inventory-panel label,
  html[data-theme="auto"] .print-assembly-inventory-panel select,
  html[data-theme="auto"] .print-assembly-inventory-panel input,
  html[data-theme="auto"] #printAssemblyInventoryStatus,
  html[data-theme="auto"] .print-assembly-plate-actions #togglePrintAssemblyInventoryButton {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] .print-assembly-inventory-panel select,
  html[data-theme="auto"] .print-assembly-inventory-panel input {
    background: rgba(255, 255, 255, 0.06);
    color: #eef2f7;
  }
}

@media (max-width: 360px) {
  #printAssemblyInventoryStatus {
    flex-basis: 150px;
  }

  .print-assembly-plate-actions .print-assembly-inventory-actions label {
    flex-basis: 128px;
  }
}

/* Source: release-414.css */
/* Release 414: attached offline production queue and actual-use tracking. */

.print-assembly-plate-actions #togglePrintAssemblyQueueButton {
  flex: 0 0 46px;
  width: 46px;
  min-height: 45px;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
}

.print-assembly-plate-actions #togglePrintAssemblyQueueButton[aria-expanded="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-queue-panel {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 84px;
  grid-template-rows: 42px 42px;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
}

.print-assembly-queue-panel[hidden] {
  display: none;
}

.print-assembly-queue-actions,
.print-assembly-queue-fields {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}

.print-assembly-queue-actions::-webkit-scrollbar,
.print-assembly-queue-fields::-webkit-scrollbar {
  display: none;
}

.print-assembly-queue-fields {
  border-top: 1px solid rgba(23, 33, 43, 0.07);
}

.print-assembly-plate-actions .print-assembly-queue-panel label {
  display: grid;
  flex: 0 0 88px;
  height: 41px;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2px;
  padding: 3px 6px;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #626b76;
  font: 600 8px/9px system-ui, sans-serif;
}

.print-assembly-plate-actions .print-assembly-queue-actions label:first-child,
.print-assembly-plate-actions .print-assembly-queue-fields label:first-child {
  border-left: 0;
}

.print-assembly-plate-actions .print-assembly-queue-actions label {
  flex-basis: 148px;
}

.print-assembly-plate-actions .print-assembly-queue-fields label:first-child {
  flex-basis: 132px;
}

.print-assembly-queue-panel select,
.print-assembly-queue-panel input {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 4px;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: 600 9px/1 system-ui, sans-serif;
}

#printAssemblyQueueStatus {
  display: grid;
  flex: 0 0 184px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
}

#printAssemblyQueueStatus[data-state="ready"],
#printAssemblyQueueStatus[data-state="completed"] {
  color: #27704f;
}

#printAssemblyQueueStatus[data-state="printing"] {
  color: #1167c9;
}

#printAssemblyQueueStatus[data-state="paused"] {
  color: #9a651a;
}

#printAssemblyQueueStatus[data-state="failed"] {
  color: #b13c3c;
}

.print-assembly-plate-actions .print-assembly-queue-panel button {
  flex: 0 0 46px;
  width: 46px;
  min-height: 41px;
}

.print-assembly-plate-actions #updatePrintAssemblyQueueButton {
  flex-basis: 58px;
  width: 58px;
}

.print-assembly-editor.has-plate-navigation.has-plate-actions.has-queue-panel {
  min-height: 352px;
  grid-template-rows: 42px 214px 48px 48px;
}

.print-assembly-editor.has-queue-panel .print-assembly-plate-actions {
  min-height: 214px;
  grid-template-rows: 42px 42px 46px 84px;
}

.print-assembly-editor.has-queue-panel:not([hidden]) ~ .preview3d-status {
  bottom: calc(362px + env(safe-area-inset-bottom));
}

html[data-theme="dark"] .print-assembly-queue-panel,
html[data-theme="dark"] .print-assembly-queue-fields,
html[data-theme="dark"] .print-assembly-plate-actions .print-assembly-queue-panel label,
html[data-theme="dark"] .print-assembly-queue-panel select,
html[data-theme="dark"] .print-assembly-queue-panel input,
html[data-theme="dark"] #printAssemblyQueueStatus,
html[data-theme="dark"] .print-assembly-plate-actions #togglePrintAssemblyQueueButton {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .print-assembly-queue-panel select,
html[data-theme="dark"] .print-assembly-queue-panel input {
  background: rgba(255, 255, 255, 0.06);
  color: #eef2f7;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-queue-panel,
  html[data-theme="auto"] .print-assembly-queue-fields,
  html[data-theme="auto"] .print-assembly-plate-actions .print-assembly-queue-panel label,
  html[data-theme="auto"] .print-assembly-queue-panel select,
  html[data-theme="auto"] .print-assembly-queue-panel input,
  html[data-theme="auto"] #printAssemblyQueueStatus,
  html[data-theme="auto"] .print-assembly-plate-actions #togglePrintAssemblyQueueButton {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] .print-assembly-queue-panel select,
  html[data-theme="auto"] .print-assembly-queue-panel input {
    background: rgba(255, 255, 255, 0.06);
    color: #eef2f7;
  }
}

@media (max-width: 360px) {
  #printAssemblyQueueStatus {
    flex-basis: 158px;
  }

  .print-assembly-plate-actions .print-assembly-queue-actions label {
    flex-basis: 132px;
  }
}

/* Source: release-415.css */
/* Release 415: local printer fleet, assignment, due dates, and service hours. */

.print-assembly-queue-fields[hidden],
.print-assembly-printer-fields[hidden] {
  display: none;
}

.print-assembly-printer-fields {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
  scrollbar-width: none;
}

.print-assembly-printer-fields::-webkit-scrollbar {
  display: none;
}

.print-assembly-plate-actions #togglePrintAssemblyPrinterFleetButton[aria-pressed="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-plate-actions .print-assembly-printer-fields label:first-child {
  flex-basis: 148px;
  border-left: 0;
}

.print-assembly-plate-actions .print-assembly-printer-fields label:nth-of-type(2) {
  flex-basis: 128px;
}

.print-assembly-plate-actions .print-assembly-printer-fields label:nth-last-of-type(-n+2) {
  flex-basis: 78px;
}

#printAssemblyPrinterStatus {
  display: grid;
  flex: 0 0 184px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
}

#printAssemblyPrinterStatus[data-state="ready"] {
  color: #27704f;
}

#printAssemblyPrinterStatus[data-state="busy"] {
  color: #1167c9;
}

#printAssemblyPrinterStatus[data-state="maintenance"] {
  color: #9a651a;
}

#printAssemblyPrinterStatus[data-state="offline"] {
  color: #b13c3c;
}

html[data-theme="dark"] .print-assembly-printer-fields,
html[data-theme="dark"] #printAssemblyPrinterStatus,
html[data-theme="dark"] .print-assembly-plate-actions #togglePrintAssemblyPrinterFleetButton {
  border-color: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-printer-fields,
  html[data-theme="auto"] #printAssemblyPrinterStatus,
  html[data-theme="auto"] .print-assembly-plate-actions #togglePrintAssemblyPrinterFleetButton {
    border-color: rgba(255, 255, 255, 0.09);
  }
}

@media (max-width: 360px) {
  #printAssemblyPrinterStatus {
    flex-basis: 158px;
  }

  .print-assembly-plate-actions .print-assembly-printer-fields label:first-child {
    flex-basis: 132px;
  }
}

/* Source: release-416.css */
/* Release 416: numbered per-plate production runs and printable run labels. */

.print-assembly-run-fields[hidden] {
  display: none;
}

.print-assembly-run-fields {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
  scrollbar-width: none;
}

.print-assembly-run-fields::-webkit-scrollbar {
  display: none;
}

.print-assembly-plate-actions #togglePrintAssemblyRunsButton[aria-pressed="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-plate-actions .print-assembly-run-fields label {
  flex: 0 0 90px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:first-child {
  flex-basis: 148px;
  border-left: 0;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(3) {
  flex-basis: 132px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-last-of-type(-n+2) {
  flex-basis: 82px;
}

#printAssemblyRunStatus {
  display: grid;
  flex: 0 0 184px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
}

#printAssemblyRunStatus[data-state="printing"] {
  color: #1167c9;
}

#printAssemblyRunStatus[data-state="completed"] {
  color: #27704f;
}

#printAssemblyRunStatus[data-state="paused"],
#printAssemblyRunStatus[data-state="reprint"] {
  color: #9a651a;
}

#printAssemblyRunStatus[data-state="failed"] {
  color: #b13c3c;
}

.print-assembly-run-fields #updatePrintAssemblyRunButton,
.print-assembly-run-fields #exportPrintAssemblyLabelsButton {
  flex: 0 0 54px;
}

.print-assembly-run-fields #exportPrintAssemblyLabelsButton {
  flex-basis: 58px;
}

html[data-theme="dark"] .print-assembly-run-fields,
html[data-theme="dark"] #printAssemblyRunStatus,
html[data-theme="dark"] .print-assembly-plate-actions #togglePrintAssemblyRunsButton {
  border-color: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-run-fields,
  html[data-theme="auto"] #printAssemblyRunStatus,
  html[data-theme="auto"] .print-assembly-plate-actions #togglePrintAssemblyRunsButton {
    border-color: rgba(255, 255, 255, 0.09);
  }
}

@media (max-width: 360px) {
  #printAssemblyRunStatus {
    flex-basis: 158px;
  }

  .print-assembly-plate-actions .print-assembly-run-fields label:first-child {
    flex-basis: 132px;
  }
}

/* Source: release-417.css */
/* Release 417: local slicer-result attachment and machine-file identity. */

#printAssemblyRunFileInput[hidden] {
  display: none;
}

.print-assembly-run-fields #attachPrintAssemblyRunFileButton,
.print-assembly-run-fields #downloadPrintAssemblyRunFileButton,
.print-assembly-run-fields #removePrintAssemblyRunFileButton {
  flex: 0 0 50px;
  width: 50px;
}

.print-assembly-run-fields #removePrintAssemblyRunFileButton {
  flex-basis: 54px;
  width: 54px;
}

.print-assembly-run-fields #attachPrintAssemblyRunFileButton img,
.print-assembly-run-fields #downloadPrintAssemblyRunFileButton img,
.print-assembly-run-fields #removePrintAssemblyRunFileButton img {
  width: 15px;
  height: 15px;
}

#printAssemblyRunStatus[data-state="editing"] {
  color: #1167c9;
}

@media (max-width: 360px) {
  .print-assembly-run-fields #attachPrintAssemblyRunFileButton,
  .print-assembly-run-fields #downloadPrintAssemblyRunFileButton,
  .print-assembly-run-fields #removePrintAssemblyRunFileButton {
    flex-basis: 48px;
    width: 48px;
  }
}

/* Source: release-418.css */
/* Release 418: local production scheduling and printer maintenance history. */

.print-assembly-schedule-fields[hidden] {
  display: none;
}

.print-assembly-schedule-fields {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
  scrollbar-width: none;
}

.print-assembly-schedule-fields::-webkit-scrollbar {
  display: none;
}

.print-assembly-plate-actions #togglePrintAssemblyScheduleButton {
  flex-basis: 56px;
  width: 56px;
}

.print-assembly-plate-actions #togglePrintAssemblyScheduleButton[aria-pressed="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-plate-actions .print-assembly-schedule-fields label {
  flex: 0 0 90px;
}

.print-assembly-plate-actions .print-assembly-schedule-fields label:first-child {
  flex-basis: 176px;
  border-left: 0;
}

.print-assembly-plate-actions .print-assembly-schedule-fields label:nth-of-type(3) {
  flex-basis: 132px;
}

.print-assembly-plate-actions .print-assembly-schedule-fields label:nth-of-type(4) {
  flex-basis: 148px;
}

#printAssemblyScheduleStatus {
  display: grid;
  flex: 0 0 206px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
}

#printAssemblyScheduleStatus[data-state="urgent"],
#printAssemblyScheduleStatus[data-state="overdue"] {
  color: #b13c3c;
}

#printAssemblyScheduleStatus[data-state="high"] {
  color: #9a651a;
}

#printAssemblyScheduleStatus[data-state="normal"] {
  color: #1167c9;
}

#printAssemblyScheduleStatus[data-state="low"] {
  color: #27704f;
}

.print-assembly-schedule-fields #applyPrintAssemblyScheduleButton {
  flex: 0 0 56px;
  width: 56px;
}

.print-assembly-schedule-fields #exportPrintAssemblyCalendarButton {
  flex: 0 0 66px;
  width: 66px;
}

.print-assembly-plate-actions .print-assembly-printer-fields label {
  flex-basis: 92px;
}

.print-assembly-plate-actions .print-assembly-printer-fields label:nth-of-type(2) {
  flex-basis: 128px;
}

.print-assembly-plate-actions .print-assembly-printer-fields label:nth-of-type(9) {
  flex-basis: 154px;
}

.print-assembly-plate-actions .print-assembly-printer-fields label:nth-of-type(10) {
  flex-basis: 220px;
}

.print-assembly-printer-fields #logPrintAssemblyMaintenanceButton,
.print-assembly-printer-fields #completePrintAssemblyServiceButton,
.print-assembly-printer-fields #exportPrintAssemblyMaintenanceButton {
  flex: 0 0 56px;
  width: 56px;
}

.print-assembly-printer-fields #completePrintAssemblyServiceButton {
  flex-basis: 62px;
  width: 62px;
}

html[data-theme="dark"] .print-assembly-schedule-fields,
html[data-theme="dark"] #printAssemblyScheduleStatus,
html[data-theme="dark"] .print-assembly-plate-actions #togglePrintAssemblyScheduleButton {
  border-color: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-schedule-fields,
  html[data-theme="auto"] #printAssemblyScheduleStatus,
  html[data-theme="auto"] .print-assembly-plate-actions #togglePrintAssemblyScheduleButton {
    border-color: rgba(255, 255, 255, 0.09);
  }
}

@media (max-width: 360px) {
  .print-assembly-plate-actions .print-assembly-schedule-fields label:first-child {
    flex-basis: 150px;
  }

  #printAssemblyScheduleStatus {
    flex-basis: 172px;
  }
}

/* Source: release-419.css */
/* Release 419: append-only run inspection and production quality reporting. */

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(6),
.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(9) {
  flex-basis: 100px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(7) {
  flex-basis: 124px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(8) {
  flex-basis: 104px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(10) {
  flex-basis: 164px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(11) {
  flex-basis: 220px;
}

.print-assembly-run-fields #recordPrintAssemblyRunQualityButton,
.print-assembly-run-fields #exportPrintAssemblyQualityButton {
  flex: 0 0 60px;
  width: 60px;
}

.print-assembly-run-fields #exportPrintAssemblyQualityButton {
  flex-basis: 64px;
  width: 64px;
}

.print-assembly-run-fields #recordPrintAssemblyRunQualityButton img,
.print-assembly-run-fields #exportPrintAssemblyQualityButton img {
  width: 15px;
  height: 15px;
}

#printAssemblyRunStatus[data-state="quality-pass"] {
  color: #27704f;
}

#printAssemblyRunStatus[data-state="quality-review"] {
  color: #9a651a;
}

#printAssemblyRunStatus[data-state="quality-fail"] {
  color: #b13c3c;
}

@media (max-width: 360px) {
  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(10) {
    flex-basis: 150px;
  }

  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(11) {
    flex-basis: 196px;
  }
}

/* Source: release-420.css */
/* Release 420: corrective action, verification, and local inspection evidence. */

#printAssemblyQualityEvidenceInput[hidden] {
  display: none;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(11) {
  flex-basis: 126px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(12) {
  flex-basis: 178px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(13) {
  flex-basis: 116px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(14),
.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(15) {
  flex-basis: 220px;
}

.print-assembly-run-fields #attachPrintAssemblyQualityEvidenceButton,
.print-assembly-run-fields #viewPrintAssemblyQualityEvidenceButton {
  flex: 0 0 54px;
  width: 54px;
}

.print-assembly-run-fields #exportPrintAssemblyCorrectiveButton {
  flex: 0 0 64px;
  width: 64px;
}

.print-assembly-run-fields #attachPrintAssemblyQualityEvidenceButton img,
.print-assembly-run-fields #viewPrintAssemblyQualityEvidenceButton img,
.print-assembly-run-fields #exportPrintAssemblyCorrectiveButton img {
  width: 15px;
  height: 15px;
}

#attachPrintAssemblyQualityEvidenceButton[data-state="ready"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

#attachPrintAssemblyQualityEvidenceButton[data-state="attached"] {
  color: #27704f;
}

@media (max-width: 360px) {
  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(12) {
    flex-basis: 160px;
  }

  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(14),
  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(15) {
    flex-basis: 196px;
  }
}

/* Source: release-421.css */
/* Release 421: recurring-issue triage and production-settings comparison. */

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(1) {
  flex-basis: 148px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(2) {
  flex-basis: 142px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(3),
.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(5),
.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(6) {
  flex-basis: 90px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(4) {
  flex-basis: 132px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(7),
.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(10) {
  flex-basis: 100px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(8) {
  flex-basis: 124px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(9) {
  flex-basis: 104px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(11) {
  flex-basis: 164px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(12) {
  flex-basis: 126px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(13) {
  flex-basis: 178px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(14) {
  flex-basis: 116px;
}

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(15),
.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(16) {
  flex-basis: 220px;
}

#printAssemblyRunIssueSummary {
  display: grid;
  flex: 0 0 136px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
}

#printAssemblyRunIssueSummary[data-state="filtered"] {
  color: #1167c9;
}

#printAssemblyRunIssueSummary[data-state="empty"] {
  color: #9a651a;
}

.print-assembly-run-fields #comparePrintAssemblyRunSettingsButton {
  flex: 0 0 66px;
  width: 66px;
}

.print-assembly-run-fields #comparePrintAssemblyRunSettingsButton img {
  width: 15px;
  height: 15px;
}

html[data-theme="dark"] #printAssemblyRunIssueSummary {
  border-color: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #printAssemblyRunIssueSummary {
    border-color: rgba(255, 255, 255, 0.09);
  }
}

@media (max-width: 360px) {
  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(1) {
    flex-basis: 132px;
  }

  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(2) {
    flex-basis: 132px;
  }

  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(11) {
    flex-basis: 150px;
  }

  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(13) {
    flex-basis: 160px;
  }

  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(15),
  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(16) {
    flex-basis: 196px;
  }

  #printAssemblyRunIssueSummary {
    flex-basis: 122px;
  }
}

/* Source: release-422.css */
/* Release 422: verified local remediation playbooks and reversible settings audit. */

.print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(17) {
  flex-basis: 228px;
}

#printAssemblyRunPlaybookSummary {
  display: grid;
  flex: 0 0 144px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#printAssemblyRunPlaybookSummary[data-state="ready"] {
  color: #176345;
}

.print-assembly-run-fields #applyPrintAssemblyRunPlaybookButton,
.print-assembly-run-fields #revertPrintAssemblyRunPlaybookButton {
  flex: 0 0 60px;
  width: 60px;
}

.print-assembly-run-fields #applyPrintAssemblyRunPlaybookButton img,
.print-assembly-run-fields #revertPrintAssemblyRunPlaybookButton img {
  width: 15px;
  height: 15px;
  stroke-width: 1.7;
}

html[data-theme="dark"] #printAssemblyRunPlaybookSummary {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] #printAssemblyRunPlaybookSummary[data-state="ready"] {
  color: #77cba2;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #printAssemblyRunPlaybookSummary {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] #printAssemblyRunPlaybookSummary[data-state="ready"] {
    color: #77cba2;
  }
}

@media (max-width: 360px) {
  .print-assembly-plate-actions .print-assembly-run-fields label:nth-of-type(17) {
    flex-basis: 204px;
  }

  #printAssemblyRunPlaybookSummary {
    flex-basis: 132px;
  }
}

/* Source: release-423.css */
/* Release 423: integrated production start-readiness gate. */

#printAssemblyRunReadinessSummary {
  display: grid;
  flex: 0 0 126px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  border-left: 1px solid rgba(23, 33, 43, 0.07);
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#printAssemblyRunReadinessSummary[data-state="ready"] {
  color: #176345;
}

#printAssemblyRunReadinessSummary[data-state="attention"] {
  color: #8a5b17;
}

#printAssemblyRunReadinessSummary[data-state="blocked"] {
  color: #a53b38;
}

.print-assembly-run-fields #checkPrintAssemblyRunReadinessButton {
  flex: 0 0 60px;
  width: 60px;
}

.print-assembly-run-fields #checkPrintAssemblyRunReadinessButton img {
  width: 15px;
  height: 15px;
  stroke-width: 1.7;
}

html[data-theme="dark"] #printAssemblyRunReadinessSummary {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] #printAssemblyRunReadinessSummary[data-state="ready"] {
  color: #77cba2;
}

html[data-theme="dark"] #printAssemblyRunReadinessSummary[data-state="attention"] {
  color: #e3b368;
}

html[data-theme="dark"] #printAssemblyRunReadinessSummary[data-state="blocked"] {
  color: #ef8b87;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #printAssemblyRunReadinessSummary {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] #printAssemblyRunReadinessSummary[data-state="ready"] {
    color: #77cba2;
  }

  html[data-theme="auto"] #printAssemblyRunReadinessSummary[data-state="attention"] {
    color: #e3b368;
  }

  html[data-theme="auto"] #printAssemblyRunReadinessSummary[data-state="blocked"] {
    color: #ef8b87;
  }
}

@media (max-width: 360px) {
  #printAssemblyRunReadinessSummary {
    flex-basis: 116px;
  }
}

/* Source: release-424.css */
/* Release 424: integrated per-run production plan editor. */

.print-assembly-run-plan-fields[hidden] {
  display: none;
}

.print-assembly-run-plan-fields {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  align-items: stretch;
  border-left: 1px solid rgba(23, 33, 43, 0.08);
}

#printAssemblyRunPlanStatus {
  display: grid;
  flex: 0 0 112px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#printAssemblyRunPlanStatus[data-state="override"] {
  color: #1167c9;
}

.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label {
  flex: 0 0 92px;
}

.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(1) {
  flex-basis: 146px;
}

.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(2),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(6) {
  flex-basis: 104px;
}

.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(3),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(4),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(5),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(7),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(8) {
  flex-basis: 88px;
}

.print-assembly-run-fields #togglePrintAssemblyRunPlanButton,
.print-assembly-run-plan-fields #savePrintAssemblyRunPlanButton,
.print-assembly-run-plan-fields #resetPrintAssemblyRunPlanButton {
  flex: 0 0 58px;
  width: 58px;
}

.print-assembly-run-fields #togglePrintAssemblyRunPlanButton[aria-expanded="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-run-fields #togglePrintAssemblyRunPlanButton img,
.print-assembly-run-plan-fields #savePrintAssemblyRunPlanButton img,
.print-assembly-run-plan-fields #resetPrintAssemblyRunPlanButton img {
  width: 15px;
  height: 15px;
  stroke-width: 1.7;
}

html[data-theme="dark"] .print-assembly-run-plan-fields {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] #printAssemblyRunPlanStatus[data-state="override"] {
  color: #70b6ff;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-run-plan-fields {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] #printAssemblyRunPlanStatus[data-state="override"] {
    color: #70b6ff;
  }
}

@media (max-width: 360px) {
  #printAssemblyRunPlanStatus {
    flex-basis: 102px;
  }

  .print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(1) {
    flex-basis: 132px;
  }
}

/* Source: release-425.css */
/* Release 425: coordinated per-run material stock planning. */

.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(1) {
  flex-basis: 146px;
}

.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(2),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(7),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(8) {
  flex-basis: 104px;
}

.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(3) {
  flex-basis: 176px;
}

.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(4),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(5),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(6),
.print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(9) {
  flex-basis: 88px;
}

#printAssemblyRunPlanUse {
  display: grid;
  flex: 0 0 112px;
  min-width: 0;
  place-items: center start;
  padding: 4px 8px;
  overflow: hidden;
  border-left: 1px solid rgba(23, 33, 43, 0.08);
  color: #68717b;
  font: 600 9px/11px system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#printAssemblyRunPlanUse[data-state="ready"] {
  color: #287247;
}

#printAssemblyRunPlanUse[data-state="short"],
#printAssemblyRunPlanStatus[data-state="short"] {
  color: #a94b31;
}

#printAssemblyRunPlanUse[data-state="unassigned"] {
  color: #7b6440;
}

html[data-theme="dark"] #printAssemblyRunPlanUse {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] #printAssemblyRunPlanUse[data-state="ready"] {
  color: #78c99a;
}

html[data-theme="dark"] #printAssemblyRunPlanUse[data-state="short"],
html[data-theme="dark"] #printAssemblyRunPlanStatus[data-state="short"] {
  color: #f0a18c;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #printAssemblyRunPlanUse {
    border-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="auto"] #printAssemblyRunPlanUse[data-state="ready"] {
    color: #78c99a;
  }

  html[data-theme="auto"] #printAssemblyRunPlanUse[data-state="short"],
  html[data-theme="auto"] #printAssemblyRunPlanStatus[data-state="short"] {
    color: #f0a18c;
  }
}

@media (max-width: 360px) {
  .print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(1) {
    flex-basis: 132px;
  }

  .print-assembly-plate-actions .print-assembly-run-fields .print-assembly-run-plan-fields label:nth-of-type(3) {
    flex-basis: 154px;
  }

  #printAssemblyRunPlanUse {
    flex-basis: 104px;
  }
}

/* Source: release-426.css */
/* Release 426: compact material transaction history and ledger export. */

.print-assembly-plate-actions .print-assembly-inventory-actions label:nth-of-type(2) {
  flex-basis: 210px;
}

.print-assembly-inventory-actions #exportPrintAssemblyInventoryHistoryButton {
  flex-basis: 52px;
  width: 52px;
}

#printAssemblyInventoryStatus[data-state="history"] {
  color: #435b76;
}

#printAssemblyInventoryHistory:disabled {
  opacity: 0.52;
}

html[data-theme="dark"] #printAssemblyInventoryStatus[data-state="history"] {
  color: #9ab9da;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #printAssemblyInventoryStatus[data-state="history"] {
    color: #9ab9da;
  }
}

@media (max-width: 360px) {
  .print-assembly-plate-actions .print-assembly-inventory-actions label:nth-of-type(2) {
    flex-basis: 190px;
  }

  .print-assembly-inventory-actions #exportPrintAssemblyInventoryHistoryButton {
    flex-basis: 50px;
    width: 50px;
  }
}

/* Source: release-427.css */
/* Release 427: auditable, reservation-aware material event reversal. */

.print-assembly-inventory-actions #reversePrintAssemblyInventoryHistoryButton {
  flex-basis: 56px;
  width: 56px;
}

.print-assembly-inventory-actions #reversePrintAssemblyInventoryHistoryButton:not(:disabled) {
  color: #8b4b20;
}

.print-assembly-inventory-actions #reversePrintAssemblyInventoryHistoryButton:disabled {
  opacity: 0.42;
}

html[data-theme="dark"] .print-assembly-inventory-actions #reversePrintAssemblyInventoryHistoryButton:not(:disabled) {
  color: #e1a777;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-inventory-actions #reversePrintAssemblyInventoryHistoryButton:not(:disabled) {
    color: #e1a777;
  }
}

@media (max-width: 360px) {
  .print-assembly-inventory-actions #reversePrintAssemblyInventoryHistoryButton {
    flex-basis: 54px;
    width: 54px;
  }
}

/* Source: release-428.css */
/* Release 428: integrated physical stock-count reconciliation. */

.print-assembly-inventory-actions #togglePrintAssemblyInventoryCountButton {
  flex-basis: 52px;
  width: 52px;
}

.print-assembly-inventory-actions #togglePrintAssemblyInventoryCountButton[aria-pressed="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-inventory-fields[hidden],
.print-assembly-inventory-count-fields[hidden] {
  display: none;
}

.print-assembly-inventory-count-fields {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
  scrollbar-width: none;
}

.print-assembly-inventory-count-fields::-webkit-scrollbar {
  display: none;
}

.print-assembly-plate-actions .print-assembly-inventory-count-fields label:first-child {
  flex-basis: 100px;
  border-left: 0;
}

.print-assembly-plate-actions .print-assembly-inventory-count-fields label:nth-of-type(2) {
  flex-basis: 96px;
}

.print-assembly-plate-actions .print-assembly-inventory-count-fields label:nth-of-type(3) {
  flex-basis: 132px;
}

.print-assembly-plate-actions .print-assembly-inventory-count-fields label:nth-of-type(4) {
  flex-basis: 150px;
}

#printAssemblyInventoryCountCurrent {
  display: grid;
  width: 100%;
  height: 24px;
  place-items: center start;
  overflow: hidden;
  color: var(--ink);
  font: 600 9px/1 system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-assembly-plate-actions .print-assembly-inventory-count-fields > button {
  flex: 0 0 50px;
  width: 50px;
  min-height: 41px;
}

.print-assembly-inventory-count-fields[data-state="short"] #printAssemblyInventoryCountQuantity,
.print-assembly-inventory-count-fields[data-state="invalid"] #printAssemblyInventoryCountQuantity {
  border-color: rgba(177, 60, 60, 0.6);
}

html[data-theme="dark"] .print-assembly-inventory-count-fields {
  border-color: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-inventory-count-fields {
    border-color: rgba(255, 255, 255, 0.09);
  }
}

@media (max-width: 360px) {
  .print-assembly-inventory-actions #togglePrintAssemblyInventoryCountButton {
    flex-basis: 50px;
    width: 50px;
  }

  .print-assembly-plate-actions .print-assembly-inventory-count-fields label:nth-of-type(3) {
    flex-basis: 124px;
  }
}

/* Source: release-429.css */
/* Release 429: portable, conflict-safe local material inventory backups. */

.print-assembly-inventory-actions #exportPrintAssemblyInventoryBackupButton,
.print-assembly-inventory-actions #importPrintAssemblyInventoryBackupButton {
  flex-basis: 56px;
  width: 56px;
}

.print-assembly-inventory-actions #printAssemblyInventoryBackupInput[hidden] {
  display: none;
}

.print-assembly-inventory-actions #exportPrintAssemblyInventoryBackupButton:disabled {
  opacity: 0.42;
}

@media (max-width: 360px) {
  .print-assembly-inventory-actions #exportPrintAssemblyInventoryBackupButton,
  .print-assembly-inventory-actions #importPrintAssemblyInventoryBackupButton {
    flex-basis: 54px;
    width: 54px;
  }
}

/* Source: release-430.css */
/* Release 430: browse every material item without changing plate assignment. */

.print-assembly-inventory-actions #togglePrintAssemblyInventoryBrowseButton {
  flex-basis: 48px;
  width: 48px;
}

.print-assembly-inventory-actions #togglePrintAssemblyInventoryBrowseButton[aria-pressed="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

html[data-theme="dark"] .print-assembly-inventory-actions #togglePrintAssemblyInventoryBrowseButton[aria-pressed="true"] {
  background: rgba(83, 155, 236, 0.13);
  color: #9fc8f4;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-inventory-actions #togglePrintAssemblyInventoryBrowseButton[aria-pressed="true"] {
    background: rgba(83, 155, 236, 0.13);
    color: #9fc8f4;
  }
}

@media (max-width: 360px) {
  .print-assembly-inventory-actions #togglePrintAssemblyInventoryBrowseButton {
    flex-basis: 46px;
    width: 46px;
  }
}

/* Source: release-431.css */
/* Release 431: reservation-aware low-stock and replenishment workflow. */

.print-assembly-inventory-actions #togglePrintAssemblyInventoryLowButton,
.print-assembly-inventory-actions #exportPrintAssemblyInventoryRestockButton {
  flex-basis: 46px;
  width: 46px;
}

.print-assembly-inventory-actions #togglePrintAssemblyInventoryRestockButton {
  flex-basis: 58px;
  width: 58px;
}

.print-assembly-inventory-actions #togglePrintAssemblyInventoryLowButton[aria-pressed="true"],
.print-assembly-inventory-actions #togglePrintAssemblyInventoryRestockButton[aria-pressed="true"] {
  background: rgba(20, 115, 230, 0.08);
  color: #1167c9;
}

.print-assembly-inventory-fields[hidden],
.print-assembly-inventory-count-fields[hidden],
.print-assembly-inventory-restock-fields[hidden] {
  display: none;
}

.print-assembly-inventory-restock-fields {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: stretch;
  overflow-x: auto;
  border-top: 1px solid rgba(23, 33, 43, 0.07);
  scrollbar-width: none;
}

.print-assembly-inventory-restock-fields::-webkit-scrollbar {
  display: none;
}

.print-assembly-plate-actions .print-assembly-inventory-restock-fields label:first-child {
  flex-basis: 100px;
  border-left: 0;
}

.print-assembly-plate-actions .print-assembly-inventory-restock-fields label:nth-of-type(2),
.print-assembly-plate-actions .print-assembly-inventory-restock-fields label:nth-of-type(3),
.print-assembly-plate-actions .print-assembly-inventory-restock-fields label:nth-of-type(4) {
  flex-basis: 94px;
}

.print-assembly-plate-actions .print-assembly-inventory-restock-fields label:nth-of-type(5) {
  flex-basis: 150px;
}

#printAssemblyInventoryRestockCurrent,
#printAssemblyInventoryRestockTotal {
  display: grid;
  width: 100%;
  height: 24px;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
  font: 600 9px/1 system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-assembly-plate-actions .print-assembly-inventory-restock-fields > button {
  flex: 0 0 50px;
  width: 50px;
  min-height: 41px;
}

.print-assembly-inventory-restock-fields[data-state="invalid"] #printAssemblyInventoryRestockQuantity {
  border-color: rgba(177, 60, 60, 0.6);
}

html[data-theme="dark"] .print-assembly-inventory-actions #togglePrintAssemblyInventoryLowButton[aria-pressed="true"],
html[data-theme="dark"] .print-assembly-inventory-actions #togglePrintAssemblyInventoryRestockButton[aria-pressed="true"] {
  background: rgba(83, 155, 236, 0.13);
  color: #9fc8f4;
}

html[data-theme="dark"] .print-assembly-inventory-restock-fields {
  border-color: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .print-assembly-inventory-actions #togglePrintAssemblyInventoryLowButton[aria-pressed="true"],
  html[data-theme="auto"] .print-assembly-inventory-actions #togglePrintAssemblyInventoryRestockButton[aria-pressed="true"] {
    background: rgba(83, 155, 236, 0.13);
    color: #9fc8f4;
  }

  html[data-theme="auto"] .print-assembly-inventory-restock-fields {
    border-color: rgba(255, 255, 255, 0.09);
  }
}

@media (max-width: 360px) {
  .print-assembly-inventory-actions #togglePrintAssemblyInventoryLowButton,
  .print-assembly-inventory-actions #exportPrintAssemblyInventoryRestockButton {
    flex-basis: 44px;
    width: 44px;
  }

  .print-assembly-inventory-actions #togglePrintAssemblyInventoryRestockButton {
    flex-basis: 56px;
    width: 56px;
  }

  .print-assembly-plate-actions .print-assembly-inventory-restock-fields label:nth-of-type(5) {
    flex-basis: 140px;
  }
}

/* Source: release-432.css */
/* Release 432: local supplier, SKU, storage, notes, and safe ordering metadata. */

.print-assembly-inventory-actions #openPrintAssemblyInventoryPurchaseButton {
  flex-basis: 50px;
  width: 50px;
}

.print-assembly-inventory-actions #openPrintAssemblyInventoryPurchaseButton:disabled {
  opacity: 0.42;
}

.print-assembly-plate-actions .print-assembly-inventory-fields label:nth-child(8) {
  flex-basis: 112px;
}

.print-assembly-plate-actions .print-assembly-inventory-fields label:nth-child(9) {
  flex-basis: 96px;
}

.print-assembly-plate-actions .print-assembly-inventory-fields label:nth-child(10) {
  flex-basis: 110px;
}

.print-assembly-plate-actions .print-assembly-inventory-fields label:nth-child(11) {
  flex-basis: 168px;
}

.print-assembly-plate-actions .print-assembly-inventory-fields label:nth-child(12) {
  flex-basis: 156px;
}

#printAssemblyInventoryPurchaseUrl:invalid:not(:placeholder-shown) {
  border-color: rgba(177, 60, 60, 0.6);
}

@media (max-width: 360px) {
  .print-assembly-inventory-actions #openPrintAssemblyInventoryPurchaseButton {
    flex-basis: 48px;
    width: 48px;
  }

  .print-assembly-plate-actions .print-assembly-inventory-fields label:nth-child(11) {
    flex-basis: 158px;
  }

  .print-assembly-plate-actions .print-assembly-inventory-fields label:nth-child(12) {
    flex-basis: 146px;
  }
}

/* Source: release-433.css */
/* Release 433: touch, Pencil, and mouse modifier-stack drag ordering. */

.preview3d-modifier-stack li:not(.preview3d-modifier-empty) {
  position: relative;
  grid-template-columns: 24px 28px minmax(0, 1fr) 30px;
}

.preview3d-modifier-stack .preview3d-modifier-drag-handle {
  width: 24px;
  cursor: grab;
  touch-action: none;
}

.preview3d-modifier-stack .preview3d-modifier-drag-handle:active {
  cursor: grabbing;
}

.preview3d-modifier-stack .preview3d-modifier-drag-handle img {
  width: 13px;
  height: 13px;
  opacity: 0.56;
}

.preview3d-modifier-stack ul.is-drag-reordering {
  overscroll-behavior: contain;
  user-select: none;
}

.preview3d-modifier-stack li.is-drag-source {
  opacity: 0.58;
}

.preview3d-modifier-stack li.is-drop-before::before,
.preview3d-modifier-stack li.is-drop-after::after {
  position: absolute;
  z-index: 2;
  right: 4px;
  left: 4px;
  height: 2px;
  border-radius: 1px;
  background: #1675dc;
  content: "";
  pointer-events: none;
}

.preview3d-modifier-stack li.is-drop-before::before {
  top: 0;
}

.preview3d-modifier-stack li.is-drop-after::after {
  bottom: 0;
}

.preview3d-modifier-stack li.is-drop-blocked {
  background: rgba(177, 60, 60, 0.07);
}

.preview3d-modifier-stack li.is-drop-blocked::before,
.preview3d-modifier-stack li.is-drop-blocked::after {
  background: #b13c3c;
}

html[data-theme="dark"] .preview3d-modifier-stack li.is-drop-before::before,
html[data-theme="dark"] .preview3d-modifier-stack li.is-drop-after::after {
  background: #67a8f5;
}

html[data-theme="dark"] .preview3d-modifier-stack li.is-drop-blocked {
  background: rgba(225, 119, 119, 0.1);
}

html[data-theme="dark"] .preview3d-modifier-stack li.is-drop-blocked::before,
html[data-theme="dark"] .preview3d-modifier-stack li.is-drop-blocked::after {
  background: #e17777;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-modifier-stack li.is-drop-before::before,
  html[data-theme="auto"] .preview3d-modifier-stack li.is-drop-after::after {
    background: #67a8f5;
  }

  html[data-theme="auto"] .preview3d-modifier-stack li.is-drop-blocked {
    background: rgba(225, 119, 119, 0.1);
  }

  html[data-theme="auto"] .preview3d-modifier-stack li.is-drop-blocked::before,
  html[data-theme="auto"] .preview3d-modifier-stack li.is-drop-blocked::after {
    background: #e17777;
  }
}

@media (max-width: 620px) {
  .preview3d-modifier-stack li:not(.preview3d-modifier-empty) {
    grid-template-columns: 26px 30px minmax(0, 1fr) 32px;
  }

  .preview3d-modifier-stack .preview3d-modifier-drag-handle {
    width: 26px;
  }
}

/* Source: release-434.css */
/* Release 434: bounded named modifier variants in the integrated stack. */

.preview3d-modifier-branch-bar {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 30px);
  align-items: center;
  border-bottom: 1px solid rgba(23, 33, 43, 0.08);
  background: rgba(255, 255, 255, 0.12);
}

.preview3d-modifier-branch-bar[hidden] {
  display: none;
}

.preview3d-modifier-branch-bar select {
  width: 100%;
  min-width: 0;
  height: 30px;
  margin: 0;
  padding: 0 24px 0 9px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid rgba(23, 33, 43, 0.075);
  border-radius: 0;
  background-color: transparent;
  color: #303944;
  font: 650 9px/1 system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-modifier-branch-bar button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #37414c;
}

.preview3d-modifier-branch-bar button + button {
  border-left: 1px solid rgba(23, 33, 43, 0.055);
}

.preview3d-modifier-branch-bar button img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0.76;
}

.preview3d-modifier-branch-bar button:disabled,
.preview3d-modifier-branch-bar select:disabled {
  opacity: 0.32;
}

.preview3d-modifier-branch-bar button:not(:disabled):active {
  background: rgba(20, 115, 230, 0.09);
}

html[data-theme="dark"] .preview3d-modifier-branch-bar {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(17, 20, 25, 0.12);
}

html[data-theme="dark"] .preview3d-modifier-branch-bar select,
html[data-theme="dark"] .preview3d-modifier-branch-bar button {
  border-color: rgba(255, 255, 255, 0.08);
  color: #eef2f7;
}

html[data-theme="dark"] .preview3d-modifier-branch-bar button img {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-modifier-branch-bar {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(17, 20, 25, 0.12);
  }

  html[data-theme="auto"] .preview3d-modifier-branch-bar select,
  html[data-theme="auto"] .preview3d-modifier-branch-bar button {
    border-color: rgba(255, 255, 255, 0.08);
    color: #eef2f7;
  }

  html[data-theme="auto"] .preview3d-modifier-branch-bar button img {
    filter: invert(1);
  }
}

@media (max-width: 620px) {
  .preview3d-modifier-branch-bar {
    min-height: 36px;
    grid-template-columns: minmax(0, 1fr) repeat(3, 32px);
  }

  .preview3d-modifier-branch-bar select,
  .preview3d-modifier-branch-bar button {
    height: 32px;
  }

  .preview3d-modifier-branch-bar button {
    width: 32px;
    min-width: 32px;
  }
}

/* Source: release-435.css */
/* Release 435: integrated procedural terrain tool for the 3D / Build category. */

.drawer-tool[data-icon="terrain"] {
  --drawer-icon: url("assets/lucide/waves.svg");
}

body .tool-flyout[data-group="build"][data-group-tool="terrain"] {
  max-height: min(520px, calc(100vh - 136px));
}

body .tool-flyout .terrain-flyout {
  align-content: start;
}

body .tool-flyout .terrain-dimension-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body .tool-flyout .terrain-dimension-grid label {
  min-width: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
}

body .tool-flyout .terrain-dimension-grid label > span {
  overflow: hidden;
  font-size: 9px;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .tool-flyout .terrain-dimension-grid input {
  grid-column: 1 !important;
  height: 28px !important;
  padding-inline: 7px !important;
  font-variant-numeric: tabular-nums;
}

body .tool-flyout .terrain-range-control {
  grid-template-columns: 55px minmax(0, 1fr) 37px !important;
}

body .tool-flyout .terrain-range-control input[type="range"] {
  grid-column: 2 !important;
  height: 24px !important;
  accent-color: var(--ios-accent, #1473e6);
}

body .tool-flyout .terrain-range-control output {
  grid-column: 3 !important;
}

body .tool-flyout .terrain-flyout [data-flyout-action="createTerrain"] img {
  opacity: 0.8;
}

@media (max-width: 420px) {
  body .tool-flyout[data-group="build"][data-group-tool="terrain"] {
    max-height: calc(100dvh - 128px);
  }

  body .tool-flyout .terrain-flyout {
    gap: 6px !important;
    padding-block: 8px !important;
  }
}

/* Source: release-436.css */
/* Release 436: integrated floor-plan-to-3D model conversion. */

.drawer-tool[data-icon="building-model"] {
  --drawer-icon: url("assets/lucide/house.svg");
}

body .tool-flyout[data-group="build"][data-group-tool="buildingModel"] {
  max-height: min(430px, calc(100vh - 136px));
}

body .tool-flyout .building-model-flyout {
  align-content: start;
}

body .tool-flyout .building-model-flyout > label:not(.flyout-toggle) select {
  font-variant-numeric: tabular-nums;
}

body .tool-flyout .building-model-flyout [data-flyout-action="createBuildingModel"] img {
  opacity: 0.82;
}

body .tool-flyout .building-model-flyout [data-building-model-status] {
  min-width: 0;
}

@media (max-width: 420px) {
  body .tool-flyout[data-group="build"][data-group-tool="buildingModel"] {
    max-height: calc(100dvh - 128px);
  }

  body .tool-flyout .building-model-flyout {
    gap: 6px !important;
    padding-block: 8px !important;
  }
}

/* Source: release-437.css */
/* Release 437: integrated non-destructive media clip timeline. */

.media-clip-panel {
  min-width: 0;
}

.media-clip-panel .media-timeline {
  position: relative;
  min-width: 0;
  padding: 9px 2px 0;
}

.media-clip-panel .media-timeline-track {
  position: absolute;
  inset: 15px 5px auto;
  height: 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line, #c9cdd2) 84%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--panel-2, #e9ebee) 86%, transparent);
  pointer-events: none;
}

.media-clip-panel .media-timeline-range {
  position: absolute;
  inset-block: -1px;
  left: 0;
  width: 0;
  border-block: 1px solid color-mix(in srgb, var(--ios-accent, #1473e6) 80%, #0000);
  background: color-mix(in srgb, var(--ios-accent, #1473e6) 52%, transparent);
}

.media-clip-panel .media-timeline-playhead {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 1px;
  background: var(--ink, #17191c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface, #fff) 65%, transparent);
}

.media-clip-panel #mediaTime {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: var(--ios-accent, #1473e6);
  background: transparent;
}

.media-clip-panel .media-timeline-timecodes {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  margin-top: 3px;
  color: var(--muted, #626971);
  font-size: 10px;
  line-height: 13px;
  font-variant-numeric: tabular-nums;
}

.media-clip-panel .media-timeline-timecodes span:nth-child(2) {
  color: var(--ink, #17191c);
  text-align: center;
}

.media-clip-panel .media-timeline-timecodes span:last-child {
  text-align: right;
}

.media-clip-panel .media-transport-row,
.media-clip-panel .media-clip-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line, #d4d7db);
  border-radius: 6px;
  background: var(--line, #d4d7db);
}

.media-clip-panel .media-transport-row button,
.media-clip-panel .media-clip-actions button {
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 5px 4px;
  border: 0;
  border-radius: 0;
  background: var(--surface, #fff);
  font-size: 10px;
  white-space: nowrap;
}

.media-clip-panel .media-transport-row button img,
.media-clip-panel .media-clip-actions button img {
  width: 15px;
  height: 15px;
  margin-inline-end: 3px;
  object-fit: contain;
}

.media-clip-panel .media-trim-row,
.media-clip-panel .media-playback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.media-clip-panel .media-trim-row label,
.media-clip-panel .media-playback-grid label {
  min-width: 0;
  margin: 0;
}

.media-clip-panel .media-trim-row input,
.media-clip-panel .media-playback-grid select {
  width: 100%;
  height: 30px;
  font-variant-numeric: tabular-nums;
}

.media-clip-panel .media-check-control {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid var(--line, #d4d7db);
  border-radius: 5px;
}

.media-clip-panel .media-check-control input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.media-clip-panel .media-volume-control {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 7px;
}

.media-clip-panel .media-volume-control input {
  width: 100%;
  min-width: 0;
  accent-color: var(--ios-accent, #1473e6);
}

.media-clip-panel .media-volume-control output {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

body .tool-flyout[data-group="photo"][data-group-tool="media"] {
  max-height: min(510px, calc(100vh - 136px));
}

body .tool-flyout .media-clip-flyout {
  align-content: start;
}

body .tool-flyout .media-clip-flyout [data-flyout-action="mediaMarkOut"] img {
  transform: rotate(180deg);
}

@media (max-width: 420px) {
  .media-clip-panel .media-transport-row button,
  .media-clip-panel .media-clip-actions button {
    min-height: 32px;
    font-size: 9px;
  }

  body .tool-flyout[data-group="photo"][data-group-tool="media"] {
    max-height: calc(100dvh - 128px);
  }
}

/* Source: release-438.css */
/* Release 438: exact local GIF frame timeline and compact frame controls. */

.media-clip-panel .gif-frame-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  padding-block: 2px;
  border-block: 1px solid var(--line, #d4d7db);
}

.media-clip-panel .gif-frame-controls[hidden] {
  display: none !important;
}

.media-clip-panel .media-transport-row,
.media-clip-panel .media-clip-actions {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 1px !important;
}

.media-clip-panel .media-trim-row,
.media-clip-panel .media-playback-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.media-clip-panel .media-transport-row button,
.media-clip-panel .media-clip-actions button {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 4px 2px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  line-height: 11px !important;
  white-space: nowrap !important;
}

.media-clip-panel .media-transport-row button img,
.media-clip-panel .media-clip-actions button img {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

.media-clip-panel .media-trim-row label,
.media-clip-panel .media-playback-grid > label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-column: auto !important;
  gap: 3px !important;
  padding: 0 !important;
}

.media-clip-panel .media-trim-row input,
.media-clip-panel .media-playback-grid select {
  height: 30px !important;
  padding: 4px 7px !important;
}

.media-clip-panel .media-check-control {
  display: flex !important;
  grid-template-columns: none !important;
  min-height: 30px !important;
  padding: 4px 7px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.media-clip-panel .media-check-control input[type="checkbox"] {
  position: relative;
  width: 30px !important;
  min-width: 30px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 9px !important;
  background-color: color-mix(in srgb, var(--muted, #626971) 28%, transparent) !important;
  background-image: radial-gradient(circle at 9px 50%, var(--surface, #fff) 0 6px, transparent 7px) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted, #626971) 30%, transparent);
}

.media-clip-panel .media-check-control input[type="checkbox"]:checked {
  background-color: var(--ios-accent, #1473e6) !important;
  background-image: radial-gradient(circle at 21px 50%, var(--surface, #fff) 0 6px, transparent 7px) !important;
}

.media-clip-panel .media-check-control input[type="checkbox"]:disabled {
  opacity: 0.42;
}

html body .app-shell .layers .media-clip-panel .media-playback-grid > label.media-audio-hidden {
  display: none !important;
}

.media-clip-panel .media-playback-grid > .media-volume-control {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: 45px minmax(0, 1fr) 46px !important;
  align-items: center !important;
  gap: 7px !important;
}

.media-clip-panel .media-timeline-track {
  display: block !important;
}

.media-clip-panel .media-timeline-timecodes {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
}

.media-clip-panel .gif-frame-stepper {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 30px !important;
  grid-column: auto !important;
  min-width: 0;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--line, #d4d7db);
  border-radius: 5px;
  background: var(--surface, #fff);
}

.media-clip-panel .gif-frame-stepper button {
  display: grid;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 30px !important;
  padding: 0 !important;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.media-clip-panel .gif-frame-stepper button:first-child {
  border-inline-end: 1px solid var(--line, #d4d7db);
}

.media-clip-panel .gif-frame-stepper button:last-child {
  border-inline-start: 1px solid var(--line, #d4d7db);
}

.media-clip-panel .gif-frame-stepper button:last-child img,
body .tool-flyout [data-flyout-action="gifNextFrame"] img {
  transform: rotate(180deg) !important;
}

.media-clip-panel .gif-frame-stepper img {
  width: 15px;
  height: 15px;
}

.media-clip-panel .gif-frame-stepper output {
  overflow: hidden;
  align-self: center;
  padding-inline: 4px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-clip-panel .gif-frame-delay {
  display: grid !important;
  grid-template-columns: auto minmax(42px, 1fr) auto !important;
  grid-column: auto !important;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0 7px !important;
  border: 1px solid var(--line, #d4d7db);
  border-radius: 5px;
  font-size: 10px;
}

.media-clip-panel .gif-frame-delay input {
  width: 100%;
  min-width: 0;
  height: 24px !important;
  padding: 0 4px !important;
  border: 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.media-clip-panel .gif-frame-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line, #d4d7db);
  border-radius: 5px;
  background: var(--line, #d4d7db);
}

.media-clip-panel .gif-frame-actions button {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface, #fff);
  font-size: 10px;
}

.media-clip-panel .gif-frame-actions img {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

body .tool-flyout[data-group="photo"][data-group-tool="media"] {
  max-height: min(620px, calc(100vh - 136px));
}

@media (max-width: 420px) {
  html body .app-shell .layers .media-clip-panel .gif-frame-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .tool-flyout[data-group="photo"][data-group-tool="media"] {
    max-height: calc(100dvh - 128px);
  }
}

/* Source: release-439.css */
/* Release 439: local animated GIF encoding and export controls. */

html body .app-shell .layers .media-clip-panel .gif-export-controls {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(88px, 1.4fr) !important;
  gap: 1px !important;
  overflow: hidden;
  border: 1px solid var(--line, #d4d7db);
  border-radius: 5px;
  background: var(--line, #d4d7db);
}

html body .app-shell .layers .media-clip-panel .gif-export-controls label {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 3px 5px !important;
  align-items: center !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface, #fff) !important;
  font-size: 10px !important;
}

html body .app-shell .layers .media-clip-panel .gif-export-controls select {
  width: 100% !important;
  min-width: 0 !important;
  height: 24px !important;
  padding: 1px 3px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 10px !important;
}

html body .app-shell .layers .media-clip-panel .gif-export-controls button {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--surface, #fff) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

html body .app-shell .layers .media-clip-panel .gif-export-controls button img {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

html body .app-shell .layers .media-clip-panel .gif-export-progress {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  margin: -3px 0 0 !important;
  border: 0 !important;
  accent-color: var(--ios-accent, #1473e6);
}

html body .app-shell .layers .media-clip-panel .gif-export-progress[hidden] {
  display: none !important;
}

body .tool-flyout[data-group="photo"][data-group-tool="media"] {
  max-height: min(660px, calc(100vh - 136px));
}

@media (max-width: 420px) {
  body .tool-flyout[data-group="photo"][data-group-tool="media"] {
    max-height: calc(100dvh - 128px);
  }
}

/* Source: release-440.css */
/* Release 440: local video clip recording and export controls. */

html body .app-shell .layers .media-clip-panel .video-export-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(92px, 1.2fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line, #d4d7db);
  border-radius: 5px;
  background: var(--line, #d4d7db);
}

html body .app-shell .layers .media-clip-panel .video-export-controls[hidden] {
  display: none !important;
}

html body .app-shell .layers .media-clip-panel .video-export-controls label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 3px 5px;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: var(--surface, #fff);
  font-size: 10px;
}

html body .app-shell .layers .media-clip-panel .video-export-controls select {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 1px 3px;
  border: 0;
  background: transparent;
  font-size: 10px;
}

html body .app-shell .layers .media-clip-panel .video-export-controls button {
  display: flex;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 4px 6px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 0;
  background: var(--surface, #fff);
  font-size: 10px;
  white-space: nowrap;
}

html body .app-shell .layers .media-clip-panel .video-export-controls button img {
  width: 14px;
  height: 14px;
}

html body .app-shell .layers .media-clip-panel .video-export-progress {
  display: block;
  width: 100%;
  height: 3px;
  margin: -3px 0 0;
  border: 0;
  accent-color: var(--ios-accent, #1473e6);
}

html body .app-shell .layers .media-clip-panel .video-export-progress[hidden] {
  display: none !important;
}

@media (max-width: 420px) {
  html body .app-shell .layers .media-clip-panel .video-export-controls {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(88px, 1.3fr);
  }
}

/* Source: release-441.css */
/* Release 441: integrated PDF form behavior and navigation controls. */

body .tool-flyout .pdf-form-field-adjustments {
  gap: 0;
  padding-bottom: 8px;
}

body .pdf-form-field-adjustments [hidden] {
  display: none !important;
}

body .pdf-form-heading {
  display: flex;
  min-height: 34px;
  padding: 0 2px 5px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--curve-line, #d9dde2);
}

body .pdf-form-heading strong {
  font-size: 12px;
  font-weight: 650;
}

body .pdf-form-heading span {
  color: var(--curve-muted, #66717d);
  font-size: 10px;
}

body .pdf-form-section {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--curve-line, #d9dde2);
  background: transparent;
}

body .pdf-form-section > summary {
  display: flex;
  min-height: 36px;
  padding: 0 3px;
  align-items: center;
  justify-content: space-between;
  color: var(--curve-text, #17212b);
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  list-style: none;
}

body .pdf-form-section > summary::-webkit-details-marker {
  display: none;
}

body .pdf-form-section > summary::after {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 120ms ease;
}

body .pdf-form-section[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

body .pdf-form-section-body {
  display: grid;
  gap: 1px;
  padding: 0 0 7px;
}

body .tool-flyout .pdf-form-section-body > label:not(.flyout-toggle),
body .tool-flyout .pdf-form-pair label {
  display: grid;
  grid-template-columns: minmax(82px, 0.82fr) minmax(0, 1.18fr);
  min-height: 32px;
  margin: 0;
  padding: 2px 3px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 10.5px;
}

body .tool-flyout .pdf-form-section-body input[type="text"],
body .tool-flyout .pdf-form-section-body input[type="number"],
body .tool-flyout .pdf-form-section-body select {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 2px 5px;
  border: 1px solid var(--curve-line, #d9dde2);
  border-radius: 3px;
  background: var(--curve-panel, #f8f9fa);
  color: var(--curve-text, #17212b);
  font-size: 11px;
}

body .tool-flyout .pdf-form-section-body .flyout-toggle {
  min-height: 31px;
  margin: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 10.5px;
}

body .pdf-form-color-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 44px;
  gap: 1px;
}

body .tool-flyout .pdf-form-color-row label {
  display: grid;
  grid-template-columns: 1fr 28px;
  min-width: 0;
  margin: 0;
  padding: 3px 4px;
  align-items: center;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 9.5px;
}

body .tool-flyout .pdf-form-color-row input[type="color"] {
  width: 26px;
  height: 26px;
  padding: 2px;
  border-radius: 3px;
}

body .pdf-form-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}

body .tool-flyout .pdf-form-pair label {
  grid-template-columns: 1fr;
  gap: 1px;
}

body .pdf-form-sources {
  display: grid;
  gap: 4px;
  padding: 5px 3px 7px;
}

body .pdf-form-sources > span {
  color: var(--curve-muted, #66717d);
  font-size: 9.5px;
  font-weight: 600;
}

body .pdf-form-sources > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--curve-line, #d9dde2);
  border-radius: 3px;
  background: var(--curve-line, #d9dde2);
}

body .tool-flyout .pdf-form-source {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  min-height: 31px;
  margin: 0;
  padding: 3px 5px;
  align-items: center;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: var(--curve-panel, #f8f9fa);
  font-size: 10px;
}

body .tool-flyout .pdf-form-source input {
  width: 16px;
  height: 16px;
}

body .tool-flyout .pdf-form-source span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .pdf-form-empty,
body .pdf-form-preview {
  display: block;
  margin: 0;
  padding: 7px;
  color: var(--curve-muted, #66717d);
  font-size: 10px;
  line-height: 1.35;
}

body .pdf-form-preview {
  border-left: 2px solid var(--ios-accent, #1473e6);
  color: var(--curve-text, #17212b);
}

@media (max-width: 420px) {
  body .tool-flyout .pdf-form-section-body > label:not(.flyout-toggle) {
    grid-template-columns: minmax(76px, 0.78fr) minmax(0, 1.22fr);
  }

  body .pdf-form-sources > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Source: release-442.css */
/* Release 442: continuous 3D walkthrough controls. */

body .preview3d-walk-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(23, 33, 43, 0.15);
  border-radius: 5px;
  background: rgba(23, 33, 43, 0.12);
}

body .preview3d-walk-settings[hidden] {
  display: none !important;
}

body .preview3d-walk-speed {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 42px;
  grid-column: 1 / -1;
  min-height: 34px;
  padding: 3px 7px;
  align-items: center;
  gap: 5px;
  background: rgba(250, 251, 252, 0.98);
  font-size: 10px;
}

body .preview3d-walk-speed input {
  width: 100%;
  min-width: 0;
  accent-color: #167c80;
}

body .preview3d-walk-speed output {
  color: #58636f;
  font-size: 10px;
  text-align: right;
}

body .preview3d-walk-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  min-height: 32px;
  padding: 3px 7px;
  align-items: center;
  gap: 4px;
  background: rgba(250, 251, 252, 0.98);
  font-size: 10px;
}

body .preview3d-walk-toggle input {
  width: 17px;
  height: 17px;
  accent-color: #167c80;
}

body .preview3d-camera-pad button {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body .preview3d-camera-pad button img {
  width: 16px;
  height: 16px;
  pointer-events: none;
  opacity: 0.86;
}

body .preview3d-camera-pad button.is-held {
  border-color: #167c80;
  background: rgba(22, 124, 128, 0.15);
  box-shadow: inset 0 0 0 1px rgba(22, 124, 128, 0.22);
}

@media (max-width: 420px) {
  body .preview3d-camera-panel {
    width: min(294px, calc(100vw - 16px));
    max-height: calc(100dvh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  body .preview3d-camera-pad {
    grid-template-columns: repeat(3, 40px);
  }

  body .preview3d-camera-pad button {
    width: 40px;
    height: 36px;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body .preview3d-walk-speed,
  html[data-theme="auto"] body .preview3d-walk-toggle,
  html[data-theme="dark"] body .preview3d-walk-speed,
  html[data-theme="dark"] body .preview3d-walk-toggle {
    background: rgba(33, 39, 46, 0.98);
    color: #f3f5f7;
  }

  html[data-theme="auto"] body .preview3d-walk-speed output,
  html[data-theme="dark"] body .preview3d-walk-speed output {
    color: #bdc5ce;
  }
}

/* Source: release-443.css */
/* Release 443: compact bristle-aware Mixer Brush controls. */

body .mixer-brush-grid {
  align-items: end;
}

body .mixer-brush-grid select,
body .mixer-brush-grid input[type="range"] {
  min-width: 0;
  max-width: 100%;
}

body .mixer-brush-well-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--curve-line, #d0d1d4);
  border-radius: 5px;
  background: var(--curve-line, #d0d1d4);
}

body .layers .mixer-brush-well-actions button {
  display: inline-flex !important;
  min-width: 0;
  min-height: 32px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--curve-panel, #ffffff) !important;
  color: var(--curve-ink, #151619) !important;
  font-size: 10px !important;
  font-weight: 600;
}

body .layers .mixer-brush-well-actions button:active {
  background: rgba(22, 124, 128, 0.12) !important;
}

body .layers .mixer-brush-well-actions img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.82;
}

body .tool-flyout .mixer-brush-flyout-settings > strong {
  letter-spacing: 0;
}

body .tool-flyout .mixer-brush-flyout-settings .flyout-toggle {
  min-height: 30px;
}

@media (max-width: 420px) {
  body .layers .mixer-brush-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body .layers .mixer-brush-grid .compact-field,
  body .layers .mixer-brush-clean-toggle {
    min-width: 0;
    font-size: 10px !important;
  }

  body .layers .mixer-brush-grid .retouch-range {
    grid-template-columns: minmax(0, 1fr) 34px;
  }
}

@media (max-width: 350px) {
  body .layers .mixer-brush-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Source: release-444.css */
/* Release 444: integrated History Brush and Art History Brush controls. */

.drawer-tool[data-icon="history-brush"] {
  --drawer-icon: url("assets/lucide/history.svg");
}

.drawer-tool[data-icon="art-history-brush"] {
  --drawer-icon: url("assets/lucide/palette.svg");
}

body .history-brush-controls[hidden],
body .art-history-controls[hidden] {
  display: none !important;
}

body .history-brush-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.42fr);
  gap: 6px;
  align-items: end;
}

body .history-brush-grid > button {
  display: inline-flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border: 1px solid var(--curve-line, #d0d1d4);
  border-radius: 5px;
  background: var(--curve-panel, #ffffff);
  color: var(--curve-ink, #151619);
  font-size: 10px;
  font-weight: 600;
}

body .history-brush-grid > button img {
  width: 14px;
  height: 14px;
  opacity: 0.82;
}

body .history-brush-grid > button:disabled {
  opacity: 0.42;
}

body .art-history-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 6px;
}

body .art-history-controls > :first-child {
  grid-column: 1 / -1;
}

body .history-brush-grid > .mini-status {
  grid-column: 1 / -1;
  margin: 0;
}

body .tool-flyout .history-brush-flyout-settings > strong {
  letter-spacing: 0;
}

@media (max-width: 420px) {
  body .layers .history-brush-grid {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    gap: 6px !important;
  }

  body .history-brush-grid .compact-field,
  body .history-brush-grid > button {
    min-width: 0;
    font-size: 10px !important;
  }
}

@media (max-width: 350px) {
  body .layers .history-brush-grid,
  body .art-history-controls {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .history-brush-grid > button,
  body .art-history-controls > :first-child {
    grid-column: 1;
  }
}

/* Source: release-445.css */
/* Release 445: compact integrated History panel and named snapshots. */

.drawer-tool[data-icon="history"] {
  --drawer-icon: url("assets/lucide/history.svg");
}

body .history-panel {
  gap: 10px;
}

body .history-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(104px, 0.8fr) 72px;
  gap: 6px;
  align-items: end;
}

body .history-create-row > * {
  min-width: 0;
}

body .history-create-row > button,
body .history-panel-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  border: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-radius: 5px;
  background: var(--curve-panel, var(--panel, #fff));
  color: var(--curve-ink, var(--ink, #141922));
  font-size: 10px;
  font-weight: 600;
}

body .history-create-row > button img,
body .history-panel-actions button img,
body .history-entry-icon img {
  width: 15px;
  height: 15px;
}

body .history-list-section {
  min-width: 0;
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .history-list-section > header {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body .history-list-section > header h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

body .history-list-section > header output {
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 10px;
}

body .history-list-section > header select {
  width: 66px;
  min-height: 28px;
  padding: 3px 22px 3px 7px;
  border-radius: 4px;
  font-size: 10px;
}

body .history-entry-list {
  display: grid;
  max-height: 228px;
  overflow-y: auto;
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .history-entry {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 5px 4px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--curve-line, #d8dde6) 72%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--curve-ink, var(--ink, #141922));
  text-align: left;
}

body .history-entry:last-child {
  border-bottom: 0;
}

body .history-entry.is-selected {
  background: var(--curve-active, #e8f1ff);
  box-shadow: inset 3px 0 0 var(--curve-accent, #267ff3);
}

body .history-entry-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
}

body .history-entry-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

body .history-entry-copy strong,
body .history-entry-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

body .history-entry-copy strong {
  font-size: 11px;
  font-weight: 650;
}

body .history-entry-copy small,
body .history-entry-time,
body .history-empty {
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 9px;
}

body .history-entry-time {
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

body .history-empty {
  min-height: 42px;
  padding: 12px 4px;
}

body .history-panel-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body .history-panel-actions button:disabled,
body .history-create-row > button:disabled {
  opacity: 0.42;
}

body .history-save-toggle {
  margin: 0;
}

body .history-panel > .mini-status {
  margin: 0;
}

@media (max-width: 420px) {
  body .layers .history-create-row {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 0.76fr) 66px !important;
    gap: 5px !important;
  }

  body .history-create-row .compact-field,
  body .history-create-row > button,
  body .history-panel-actions button {
    min-width: 0;
    font-size: 10px !important;
  }

  body .history-entry-list {
    max-height: min(228px, 29vh);
  }
}

@media (max-width: 350px) {
  body .layers .history-create-row {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.8fr) !important;
  }

  body .history-create-row > button {
    grid-column: 1 / -1;
  }

  body .history-entry-time {
    display: none;
  }
}

/* Source: release-446.css */
/* Release 446: integrated Photoshop-style Actions automation. */

.drawer-tool[data-icon="actions"] {
  --drawer-icon: url("assets/lucide/list-checks.svg");
}

body .actions-panel {
  gap: 9px;
}

body .actions-sticky-controls {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  gap: 6px;
  padding: 2px 0 7px;
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
  background: var(--curve-panel, var(--panel, #fff));
}

body .actions-create-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.72fr) minmax(0, 1.28fr) 58px;
  gap: 5px;
  align-items: end;
}

body .actions-create-row > *,
body .actions-library-row > *,
body .action-command-grid > * {
  min-width: 0;
}

body .actions-transport {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .actions-transport button,
body .actions-library-row button,
body .actions-create-row > button,
body .action-command-grid > button,
body .action-step-row button {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-radius: 0;
  background: transparent;
  color: var(--curve-ink, var(--ink, #141922));
  font-size: 9px;
  font-weight: 600;
}

body .actions-transport button:last-child,
body .actions-library-row button:last-child {
  border-right: 0;
}

body .actions-create-row > button,
body .action-command-grid > button {
  border: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-radius: 4px;
}

body .actions-transport button img,
body .actions-library-row button img,
body .actions-create-row button img,
body .action-command-grid button img,
body .action-step-row button img,
body .action-row img {
  width: 14px;
  height: 14px;
}

body .actions-transport button:disabled,
body .actions-library-row button:disabled,
body .actions-create-row button:disabled,
body .action-command-grid button:disabled,
body .action-step-row button:disabled {
  opacity: 0.38;
}

body .actions-transport button.is-recording {
  background: color-mix(in srgb, #d93025 8%, transparent);
  color: #a51e18;
}

body .action-record-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d93025;
}

body .actions-library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 70px;
  align-items: end;
}

body .actions-library-row button {
  min-height: 33px;
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .action-list,
body .action-step-list {
  display: grid;
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .action-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  min-height: 46px;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--curve-line, #d8dde6) 72%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--curve-ink, var(--ink, #141922));
  text-align: left;
}

body .action-row:last-child,
body .action-step-row:last-child {
  border-bottom: 0;
}

body .action-row.is-selected,
body .action-step-row.is-selected {
  background: var(--curve-active, #e8f1ff);
  box-shadow: inset 3px 0 0 var(--curve-accent, #267ff3);
}

body .action-row-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

body .action-row-copy strong,
body .action-row-copy small,
body .action-step-copy span,
body .action-step-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

body .action-row-copy strong,
body .action-step-copy span {
  font-size: 11px;
  font-weight: 650;
}

body .action-row-copy small,
body .action-step-copy small,
body .action-empty {
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 9px;
}

body .action-step-section {
  min-width: 0;
}

body .action-step-section > header {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
}

body .action-step-section > header h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0;
}

body .action-step-section > header output {
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 10px;
}

body .action-step-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px 28px 28px;
  min-height: 42px;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--curve-line, #d8dde6) 72%, transparent);
}

body .action-step-copy {
  display: grid;
  min-width: 0;
}

body .action-step-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: auto;
}

body .action-step-row button {
  width: 28px;
  min-height: 28px;
  border: 0;
}

body .action-step-row button[data-action-step-move="up"] img {
  transform: rotate(90deg);
}

body .action-step-row button[data-action-step-move="down"] img {
  transform: rotate(-90deg);
}

body .action-command-editor {
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .action-command-editor > summary {
  min-height: 34px;
  padding: 8px 2px;
  font-size: 11px;
  font-weight: 700;
}

body .action-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(66px, 0.65fr)) 72px;
  gap: 5px;
  padding: 0 0 7px;
  align-items: end;
}

body .action-color-field input[type="color"] {
  width: 100%;
}

body .action-empty {
  min-height: 42px;
  padding: 12px 5px;
}

body .actions-panel > .mini-status {
  margin: 0;
}

@media (max-width: 420px) {
  body .actions-create-row {
    grid-template-columns: minmax(78px, 0.7fr) minmax(0, 1.3fr) 52px;
  }

  body .actions-transport button {
    min-height: 36px;
  }

  body .actions-transport button span:not(.action-record-dot) {
    display: none;
  }

  body .action-command-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .action-command-field,
  body .action-command-grid > button {
    grid-column: 1 / -1;
  }

  body .action-list,
  body .action-step-list {
    max-height: min(210px, 25vh);
  }
}

@media (max-width: 350px) {
  body .actions-create-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .actions-create-row > button {
    grid-column: 1 / -1;
  }

  body .actions-library-row {
    grid-template-columns: minmax(0, 1fr) 58px 58px;
  }

  body .actions-library-row button span {
    display: none;
  }
}

/* Source: release-447.css */
/* Release 447: compact project-persistent Layer Comps. */

body .layer-comps-panel {
  margin: 0;
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-radius: 0;
}

body .layer-comps-panel > summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 4px;
  list-style: none;
  cursor: pointer;
}

body .layer-comps-panel > summary::-webkit-details-marker {
  display: none;
}

body .layer-comps-panel > summary > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

body .layer-comps-panel > summary img {
  width: 16px;
  height: 16px;
}

body .layer-comps-panel > summary strong {
  font-size: 11px;
  letter-spacing: 0;
}

body .layer-comps-panel > summary output {
  min-width: 18px;
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 10px;
  text-align: right;
}

body .layer-comp-editor {
  display: grid;
  gap: 6px;
  padding: 0 3px 7px;
}

body .layer-comp-create-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 54px;
  gap: 5px;
  align-items: end;
}

body .layer-comp-create-row > * {
  min-width: 0;
}

body .layer-comp-create-row label {
  display: grid;
  gap: 3px;
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 9px;
}

body .layer-comp-create-row input {
  width: 100%;
  min-width: 0;
}

body .layer-comp-create-row button,
body .layer-comp-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 33px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-radius: 0;
  background: transparent;
  color: var(--curve-ink, var(--ink, #141922));
  font-size: 9px;
  font-weight: 600;
}

body .layer-comp-create-row button {
  border: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-radius: 4px;
}

body .layer-comp-create-row button img,
body .layer-comp-actions button img,
body .layer-comp-row img {
  width: 14px;
  height: 14px;
}

body .layer-comp-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .layer-comp-options label {
  display: flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-right: 1px solid var(--curve-line, var(--line, #d8dde6));
  font-size: 9px;
}

body .layer-comp-options label:last-child {
  border-right: 0;
}

body .layer-comp-options input {
  width: 15px;
  height: 15px;
  margin: 0;
}

body .layer-comp-list {
  display: grid;
  max-height: 174px;
  overflow-y: auto;
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .layer-comp-row {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  min-height: 43px;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--curve-line, #d8dde6) 72%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--curve-ink, var(--ink, #141922));
  text-align: left;
}

body .layer-comp-row:last-child {
  border-bottom: 0;
}

body .layer-comp-row.is-selected {
  background: var(--curve-active, #e8f1ff);
  box-shadow: inset 3px 0 0 var(--curve-accent, #267ff3);
}

body .layer-comp-row.has-warning .layer-comp-mark {
  color: #9a6110;
}

body .layer-comp-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

body .layer-comp-copy strong,
body .layer-comp-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

body .layer-comp-copy strong {
  font-size: 11px;
  font-weight: 650;
}

body .layer-comp-copy small,
body .layer-comp-empty,
body .layer-comp-layer-count {
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 9px;
}

body .layer-comp-actions {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .layer-comp-actions button:last-child {
  border-right: 0;
}

body .layer-comp-actions button:disabled,
body .layer-comp-create-row button:disabled {
  opacity: 0.38;
}

body #nextLayerCompButton img {
  transform: rotate(180deg);
}

body .layer-comp-empty {
  min-height: 42px;
  padding: 12px 5px;
}

body .layer-comp-editor > .mini-status {
  margin: 0;
}

@media (max-width: 420px) {
  body .layer-comp-create-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 48px;
  }

  body .layer-comp-actions button span {
    display: none;
  }

  body .layer-comp-actions button {
    min-height: 36px;
  }
}

@media (max-width: 350px) {
  body .layer-comp-create-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .layer-comp-create-row > button {
    grid-column: 1 / -1;
  }

  body .layer-comp-options label {
    gap: 3px;
    font-size: 8px;
  }
}

/* Source: release-448.css */
/* Release 448: compact layer filtering and color labels. */

body .layer-filter-panel {
  margin: 0;
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-radius: 0;
}

body .layer-filter-panel > summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 4px;
  list-style: none;
  cursor: pointer;
}

body .layer-filter-panel > summary::-webkit-details-marker {
  display: none;
}

body .layer-filter-panel > summary > span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

body .layer-filter-panel > summary img {
  width: 16px;
  height: 16px;
}

body .layer-filter-panel > summary strong {
  font-size: 11px;
  letter-spacing: 0;
}

body .layer-filter-panel > summary output {
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 10px;
}

body .layer-filter-panel.has-active-filter > summary {
  box-shadow: inset 3px 0 0 var(--curve-accent, #267ff3);
}

body .layer-filter-controls {
  display: grid;
  gap: 6px;
  padding: 0 3px 7px;
}

body .layer-filter-controls label {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 9px;
}

body .layer-filter-controls input,
body .layer-filter-controls select {
  width: 100%;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  border-radius: 4px;
  font-size: 11px;
}

body .layer-filter-menus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 34px;
  gap: 5px;
  align-items: end;
}

body #layerFilterResetButton {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  margin: 0;
  border: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-radius: 4px;
  background: transparent;
}

body #layerFilterResetButton img {
  width: 14px;
  height: 14px;
}

body .layer-label-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-bottom: 1px solid var(--curve-line, var(--line, #d8dde6));
}

body .layer-label-row > span {
  color: var(--curve-muted, var(--muted, #69717f));
  font-size: 9px;
}

body .layer-label-swatches {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

body .layer-label-swatches button {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--curve-ink, #141922) 20%, transparent);
  border-radius: 50%;
  background: var(--layer-label-swatch, transparent);
}

body .layer-label-swatches button img {
  width: 11px;
  height: 11px;
}

body .layer-label-swatches [data-layer-label="red"] { --layer-label-swatch: #d34a43; }
body .layer-label-swatches [data-layer-label="orange"] { --layer-label-swatch: #d97a2b; }
body .layer-label-swatches [data-layer-label="yellow"] { --layer-label-swatch: #c79a18; }
body .layer-label-swatches [data-layer-label="green"] { --layer-label-swatch: #3f8f62; }
body .layer-label-swatches [data-layer-label="blue"] { --layer-label-swatch: #3f78bd; }
body .layer-label-swatches [data-layer-label="violet"] { --layer-label-swatch: #8165b5; }
body .layer-label-swatches [data-layer-label="gray"] { --layer-label-swatch: #7d838d; }

body #selectMatchingLayersButton {
  display: inline-flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0 7px;
  border: 0;
  border-left: 1px solid var(--curve-line, var(--line, #d8dde6));
  border-radius: 0;
  background: transparent;
  font-size: 9px;
  font-weight: 600;
}

body #selectMatchingLayersButton img {
  width: 14px;
  height: 14px;
}

body #selectMatchingLayersButton:disabled,
body .layer-label-swatches button:disabled {
  opacity: 0.36;
}

body .layer-filter-controls > .mini-status {
  margin: 0;
}

body #layerList > li[data-layer-color] {
  position: relative;
}

body #layerList > li[data-layer-color]::before {
  position: absolute;
  inset: 5px auto 5px 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--layer-row-label);
  content: "";
}

body #layerList > li[data-layer-color="red"] { --layer-row-label: #d34a43; }
body #layerList > li[data-layer-color="orange"] { --layer-row-label: #d97a2b; }
body #layerList > li[data-layer-color="yellow"] { --layer-row-label: #c79a18; }
body #layerList > li[data-layer-color="green"] { --layer-row-label: #3f8f62; }
body #layerList > li[data-layer-color="blue"] { --layer-row-label: #3f78bd; }
body #layerList > li[data-layer-color="violet"] { --layer-row-label: #8165b5; }
body #layerList > li[data-layer-color="gray"] { --layer-row-label: #7d838d; }

@media (max-width: 420px) {
  body .layer-filter-menus {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 32px;
    gap: 3px;
  }

  body .layer-filter-controls select {
    padding-inline: 4px 18px;
    font-size: 10px;
  }

  body .layer-label-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body .layer-label-row > span {
    display: none;
  }

  body #selectMatchingLayersButton span {
    display: none;
  }

  body #selectMatchingLayersButton {
    width: 34px;
    min-width: 34px;
    padding: 0;
  }
}

@media (max-width: 350px) {
  body .layer-filter-menus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body #layerFilterResetButton {
    grid-column: 2;
    justify-self: end;
  }

  body .layer-label-swatches {
    justify-content: flex-start;
    gap: 3px;
  }

  body .layer-label-swatches button {
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
  }
}

/* Source: release-449.css */
/* Release 449: persistent linked layers and transform-aware movement. */

body .layer-state-badges .layer-link-badge {
  display: inline-grid;
  width: 15px;
  min-width: 15px;
  height: 15px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body .layer-state-badges .layer-link-badge img {
  width: 12px;
  height: 12px;
}

body .layer-state-badges .layer-link-badge.is-suspended {
  color: #a2403d;
  opacity: 0.72;
}

body #linkLayersButton.is-active,
body #selectLinkedLayersButton.is-active,
body #suspendLinkedLayerButton.is-active {
  background: var(--curve-active, #e8f1ff);
  box-shadow: inset 3px 0 0 var(--curve-accent, #267ff3);
}

body #suspendLinkedLayerButton.is-active {
  color: #8f3834;
}

@media (max-width: 420px) {
  body .layer-more-grid #linkLayersButton,
  body .layer-more-grid #unlinkLayersButton,
  body .layer-more-grid #selectLinkedLayersButton,
  body .layer-more-grid #suspendLinkedLayerButton {
    min-height: 38px;
  }
}

/* Source: release-450.css */
/* Release 450: lighter, consistent interface typography. */

body .app-shell {
  font-synthesis: none;
  font-weight: 400;
}

body .app-shell button,
body .app-shell input,
body .app-shell select,
body .app-shell textarea,
body .app-shell output {
  font-family: inherit;
  font-weight: 400 !important;
}

body .app-shell strong,
body .app-shell h1,
body .app-shell h2,
body .app-shell h3,
body .app-shell h4 {
  font-weight: 500 !important;
}

/* Document title and top actions. */
body .document-chip strong,
body .document-title h1,
body .topbar::after {
  font-weight: 500 !important;
}

body .document-action-menu button,
body .document-action-menu button span,
body .mode-switcher button,
body .topbar .zoom-actions button,
body .topbar .zoom-actions #zoomLabel,
body #fitButton,
body .view-actions select,
body .canvas-rulers {
  font-weight: 400 !important;
}

/* Fixed tool rails, flyouts, and workflow navigation. */
body .sidebar .tool,
body .sidebar .tool span,
body .app-frame-right-nav button,
body .app-frame-right-nav button span,
body .tool-drawer h3,
body .drawer-tool,
body .tool-flyout button,
body .tool-flyout button .tool-state,
body .tool-flyout .flyout-adjustments > strong,
body .workflow-actions button,
body .tool-options label,
body .tool-options button,
body .bottom-workflows button,
body .bottom-workflows button[data-workflow],
body .bottom-workflows button::after {
  font-weight: 400 !important;
}

body .tool-flyout .flyout-head strong {
  font-weight: 500 !important;
}

/* Inspector titles and compact sheet headings. */
body .inspector-title h2,
body .layers .inspector-title h2,
body .inspector-title h2::after,
body .layers .inspector-title h2::after,
body .layers > .panel h2,
body .layers > .panel h3,
body .layers > .inspector-view[data-inspector-view="artboard"] > .panel > h2,
body .layers .panel-heading h2,
body .layers .panel-heading h2::after,
body .layers .panel:has(#layerList) .panel-heading h2,
body .layers .panel:has(#layerList) .panel-heading h2::after,
body .layers > .panel:nth-of-type(2) .panel-heading h2::after,
body .mobile-sheet-head h2,
body .history-list-section > header h3,
body .layers .library-section > h3,
body .layers .layer-add-menu > header strong,
body .layers .layer-more-actions > header strong {
  font-weight: 500 !important;
}

body .layers .panel:has(#layerList) .panel-heading::before,
body .layers > .panel:has(#layerList) .panel-heading::before,
body .layers > .panel:nth-of-type(2) .panel-heading::before,
body .mobile-sheet-head button,
body .mobile-layer-row strong {
  font-weight: 400 !important;
}

/* Inspector tabs, menus, summaries, and properties. */
body .sheet-select-button,
body .layers .sheet-select-button,
body .layers .inspector-tabs button,
body .layers .style-section-nav button,
body .layers .style-section-nav button.is-active,
body .layers .library-section-tabs button,
body .layers .library-section-tabs button.is-active,
body .layers .library-actions button,
body .layers .layer-view-switcher button,
body .layers .layer-panel-actions button,
body .layers .layer-primary-toolbar button,
body .layers .layer-add-menu button,
body .layers .layer-add-menu button span,
body .layers .layer-more-grid button,
body .layers .layer-more-actions .layer-more-grid button span,
body .layers .layer-symbol-actions button,
body .layers .layer-standard-actions span,
body .layers .layer-more-actions summary,
body .layers details > summary,
body .layers .style-inspector-section summary,
body .layers .layer-appearance-panel > summary,
body .layers .layer-appearance-panel > summary > span,
body .layers .layer-appearance-panel > summary > strong,
body .layers .layer-compact-controls .layer-appearance-panel > summary > span,
body .layers .layer-compact-controls .layer-appearance-panel > summary > strong,
body .layers .layer-compact-controls > label > span,
body .layers .layer-compact-controls > label > select,
body .layers .layer-count-badge,
body .layers .library-asset,
body .layers .catalog-asset {
  font-weight: 400 !important;
}

/* Layer rows stay readable without becoming the heaviest text on screen. */
body .layer-name > span:first-child,
body .layers .layer-name > span:first-child {
  font-weight: 500 !important;
}

body .layer-name .layer-kind,
body .layers .layer-name .layer-kind,
body .layer-state-badges,
body .layer-comp-copy strong,
body .history-entry-copy strong,
body .action-row-copy strong,
body .action-step-copy span {
  font-weight: 400 !important;
}

/* Feature panels added in recent releases use the same restrained hierarchy. */
body .pdf-form-heading strong,
body .pdf-form-sources > span,
body .layers .mixer-brush-well-actions button,
body .history-brush-grid > button,
body .history-create-row > button,
body .history-panel-actions button,
body .actions-transport button,
body .actions-library-row button,
body .actions-create-row > button,
body .action-command-grid > button,
body .action-step-row button,
body .action-command-editor > summary,
body .layer-comp-create-row button,
body .layer-comp-actions button,
body #selectMatchingLayersButton,
body .resize-surface .modal-header button,
body .resize-apply {
  font-weight: 400 !important;
}

/* Old text-based icon fallbacks should also remain thin. */
body::before,
body::after,
body .ios-menu-button::before,
body #mobileShareButton::before,
body .shortcut-hint,
body .mark {
  font-weight: 400 !important;
}

/* Source: release-451.css */
/* Release 451: integrated Smart Object content editing. */

.smart-object-edit-bar[hidden] {
  display: none !important;
}

.smart-object-edit-bar {
  position: absolute;
  z-index: 17;
  top: 72px;
  left: 0;
  right: 0;
  min-width: 0;
  height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--curve-line, #d6d9de);
  background: var(--curve-panel, #fbfbfc);
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgb(0 0 0 / 3%);
}

.smart-object-edit-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.smart-object-edit-copy strong,
.smart-object-edit-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.smart-object-edit-copy strong {
  font-size: 11px;
  font-weight: 500 !important;
}

.smart-object-edit-copy small {
  color: var(--curve-muted, #68707c);
  font-size: 9px;
  font-weight: 400 !important;
}

.smart-object-edit-bar > button {
  width: auto;
  min-width: 42px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 7px;
  border: 0;
  border-left: 1px solid var(--curve-line, #d6d9de);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 9px;
  font-weight: 400 !important;
}

.smart-object-edit-bar > button img {
  width: 15px;
  height: 15px;
}

.smart-object-edit-bar > button:hover,
.smart-object-edit-bar > button:focus-visible {
  background: var(--curve-hover, #eef1f4);
}

body.is-smart-object-editing .canvas-wrap {
  top: 116px;
}

body.is-smart-object-editing .pdf-pages-panel {
  pointer-events: none;
  opacity: 0.5;
}

body .smart-object-actions #editSmartObjectButton,
body .smart-object-actions #editSmartObjectButton span {
  font-weight: 400 !important;
}

@media (max-width: 1400px) {
  .smart-object-edit-bar {
    position: fixed;
    top: 50px;
    left: 48px;
    right: auto;
    width: calc(var(--ios-frame-width, min(100vw, 390px)) - 96px);
    height: 42px;
    padding-left: 9px;
  }

  body.is-smart-object-editing .canvas-wrap {
    top: 92px !important;
  }
}

@media (max-width: 370px) {
  .smart-object-edit-bar > button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .smart-object-edit-bar > button {
    min-width: 34px;
    padding-inline: 6px;
  }
}

/* Source: release-452.css */
/* Release 452: layer stack first, with integrated selected-layer properties. */

body .layers .layers-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f8f9fb;
}

body .layers .layers-panel > .panel-heading,
body .layers .layer-view-switcher,
body .layers .layer-panel-actions,
body .layers #layerMoreButton,
body .layers #layerFilterPanel,
body .layers #layerCompsPanel,
body .layers .inspector-view[data-inspector-view="layers"] > .stats {
  display: none !important;
}

body .layers .layer-panel-toolbar {
  position: sticky;
  top: 0;
  z-index: 13;
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid #d9dce2;
  border-radius: 0;
  box-shadow: none;
  background: rgba(248, 249, 251, 0.98);
}

body .layers .layer-count-badge {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6d727b;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
}

body .layers .layer-primary-toolbar {
  position: sticky;
  top: 28px;
  z-index: 13;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-bottom: 1px solid #d9dce2;
  border-radius: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.98);
}

body .layers .layer-primary-toolbar button {
  display: flex;
  min-width: 0;
  min-height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  border: 0;
  border-right: 1px solid #eceef2;
  border-radius: 0;
  background: transparent;
  color: #24272c;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 1;
}

body .layers .layer-primary-toolbar button:last-child {
  border-right: 0;
}

body .layers .layer-primary-toolbar button:active,
body .layers .layer-primary-toolbar button[aria-expanded="true"] {
  background: #eaf3ff;
  color: #066fd1;
}

body .layers .layer-primary-toolbar button:disabled {
  color: #a9adb5;
  opacity: 0.72;
}

body .layers .layer-primary-toolbar img {
  width: 18px;
  height: 18px;
  opacity: 0.92;
}

body .layers #layerList {
  width: 100%;
  min-height: 164px;
  max-height: min(42vh, 360px);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-bottom: 1px solid #d9dce2;
  border-radius: 0;
  background: #ffffff;
  scrollbar-gutter: stable;
}

body .layers #layerList > li,
body .layers #layerList > .layer-group-row {
  min-height: 48px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #eceef2;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}

body .layers #layerList > li.is-selected,
body .layers #layerList > .layer-group-row.is-selected {
  background: #eaf3ff;
  box-shadow: inset 3px 0 0 #0a84ff;
}

body .layers #layerList .layer-name > span:first-child {
  overflow: hidden;
  color: #202328;
  font-size: 11px;
  font-weight: 500 !important;
  letter-spacing: 0;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .layers #layerList .layer-kind,
body .layers #layerList .layer-state-badges {
  color: #777c85;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .layers #layerList .layer-toggle,
body .layers #layerList .layer-drag-handle,
body .layers #layerList .layer-group-disclosure {
  border-radius: 0;
}

body .layers .layer-empty {
  display: flex;
  min-height: 164px !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 22px !important;
  color: #767b84;
  text-align: center;
}

body .layers .layer-empty img {
  width: 24px;
  height: 24px;
  opacity: 0.66;
}

body .layers .layer-empty strong,
body .layers .layer-empty span {
  font-size: 11px;
  font-weight: 400 !important;
  line-height: 1.35;
}

body .layers .layer-appearance-panel {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #d9dce2;
  border-radius: 0;
  box-shadow: none;
  background: #f8f9fb;
}

body .layers .layer-appearance-panel > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: #ffffff;
  cursor: pointer;
  list-style: none;
}

body .layers .layer-appearance-panel[open] > summary {
  border-bottom-color: #d9dce2;
}

body .layers .layer-appearance-panel > summary::-webkit-details-marker {
  display: none;
}

body .layers .layer-appearance-panel > summary strong {
  color: #202328;
  font-size: 12px;
  font-weight: 500 !important;
  letter-spacing: 0;
}

body .layers .layer-appearance-panel > summary span {
  min-width: 0;
  overflow: hidden;
  color: #777c85;
  font-size: 10px;
  font-weight: 400 !important;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .layers .layer-property-identity {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e3e5e9;
  background: #ffffff;
}

body .layers .layer-property-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #d9dce2;
  background: #f5f6f8;
}

body .layers .layer-property-icon img {
  width: 18px;
  height: 18px;
}

body .layers .layer-property-name {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body .layers .layer-property-name span,
body .layers .layer-property-grid span,
body .layers .layer-appearance-controls label > span,
body .layers .layer-transform-properties legend {
  color: #6d727b;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .layers .layer-property-name input,
body .layers .layer-property-grid input,
body .layers .layer-appearance-controls select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ccd0d7;
  border-radius: 4px;
  background: #ffffff;
  color: #202328;
  font-size: 11px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .layers #layerKindOutput {
  align-self: center;
  max-width: 72px;
  overflow: hidden;
  color: #6d727b;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .layers .layer-property-switches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #e3e5e9;
  background: #ffffff;
}

body .layers .layer-property-switches label {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid #eceef2;
  color: #34383e;
  font-size: 10px;
  font-weight: 400 !important;
}

body .layers .layer-property-switches label:last-child {
  border-right: 0;
}

body .layers .layer-property-switches input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #0a84ff;
}

body .layers .layer-transform-properties {
  margin: 0;
  padding: 10px 12px 11px;
  border: 0;
  border-bottom: 1px solid #e3e5e9;
  background: #f8f9fb;
}

body .layers .layer-transform-properties legend {
  padding: 0;
}

body .layers .layer-property-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body .layers .layer-property-grid label {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body .layers .layer-flip-actions,
body .layers .layer-property-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 9px;
  border: 1px solid #d9dce2;
  background: #ffffff;
}

body .layers .layer-flip-actions button,
body .layers .layer-property-actions button {
  display: flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  border: 0;
  border-right: 1px solid #e3e5e9;
  border-radius: 0;
  background: transparent;
  color: #30343a;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .layers .layer-flip-actions button:last-child,
body .layers .layer-property-actions button:last-child {
  border-right: 0;
}

body .layers .layer-flip-actions button.is-active,
body .layers .layer-property-actions button.is-active {
  background: #eaf3ff;
  color: #066fd1;
}

body .layers .layer-flip-actions img,
body .layers .layer-property-actions img {
  width: 15px;
  height: 15px;
}

body .layers .layer-appearance-controls {
  display: grid;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid #e3e5e9;
  background: #ffffff;
}

body .layers .layer-appearance-controls label {
  display: grid;
  min-width: 0;
  gap: 4px;
}

body .layers .layer-appearance-controls input[type="range"] {
  width: 100%;
  accent-color: #0a84ff;
}

body .layers .layer-property-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-width: 0 0 1px;
}

body .layers .layer-property-actions button {
  min-height: 40px;
  background: #ffffff;
}

body .layers .layer-property-actions button:disabled,
body .layers .layer-flip-actions button:disabled,
body .layers .layer-property-switches input:disabled {
  color: #a9adb5;
  opacity: 0.68;
}

body .layers .layer-mask-properties,
body .layers .smart-object-panel {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 720px) {
  body .layers .layer-primary-toolbar {
    min-height: 50px;
  }

  body .layers .layer-primary-toolbar button {
    min-height: 50px;
  }

  body .layers #layerList {
    min-height: 150px;
    max-height: 36vh;
  }

  body .layers .layer-property-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers .layers-panel,
  body[data-theme="auto"] .layers .layer-transform-properties {
    background: #24262b;
  }

  body[data-theme="auto"] .layers .layer-panel-toolbar,
  body[data-theme="auto"] .layers .layer-primary-toolbar,
  body[data-theme="auto"] .layers #layerList,
  body[data-theme="auto"] .layers #layerList > li,
  body[data-theme="auto"] .layers .layer-appearance-panel > summary,
  body[data-theme="auto"] .layers .layer-property-identity,
  body[data-theme="auto"] .layers .layer-property-switches,
  body[data-theme="auto"] .layers .layer-appearance-controls,
  body[data-theme="auto"] .layers .layer-property-actions button,
  body[data-theme="auto"] .layers .layer-flip-actions {
    background: #303238;
    color: #f2f3f5;
  }

  body[data-theme="auto"] .layers #layerList .layer-name > span:first-child,
  body[data-theme="auto"] .layers .layer-appearance-panel > summary strong,
  body[data-theme="auto"] .layers .layer-property-name input,
  body[data-theme="auto"] .layers .layer-property-grid input,
  body[data-theme="auto"] .layers .layer-appearance-controls select {
    color: #f2f3f5;
  }
}

/* Source: release-453.css */
/* Release 453: structured, integrated Layer More actions. */

body .layers .layer-more-actions[hidden] {
  display: none !important;
}

body .layers .layer-more-actions {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  display: block;
  width: 100% !important;
  max-width: none !important;
  max-height: min(48vh, 440px);
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  transform: none !important;
  border: 0 !important;
  border-bottom: 1px solid #d9dce2 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f8f9fb !important;
  scrollbar-gutter: stable;
}

body .layers .layer-more-actions > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  border: 0;
  border-bottom: 1px solid #d9dce2;
  background: rgba(255, 255, 255, 0.98);
}

body .layers .layer-more-actions > header > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body .layers .layer-more-actions > header strong {
  color: #202328;
  font-size: 12px;
  font-weight: 500 !important;
  letter-spacing: 0;
  line-height: 1.15;
}

body .layers .layer-more-actions > header small {
  overflow: hidden;
  color: #737881;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .layers #layerMoreCloseButton {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body .layers #layerMoreCloseButton:active {
  background: #e9ebef;
}

body .layers #layerMoreCloseButton img {
  width: 18px;
  height: 18px;
}

body .layers .layer-action-section {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #dfe2e7;
  border-radius: 0;
  background: #ffffff;
}

body .layers .layer-action-section > summary {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  cursor: pointer;
  list-style: none;
}

body .layers .layer-action-section > summary::-webkit-details-marker {
  display: none;
}

body .layers .layer-action-section > summary > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: #2d3137;
  font-size: 10px;
  font-weight: 500 !important;
  letter-spacing: 0;
}

body .layers .layer-action-section > summary > span img {
  width: 16px;
  height: 16px;
}

body .layers .layer-action-section > summary > small {
  color: #858a93;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .layers .layer-action-section[open] > summary {
  border-bottom: 1px solid #e7e9ed;
  background: #f8f9fb;
}

body .layers .layer-action-section .layer-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: #ffffff;
}

body .layers .layer-action-section:first-of-type .layer-more-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body .layers .layer-action-section .layer-more-grid button {
  display: flex;
  min-width: 0;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 3px;
  border: 0;
  border-right: 1px solid #eceef2;
  border-bottom: 1px solid #eceef2;
  border-radius: 0;
  background: #ffffff;
  color: #30343a;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 1.1;
}

body .layers .layer-action-section .layer-more-grid button:active,
body .layers .layer-action-section .layer-more-grid button.is-active {
  background: #eaf3ff;
  color: #066fd1;
}

body .layers .layer-action-section .layer-more-grid button:disabled {
  color: #a4a9b2;
  opacity: 0.62;
}

body .layers .layer-action-section .layer-more-grid button img {
  width: 17px;
  height: 17px;
  opacity: 0.92;
}

body .layers .layer-action-section .layer-more-grid button span {
  max-width: 100%;
  overflow: hidden;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .layers .layer-compat-command {
  display: none !important;
}

@media (max-width: 720px) {
  body .layers .layer-more-actions {
    max-height: 46vh;
  }

  body .layers .layer-action-section .layer-more-grid button {
    min-height: 46px;
  }
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers .layer-more-actions,
  body[data-theme="auto"] .layers .layer-action-section,
  body[data-theme="auto"] .layers .layer-action-section > summary,
  body[data-theme="auto"] .layers .layer-action-section .layer-more-grid,
  body[data-theme="auto"] .layers .layer-action-section .layer-more-grid button,
  body[data-theme="auto"] .layers .layer-more-actions > header {
    background: #303238 !important;
  }

  body[data-theme="auto"] .layers .layer-more-actions > header strong,
  body[data-theme="auto"] .layers .layer-action-section > summary > span,
  body[data-theme="auto"] .layers .layer-action-section .layer-more-grid button {
    color: #f2f3f5;
  }
}

/* Source: release-454.css */
/* Release 454: compact layer state and single-section layer actions. */

body .layers .layer-action-section > summary::after {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  color: #747983;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 120ms ease;
}

body .layers .layer-action-section[open] > summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

body .layers .layer-action-section > summary > small {
  margin-left: auto;
}

body .layers .layer-transform-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 36px;
  align-items: stretch;
  margin-top: 8px;
  border: 1px solid #d9dce2;
  background: #ffffff;
}

body .layers .layer-transform-options label,
body .layers .layer-transform-options button {
  display: flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-right: 1px solid #e3e5e9;
  border-radius: 0;
  background: transparent;
  color: #30343a;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 1.15;
}

body .layers .layer-transform-options button {
  border-right: 0;
  cursor: pointer;
}

body .layers .layer-transform-options input {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 0;
  accent-color: #0a84ff;
}

body .layers .layer-transform-options img {
  width: 15px;
  height: 15px;
}

body .layers .layer-transform-options button:disabled,
body .layers .layer-transform-options input:disabled + span {
  color: #a9adb5;
  opacity: 0.68;
}

body .layers .layer-color-label-field {
  position: relative;
  display: block;
  min-width: 0;
}

body .layers .layer-color-label-field > i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 9px;
  width: 8px;
  height: 8px;
  border: 1px solid #b8bdc5;
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
  pointer-events: none;
}

body .layers .layer-color-label-field > i[data-color-label="red"] { background: #e35d67; border-color: #e35d67; }
body .layers .layer-color-label-field > i[data-color-label="orange"] { background: #e69a45; border-color: #e69a45; }
body .layers .layer-color-label-field > i[data-color-label="yellow"] { background: #d9ba42; border-color: #d9ba42; }
body .layers .layer-color-label-field > i[data-color-label="green"] { background: #58a878; border-color: #58a878; }
body .layers .layer-color-label-field > i[data-color-label="blue"] { background: #5594d6; border-color: #5594d6; }
body .layers .layer-color-label-field > i[data-color-label="violet"] { background: #8c75c9; border-color: #8c75c9; }
body .layers .layer-color-label-field > i[data-color-label="gray"] { background: #8d939c; border-color: #8d939c; }

body .layers #layerColorLabelControl {
  padding-left: 25px;
}

@media (max-width: 360px) {
  body .layers .layer-transform-options {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  body .layers .layer-transform-options button span {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers .layer-transform-options {
    border-color: #50535a;
    background: #303238;
  }

  body[data-theme="auto"] .layers .layer-transform-options label,
  body[data-theme="auto"] .layers .layer-transform-options button {
    color: #f2f3f5;
  }
}

/* Source: release-455.css */
/* Release 455: one integrated Add Layer menu owns layer creation. */

body .layers .layer-add-menu {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-height: min(46vh, 360px) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-bottom: 1px solid #d9dce2 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body .layers .layer-add-menu[hidden] {
  display: none !important;
}

body .layers .layer-add-menu > header {
  position: sticky !important;
  z-index: 2 !important;
  top: 0 !important;
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  min-height: 44px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 6px 5px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe2e7 !important;
  background: #f8f9fb !important;
}

body .layers .layer-add-menu > header > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 1px !important;
}

body .layers .layer-add-menu > header strong {
  overflow: hidden;
  color: #202328;
  font-size: 11px;
  font-weight: 500 !important;
  letter-spacing: 0;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .layers .layer-add-menu > header small {
  overflow: hidden;
  color: #777c85;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .layers #layerAddCloseButton {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #30343a !important;
}

body .layers #layerAddCloseButton:active {
  background: #e9ebef !important;
}

body .layers #layerAddCloseButton img {
  width: 17px !important;
  height: 17px !important;
}

body .layers .layer-add-menu > button {
  all: unset !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 23px minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 44px !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 10px !important;
  border-right: 1px solid #eceef2 !important;
  border-bottom: 1px solid #eceef2 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #30343a !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  cursor: pointer !important;
}

body .layers .layer-add-menu > button:nth-of-type(even) {
  border-right: 0 !important;
}

body .layers .layer-add-menu > button:last-child {
  grid-column: 1 / -1 !important;
  border-right: 0 !important;
}

body .layers .layer-add-menu > button:active {
  background: #eaf3ff !important;
  color: #066fd1 !important;
}

body .layers .layer-add-menu > button:disabled {
  color: #a4a9b2 !important;
  cursor: default !important;
  opacity: 0.62 !important;
}

body .layers .layer-add-menu > button img {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
  opacity: 0.9 !important;
}

body .layers .layer-add-menu > button span {
  overflow: hidden !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .layer-action-section:first-of-type .layer-more-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 360px) {
  body .layers .layer-add-menu > button {
    min-height: 42px !important;
    padding-inline: 8px !important;
  }
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers .layer-add-menu,
  body[data-theme="auto"] .layers .layer-add-menu > button,
  body[data-theme="auto"] .layers .layer-add-menu > header {
    background: #303238 !important;
  }

  body[data-theme="auto"] .layers .layer-add-menu > header strong,
  body[data-theme="auto"] .layers .layer-add-menu > button {
    color: #f2f3f5 !important;
  }
}

/* Source: release-456.css */
/* Release 456: accurate mixed states and bulk state editing for layer selections. */

body .layers .layer-appearance-panel.is-multi-selection > summary span,
body .layers .layer-appearance-panel.is-multi-selection #layerKindOutput {
  color: #066fd1;
}

body .layers .layer-appearance-panel.is-multi-selection .layer-property-icon {
  border-color: #9dc8f3;
  background: #eaf3ff;
}

body .layers .layer-property-switches input:indeterminate {
  position: relative;
  appearance: none;
  border: 1px solid #0a84ff;
  border-radius: 3px;
  background: #0a84ff;
}

body .layers .layer-property-switches input:indeterminate::after {
  position: absolute;
  top: 6px;
  left: 3px;
  width: 7px;
  height: 1.5px;
  border-radius: 1px;
  background: #ffffff;
  content: "";
}

body .layers .layer-property-name input:disabled::placeholder {
  color: #777c85;
  opacity: 1;
}

body .layers .layer-color-label-field > i[data-color-label="mixed"] {
  border-style: dashed;
  border-color: #6f7580;
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers .layer-appearance-panel.is-multi-selection .layer-property-icon {
    border-color: #557da5;
    background: #294765;
  }

  body[data-theme="auto"] .layers .layer-property-name input:disabled::placeholder {
    color: #b5bac3;
  }
}

/* Source: release-457.css */
/* Release 457: distinct contextual menus for every right-rail tool. */

body .tool-flyout[data-context]:not([data-context=""]) {
  width: min(224px, calc(100dvw - 104px)) !important;
}

body .tool-flyout[data-context]:not([data-context=""]) .flyout-head {
  min-height: 38px !important;
}

body .tool-flyout[data-context]:not([data-context=""]) .flyout-head strong,
body .tool-flyout[data-context]:not([data-context=""]) .flyout-adjustments > strong {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body .tool-flyout[data-context]:not([data-context=""]) .flyout-tool-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2px !important;
  padding: 5px !important;
}

body .tool-flyout[data-context]:not([data-context=""]) .flyout-tool-list:empty {
  display: none !important;
}

body .tool-flyout[data-context]:not([data-context=""]) .flyout-tool-list button {
  min-height: 48px !important;
  padding: 5px 3px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .tool-flyout[data-context]:not([data-context=""]) .flyout-tool-list button:active,
body .tool-flyout[data-context]:not([data-context=""]) .flyout-tool-list button.is-active {
  background: var(--ios-selected) !important;
}

body .tool-flyout[data-context]:not([data-context=""]) .flyout-tool-list button img {
  width: 20px !important;
  height: 20px !important;
}

body .app-frame-right-nav .category-tool[aria-expanded="true"] {
  box-shadow: inset 2px 0 0 var(--ios-accent) !important;
}

/* Source: release-458.css */
/* Release 458: distinct Build and 3D contexts on the right rail. */

body .tool-flyout[data-group="build"] .build-context-adjustments > strong,
body .tool-flyout[data-group="build"] .build-context-adjustments label,
body .tool-flyout[data-group="build"] .build-context-adjustments label > span,
body .tool-flyout[data-group="build"] .build-context-adjustments button,
body .tool-flyout[data-group="build"] .build-context-adjustments button span {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .tool-flyout[data-group="build"] .build-context-adjustments > strong {
  padding-block: 2px 5px !important;
  font-size: 11px !important;
}

body .tool-flyout[data-group="build"] .build-context-adjustments .flyout-wide-action {
  min-height: 32px !important;
  margin: 4px 0 !important;
  border-radius: 4px !important;
  font-size: 10px !important;
}

body .tool-flyout[data-group="build"] .build-coordinate-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

body .tool-flyout[data-group="build"] .build-coordinate-grid label {
  display: grid !important;
  grid-template-columns: 13px minmax(0, 1fr) !important;
  gap: 2px !important;
  min-width: 0 !important;
}

body .tool-flyout[data-group="build"] .build-coordinate-grid input {
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 4px !important;
}

body .tool-flyout[data-group="build"] .build-context-adjustments .flyout-mini-status {
  margin-top: 4px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* Source: release-459.css */
/* Release 459: dedicated PDF signature context and direct placement. */

body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments,
body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments > strong,
body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments label,
body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments label > span,
body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments input,
body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments select,
body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments option,
body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments button,
body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments button span {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments {
  gap: 5px !important;
  padding: 7px 8px 8px !important;
}

body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments > strong {
  padding-block: 1px 4px !important;
  font-size: 11px !important;
}

body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments label {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 5px !important;
  min-height: 30px !important;
}

body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments input,
body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments select {
  min-width: 0 !important;
  height: 29px !important;
  font-size: 10px !important;
}

body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments .flyout-toggle input[type="checkbox"] {
  width: 34px !important;
  height: 20px !important;
  justify-self: end !important;
}

body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments .flyout-adjustment-actions button {
  min-height: 42px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
}

body .tool-flyout[data-group="pdf"][data-group-tool="signature"] .pdf-signature-adjustments .flyout-mini-status {
  margin: 2px 0 0 !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* Source: release-460.css */
/* Release 460: separate Spot Heal and Clone Stamp right-side contexts. */

body .tool-flyout[data-group="photo"][data-group-tool="heal"] .photo-repair-adjustments,
body .tool-flyout[data-group="photo"][data-group-tool="heal"] .photo-repair-adjustments > strong,
body .tool-flyout[data-group="photo"][data-group-tool="heal"] .photo-repair-adjustments label,
body .tool-flyout[data-group="photo"][data-group-tool="heal"] .photo-repair-adjustments label > span,
body .tool-flyout[data-group="photo"][data-group-tool="heal"] .photo-repair-adjustments input,
body .tool-flyout[data-group="photo"][data-group-tool="heal"] .photo-repair-adjustments select,
body .tool-flyout[data-group="photo"][data-group-tool="heal"] .photo-repair-adjustments button,
body .tool-flyout[data-group="photo"][data-group-tool="cloneStamp"] .photo-clone-adjustments,
body .tool-flyout[data-group="photo"][data-group-tool="cloneStamp"] .photo-clone-adjustments > strong,
body .tool-flyout[data-group="photo"][data-group-tool="cloneStamp"] .photo-clone-adjustments label,
body .tool-flyout[data-group="photo"][data-group-tool="cloneStamp"] .photo-clone-adjustments label > span,
body .tool-flyout[data-group="photo"][data-group-tool="cloneStamp"] .photo-clone-adjustments input,
body .tool-flyout[data-group="photo"][data-group-tool="cloneStamp"] .photo-clone-adjustments select,
body .tool-flyout[data-group="photo"][data-group-tool="cloneStamp"] .photo-clone-adjustments button {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .tool-flyout[data-group="photo"] :is(.photo-repair-adjustments, .photo-clone-adjustments) {
  gap: 5px !important;
  padding: 7px 8px 8px !important;
}

body .tool-flyout[data-group="photo"] :is(.photo-repair-adjustments, .photo-clone-adjustments) > strong {
  padding-block: 1px 4px !important;
  font-size: 11px !important;
}

body .tool-flyout[data-group="photo"] :is(.photo-repair-adjustments, .photo-clone-adjustments) label {
  grid-template-columns: 54px minmax(0, 1fr) 34px !important;
  gap: 5px !important;
  min-height: 30px !important;
}

body .tool-flyout[data-group="photo"] :is(.photo-repair-adjustments, .photo-clone-adjustments) input,
body .tool-flyout[data-group="photo"] :is(.photo-repair-adjustments, .photo-clone-adjustments) select {
  min-width: 0 !important;
  height: 29px !important;
  font-size: 10px !important;
}

body .tool-flyout[data-group="photo"] .photo-clone-adjustments .flyout-toggle input[type="checkbox"] {
  width: 34px !important;
  height: 20px !important;
  justify-self: end !important;
}

body .tool-flyout[data-group="photo"] :is(.photo-repair-adjustments, .photo-clone-adjustments) .flyout-adjustment-actions button {
  min-height: 42px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
}

body .tool-flyout[data-group="photo"] :is(.photo-repair-adjustments, .photo-clone-adjustments) .flyout-mini-status {
  margin: 2px 0 0 !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* Source: release-461.css */
/* Release 461: a standard, stack-first Layers panel. */

body .layers .layers-panel {
  --layer-panel-bg: #f5f6f8;
  --layer-row-bg: #ffffff;
  --layer-row-selected: #e7f1ff;
  --layer-line: #d9dce2;
  --layer-soft-line: #eceef2;
  --layer-text: #24272c;
  --layer-muted: #747a83;
  --layer-accent: #0a73d9;
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--layer-panel-bg) !important;
  font-synthesis: none !important;
}

body .layers .layers-panel > .panel-heading,
body .layers .layer-compat-actions,
body .layers .layer-view-switcher,
body .layers .layer-panel-actions,
body .layers #layerFilterPanel,
body .layers #layerCompsPanel {
  display: none !important;
}

body .layers .layer-panel-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 13 !important;
  order: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 36px !important;
  width: 100% !important;
  min-height: 36px !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 4px 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: rgba(245, 246, 248, 0.98) !important;
}

body .layers .layer-count-badge {
  justify-self: start !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--layer-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layerMoreButton {
  display: grid !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--layer-soft-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--layer-text) !important;
}

body .layers #layerMoreButton:active,
body .layers #layerMoreButton[aria-expanded="true"] {
  background: var(--layer-row-selected) !important;
  color: var(--layer-accent) !important;
}

body .layers #layerMoreButton img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

body .layers #layerList {
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  height: clamp(220px, 38dvh, 360px) !important;
  min-height: 220px !important;
  max-height: 360px !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  background: var(--layer-row-bg) !important;
  list-style: none !important;
  scrollbar-gutter: stable !important;
}

body .layers #layerList > li,
body .layers #layerList > .layer-group-row {
  position: relative !important;
  width: 100% !important;
  min-height: 50px !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-soft-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-weight: 400 !important;
}

body .layers #layerList > li:not(.layer-group-row):not(.layer-empty) {
  display: grid !important;
  grid-template-columns: 20px 34px minmax(0, 1fr) 58px !important;
}

body .layers #layerList > li:has(.layer-mask-thumbnail):not(.layer-group-row):not(.layer-empty) {
  grid-template-columns: 20px 34px 28px minmax(0, 1fr) 58px !important;
}

body .layers #layerList > li:last-child,
body .layers #layerList > .layer-group-row:last-child {
  border-bottom: 0 !important;
}

body .layers #layerList > li.is-selected,
body .layers #layerList > .layer-group-row.is-selected {
  background: var(--layer-row-selected) !important;
  box-shadow: inset 2px 0 0 var(--layer-accent) !important;
}

body .layers #layerList > .layer-group-row {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 58px !important;
  background: #f9fafb !important;
}

body .layers #layerList > li.is-group-child {
  padding-left: 25px !important;
}

body .layers #layerList > li.is-group-child::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 13px !important;
  width: 1px !important;
  background: var(--layer-line) !important;
}

body .layers #layerList .layer-drag-handle,
body .layers #layerList .layer-group-disclosure,
body .layers #layerList .layer-toggle {
  all: unset !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  color: var(--layer-text) !important;
  cursor: pointer !important;
}

body .layers #layerList .layer-drag-handle {
  width: 20px !important;
  height: 34px !important;
  cursor: grab !important;
  touch-action: none !important;
}

body .layers #layerList .layer-drag-handle:disabled {
  cursor: default !important;
  opacity: 0.28 !important;
}

body .layers #layerList .layer-drag-handle img {
  width: 14px !important;
  height: 18px !important;
  opacity: 0.48 !important;
}

body .layers #layerList .layer-group-disclosure {
  width: 30px !important;
  height: 34px !important;
}

body .layers #layerList .layer-group-disclosure img {
  width: 16px !important;
  height: 16px !important;
  transition: transform 140ms ease !important;
}

body .layers #layerList .layer-group-disclosure[aria-expanded="true"] img {
  transform: rotate(-90deg) !important;
}

body .layers #layerList .layer-thumbnail,
body .layers #layerList .layer-mask-thumbnail {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid #afb4bc !important;
  border-radius: 3px !important;
  background: #eef0f3 !important;
}

body .layers #layerList .layer-thumbnail {
  width: 34px !important;
  height: 34px !important;
}

body .layers #layerList .layer-mask-thumbnail {
  width: 28px !important;
  height: 34px !important;
  background:
    linear-gradient(45deg, #e4e6e9 25%, transparent 25%, transparent 75%, #e4e6e9 75%),
    linear-gradient(45deg, #e4e6e9 25%, #fff 25%, #fff 75%, #e4e6e9 75%) !important;
  background-position: 0 0, 4px 4px !important;
  background-size: 8px 8px !important;
}

body .layers #layerList .layer-thumbnail img,
body .layers #layerList .layer-mask-thumbnail img {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

body .layers #layerList .layer-thumbnail.has-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body .layers #layerList .layer-name {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 5px !important;
  overflow: hidden !important;
}

body .layers #layerList .layer-name > span:first-child {
  grid-column: 1 / -1 !important;
  overflow: hidden !important;
  color: var(--layer-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 15px !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layerList .layer-kind,
body .layers #layerList .layer-state-badges {
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 12px !important;
  letter-spacing: 0 !important;
}

body .layers #layerList .layer-state-badges {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: end !important;
  gap: 2px !important;
}

body .layers #layerList .layer-state-badges > span {
  display: grid !important;
  width: 14px !important;
  height: 14px !important;
  place-items: center !important;
  border-radius: 2px !important;
  background: transparent !important;
}

body .layers #layerList .layer-state-badges img {
  width: 11px !important;
  height: 11px !important;
}

body .layers #layerList .layer-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 28px) !important;
  gap: 1px !important;
}

body .layers #layerList .layer-toggle {
  width: 28px !important;
  height: 28px !important;
}

body .layers #layerList .layer-toggle:active {
  background: var(--layer-row-selected) !important;
}

body .layers #layerList .layer-toggle img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.76 !important;
}

body .layers #layerList .layer-empty {
  display: flex !important;
  min-height: 220px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 24px !important;
  color: var(--layer-muted) !important;
  text-align: center !important;
}

body .layers #layerList .layer-empty strong,
body .layers #layerList .layer-empty span {
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

body .layers .layer-primary-toolbar {
  position: relative !important;
  inset: auto !important;
  z-index: 12 !important;
  order: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--layer-row-bg) !important;
}

body .layers .layer-primary-toolbar button {
  display: flex !important;
  min-width: 0 !important;
  min-height: 48px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 1px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--layer-soft-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--layer-text) !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 10px !important;
  letter-spacing: 0 !important;
}

body .layers .layer-primary-toolbar button:last-child {
  border-right: 0 !important;
}

body .layers .layer-primary-toolbar button:active,
body .layers .layer-primary-toolbar button.is-active,
body .layers .layer-primary-toolbar button[aria-expanded="true"],
body .layers .layer-primary-toolbar button[aria-pressed="true"] {
  background: var(--layer-row-selected) !important;
  color: var(--layer-accent) !important;
}

body .layers .layer-primary-toolbar button:disabled {
  color: #9da2aa !important;
  opacity: 0.48 !important;
}

body .layers .layer-primary-toolbar button img {
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
}

body .layers .layer-primary-toolbar button span {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .layer-add-menu,
body .layers .layer-more-actions {
  order: 3 !important;
}

body .layers .smart-object-panel {
  order: 4 !important;
}

body .layers .layer-appearance-panel {
  order: 5 !important;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--layer-panel-bg) !important;
}

body .layers .layer-mask-properties {
  order: 6 !important;
}

body .layers .layer-appearance-panel > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
  min-height: 40px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  cursor: pointer !important;
  list-style: none !important;
}

body .layers .layer-appearance-panel[open] > summary {
  border-bottom-color: var(--layer-line) !important;
}

body .layers .layer-appearance-panel > summary::-webkit-details-marker {
  display: none !important;
}

body .layers .layer-property-title {
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 7px !important;
}

body .layers .layer-property-title img {
  width: 16px !important;
  height: 16px !important;
}

body .layers .layer-property-title strong,
body .layers .layer-appearance-panel > summary #layerPropertySummary {
  overflow: hidden !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .layer-property-title strong {
  color: var(--layer-text) !important;
  font-size: 11px !important;
}

body .layers .layer-appearance-panel > summary #layerPropertySummary {
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  text-align: right !important;
}

body .layers .layer-appearance-panel input,
body .layers .layer-appearance-panel select,
body .layers .layer-appearance-panel button,
body .layers .layer-appearance-panel label,
body .layers .layer-appearance-panel legend,
body .layers .layer-appearance-panel output,
body .layers .layer-appearance-panel span,
body .layers .layer-more-actions,
body .layers .layer-add-menu {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers .layers-panel .layer-add-menu :is(strong, small, span, button),
body .layers .layers-panel .layer-more-actions :is(strong, small, span, summary, button),
body .layers .layers-panel .layer-mask-properties :is(strong, span, output, label, button),
body .layers .layers-panel .smart-object-panel :is(strong, small, span, output, label, summary, button) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layerPropertyMaskButton {
  display: none !important;
}

body .layers .layer-property-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 430px) {
  body .layers #layerList {
    height: clamp(210px, 36dvh, 320px) !important;
    min-height: 210px !important;
    max-height: 320px !important;
  }

  body .layers #layerList > li,
  body .layers #layerList > .layer-group-row {
    min-height: 48px !important;
  }

  body .layers .layer-primary-toolbar,
  body .layers .layer-primary-toolbar button {
    min-height: 46px !important;
  }
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers .layers-panel {
    --layer-panel-bg: #282a2f;
    --layer-row-bg: #303238;
    --layer-row-selected: #263c55;
    --layer-line: #45484f;
    --layer-soft-line: #3c3f45;
    --layer-text: #f0f1f3;
    --layer-muted: #b0b4bc;
    --layer-accent: #6eb4ff;
  }

  body[data-theme="auto"] .layers .layer-panel-toolbar,
  body[data-theme="auto"] .layers #layerList > .layer-group-row {
    background: #2b2d32 !important;
  }
}

body[data-theme="dark"] .layers .layers-panel {
  --layer-panel-bg: #282a2f;
  --layer-row-bg: #303238;
  --layer-row-selected: #263c55;
  --layer-line: #45484f;
  --layer-soft-line: #3c3f45;
  --layer-text: #f0f1f3;
  --layer-muted: #b0b4bc;
  --layer-accent: #6eb4ff;
}

body[data-theme="dark"] .layers .layer-panel-toolbar,
body[data-theme="dark"] .layers #layerList > .layer-group-row {
  background: #2b2d32 !important;
}

/* Source: release-462.css */
/* Release 462: restore the complete sticky Layers toolbar above the stack. */

body .layers .layer-panel-toolbar {
  order: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 30px !important;
  padding: 0 10px !important;
}

body .layers .layer-primary-toolbar {
  position: sticky !important;
  top: 30px !important;
  z-index: 14 !important;
  order: 1 !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

body .layers #layerList {
  order: 2 !important;
}

body .layers .layer-add-menu,
body .layers .layer-more-actions {
  order: 3 !important;
}

body .layers .layer-primary-toolbar button,
body .layers .layer-primary-toolbar button span {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 360px) {
  body .layers .layer-primary-toolbar button,
  body .layers .layer-primary-toolbar button span {
    font-size: 8px !important;
  }
}

/* Source: release-463.css */
/* Release 463: functional, selection-based Layers Properties inspector. */

body .layers .layers-panel[data-layer-panel="properties"] #layerList,
body .layers .layers-panel[data-layer-panel="add"] #layerList,
body .layers .layers-panel[data-layer-panel="more"] #layerList {
  height: 116px !important;
  min-height: 116px !important;
  max-height: 116px !important;
  flex: 0 0 116px !important;
}

body .layers .layer-primary-toolbar {
  min-height: 52px !important;
}

body .layers .layer-primary-toolbar button {
  min-height: 52px !important;
  gap: 4px !important;
  padding: 5px 1px 4px !important;
}

body .layers .layer-primary-toolbar button img {
  width: 18px !important;
  height: 18px !important;
}

body .layers .layer-primary-toolbar button span {
  font-size: 9.5px !important;
  font-weight: 400 !important;
  line-height: 11px !important;
}

body .layers .layer-appearance-panel:not([open]) {
  display: none !important;
}

body .layers .layer-appearance-panel[open] {
  order: 3 !important;
  display: block !important;
  width: 100% !important;
  max-height: min(52dvh, 480px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border-bottom: 1px solid var(--layer-line) !important;
  background: var(--layer-panel-bg) !important;
  scrollbar-gutter: stable !important;
}

body .layers .layer-appearance-panel > summary {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  min-height: 42px !important;
  padding: 0 11px !important;
  border-bottom: 1px solid var(--layer-line) !important;
  background: color-mix(in srgb, var(--layer-row-bg) 96%, transparent) !important;
}

body .layers .layer-property-title strong {
  font-size: 12px !important;
  font-weight: 400 !important;
}

body .layers .layer-appearance-panel > summary #layerPropertySummary {
  max-width: 148px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers .layer-property-identity {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto 34px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 8px 8px 10px !important;
  border-bottom: 1px solid var(--layer-line) !important;
  background: var(--layer-row-bg) !important;
}

body .layers .layer-property-icon {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-panel-bg) !important;
}

body .layers .layer-property-name {
  gap: 3px !important;
}

body .layers .layer-property-name > span,
body .layers .layer-property-grid label > span,
body .layers .layer-appearance-controls label > span,
body .layers .layer-paint-properties label > span,
body .layers .layer-text-property-grid label > span,
body .layers .layer-color-label-control > span:first-child {
  color: var(--layer-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 12px !important;
}

body .layers .layer-property-name input,
body .layers .layer-property-grid input,
body .layers .layer-appearance-controls select,
body .layers .layer-paint-properties input,
body .layers .layer-text-property-grid input,
body .layers .layer-text-property-grid select,
body .layers .layer-color-label-field select {
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 8px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layerKindOutput {
  max-width: 74px !important;
  color: var(--layer-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers #layerPropertiesCloseButton {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--layer-soft-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .layers #layerPropertiesCloseButton:active {
  background: var(--layer-row-selected) !important;
}

body .layers #layerPropertiesCloseButton img {
  width: 17px !important;
  height: 17px !important;
}

body .layers .layer-property-switches {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  border-bottom: 1px solid var(--layer-line) !important;
  background: var(--layer-row-bg) !important;
}

body .layers .layer-property-switches label {
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-right: 1px solid var(--layer-soft-line) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers .layer-property-switches label:last-child {
  border-right: 0 !important;
}

body .layers .layer-property-switches label > img {
  width: 15px !important;
  height: 15px !important;
  opacity: 0.72 !important;
}

body .layers .layer-property-switches input {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  accent-color: var(--layer-accent) !important;
}

body .layers .layer-transform-properties {
  margin: 0 !important;
  padding: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  background: var(--layer-panel-bg) !important;
}

body .layers .layer-transform-properties legend {
  display: flex !important;
  width: 100% !important;
  min-height: 30px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
  color: var(--layer-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

body .layers #layerResetTransformButton {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .layers #layerResetTransformButton img {
  width: 15px !important;
  height: 15px !important;
}

body .layers .layer-property-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body .layers .layer-property-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

body .layers .layer-transform-options {
  display: flex !important;
  min-height: 36px !important;
  align-items: center !important;
  margin-top: 7px !important;
  padding: 0 2px !important;
}

body .layers .layer-transform-options label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers .layer-flip-actions {
  margin-top: 0 !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
}

body .layers .layer-flip-actions button {
  min-height: 36px !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers .layer-property-section {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  background: var(--layer-row-bg) !important;
}

body .layers .layer-property-section[hidden] {
  display: none !important;
}

body .layers .layer-property-section > summary {
  display: flex !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  cursor: pointer !important;
  list-style: none !important;
}

body .layers .layer-property-section > summary::-webkit-details-marker {
  display: none !important;
}

body .layers .layer-property-section > summary > span {
  font-size: 12px !important;
  font-weight: 400 !important;
}

body .layers .layer-property-section > summary > :is(output, small) {
  overflow: hidden !important;
  color: var(--layer-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .layer-property-section[open] > summary {
  border-bottom: 1px solid var(--layer-soft-line) !important;
  background: var(--layer-panel-bg) !important;
}

body .layers .layer-appearance-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 10px !important;
  border: 0 !important;
  background: var(--layer-row-bg) !important;
}

body .layers .layer-appearance-controls > label {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
}

body .layers .layer-appearance-controls .layer-opacity-property,
body .layers .layer-appearance-controls .layer-paint-properties {
  grid-column: 1 / -1 !important;
}

body .layers .layer-appearance-controls input[type="range"] {
  width: 100% !important;
  accent-color: var(--layer-accent) !important;
}

body .layers .layer-paint-properties {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body .layers .layer-paint-properties[hidden] {
  display: none !important;
}

body .layers .layer-paint-properties label,
body .layers .layer-text-property-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

body .layers .layer-paint-properties input[type="color"] {
  width: 100% !important;
  padding: 3px !important;
}

body .layers .layer-text-property-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px !important;
  gap: 8px !important;
  padding: 10px !important;
}

body .layers .layer-arrange-actions {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  background: var(--layer-row-bg) !important;
}

body .layers .layer-arrange-actions button {
  display: flex !important;
  min-width: 0 !important;
  min-height: 50px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px 1px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--layer-soft-line) !important;
  border-bottom: 1px solid var(--layer-soft-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--layer-text) !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
}

body .layers .layer-arrange-actions button:active {
  background: var(--layer-row-selected) !important;
  color: var(--layer-accent) !important;
}

body .layers .layer-arrange-actions button:disabled {
  opacity: 0.4 !important;
}

body .layers .layer-arrange-actions img {
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
}

body .layers .layer-arrange-actions span {
  width: 100% !important;
  overflow: hidden !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .layer-color-label-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(118px, 46%) !important;
  min-height: 48px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-bottom: 1px solid var(--layer-soft-line) !important;
}

body .layers .layer-color-label-field {
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
}

body .layers .layer-property-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--layer-row-bg) !important;
}

body .layers .layer-property-actions button {
  min-height: 42px !important;
  border: 0 !important;
  border-right: 1px solid var(--layer-soft-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers #layerPropertyMaskButton {
  display: none !important;
}

@media (max-width: 350px) {
  body .layers .layer-primary-toolbar button span {
    font-size: 9px !important;
  }

  body .layers .layer-arrange-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers .layer-appearance-panel > summary {
    background: rgba(48, 50, 56, 0.98) !important;
  }
}

body[data-theme="dark"] .layers .layer-appearance-panel > summary {
  background: rgba(48, 50, 56, 0.98) !important;
}

/* Source: release-464.css */
/* Release 464: direct layer creation with an always-visible layer stack. */

body .layers .layer-add-menu {
  display: none !important;
}

body .layers .layers-panel[data-layer-panel="properties"] #layerList,
body .layers .layers-panel[data-layer-panel="more"] #layerList {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: clamp(168px, 28dvh, 260px) !important;
  min-height: 168px !important;
  max-height: 260px !important;
  flex: 0 0 clamp(168px, 28dvh, 260px) !important;
  opacity: 1 !important;
}

body .layers #layerList > li,
body .layers #layerList > .layer-group-row {
  visibility: visible !important;
  opacity: 1 !important;
}

body .layers #layerList > li:not(.layer-group-row):not(.layer-empty) .layer-name {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body .layers #layerList > li:not(.layer-group-row):not(.layer-empty) .layer-name > span:first-child {
  grid-column: 1 !important;
  min-width: 0 !important;
  font-weight: 400 !important;
}

body .layers #layerList > li:not(.layer-group-row):not(.layer-empty) .layer-state-badges {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body .layers .layer-primary-toolbar button,
body .layers .layer-primary-toolbar button span,
body .layers #layerList,
body .layers #layerList button {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 430px) {
  body .layers .layers-panel[data-layer-panel="properties"] #layerList,
  body .layers .layers-panel[data-layer-panel="more"] #layerList {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    flex-basis: 168px !important;
  }
}

/* Source: release-465.css */
/* Release 465: make the current document layers unmistakably visible. */

body .layers[data-active-tab="layers"] > .inspector-view[data-inspector-view="layers"],
body .layers[data-active-tab="layers"] > .inspector-view[data-inspector-view="layers"] > .layers-panel {
  display: flex !important;
  visibility: visible !important;
  min-height: 0 !important;
  flex-direction: column !important;
  opacity: 1 !important;
}

body .layers .layer-panel-toolbar {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 30px !important;
  gap: 8px !important;
  padding: 0 10px !important;
}

body .layers .layer-stack-label,
body .layers .layer-count-badge {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--layer-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .layer-count-badge {
  justify-self: end !important;
}

body .layers #layerList,
body .layers .layers-panel[data-layer-panel="stack"] #layerList,
body .layers .layers-panel[data-layer-panel="properties"] #layerList,
body .layers .layers-panel[data-layer-panel="more"] #layerList {
  position: relative !important;
  z-index: 2 !important;
  order: 2 !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: clamp(156px, 26dvh, 240px) !important;
  min-height: 156px !important;
  max-height: 240px !important;
  flex: 0 0 clamp(156px, 26dvh, 240px) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  opacity: 1 !important;
}

body .layers #layerList > li,
body .layers #layerList > .layer-group-row,
body .layers #layerList > .layer-empty {
  display: grid !important;
  visibility: visible !important;
  min-height: 50px !important;
  opacity: 1 !important;
}

body .layers #layerList > .layer-empty {
  min-height: 156px !important;
}

@media (max-width: 430px) {
  body .layers #layerList,
  body .layers .layers-panel[data-layer-panel="stack"] #layerList,
  body .layers .layers-panel[data-layer-panel="properties"] #layerList,
  body .layers .layers-panel[data-layer-panel="more"] #layerList {
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
    flex-basis: 156px !important;
  }
}

/* Source: release-467.css */
/* Release 467: isolated, document-first Layers panel. */

body .layers[data-active-tab="layers"] > .inspector-view[data-inspector-view="layers"] {
  display: flex !important;
  visibility: visible !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 1 !important;
}

body .layers #layersWorkspacePanel {
  --layer-panel-bg: #f5f6f8;
  --layer-row-bg: #ffffff;
  --layer-row-hover: #f5f8fc;
  --layer-row-selected: #e6f0fb;
  --layer-line: #d7dae0;
  --layer-soft-line: #e9ebef;
  --layer-text: #202327;
  --layer-muted: #707681;
  --layer-accent: #1976d2;
  display: flex !important;
  visibility: visible !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--layer-panel-bg) !important;
  color: var(--layer-text) !important;
  opacity: 1 !important;
  font-synthesis: none !important;
}

body .layers #layersWorkspacePanel,
body .layers #layersWorkspacePanel * {
  box-sizing: border-box !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel > .panel-heading,
body .layers #layersWorkspacePanel > .layer-compat-actions,
body .layers #layersWorkspacePanel #layerFilterPanel,
body .layers #layersWorkspacePanel #layerCompsPanel,
body .layers #layersWorkspacePanel .layer-add-menu {
  display: none !important;
}

body .layers #layersWorkspacePanel .adobe-layer-header {
  position: relative !important;
  z-index: 4 !important;
  order: 0 !important;
  display: grid !important;
  width: 100% !important;
  min-height: 32px !important;
  flex: 0 0 32px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  background: var(--layer-panel-bg) !important;
}

body .layers #layersWorkspacePanel .adobe-layer-heading,
body .layers #layersWorkspacePanel .layer-count-badge {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--layer-muted) !important;
  font-size: 10px !important;
  line-height: 31px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-count-badge {
  justify-self: end !important;
  text-align: right !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar {
  position: relative !important;
  z-index: 4 !important;
  order: 1 !important;
  display: grid !important;
  width: 100% !important;
  min-height: 50px !important;
  flex: 0 0 50px !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  background: var(--layer-row-bg) !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar button {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 4px 1px 3px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--layer-soft-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--layer-text) !important;
  font-size: 8.5px !important;
  line-height: 10px !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar button:last-child {
  border-right: 0 !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar button:is(:active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) {
  background: var(--layer-row-selected) !important;
  color: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar button:disabled {
  color: #999fa8 !important;
  opacity: 0.42 !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar button img {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  object-fit: contain !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar button span {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  font-size: 8.5px !important;
  line-height: 10px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="stack"] #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="properties"] #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="more"] #documentLayerStack {
  position: relative !important;
  z-index: 2 !important;
  order: 2 !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: clamp(210px, 34dvh, 340px) !important;
  min-height: 210px !important;
  max-height: 340px !important;
  flex: 1 1 260px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  background: var(--layer-row-bg) !important;
  list-style: none !important;
  opacity: 1 !important;
  scrollbar-gutter: stable !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="more"] #documentLayerStack {
  height: clamp(170px, 25dvh, 230px) !important;
  min-height: 170px !important;
  max-height: 230px !important;
  flex: 0 0 clamp(170px, 25dvh, 230px) !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li,
body .layers #layersWorkspacePanel #documentLayerStack > .layer-group-row {
  position: relative !important;
  visibility: visible !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-soft-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  opacity: 1 !important;
  outline: 0 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li:not(.layer-group-row):not(.layer-empty) {
  display: grid !important;
  grid-template-columns: 20px 34px minmax(0, 1fr) 58px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li:has(.layer-mask-thumbnail):not(.layer-group-row):not(.layer-empty) {
  grid-template-columns: 20px 34px 28px minmax(0, 1fr) 58px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li:is(:hover, :focus-visible) {
  background: var(--layer-row-hover) !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li.is-selected,
body .layers #layersWorkspacePanel #documentLayerStack > .layer-group-row.is-selected {
  background: var(--layer-row-selected) !important;
  box-shadow: inset 2px 0 0 var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li.is-isolation-dimmed,
body .layers #layersWorkspacePanel #documentLayerStack > .layer-group-row.is-isolation-dimmed {
  opacity: 0.42 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > .layer-group-row {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 58px !important;
  background: var(--layer-panel-bg) !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li.is-group-child {
  padding-left: 24px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li.is-group-child::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 13px !important;
  width: 1px !important;
  background: var(--layer-line) !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li[data-layer-color]::before,
body .layers #layersWorkspacePanel #documentLayerStack > .layer-group-row[data-layer-color]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 3px !important;
  background: var(--layer-label-color, transparent) !important;
}

body .layers #layersWorkspacePanel #documentLayerStack [data-layer-color="red"] { --layer-label-color: #d84a4a; }
body .layers #layersWorkspacePanel #documentLayerStack [data-layer-color="orange"] { --layer-label-color: #d7812d; }
body .layers #layersWorkspacePanel #documentLayerStack [data-layer-color="yellow"] { --layer-label-color: #d0ae2f; }
body .layers #layersWorkspacePanel #documentLayerStack [data-layer-color="green"] { --layer-label-color: #3d9b67; }
body .layers #layersWorkspacePanel #documentLayerStack [data-layer-color="blue"] { --layer-label-color: #3b7fc4; }
body .layers #layersWorkspacePanel #documentLayerStack [data-layer-color="purple"] { --layer-label-color: #8c66bb; }
body .layers #layersWorkspacePanel #documentLayerStack [data-layer-color="gray"] { --layer-label-color: #858a92; }

body .layers #layersWorkspacePanel #documentLayerStack .layer-drag-handle,
body .layers #layersWorkspacePanel #documentLayerStack .layer-group-disclosure,
body .layers #layersWorkspacePanel #documentLayerStack .layer-toggle {
  all: unset !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  color: var(--layer-text) !important;
  cursor: pointer !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-drag-handle {
  width: 20px !important;
  height: 34px !important;
  cursor: grab !important;
  touch-action: none !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-drag-handle:disabled {
  cursor: default !important;
  opacity: 0.28 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-drag-handle img {
  width: 13px !important;
  height: 17px !important;
  opacity: 0.48 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-group-disclosure {
  width: 30px !important;
  height: 34px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-group-disclosure img {
  width: 15px !important;
  height: 15px !important;
  transition: transform 140ms ease !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-group-disclosure[aria-expanded="true"] img {
  transform: rotate(-90deg) !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-thumbnail,
body .layers #layersWorkspacePanel #documentLayerStack .layer-mask-thumbnail {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid #aeb4bd !important;
  border-radius: 3px !important;
  background: #eef0f3 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-thumbnail {
  width: 34px !important;
  height: 34px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-mask-thumbnail {
  width: 28px !important;
  height: 34px !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(45deg, #e4e6e9 25%, transparent 25%, transparent 75%, #e4e6e9 75%),
    linear-gradient(45deg, #e4e6e9 25%, #fff 25%, #fff 75%, #e4e6e9 75%) !important;
  background-position: 0 0, 4px 4px !important;
  background-size: 8px 8px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack :is(.layer-thumbnail, .layer-mask-thumbnail) img {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-thumbnail.has-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-name {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 5px !important;
  overflow: hidden !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-name > span:first-child {
  grid-column: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--layer-text) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-name > span:first-child.is-editing {
  padding: 1px 3px !important;
  border: 1px solid var(--layer-accent) !important;
  background: var(--layer-row-bg) !important;
  text-overflow: clip !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-kind,
body .layers #layersWorkspacePanel #documentLayerStack .layer-state-badges {
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 12px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-state-badges {
  display: inline-flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-items: center !important;
  justify-self: end !important;
  gap: 2px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-state-badges > span {
  display: grid !important;
  width: 14px !important;
  height: 14px !important;
  place-items: center !important;
  border-radius: 2px !important;
  background: transparent !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-state-badges img {
  width: 11px !important;
  height: 11px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 28px) !important;
  gap: 1px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-toggle {
  width: 28px !important;
  height: 28px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-toggle:active {
  background: var(--layer-row-selected) !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-toggle img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.76 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-empty {
  display: flex !important;
  min-height: 210px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 24px !important;
  color: var(--layer-muted) !important;
  text-align: center !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-empty img {
  width: 22px !important;
  height: 22px !important;
  opacity: 0.54 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-empty strong,
body .layers #layersWorkspacePanel #documentLayerStack .layer-empty span {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body .layers #layersWorkspacePanel > .layer-more-actions,
body .layers #layersWorkspacePanel > .smart-object-panel,
body .layers #layersWorkspacePanel > .layer-appearance-panel,
body .layers #layersWorkspacePanel > .layer-mask-properties {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--layer-panel-bg) !important;
}

body .layers #layersWorkspacePanel > .layer-more-actions { order: 3 !important; }
body .layers #layersWorkspacePanel > .smart-object-panel { order: 4 !important; }
body .layers #layersWorkspacePanel > .layer-appearance-panel { order: 5 !important; }
body .layers #layersWorkspacePanel > .layer-mask-properties { order: 6 !important; }

body .layers #layersWorkspacePanel > .layer-more-actions:not([hidden]),
body .layers #layersWorkspacePanel > .smart-object-panel:not([hidden]) {
  display: block !important;
  max-height: min(42dvh, 390px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .layers #layersWorkspacePanel > .layer-more-actions[hidden],
body .layers #layersWorkspacePanel > .smart-object-panel[hidden] {
  display: none !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel[open] {
  display: block !important;
  max-height: min(44dvh, 420px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel:not([open]) {
  display: none !important;
}

@media (max-width: 430px) {
  body .layers #layersWorkspacePanel #documentLayerStack,
  body .layers #layersWorkspacePanel[data-layer-panel="stack"] #documentLayerStack {
    height: clamp(200px, 32dvh, 300px) !important;
    min-height: 200px !important;
    max-height: 300px !important;
    flex-basis: 240px !important;
  }

  body .layers #layersWorkspacePanel[data-layer-panel="properties"] #documentLayerStack,
  body .layers #layersWorkspacePanel[data-layer-panel="more"] #documentLayerStack {
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    flex-basis: 170px !important;
  }
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .adobe-layer-toolbar button,
  body .layers #layersWorkspacePanel .adobe-layer-toolbar button span {
    font-size: 8px !important;
  }
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers #layersWorkspacePanel {
    --layer-panel-bg: #2b2d31;
    --layer-row-bg: #33353a;
    --layer-row-hover: #393c42;
    --layer-row-selected: #2d435c;
    --layer-line: #464950;
    --layer-soft-line: #3d4046;
    --layer-text: #f1f2f4;
    --layer-muted: #b2b6be;
    --layer-accent: #75b8ff;
  }
}

body[data-theme="dark"] .layers #layersWorkspacePanel {
  --layer-panel-bg: #2b2d31;
  --layer-row-bg: #33353a;
  --layer-row-hover: #393c42;
  --layer-row-selected: #2d435c;
  --layer-line: #464950;
  --layer-soft-line: #3d4046;
  --layer-text: #f1f2f4;
  --layer-muted: #b2b6be;
  --layer-accent: #75b8ff;
}

/* Source: release-471.css */
/* Release 471: authoritative layer interaction and upper split inspectors. */

body .layers #layersWorkspacePanel[data-layer-panel="properties"] #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="more"] #documentLayerStack {
  order: 3 !important;
  height: clamp(148px, 22dvh, 190px) !important;
  min-height: 148px !important;
  max-height: 190px !important;
  flex: 0 0 clamp(148px, 22dvh, 190px) !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel[open],
body .layers #layersWorkspacePanel > .layer-more-actions:not([hidden]) {
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
  order: 2 !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel > summary,
body .layers #layersWorkspacePanel > .layer-more-actions > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-line) !important;
  border-radius: 0 !important;
  background: var(--layer-panel-bg) !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-identity {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto 28px !important;
  align-items: end !important;
  gap: 6px !important;
  padding: 7px 9px !important;
  border-bottom: 1px solid var(--layer-soft-line) !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-icon {
  width: 30px !important;
  height: 30px !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-name {
  min-width: 0 !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-name > span,
body .layers #layersWorkspacePanel > .layer-appearance-panel :is(label, legend, summary, output, small, span) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-name > span {
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-name input {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-switches {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--layer-soft-line) !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-switches label {
  min-height: 32px !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 3px !important;
  border-right: 1px solid var(--layer-soft-line) !important;
  font-size: 9px !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-switches label:last-child {
  border-right: 0 !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-transform-properties,
body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-section {
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--layer-soft-line) !important;
  border-radius: 0 !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-property-grid input {
  width: 100% !important;
  min-width: 0 !important;
  height: 27px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li.is-dragging {
  opacity: 0.42 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li.is-drop-before::after,
body .layers #layersWorkspacePanel #documentLayerStack > li.is-drop-after::after {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  right: 5px !important;
  left: 5px !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li.is-drop-before::after {
  top: 0 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > li.is-drop-after::after {
  bottom: 0 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-name > span:first-child.is-editing {
  min-height: 24px !important;
  padding: 3px 5px !important;
  overflow: visible !important;
  border: 1px solid var(--layer-accent) !important;
  border-radius: 2px !important;
  outline: 0 !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  cursor: text !important;
  user-select: text !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar #layerDeleteToolbarButton.is-drop-delete {
  background: #fbe7e7 !important;
  color: #b3261e !important;
  box-shadow: inset 0 0 0 2px #d64545 !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar #layerDeleteToolbarButton.is-drop-delete img {
  filter: invert(21%) sepia(65%) saturate(2700%) hue-rotate(349deg) brightness(82%) contrast(92%) !important;
}

@media (max-width: 430px) {
  body .layers #layersWorkspacePanel[data-layer-panel="properties"] #documentLayerStack,
  body .layers #layersWorkspacePanel[data-layer-panel="more"] #documentLayerStack {
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
    flex-basis: 148px !important;
  }

  body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-transform-options,
  body .layers #layersWorkspacePanel > .layer-appearance-panel .layer-flip-actions {
    margin-top: 5px !important;
  }
}

/* Source: release-477.css */
/* Release 477: compact whole-group drag control. */
body .layers #layersWorkspacePanel #documentLayerStack > .layer-group-row {
  grid-template-columns: 18px 26px minmax(0, 1fr) 58px !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > .layer-group-row .layer-group-drag-handle {
  width: 18px !important;
  min-width: 18px !important;
  height: 30px !important;
  padding: 0 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > .layer-group-row .layer-group-drag-handle img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.58 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack > .layer-group-row .layer-group-drag-handle:disabled img {
  opacity: 0.22 !important;
}

/* Source: release-479.css */
/* Release 479: compact, honest mixed appearance states. */
body .layers #layersWorkspacePanel .layer-appearance-panel :is(select, input)[data-mixed="true"],
body .layers #layersWorkspacePanel .layer-appearance-panel output[data-mixed="true"] {
  color: #6f7580 !important;
  font-weight: 400 !important;
}

body .layers #layersWorkspacePanel #layerOpacityControl[data-mixed="true"] {
  opacity: 0.58 !important;
}

body .layers #layersWorkspacePanel .layer-paint-properties input[type="color"][data-mixed="true"] {
  border-style: dashed !important;
  border-color: #8b919b !important;
}

body .layers #layersWorkspacePanel .layer-appearance-panel input[data-mixed="true"]::placeholder {
  color: #747a84 !important;
  opacity: 1 !important;
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers #layersWorkspacePanel .layer-appearance-panel :is(select, input)[data-mixed="true"],
  body[data-theme="auto"] .layers #layersWorkspacePanel .layer-appearance-panel output[data-mixed="true"],
  body[data-theme="auto"] .layers #layersWorkspacePanel .layer-appearance-panel input[data-mixed="true"]::placeholder {
    color: #b7bdc6 !important;
  }
}

/* Source: release-487.css */
/* Release 487: contained Layers split with compact auxiliary panels. */

body .layers[data-active-tab="layers"] {
  overflow: hidden !important;
}

body .layers[data-active-tab="layers"] > .inspector-view[data-inspector-view="layers"],
body .layers #layersWorkspacePanel {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(30dvh, 220px) !important;
  flex: 0 1 220px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border-bottom: 1px solid var(--layer-line) !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="more"] #documentLayerStack {
  order: 3 !important;
  display: block !important;
  height: auto !important;
  min-height: 168px !important;
  max-height: 50% !important;
  flex: 1 1 50% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="stack"] #documentLayerStack {
  order: 2 !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel > summary,
body .layers #layersWorkspacePanel > .layer-more-actions > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
  background: var(--layer-panel-bg) !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 7 !important;
  flex: 0 0 50px !important;
}

@media (max-height: 700px) {
  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
    max-height: 180px !important;
    flex-basis: 180px !important;
  }
}

/* Source: release-488.css */
/* Release 488: adjustable auxiliary-to-layers split. */

body .layers #layersWorkspacePanel {
  --layer-detail-size: 180px;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
  order: 2 !important;
  height: var(--layer-detail-size) !important;
  min-height: 96px !important;
  max-height: min(34dvh, 240px) !important;
  flex: 0 1 var(--layer-detail-size) !important;
}

body .layers #layersWorkspacePanel > .layer-panel-split-handle {
  order: 3 !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 12px !important;
  min-height: 12px !important;
  flex: 0 0 12px !important;
  border: 0 !important;
  border-top: 1px solid var(--layer-soft-line) !important;
  border-bottom: 1px solid var(--layer-soft-line) !important;
  outline: 0 !important;
  background: var(--layer-panel-bg) !important;
  cursor: row-resize !important;
  touch-action: none !important;
}

body .layers #layersWorkspacePanel > .layer-panel-split-handle[hidden] {
  display: none !important;
}

body .layers #layersWorkspacePanel > .layer-panel-split-handle > span {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 28px !important;
  height: 2px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 1px !important;
  background: var(--layer-muted) !important;
  opacity: 0.48 !important;
}

body .layers #layersWorkspacePanel > .layer-panel-split-handle:is(:focus-visible, .is-dragging) > span {
  background: var(--layer-accent) !important;
  opacity: 0.9 !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="more"] #documentLayerStack {
  order: 4 !important;
  height: auto !important;
  min-height: 128px !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}

@media (max-height: 700px) {
  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
    max-height: 160px !important;
  }
}

/* Source: release-489.css */
/* Release 489: compact type-specific layer Properties. */

body .layers #layersWorkspacePanel .layer-text-properties > summary,
body .layers #layersWorkspacePanel .layer-text-properties :is(label, span, select, input, button) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-text-property-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding-top: 7px !important;
}

body .layers #layersWorkspacePanel .layer-text-property-grid > label:first-child {
  grid-column: span 2 !important;
}

body .layers #layersWorkspacePanel .layer-text-property-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-text-property-grid :is(select, input) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-text-format-row {
  display: grid !important;
  grid-template-columns: repeat(2, 32px) 1px repeat(3, 32px) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 5px !important;
  padding: 7px 0 0 !important;
}

body .layers #layersWorkspacePanel .layer-text-format-row button {
  display: grid !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 30px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

body .layers #layersWorkspacePanel .layer-text-format-row button img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
}

body .layers #layersWorkspacePanel .layer-text-format-row button:is(.is-active, [aria-pressed="true"]) {
  border-color: var(--layer-accent) !important;
  background: var(--layer-row-selected) !important;
  color: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel .layer-text-format-row button[data-mixed="true"] {
  border-style: dashed !important;
  color: var(--layer-muted) !important;
}

body .layers #layersWorkspacePanel .layer-text-format-divider {
  width: 1px !important;
  height: 22px !important;
  background: var(--layer-line) !important;
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .layer-text-property-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .layers #layersWorkspacePanel .layer-text-format-row {
    gap: 4px !important;
  }
}

/* Source: release-491.css */
/* Release 491: text content and behavior inside Layer Properties. */

body .layers #layersWorkspacePanel .layer-text-content-control {
  display: grid !important;
  gap: 3px !important;
  padding-top: 7px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 11px !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-text-content-control textarea {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  max-height: 120px !important;
  padding: 6px 7px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  outline: 0 !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font: 400 11px/15px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  resize: vertical !important;
}

body .layers #layersWorkspacePanel .layer-text-content-control textarea:focus {
  border-color: var(--layer-accent) !important;
  box-shadow: inset 0 0 0 1px var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel .layer-text-content-control textarea:disabled {
  background: var(--layer-panel-bg) !important;
  color: var(--layer-muted) !important;
  opacity: 0.72 !important;
}

/* Source: release-492.css */
/* Release 492: compact non-destructive image adjustments in Layer Properties. */

body .layers #layersWorkspacePanel .layer-image-properties > summary,
body .layers #layersWorkspacePanel .layer-image-properties :is(label, span, output, input, button) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
  padding-top: 8px !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-grid label > span {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-grid output {
  overflow: hidden !important;
  max-width: 54px !important;
  color: var(--layer-text) !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-grid input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-grid input[data-mixed="true"] {
  opacity: 0.62 !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-actions {
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 8px !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-actions button {
  display: inline-flex !important;
  min-width: 0 !important;
  height: 28px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 7px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-actions button img {
  width: 14px !important;
  height: 14px !important;
}

body .layers #layersWorkspacePanel .layer-image-adjustment-actions button:disabled {
  color: var(--layer-muted) !important;
  opacity: 0.55 !important;
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .layer-image-adjustment-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Source: release-493.css */
/* Release 493: compact vector stroke details in Layer Properties. */

body .layers #layersWorkspacePanel .layer-vector-properties > summary,
body .layers #layersWorkspacePanel .layer-vector-properties :is(label, span, select, input, button, output) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-vector-property-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 8px !important;
  padding-top: 8px !important;
}

body .layers #layersWorkspacePanel .layer-vector-property-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-vector-property-grid :is(select, input) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-vector-property-grid .layer-vector-dash-pattern {
  grid-column: 1 / -1 !important;
}

body .layers #layersWorkspacePanel .layer-vector-property-grid :is(select, input)[data-mixed="true"] {
  border-style: dashed !important;
  color: var(--layer-muted) !important;
}

body .layers #layersWorkspacePanel .layer-vector-property-actions {
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 8px !important;
}

body .layers #layersWorkspacePanel .layer-vector-property-actions button {
  display: inline-flex !important;
  min-width: 0 !important;
  height: 28px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 7px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-vector-property-actions button img {
  width: 14px !important;
  height: 14px !important;
}

body .layers #layersWorkspacePanel .layer-vector-property-actions button:disabled {
  color: var(--layer-muted) !important;
  opacity: 0.55 !important;
}

/* Source: release-494.css */
/* Release 494: accurate selected-dimension controls in Layer Properties. */

body .layers #layersWorkspacePanel .layer-dimension-properties > summary,
body .layers #layersWorkspacePanel .layer-dimension-properties :is(label, span, select, input, output) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-dimension-property-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 8px !important;
  padding-top: 8px !important;
}

body .layers #layersWorkspacePanel .layer-dimension-property-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-dimension-property-grid :is(select, input) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-dimension-property-grid :is(select, input)[data-mixed="true"] {
  border-style: dashed !important;
  color: var(--layer-muted) !important;
}

body .layers #layersWorkspacePanel .layer-dimension-unit-toggle {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 6px !important;
  padding-top: 8px !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers #layersWorkspacePanel .layer-dimension-unit-toggle input {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--layer-accent) !important;
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .layer-dimension-property-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Source: release-495.css */
/* Release 495: auxiliary layer panels above the sticky command toolbar. */

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
  order: 1 !important;
}

body .layers #layersWorkspacePanel > .layer-panel-split-handle {
  order: 2 !important;
}

body .layers #layersWorkspacePanel > .adobe-layer-toolbar {
  order: 3 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 7 !important;
}

body .layers #layersWorkspacePanel > #documentLayerStack {
  order: 4 !important;
}

/* Source: release-497.css */
/* Release 497: clear touch affordances while a layer is being dragged. */

body .layers #layersWorkspacePanel.is-layer-dragging > .adobe-layer-toolbar #layerDeleteToolbarButton:not(.is-drop-delete) {
  background: #fff7f7 !important;
  color: #7f3b38 !important;
}

body .layers #layersWorkspacePanel.is-layer-dragging > #documentLayerStack {
  overscroll-behavior: contain !important;
}

@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] .layers #layersWorkspacePanel.is-layer-dragging > .adobe-layer-toolbar #layerDeleteToolbarButton:not(.is-drop-delete) {
    background: #3b3031 !important;
    color: #f0b5b0 !important;
  }
}

/* Source: release-498.css */
/* Release 498: contextual 3D transform and material controls in Layer Properties. */

body .layers #layersWorkspacePanel .layer-model-properties > summary,
body .layers #layersWorkspacePanel .layer-model-properties :is(legend, label, span, select, input, output, button) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-model-axis-group {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 0 0 !important;
  border: 0 !important;
}

body .layers #layersWorkspacePanel .layer-model-axis-group + .layer-model-axis-group {
  margin-top: 7px !important;
  border-top: 1px solid var(--layer-line) !important;
}

body .layers #layersWorkspacePanel .layer-model-axis-group legend {
  padding: 0 !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-model-axis-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding-top: 5px !important;
}

body .layers #layersWorkspacePanel .layer-model-axis-grid label,
body .layers #layersWorkspacePanel .layer-model-material-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-model-axis-grid input,
body .layers #layersWorkspacePanel .layer-model-material-grid select {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-model-material-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 7px 8px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--layer-line) !important;
}

body .layers #layersWorkspacePanel .layer-model-color-control input[type="color"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 3px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
}

body .layers #layersWorkspacePanel .layer-model-range-control {
  grid-column: 1 / -1 !important;
}

body .layers #layersWorkspacePanel .layer-model-range-control > span {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

body .layers #layersWorkspacePanel .layer-model-range-control output {
  overflow: hidden !important;
  max-width: 58px !important;
  color: var(--layer-text) !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-model-range-control input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel .layer-model-properties :is(input, select)[data-mixed="true"] {
  border-style: dashed !important;
  color: var(--layer-muted) !important;
  opacity: 0.7 !important;
}

body .layers #layersWorkspacePanel .layer-model-property-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding-top: 8px !important;
}

body .layers #layersWorkspacePanel .layer-model-property-actions button {
  display: inline-flex !important;
  min-width: 0 !important;
  height: 28px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 7px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-model-property-actions img {
  width: 14px !important;
  height: 14px !important;
}

body .layers #layersWorkspacePanel .layer-model-properties :is(input, select, button):disabled {
  color: var(--layer-muted) !important;
  opacity: 0.55 !important;
}

/* Source: release-499.css */
/* Release 499: selected video and GIF playback controls in Layer Properties. */

body .layers #layersWorkspacePanel .layer-media-properties > summary,
body .layers #layersWorkspacePanel .layer-media-properties :is(label, span, select, input, output, button) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-media-playhead-control,
body .layers #layersWorkspacePanel .layer-media-volume-control {
  display: grid !important;
  min-width: 0 !important;
  gap: 4px !important;
  padding-top: 8px !important;
  color: var(--layer-muted) !important;
  font-size: 10px !important;
  line-height: 12px !important;
}

body .layers #layersWorkspacePanel .layer-media-playhead-control > span,
body .layers #layersWorkspacePanel .layer-media-volume-control > span {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

body .layers #layersWorkspacePanel .layer-media-playhead-control output,
body .layers #layersWorkspacePanel .layer-media-volume-control output {
  overflow: hidden !important;
  max-width: 112px !important;
  color: var(--layer-text) !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-media-playhead-control input[type="range"],
body .layers #layersWorkspacePanel .layer-media-volume-control input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel .layer-media-property-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding-top: 7px !important;
}

body .layers #layersWorkspacePanel .layer-media-property-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-media-property-grid :is(input, select) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 5px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-media-toggle-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--layer-line) !important;
  margin-top: 8px !important;
}

body .layers #layersWorkspacePanel .layer-media-toggle-row label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-media-toggle-row input {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel :is(.layer-media-transport-actions, .layer-media-edit-actions) {
  display: grid !important;
  gap: 5px !important;
  padding-top: 8px !important;
}

body .layers #layersWorkspacePanel .layer-media-transport-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body .layers #layersWorkspacePanel .layer-media-edit-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body .layers #layersWorkspacePanel :is(.layer-media-transport-actions, .layer-media-edit-actions) button {
  display: inline-flex !important;
  min-width: 0 !important;
  height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 4px !important;
  overflow: hidden !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 9px !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel :is(.layer-media-transport-actions, .layer-media-edit-actions) button img {
  width: 13px !important;
  height: 13px !important;
  object-fit: contain !important;
}

body .layers #layersWorkspacePanel .layer-media-transport-actions img.is-forward {
  transform: rotate(180deg) !important;
}

body .layers #layersWorkspacePanel .layer-media-properties :is(input, select, button):disabled {
  color: var(--layer-muted) !important;
  opacity: 0.55 !important;
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .layer-media-transport-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Source: release-500.css */
/* Release 500: contextual adjustment-layer controls in Layer Properties. */

body .layers #layersWorkspacePanel .layer-adjustment-properties > summary,
body .layers #layersWorkspacePanel .layer-adjustment-properties :is(label, span, input, output, button) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-group {
  min-width: 0 !important;
  padding: 8px 0 0 !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-group + .layer-adjustment-group {
  margin-top: 8px !important;
  border-top: 1px solid var(--layer-line) !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-group-title {
  display: block !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-control-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 10px !important;
  padding-top: 6px !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-control-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-control-grid label > span {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-control-grid output {
  overflow: hidden !important;
  max-width: 52px !important;
  color: var(--layer-text) !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-control-grid input[type="range"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-control-grid input[data-mixed="true"] {
  opacity: 0.62 !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-actions {
  display: flex !important;
  justify-content: flex-end !important;
  padding-top: 9px !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-actions button {
  display: inline-flex !important;
  min-width: 0 !important;
  height: 28px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 7px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-actions img {
  width: 14px !important;
  height: 14px !important;
}

body .layers #layersWorkspacePanel .layer-adjustment-properties :is(input, button):disabled {
  color: var(--layer-muted) !important;
  opacity: 0.55 !important;
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .layer-adjustment-control-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Source: release-501.css */
/* Release 501: contextual PDF markup controls in Layer Properties. */

body .layers #layersWorkspacePanel .layer-pdf-properties > summary,
body .layers #layersWorkspacePanel .layer-pdf-properties :is(label, span, input, select, button, output) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-pdf-kind-properties {
  min-width: 0 !important;
  padding-top: 8px !important;
}

body .layers #layersWorkspacePanel .layer-pdf-property-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 8px !important;
}

body .layers #layersWorkspacePanel .layer-pdf-property-grid label,
body .layers #layersWorkspacePanel .layer-pdf-wide-control {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-pdf-wide-control {
  margin-bottom: 8px !important;
}

body .layers #layersWorkspacePanel .layer-pdf-full-row {
  grid-column: 1 / -1 !important;
}

body .layers #layersWorkspacePanel .layer-pdf-property-grid :is(input, select),
body .layers #layersWorkspacePanel .layer-pdf-wide-control input {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-pdf-property-grid input[type="color"] {
  padding: 3px !important;
}

body .layers #layersWorkspacePanel .layer-pdf-toggle,
body .layers #layersWorkspacePanel .layer-pdf-toggle-row {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--layer-line) !important;
}

body .layers #layersWorkspacePanel .layer-pdf-toggle-row {
  flex-wrap: wrap !important;
}

body .layers #layersWorkspacePanel :is(.layer-pdf-toggle, .layer-pdf-toggle-row label) {
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel :is(.layer-pdf-toggle, .layer-pdf-toggle-row label) input {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel .layer-pdf-property-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding-top: 9px !important;
}

body .layers #layersWorkspacePanel .layer-pdf-property-actions button {
  display: inline-flex !important;
  min-width: 0 !important;
  height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-pdf-property-actions img {
  width: 14px !important;
  height: 14px !important;
}

body .layers #layersWorkspacePanel .layer-pdf-properties :is(input, select, button):disabled {
  color: var(--layer-muted) !important;
  opacity: 0.55 !important;
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .layer-pdf-property-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .layers #layersWorkspacePanel .layer-pdf-full-row {
    grid-column: auto !important;
  }
}

/* Source: release-502.css */
/* Release 502: contextual floor-plan construction controls in Layer Properties. */

body .layers #layersWorkspacePanel .layer-build-properties > summary,
body .layers #layersWorkspacePanel .layer-build-properties :is(label, span, input, select, button, output) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-build-kind-properties {
  min-width: 0 !important;
  max-height: min(280px, 34vh) !important;
  padding-top: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .layers #layersWorkspacePanel .layer-build-metric-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  padding: 0 1px 8px !important;
  border-bottom: 1px solid var(--layer-line) !important;
}

body .layers #layersWorkspacePanel .layer-build-metric-strip output {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-build-metric-strip output:last-child {
  text-align: right !important;
}

body .layers #layersWorkspacePanel .layer-build-property-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 8px !important;
}

body .layers #layersWorkspacePanel .layer-build-property-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-build-property-grid .layer-build-full-row {
  grid-column: 1 / -1 !important;
}

body .layers #layersWorkspacePanel .layer-build-property-grid :is(input, select) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-build-property-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding-top: 9px !important;
}

body .layers #layersWorkspacePanel .layer-build-property-actions button {
  display: inline-flex !important;
  min-width: 0 !important;
  height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-build-property-actions img {
  width: 14px !important;
  height: 14px !important;
}

body .layers #layersWorkspacePanel .layer-build-properties :is(input, select, button):disabled {
  color: var(--layer-muted) !important;
  opacity: 0.55 !important;
}

@media (max-height: 650px) {
  body .layers #layersWorkspacePanel .layer-build-kind-properties {
    max-height: 190px !important;
  }
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .layer-build-property-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .layers #layersWorkspacePanel .layer-build-property-grid .layer-build-full-row {
    grid-column: auto !important;
  }
}

/* Source: release-503.css */
/* Release 503: compact Area and Angle controls in Layer Properties. */

body .layers #layersWorkspacePanel .layer-measurement-properties > summary,
body .layers #layersWorkspacePanel .layer-measurement-properties :is(label, span, input, select, button, output) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-measurement-kind-properties {
  min-width: 0 !important;
  max-height: min(280px, 34vh) !important;
  padding-top: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .layers #layersWorkspacePanel .layer-measurement-metric-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  padding: 0 1px 8px !important;
  border-bottom: 1px solid var(--layer-line) !important;
}

body .layers #layersWorkspacePanel .layer-measurement-metric-strip output {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-measurement-metric-strip output:last-child {
  text-align: right !important;
}

body .layers #layersWorkspacePanel .layer-measurement-property-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 8px !important;
}

body .layers #layersWorkspacePanel .layer-measurement-property-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-measurement-property-grid :is(input, select) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-measurement-unit-toggle {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 6px !important;
  padding-top: 8px !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-measurement-unit-toggle input {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--layer-accent) !important;
}

body .layers #layersWorkspacePanel .layer-measurement-property-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding-top: 9px !important;
}

body .layers #layersWorkspacePanel .layer-measurement-property-actions button {
  display: inline-flex !important;
  min-width: 0 !important;
  height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-measurement-property-actions img {
  width: 14px !important;
  height: 14px !important;
}

body .layers #layersWorkspacePanel .layer-measurement-properties :is(input, select, button):disabled {
  color: var(--layer-muted) !important;
  opacity: 0.55 !important;
}

@media (max-height: 650px) {
  body .layers #layersWorkspacePanel .layer-measurement-kind-properties {
    max-height: 190px !important;
  }
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .layer-measurement-property-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Source: release-504.css */
/* Release 504: live vector shape controls in Layer Properties. */

body .layers #layersWorkspacePanel .layer-shape-properties > summary,
body .layers #layersWorkspacePanel .layer-shape-properties :is(label, span, input, button, output) {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel .layer-shape-property-body {
  min-width: 0 !important;
  max-height: min(236px, 30vh) !important;
  padding-top: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .layers #layersWorkspacePanel .layer-shape-metric-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  padding: 0 1px 8px !important;
  border-bottom: 1px solid var(--layer-line) !important;
}

body .layers #layersWorkspacePanel .layer-shape-metric-strip output {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-shape-metric-strip output:last-child {
  text-align: right !important;
}

body .layers #layersWorkspacePanel .layer-shape-property-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 8px !important;
}

body .layers #layersWorkspacePanel .layer-shape-property-grid:empty {
  display: none !important;
}

body .layers #layersWorkspacePanel .layer-shape-property-grid label {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  line-height: 11px !important;
}

body .layers #layersWorkspacePanel .layer-shape-property-grid label[hidden] {
  display: none !important;
}

body .layers #layersWorkspacePanel .layer-shape-property-grid input {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 6px !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 10px !important;
}

body .layers #layersWorkspacePanel .layer-shape-property-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding-top: 9px !important;
}

body .layers #layersWorkspacePanel .layer-shape-property-actions button {
  display: inline-flex !important;
  min-width: 0 !important;
  height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 0 6px !important;
  overflow: hidden !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel .layer-shape-property-actions img {
  width: 14px !important;
  height: 14px !important;
}

body .layers #layersWorkspacePanel .layer-shape-properties :is(input, button):disabled {
  color: var(--layer-muted) !important;
  opacity: 0.55 !important;
}

@media (max-height: 650px) {
  body .layers #layersWorkspacePanel .layer-shape-property-body {
    max-height: 172px !important;
  }
}

@media (max-width: 350px) {
  body .layers #layersWorkspacePanel .layer-shape-property-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Source: release-505.css */
/* Release 505: permanent Layers commands with contained More and Properties. */

body .layers #layersWorkspacePanel,
body .layers #layersWorkspacePanel * {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel {
  --layer-detail-size: 176px;
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body .layers #layersWorkspacePanel > .adobe-layer-header {
  order: 0 !important;
  flex: 0 0 32px !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
  position: relative !important;
  z-index: 5 !important;
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  height: min(var(--layer-detail-size), 210px) !important;
  min-height: 96px !important;
  max-height: min(32dvh, 210px) !important;
  flex: 0 1 min(var(--layer-detail-size), 210px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel:not([open]),
body .layers #layersWorkspacePanel > .layer-more-actions[hidden] {
  display: none !important;
}

body .layers #layersWorkspacePanel > .layer-panel-split-handle {
  order: 2 !important;
  flex: 0 0 10px !important;
  height: 10px !important;
  min-height: 10px !important;
}

body .layers #layersWorkspacePanel > #layerCommandToolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9 !important;
  order: 3 !important;
  display: grid !important;
  visibility: visible !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body .layers #layersWorkspacePanel > #layerCommandToolbar button {
  min-height: 48px !important;
  padding: 3px 1px !important;
}

body .layers #layersWorkspacePanel > #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="stack"] > #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="more"] > #documentLayerStack {
  position: relative !important;
  z-index: 2 !important;
  order: 4 !important;
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  min-height: 128px !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  opacity: 1 !important;
}

body .layers #layersWorkspacePanel .layer-property-name-edit {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 4px !important;
}

body .layers #layersWorkspacePanel .layer-property-name-edit #layerNameApplyButton {
  display: grid !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
}

body .layers #layersWorkspacePanel .layer-property-name-edit #layerNameApplyButton img {
  width: 15px !important;
  height: 15px !important;
}

@media (max-height: 650px) {
  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
    height: min(var(--layer-detail-size), 148px) !important;
    max-height: 148px !important;
    flex-basis: 148px !important;
  }

  body .layers #layersWorkspacePanel > #documentLayerStack,
  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #documentLayerStack,
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > #documentLayerStack {
    min-height: 112px !important;
  }
}

/* Source: release-506.css */
/* Release 506: compact complete Arrange commands in Layers More. */

body .layers #layersWorkspacePanel #layerMoreMenu :is(
  #layerFrontButton,
  #layerForwardButton,
  #layerBackwardButton,
  #layerBackButton
) {
  min-width: 0 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

body .layers #layersWorkspacePanel #layerMoreMenu :is(
  #layerFrontButton,
  #layerForwardButton,
  #layerBackwardButton,
  #layerBackButton
) span {
  overflow: hidden !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Source: release-509.css */
/* Release 509: compact live artwork previews in the standard Layers stack. */

body .layers #layersWorkspacePanel #documentLayerStack .layer-thumbnail.has-art-preview {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  overflow: hidden !important;
  border: 1px solid #aeb4bd !important;
  border-radius: 3px !important;
  background: #fff !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-art-thumbnail,
body .layers #layersWorkspacePanel #documentLayerStack .layer-thumbnail-fallback {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  margin: auto !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-art-thumbnail {
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-thumbnail-fallback {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-thumbnail.has-art-preview.is-ready .layer-art-thumbnail {
  opacity: 1 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-thumbnail.has-art-preview.is-ready .layer-thumbnail-fallback {
  opacity: 0 !important;
}

body .layers #layersWorkspacePanel #documentLayerStack .layer-name,
body .layers #layersWorkspacePanel #documentLayerStack .layer-kind {
  font-weight: 400 !important;
}

/* Source: release-510.css */
/* Release 510: integrated auxiliary panels, recoverable scrolling, and tighter iOS tools. */

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  order: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 148px !important;
  max-height: none !important;
  flex: 1 1 var(--layer-detail-size, 180px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

body .layers #layersWorkspacePanel > .layer-appearance-panel > summary,
body .layers #layersWorkspacePanel > .layer-more-actions > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  min-height: 38px !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

body .layers #layersWorkspacePanel > .layer-panel-split-handle {
  order: 2 !important;
  height: 8px !important;
  min-height: 8px !important;
  flex-basis: 8px !important;
}

body .layers #layersWorkspacePanel > #layerCommandToolbar {
  order: 3 !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #documentLayerStack,
body .layers #layersWorkspacePanel[data-layer-panel="more"] > #documentLayerStack {
  order: 4 !important;
  height: auto !important;
  min-height: 96px !important;
  max-height: min(34dvh, 220px) !important;
  flex: 0 1 auto !important;
  overflow-y: auto !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="stack"] > #documentLayerStack {
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}

body .layers[data-style-section]:not([data-style-section="Style"]) #layerStylesPanel,
body .layers #layerStylesPanel[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  body .layers {
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body .layers > .inspector-view.is-active:not([hidden]) {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body .layers[data-active-tab="layers"] > .inspector-view[data-inspector-view="layers"] {
    overflow: hidden !important;
  }

  body .layers .style-section-nav,
  body .layers .library-section-tabs,
  body .layers .artboard-view-toggles {
    min-height: 42px !important;
    margin-bottom: 4px !important;
    padding: 0 4px !important;
  }

  body .layers :is(.style-section-nav, .library-section-tabs, .artboard-view-toggles) button {
    min-height: 42px !important;
    grid-template-rows: 19px 13px !important;
    gap: 0 !important;
    padding: 3px 1px !important;
  }

  body .layers :is(.style-section-nav, .library-section-tabs, .artboard-view-toggles) button img {
    width: 17px !important;
    height: 17px !important;
  }

  body .layers :is(.style-section-nav, .library-section-tabs, .artboard-view-toggles) button span {
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 12px !important;
  }

  body .tool-flyout.is-open {
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 0 5px 5px 0 !important;
  }

  body .tool-flyout .flyout-head {
    min-height: 38px !important;
    padding: 0 7px !important;
  }

  body .tool-flyout .flyout-tool-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    padding: 4px !important;
  }

  body .tool-flyout .flyout-tool-list button {
    min-height: 42px !important;
    grid-template-rows: 20px 12px !important;
    gap: 1px !important;
    padding: 3px 2px !important;
    border-radius: 2px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 12px !important;
  }

  body .tool-flyout .flyout-tool-list button img {
    width: 18px !important;
    height: 18px !important;
  }

  body .tool-flyout .flyout-adjustments {
    gap: 5px !important;
    padding: 6px !important;
  }

  body .tool-flyout .flyout-adjustments > strong {
    margin: 0 !important;
    padding: 2px 0 !important;
    font-weight: 400 !important;
  }
}

/* Source: release-511.css */
/* Release 511: Linearity-style category ownership and a hierarchy-first Layers panel. */

body .layers #layersWorkspacePanel > #layerPropertiesPanel,
body .layers #layersWorkspacePanel > #layerFilterPanel,
body .layers #layersWorkspacePanel > #layerCompsPanel,
body .layers #layersWorkspacePanel > #layerMaskProperties,
body .layers #layersWorkspacePanel > #smartObjectPanel {
  display: none !important;
}

body .layers #layersWorkspacePanel > #documentLayerStack {
  order: 4 !important;
  min-height: 170px !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="more"] > #documentLayerStack {
  min-height: 132px !important;
  max-height: min(40dvh, 300px) !important;
  flex: 0 1 auto !important;
}

body .layers #layersWorkspacePanel > .layer-panel-split-handle {
  display: none !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-panel-split-handle {
  display: flex !important;
}

body .layers #layersWorkspacePanel .adobe-layer-toolbar #layerRenameToolbarButton img {
  width: 18px !important;
  height: 18px !important;
}

body .layers .style-section-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 3px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--curve-line) !important;
  background: var(--curve-panel) !important;
}

body .layers .style-section-nav button {
  min-height: 40px !important;
  height: 40px !important;
  grid-template-rows: 18px 12px !important;
  gap: 0 !important;
  padding: 3px 1px !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
}

body .layers .style-section-nav button.is-active {
  box-shadow: inset 0 -2px 0 var(--curve-accent) !important;
}

body .layers .style-section-nav button img {
  width: 17px !important;
  height: 17px !important;
}

body .layers .style-section-nav button span {
  overflow: hidden !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .style-control-label {
  display: block !important;
  margin: 8px 0 4px !important;
  color: var(--curve-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers .style-order-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: 0 0 6px !important;
}

body .layers .style-order-grid button {
  min-width: 0 !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-rows: 20px 12px !important;
  place-items: center !important;
  gap: 1px !important;
  padding: 3px 1px !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: var(--curve-text) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

body .layers .style-order-grid button img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

body .layers .contextual-inspector-section {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .layers .contextual-inspector-section > summary,
body .layers section.contextual-inspector-section > header {
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

@media (max-width: 760px) {
  body .tool-flyout .flyout-tool-list button {
    min-height: 38px !important;
    grid-template-rows: 18px 11px !important;
    padding: 2px 1px !important;
  }

  body .tool-flyout .flyout-tool-list button img {
    width: 17px !important;
    height: 17px !important;
  }

  body .tool-flyout .flyout-adjustments {
    gap: 4px !important;
    padding: 5px !important;
  }
}

/* Source: release-512.css */
/* Release 512: compact Linearity-inspired iPhone workspace geometry. */

@media (max-width: 430px), (max-height: 430px) and (orientation: landscape) {
  :root {
    --phone-width: 100vw;
    --phone-left: 0px;
    --rail-width: 44px;
    --title-row-height: 48px;
    --command-height: 44px;
    --topbar-height: calc(var(--title-row-height) + var(--command-height) + env(safe-area-inset-top, 0px));
    --editor-top: var(--topbar-height);
    --bottom-height: calc(54px + env(safe-area-inset-bottom, 0px));
    --iphone-sheet-height: min(64dvh, 520px);
  }

  html,
  body,
  body .app-shell,
  body .workspace {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  body .app-shell {
    inset: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body .topbar {
    inset: 0 0 auto 0 !important;
    width: 100vw !important;
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--ios-line) !important;
    background: var(--ios-surface) !important;
  }

  body .topbar-back-button,
  body #iosMenuButton {
    top: env(safe-area-inset-top, 0px) !important;
    width: 44px !important;
    min-width: 44px !important;
    height: var(--title-row-height) !important;
    min-height: var(--title-row-height) !important;
  }

  body #iosMenuButton {
    left: auto !important;
    right: 0 !important;
  }

  body .topbar-back-button img,
  body #iosMenuButton img {
    width: 19px !important;
    height: 19px !important;
  }

  body .history-actions {
    inset: env(safe-area-inset-top, 0px) 44px auto 44px !important;
    width: auto !important;
    height: var(--title-row-height) !important;
  }

  body .document-chip {
    left: 0 !important;
    right: 0 !important;
    height: var(--title-row-height) !important;
    padding: 0 8px !important;
  }

  body .document-chip strong {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
  }

  body .document-action-menu {
    top: calc(var(--title-row-height) + env(safe-area-inset-top, 0px)) !important;
    width: 100vw !important;
    height: var(--command-height) !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    overflow: hidden !important;
    border-bottom: 1px solid var(--ios-line) !important;
  }

  body .document-action-menu button,
  body .document-action-menu #undoButton,
  body .document-action-menu #redoButton,
  body .document-action-menu #deleteButton {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--command-height) !important;
    min-height: var(--command-height) !important;
    grid-template-rows: 18px 11px !important;
    gap: 1px !important;
    padding: 3px 1px 2px !important;
  }

  body .document-action-menu button img,
  body .document-action-menu #undoButton img,
  body .document-action-menu #redoButton img,
  body .document-action-menu #deleteButton img {
    width: 17px !important;
    height: 17px !important;
    opacity: 0.86 !important;
  }

  body .document-action-menu button span {
    height: 11px !important;
    font-size: 8.5px !important;
    font-weight: 400 !important;
    line-height: 11px !important;
  }

  body .canvas-wrap {
    inset: var(--editor-top) var(--rail-width) var(--bottom-height) var(--rail-width) !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
  }

  body #addMenuButton {
    top: var(--editor-top) !important;
    left: 0 !important;
    width: var(--rail-width) !important;
    min-width: var(--rail-width) !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body #addMenuButton span {
    font-size: 20px !important;
    font-weight: 400 !important;
  }

  body .sidebar {
    inset: calc(var(--editor-top) + 44px) auto var(--bottom-height) 0 !important;
    width: var(--rail-width) !important;
    overflow: visible !important;
  }

  body .sidebar .tool-grid {
    grid-auto-rows: 44px !important;
    padding: 0 !important;
  }

  body .sidebar .tool,
  body .sidebar .rail-profile-button {
    width: 43px !important;
    min-width: 43px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 0 !important;
  }

  body .sidebar .tool img,
  body .sidebar .rail-profile-button img {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.84 !important;
  }

  body .sidebar .tool.is-active {
    background: var(--ios-selected) !important;
    box-shadow: inset 2px 0 0 var(--curve-accent, #c98a2a) !important;
  }

  body .app-frame-right-nav {
    inset: var(--editor-top) 0 var(--bottom-height) auto !important;
    width: var(--rail-width) !important;
    grid-auto-rows: 44px !important;
    overflow-y: auto !important;
  }

  body .app-frame-right-nav button {
    width: 43px !important;
    min-width: 43px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body .app-frame-right-nav button img,
  body .app-frame-right-nav button::before {
    width: 20px !important;
    height: 20px !important;
    background-size: 20px 20px !important;
    opacity: 0.84 !important;
  }

  body .tool-flyout,
  body .tool-flyout.is-open {
    left: var(--rail-width) !important;
    right: auto !important;
    width: min(242px, calc(100vw - (var(--rail-width) * 2))) !important;
    max-width: calc(100vw - (var(--rail-width) * 2)) !important;
    max-height: calc(100dvh - var(--flyout-top, var(--editor-top)) - var(--bottom-height) - 4px) !important;
    border-radius: 0 6px 6px 0 !important;
  }

  body .tool-flyout.is-right-anchored {
    left: auto !important;
    right: var(--rail-width) !important;
    border-radius: 6px 0 0 6px !important;
  }

  body .tool-flyout .flyout-head {
    min-height: 36px !important;
    padding: 0 5px 0 8px !important;
  }

  body .tool-flyout .flyout-head strong,
  body .tool-flyout .flyout-adjustments > strong {
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  body .tool-flyout .flyout-tool-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    padding: 3px !important;
  }

  body .tool-flyout .flyout-tool-list button {
    min-height: 40px !important;
    grid-template-rows: 18px 11px !important;
    gap: 0 !important;
    padding: 2px 1px !important;
    border-radius: 2px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 11px !important;
  }

  body .tool-flyout .flyout-tool-list button img {
    width: 17px !important;
    height: 17px !important;
  }

  body .tool-flyout .flyout-adjustments {
    gap: 4px !important;
    padding: 5px 6px 6px !important;
  }

  body .tool-flyout .flyout-adjustments label {
    grid-template-columns: 50px minmax(0, 1fr) 34px !important;
    gap: 5px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }

  body .bottom-workflows {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: var(--bottom-height) !important;
    min-height: var(--bottom-height) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    border-top: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
  }

  body .bottom-workflows button,
  body .bottom-workflows button[data-workflow] {
    width: 100% !important;
    min-width: 0 !important;
    height: 53px !important;
    min-height: 53px !important;
    display: grid !important;
    grid-template-rows: 22px 13px !important;
    gap: 0 !important;
    padding: 4px 1px 3px !important;
    border-radius: 0 !important;
    color: var(--ios-text) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 12px !important;
  }

  body .bottom-workflows button:nth-child(-n + 4) {
    display: grid !important;
  }

  body .bottom-workflows button img,
  body .bottom-workflows button::before {
    width: 20px !important;
    height: 20px !important;
    background-size: 20px 20px !important;
  }

  body .bottom-workflows button span,
  body .bottom-workflows button::after {
    height: 13px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 13px !important;
  }

  body .bottom-workflows button.is-active {
    color: var(--curve-accent, #c98a2a) !important;
    background: var(--ios-selected) !important;
    box-shadow: inset 0 2px 0 var(--curve-accent, #c98a2a) !important;
  }

  body .layers {
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--iphone-sheet-height) !important;
    min-height: min(300px, var(--iphone-sheet-height)) !important;
    max-height: var(--iphone-sheet-height) !important;
    padding: 10px 0 calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid var(--ios-line) !important;
    border-radius: 8px 8px 0 0 !important;
    background: var(--curve-sheet, var(--ios-panel)) !important;
    box-shadow: 0 -4px 14px rgba(24, 27, 32, 0.1) !important;
  }

  body .layers::before {
    top: 5px !important;
    width: 32px !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: #8d9096 !important;
  }

  body .layers .inspector-title {
    top: -10px !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    grid-template-columns: 68px minmax(0, 1fr) 40px 40px !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 7px 4px 0 !important;
    border-bottom: 1px solid var(--curve-line) !important;
    background: var(--curve-sheet, var(--ios-panel)) !important;
  }

  body .layers .inspector-title h2 {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
  }

  body .layers .sheet-select-button,
  body .layers .sheet-add-button,
  body .layers .sheet-close-button {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }

  body .layers .sheet-select-button {
    width: 68px !important;
  }

  body .layers .sheet-add-button,
  body .layers .sheet-close-button {
    width: 40px !important;
  }

  body .layers .sheet-add-button img,
  body .layers .sheet-close-button img {
    width: 18px !important;
    height: 18px !important;
  }

  body .layers > .inspector-view.is-active:not([hidden]) {
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body .layers .style-section-nav,
  body .layers .library-section-tabs,
  body .layers .artboard-view-toggles {
    position: sticky !important;
    z-index: 12 !important;
    top: 38px !important;
    min-height: 40px !important;
    margin: 0 -6px 4px !important;
    padding: 0 2px !important;
    border-radius: 0 !important;
    background: var(--curve-sheet, var(--ios-panel)) !important;
  }

  body .layers :is(.style-section-nav, .library-section-tabs, .artboard-view-toggles) button {
    min-height: 40px !important;
    height: 40px !important;
    grid-template-rows: 17px 11px !important;
    gap: 0 !important;
    padding: 3px 1px !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
  }

  body .layers :is(.style-section-nav, .library-section-tabs, .artboard-view-toggles) button img {
    width: 16px !important;
    height: 16px !important;
  }

  body .layers :is(.style-section-nav, .library-section-tabs, .artboard-view-toggles) button span {
    font-size: 8.5px !important;
    font-weight: 400 !important;
    line-height: 11px !important;
  }

  body .layers #layersWorkspacePanel {
    min-height: 0 !important;
    height: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body .layers #layersWorkspacePanel > .adobe-layer-header {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }

  body .layers #layersWorkspacePanel > #layerCommandToolbar {
    position: sticky !important;
    z-index: 16 !important;
    top: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: var(--curve-sheet, var(--ios-panel)) !important;
  }

  body .layers #layersWorkspacePanel > #layerCommandToolbar button {
    min-width: 0 !important;
    min-height: 43px !important;
    height: 43px !important;
    grid-template-rows: 18px 11px !important;
    gap: 0 !important;
    padding: 3px 0 2px !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
  }

  body .layers #layersWorkspacePanel > #layerCommandToolbar button img {
    width: 16px !important;
    height: 16px !important;
  }

  body .layers #layersWorkspacePanel > #layerCommandToolbar button span {
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 10px !important;
  }

  body .layers #layersWorkspacePanel > #documentLayerStack,
  body .layers #layersWorkspacePanel[data-layer-panel="stack"] > #documentLayerStack {
    min-height: 100px !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
  }

  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-appearance-panel[open],
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-more-actions:not([hidden]) {
    min-height: 112px !important;
    max-height: min(23dvh, 178px) !important;
    flex: 0 1 min(23dvh, 178px) !important;
    overflow-y: auto !important;
  }

  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #documentLayerStack,
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > #documentLayerStack {
    min-height: 96px !important;
    max-height: none !important;
    flex: 1 1 auto !important;
  }

  body .layers #layersWorkspacePanel > .layer-appearance-panel > summary,
  body .layers #layersWorkspacePanel > .layer-more-actions > header {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  body .layers #layersWorkspacePanel .layer-list li,
  body .layers #layersWorkspacePanel .adobe-layer-stack > li {
    min-height: 48px !important;
    grid-template-columns: 18px 34px minmax(0, 1fr) auto !important;
    gap: 5px !important;
    padding: 4px 3px !important;
  }

  body .layers #layersWorkspacePanel .layer-thumbnail,
  body .layers #layersWorkspacePanel .layer-thumbnail.has-art-preview {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  body .layers #layersWorkspacePanel .layer-name > span:first-child {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 15px !important;
  }

  body .layers #layersWorkspacePanel .layer-kind {
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 11px !important;
  }

  body .layers #layersWorkspacePanel .layer-toggle {
    width: 27px !important;
    height: 34px !important;
    border-radius: 0 !important;
  }

  body .layers #layersWorkspacePanel .layer-toggle img {
    width: 16px !important;
    height: 16px !important;
  }

  body .layers :is(input, select, textarea, button, label, output, summary, strong, span, small, h2, h3) {
    letter-spacing: 0 !important;
  }

  body .layers :is(label, output, summary, small, span) {
    font-weight: 400 !important;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  :root {
    --rail-width: 42px;
    --title-row-height: 44px;
    --command-height: 40px;
    --bottom-height: calc(50px + env(safe-area-inset-bottom, 0px));
    --iphone-sheet-height: min(68dvh, 270px);
  }

  body .bottom-workflows button,
  body .bottom-workflows button[data-workflow] {
    height: 49px !important;
    min-height: 49px !important;
  }

  body .layers {
    min-height: 220px !important;
  }

  body .layers .inspector-title {
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Source: release-513.css */
/* Release 513: Linearity-inspired iPhone inspector ownership and layer appearance. */

body .layers #layersWorkspacePanel > #layerPropertiesPanel:not([open]) {
  display: none !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #layerPropertiesPanel[open] {
  position: relative !important;
  inset: auto !important;
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  min-height: 104px !important;
  max-height: min(23dvh, 176px) !important;
  flex: 0 1 min(23dvh, 176px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-bottom: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: var(--curve-sheet, var(--ios-panel)) !important;
  box-shadow: none !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > .layer-panel-split-handle,
body .layers #layersWorkspacePanel[data-layer-panel="more"] > .layer-panel-split-handle {
  display: flex !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel > #layerTransformProperties,
body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-paint-properties,
body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-effect-property,
body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-arrange-section,
body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-options-section {
  display: none !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-identity {
  grid-template-columns: 28px minmax(0, 1fr) auto 32px !important;
  gap: 5px !important;
  min-height: 42px !important;
  padding: 4px 7px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-icon {
  width: 26px !important;
  height: 26px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-name input {
  height: 28px !important;
  min-height: 28px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-switches label {
  min-height: 32px !important;
  padding: 3px 4px !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-section > summary {
  min-height: 32px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-controls {
  grid-template-columns: minmax(0, 1fr) minmax(108px, 0.7fr) !important;
  gap: 7px !important;
  padding: 6px 8px 8px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-controls select {
  height: 30px !important;
  min-height: 30px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers #layerCommandToolbar #layerPropertiesToolbarButton[aria-expanded="true"] {
  color: var(--curve-accent) !important;
  background: var(--ios-selected) !important;
  box-shadow: inset 0 -2px 0 var(--curve-accent) !important;
}

body .layers .artboard-inspector-panel > .document-file-import {
  display: none !important;
}

body .layers .artboard-inspector-panel > h2,
body .layers [data-inspector-view="library"] > .panel > h2,
body .layers #layersWorkspacePanel > .panel-heading {
  display: none !important;
}

body .layers .artboard-inspector-panel .artboard-property-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

body .layers .artboard-inspector-panel > h3 {
  margin: 8px 0 4px !important;
  color: var(--curve-muted) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

body .layers .artboard-inspector-panel :is(label, select, input, button) {
  font-weight: 400 !important;
}

body .layers .artboard-inspector-panel .artboard-clip-control {
  display: flex !important;
  min-height: 34px !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 1px !important;
}

body .layers .artboard-inspector-panel .artboard-clip-control input {
  width: 17px !important;
  height: 17px !important;
}

body .canvas-wrap.artboard-unclipped {
  overflow: visible !important;
}

body .layers .library-section-tabs {
  grid-template-columns: repeat(6, minmax(52px, 1fr)) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

body .layers .library-section-tabs::-webkit-scrollbar {
  display: none !important;
}

body .layers .library-section-tabs button {
  min-width: 52px !important;
}

body .layers .layer-styles-panel > summary::first-letter {
  text-transform: uppercase;
}

body .layers[data-style-section]:not([data-style-section="Style"]) #layerStylesPanel,
body .layers #layerStylesPanel[hidden] {
  display: none !important;
}

@media (max-width: 430px), (max-height: 430px) and (orientation: landscape) {
  body .layers #layersWorkspacePanel > #layerCommandToolbar {
    position: sticky !important;
    z-index: 18 !important;
    top: 0 !important;
    order: 3 !important;
  }

  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #documentLayerStack,
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > #documentLayerStack {
    min-height: 112px !important;
    flex: 1 1 auto !important;
  }

  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #layerPropertiesPanel[open],
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > #layerMoreMenu:not([hidden]) {
    max-height: min(22dvh, 170px) !important;
    flex-basis: min(22dvh, 170px) !important;
  }

  body .layers .style-section-nav,
  body .layers .library-section-tabs,
  body .layers .artboard-view-toggles {
    position: sticky !important;
    z-index: 14 !important;
    top: 38px !important;
  }

  body .layers .style-section-nav button span,
  body .layers .library-section-tabs button span,
  body .layers .artboard-view-toggles button span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers .panel,
  body .layers .style-inspector-content,
  body .layers .library-section {
    font-weight: 400 !important;
  }

  body .layers .panel :is(h2, h3, strong) {
    font-weight: 500 !important;
  }
}

/* Source: release-514.css */
/* Release 514: lock the iPhone inspector stack order and artboard containment. */

body .layers #layersWorkspacePanel > .adobe-layer-header {
  order: 0 !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #layerPropertiesPanel[open],
body .layers #layersWorkspacePanel[data-layer-panel="more"] > #layerMoreMenu:not([hidden]) {
  position: relative !important;
  inset: auto !important;
  order: 1 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body .layers #layersWorkspacePanel > .layer-panel-split-handle {
  order: 2 !important;
}

body .layers #layersWorkspacePanel > #layerCommandToolbar {
  position: sticky !important;
  z-index: 18 !important;
  top: 0 !important;
  order: 3 !important;
}

body .layers #layersWorkspacePanel > #documentLayerStack {
  order: 4 !important;
}

body .canvas-wrap.artboard-unclipped {
  overflow: auto !important;
}

@media (max-width: 430px), (max-height: 430px) and (orientation: landscape) {
  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #layerPropertiesPanel[open],
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > #layerMoreMenu:not([hidden]) {
    min-height: 104px !important;
    max-height: min(22dvh, 170px) !important;
    flex: 0 1 min(22dvh, 170px) !important;
  }

  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #documentLayerStack,
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > #documentLayerStack {
    min-height: 112px !important;
    flex: 1 1 auto !important;
  }
}

/* Source: release-515.css */
/* Release 515: precise artboard units and compact iPhone size fields. */

body .layers .artboard-inspector-panel .artboard-size-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
}

body .layers .artboard-inspector-panel .artboard-size-fields label {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body .layers .artboard-inspector-panel .artboard-size-fields label > span {
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

body .layers .artboard-inspector-panel .artboard-size-fields input {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

@media (max-width: 430px), (max-height: 430px) and (orientation: landscape) {
  body .layers .artboard-inspector-panel .artboard-size-fields input {
    height: 30px !important;
  }
}

/* Source: release-516.css */
/* Release 516: hierarchy-first iPhone Layers properties. */

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #layerPropertiesPanel[open] {
  min-height: 154px !important;
  max-height: min(24dvh, 184px) !important;
  flex: 0 1 min(24dvh, 184px) !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-identity {
  grid-template-columns: 34px minmax(0, 1fr) 84px 28px !important;
  min-height: 42px !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 6px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-thumbnail {
  position: relative !important;
  display: block !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  overflow: hidden !important;
  border: 1px solid var(--layer-line) !important;
  border-radius: 3px !important;
  background: #fff !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-thumbnail :is(.layer-art-thumbnail, .layer-thumbnail-fallback) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  margin: auto !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-thumbnail .layer-art-thumbnail {
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-thumbnail .layer-thumbnail-fallback {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-thumbnail.has-preview .layer-thumbnail-fallback {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-thumbnail.has-art-preview.is-ready .layer-art-thumbnail {
  opacity: 1 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-thumbnail.has-art-preview.is-ready .layer-thumbnail-fallback {
  opacity: 0 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-name > span:first-child {
  display: none !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-name input {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-meta {
  display: grid !important;
  min-width: 0 !important;
  gap: 1px !important;
  align-self: center !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel :is(#layerKindOutput, #layerDimensionsOutput) {
  display: block !important;
  max-width: 84px !important;
  overflow: hidden !important;
  color: var(--layer-muted) !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel #layerPropertiesCloseButton {
  width: 28px !important;
  height: 32px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-switches label {
  min-height: 29px !important;
  gap: 4px !important;
  padding: 2px 3px !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-switches label > img {
  width: 14px !important;
  height: 14px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-property-switches input {
  width: 13px !important;
  height: 13px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-section {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--layer-row-bg) !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(98px, 0.62fr) !important;
  gap: 4px 8px !important;
  padding: 4px 8px 6px !important;
  border: 0 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-title {
  display: flex !important;
  min-width: 0 !important;
  grid-column: 1 / -1 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: var(--layer-muted) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 12px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-title output {
  overflow: hidden !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-controls > label {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-controls .layer-opacity-property {
  grid-column: auto !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-controls label > span {
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 10px !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel .layer-appearance-controls select {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers #layersWorkspacePanel > #layerPropertiesPanel :is(.layer-paint-properties, .layer-effect-property) {
  display: none !important;
}

body .layers #layersWorkspacePanel > #layerCommandToolbar {
  position: sticky !important;
  z-index: 18 !important;
  top: 0 !important;
  order: 3 !important;
}

body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #documentLayerStack {
  min-height: 128px !important;
  flex: 1 1 auto !important;
}

@media (max-width: 430px), (max-height: 430px) and (orientation: landscape) {
  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #layerPropertiesPanel[open] {
    max-height: min(24dvh, 184px) !important;
    flex-basis: min(24dvh, 184px) !important;
  }

  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #documentLayerStack {
    min-height: 128px !important;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #layerPropertiesPanel[open] {
    max-height: 154px !important;
    flex-basis: 154px !important;
  }
}

/* Source: release-517.css */
/* Release 517: strict inspector ownership, sticky Artboard tools, and reliable layer naming. */

body .layers > .inspector-view:not(.is-active),
body .layers > .inspector-view[hidden],
body .layers > .inspector-view[aria-hidden="true"] {
  display: none !important;
}

body .layers[data-active-tab]:not([data-active-tab="layers"]) #layersWorkspacePanel,
body .layers[data-active-tab="properties"] > .inspector-view[data-inspector-view="layers"],
body .layers[data-active-tab="artboard"] > .inspector-view[data-inspector-view="layers"],
body .layers[data-active-tab="library"] > .inspector-view[data-inspector-view="layers"] {
  display: none !important;
}

body .layers[data-active-tab="layers"] > .inspector-view[data-inspector-view="layers"].is-active:not([hidden]) {
  display: flex !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

body .layers[data-active-tab="layers"] > .inspector-view[data-inspector-view="layers"] > #layersWorkspacePanel:not([hidden]) {
  display: flex !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

body .layers > .inspector-view[data-inspector-view="artboard"].is-active:not([hidden]) {
  position: relative !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  isolation: isolate !important;
}

body .layers > .inspector-view[data-inspector-view="artboard"] > .artboard-view-toggles {
  position: sticky !important;
  z-index: 30 !important;
  top: 0 !important;
  width: calc(100% + 12px) !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  margin: 0 -6px 5px !important;
  padding: 0 2px !important;
  border-bottom: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: var(--curve-sheet, var(--ios-panel)) !important;
  box-shadow: none !important;
}

body .layers > .inspector-view[data-inspector-view="artboard"] > .artboard-view-toggles button {
  min-height: 40px !important;
  height: 40px !important;
  font-weight: 400 !important;
}

body .layers #documentLayerStack .layer-name > span:first-child.is-editing {
  display: block !important;
  min-width: 0 !important;
  min-height: 24px !important;
  padding: 3px 5px !important;
  overflow: visible !important;
  border: 1px solid var(--layer-accent) !important;
  border-radius: 2px !important;
  background: var(--layer-row-bg) !important;
  color: var(--layer-text) !important;
  font-weight: 400 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

@media (max-width: 430px), (max-height: 430px) and (orientation: landscape) {
  body .layers > .inspector-view[data-inspector-view="artboard"] > .artboard-view-toggles {
    top: 0 !important;
  }
}

/* Source: release-518.css */
/* Release 518: category-owned sticky inspector navigation. */

body .layers > .style-section-nav,
body .layers > .library-section-tabs,
body .layers > .artboard-view-toggles,
body .layers > .inspector-view:not([data-inspector-view="properties"]) > .style-section-nav,
body .layers > .inspector-view:not([data-inspector-view="library"]) > .library-section-tabs,
body .layers > .inspector-view:not([data-inspector-view="artboard"]) > .artboard-view-toggles {
  display: none !important;
}

body .layers > .inspector-view[data-inspector-view="properties"].is-active:not([hidden]),
body .layers > .inspector-view[data-inspector-view="artboard"].is-active:not([hidden]),
body .layers > .inspector-view[data-inspector-view="library"].is-active:not([hidden]) {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  isolation: isolate !important;
}

body .layers > .inspector-view[data-inspector-view="properties"] > .style-section-nav:not([hidden]),
body .layers > .inspector-view[data-inspector-view="artboard"] > .artboard-view-toggles:not([hidden]),
body .layers > .inspector-view[data-inspector-view="library"] > .library-section-tabs:not([hidden]) {
  position: sticky !important;
  z-index: 30 !important;
  top: 0 !important;
  width: calc(100% + 12px) !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  margin: 0 -6px 4px !important;
  padding: 0 2px !important;
  border-bottom: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: var(--curve-sheet, var(--ios-panel)) !important;
  box-shadow: none !important;
}

body .layers > .inspector-view[data-inspector-view="properties"] > .style-section-nav:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body .layers > .inspector-view[data-inspector-view="library"] > .library-section-tabs:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(52px, 1fr)) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

body .layers > .inspector-view[data-inspector-view="library"] > .library-section-tabs::-webkit-scrollbar {
  display: none !important;
}

body .layers > .inspector-view[data-inspector-view="properties"] > .panel,
body .layers > .inspector-view[data-inspector-view="artboard"] > .panel,
body .layers > .inspector-view[data-inspector-view="library"] > .panel {
  flex: 0 0 auto !important;
}

body .layers > .inspector-view :is(.style-section-nav, .library-section-tabs, .artboard-view-toggles) button,
body .layers > .inspector-view :is(.style-section-nav, .library-section-tabs, .artboard-view-toggles) button span {
  font-weight: 400 !important;
}

/* Source: release-519.css */
/* Release 519: repaired and scalable Library emoji. */

body .layers .emoji-library-grid .emoji-asset {
  min-width: 0 !important;
  min-height: 66px !important;
  grid-template-rows: 34px minmax(12px, auto) !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 3px !important;
}

body .layers .emoji-library-grid .emoji-glyph {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 27px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 34px !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

body .layers .emoji-library-grid .emoji-asset > span:last-child {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Source: release-520.css */
/* Release 520: fifty distinct editable Library shapes. */

body .layers #stockShapeGrid .catalog-asset {
  min-width: 0 !important;
  min-height: 72px !important;
  grid-template-rows: 42px minmax(12px, auto) !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 3px !important;
}

body .layers #stockShapeGrid .catalog-asset > img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
}

body .layers #stockShapeGrid .catalog-asset > span {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 11px !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Source: release-521.css */
/* Release 521: consistent Library insertion and Transform handoff. */

body .layers [data-inspector-view="library"] .catalog-asset:focus-visible,
body .layers [data-inspector-view="library"] .saved-library-asset > button:first-child:focus-visible {
  outline: 1px solid var(--curve-accent, #c98a2a) !important;
  outline-offset: -2px !important;
}

body .layers [data-inspector-view="library"] .catalog-asset:active,
body .layers [data-inspector-view="library"] .saved-library-asset > button:first-child:active {
  background: var(--curve-active, #eef1f4) !important;
}

/* Source: release-522.css */
/* Release 522: strict Layers-tab ownership. */

body .layers[data-active-tab]:not([data-active-tab="layers"])
  > .inspector-view[data-inspector-view="layers"],
body .layers[data-active-tab]:not([data-active-tab="layers"])
  #layersWorkspacePanel,
body .layers[data-active-tab]:not([data-active-tab="layers"])
  #layerCommandToolbar,
body .layers[data-active-tab]:not([data-active-tab="layers"])
  #layerPanelSplitHandle,
body .layers[data-active-tab]:not([data-active-tab="layers"])
  #documentLayerStack {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body .layers[data-active-tab="layers"]
  > .inspector-view[data-inspector-view="layers"] {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Source: release-523.css */
/* Release 523: symmetric inspector category ownership. */

body .layers[data-active-tab]:not([data-active-tab="properties"])
  #styleSectionNav,
body .layers[data-active-tab]:not([data-active-tab="artboard"])
  .artboard-view-toggles,
body .layers[data-active-tab]:not([data-active-tab="library"])
  .library-section-tabs {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body .layers[data-active-tab="properties"]
  > [data-inspector-view="properties"]
  > #styleSectionNav,
body .layers[data-active-tab="artboard"]
  > [data-inspector-view="artboard"]
  > .artboard-view-toggles,
body .layers[data-active-tab="library"]
  > [data-inspector-view="library"]
  > .library-section-tabs {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Source: release-524.css */
/* Release 524: compact iPhone subcategories and multi-artboard controls. */

body .layers > [data-inspector-view="properties"] > #styleSectionNav,
body .layers > [data-inspector-view="artboard"] > .artboard-view-toggles,
body .layers > [data-inspector-view="library"] > .library-section-tabs {
  display: flex !important;
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 0 5px !important;
  padding: 0 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-radius: 0 !important;
  scrollbar-width: none !important;
}

body .layers > [data-inspector-view="properties"] > #styleSectionNav::-webkit-scrollbar,
body .layers > [data-inspector-view="artboard"] > .artboard-view-toggles::-webkit-scrollbar,
body .layers > [data-inspector-view="library"] > .library-section-tabs::-webkit-scrollbar {
  display: none !important;
}

body .layers > [data-inspector-view="properties"] > #styleSectionNav button,
body .layers > [data-inspector-view="artboard"] > .artboard-view-toggles button,
body .layers > [data-inspector-view="library"] > .library-section-tabs button {
  min-height: 42px !important;
  height: 42px !important;
  flex: 0 0 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  grid-template-rows: 20px 12px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  padding: 3px 2px 2px !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
}

body .layers > [data-inspector-view="properties"] > #styleSectionNav button {
  flex-basis: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

body .layers > [data-inspector-view="library"] > .library-section-tabs button {
  flex-basis: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
}

body .layers > [data-inspector-view] :is(#styleSectionNav, .artboard-view-toggles, .library-section-tabs) button img {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.5 !important;
}

body .layers > [data-inspector-view] :is(#styleSectionNav, .artboard-view-toggles, .library-section-tabs) button span {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .artboard-manager {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border-top: 1px solid var(--curve-line) !important;
  border-bottom: 1px solid var(--curve-line) !important;
  background: transparent !important;
}

body .layers .artboard-manager > header {
  display: flex !important;
  min-height: 38px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 3px 4px 3px 8px !important;
  border-bottom: 1px solid var(--curve-line) !important;
}

body .layers .artboard-manager h3 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  color: var(--curve-text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body .layers #artboardCountBadge {
  color: var(--curve-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers #addArtboardButton {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: transparent !important;
}

body .layers #addArtboardButton img,
body .layers .artboard-list-action img {
  width: 17px !important;
  height: 17px !important;
}

body .layers .document-artboard-list {
  display: grid !important;
  max-height: 156px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  list-style: none !important;
}

body .layers .document-artboard-list > li {
  display: grid !important;
  min-height: 48px !important;
  grid-template-columns: minmax(0, 1fr) 36px 36px !important;
  align-items: stretch !important;
  border-bottom: 1px solid var(--curve-line) !important;
}

body .layers .document-artboard-list > li:last-child {
  border-bottom: 0 !important;
}

body .layers .document-artboard-list > li.is-active {
  box-shadow: inset 3px 0 0 var(--curve-accent, #2476d8) !important;
  background: var(--curve-active, #eaf2fc) !important;
}

body .layers .artboard-list-select {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

body .layers .artboard-list-select > img {
  width: 18px !important;
  height: 18px !important;
}

body .layers .artboard-list-select > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 1px !important;
}

body .layers .artboard-list-select strong,
body .layers .artboard-list-select small {
  min-width: 0 !important;
  overflow: hidden !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .artboard-list-select strong {
  color: var(--curve-text) !important;
  font-size: 12px !important;
}

body .layers .artboard-list-select small {
  color: var(--curve-muted) !important;
  font-size: 9px !important;
}

body .layers .artboard-list-select strong.is-editing {
  padding: 2px 3px !important;
  overflow: visible !important;
  border: 1px solid var(--curve-accent, #2476d8) !important;
  background: var(--curve-sheet, #fff) !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

body .layers .artboard-list-action {
  display: grid !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 48px !important;
  min-height: 48px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .layers .artboard-list-action:disabled {
  opacity: 0.3 !important;
}

/* Source: release-525.css */
/* Release 525: one owner for every bottom-navigation toolbar. */

body .layers > .inspector-tabs,
body .layers > [data-inspector-view]:not(.is-active) > [data-inspector-owner],
body .layers > [data-inspector-view]:not(.is-active) [data-inspector-owner="layers"],
body .layers > [data-inspector-view]:not([data-inspector-view="layers"]) [data-inspector-owner="layers"],
body .layers > [data-inspector-view]:not([data-inspector-view="properties"]) > [data-inspector-owner="properties"],
body .layers > [data-inspector-view]:not([data-inspector-view="artboard"]) > [data-inspector-owner="artboard"],
body .layers > [data-inspector-view]:not([data-inspector-view="library"]) > [data-inspector-owner="library"] {
  display: none !important;
}

body .layers > [data-inspector-view="layers"].is-active #layerCommandToolbar,
body .layers > [data-inspector-view="properties"].is-active > #styleSectionNav,
body .layers > [data-inspector-view="artboard"].is-active > .artboard-view-toggles,
body .layers > [data-inspector-view="library"].is-active > .library-section-tabs {
  visibility: visible !important;
}

body .layers [data-inspector-owner] button,
body .layers [data-inspector-owner] button span {
  font-weight: 400 !important;
}

/* Source: release-526.css */
/* Release 526: visible multi-artboard pasteboard. */

body .canvas-wrap {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: auto !important;
}

body .document-artboard-pasteboard {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(var(--document-artboard-columns, 1), max-content) !important;
  align-items: start !important;
  justify-items: start !important;
  gap: 24px !important;
  width: max-content !important;
  min-width: max-content !important;
  margin: 0 auto !important;
  padding: 10px !important;
}

body .document-artboard-pasteboard > .pasteboard-frame,
body .document-artboard-pasteboard > .document-artboard-preview {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: 22px 20px var(--artboard-display-height, auto) !important;
  align-content: start !important;
  width: var(--artboard-display-width, auto) !important;
  min-width: var(--artboard-display-width, auto) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body .document-artboard-label {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 2px 1px 3px !important;
  overflow: hidden !important;
  color: #343940 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body #activeArtboardLabel.is-editing {
  outline: 1px solid #1677d2 !important;
  outline-offset: -1px !important;
  background: #ffffff !important;
}

body .document-artboard-preview-ruler,
body .document-artboard-pasteboard .canvas-rulers {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 20px !important;
  height: 20px !important;
  color: rgba(52, 57, 64, 0.62) !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-align: center !important;
}

body .document-artboard-preview-ruler > span:first-child,
body .document-artboard-pasteboard .canvas-rulers > span:first-child {
  text-align: left !important;
}

body .document-artboard-preview-ruler > span:last-child,
body .document-artboard-pasteboard .canvas-rulers > span:last-child {
  text-align: right !important;
}

body .document-artboard-pasteboard canvas {
  display: block !important;
  width: var(--artboard-display-width, auto) !important;
  min-width: var(--artboard-display-width, auto) !important;
  max-width: none !important;
  height: var(--artboard-display-height, auto) !important;
  max-height: none !important;
  margin: 0 !important;
  border: 1px solid rgba(50, 56, 64, 0.24) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 9px 22px rgba(36, 40, 47, 0.12) !important;
}

body .document-artboard-pasteboard > .pasteboard-frame.is-active canvas {
  border-color: #1677d2 !important;
  box-shadow: 0 0 0 2px rgba(22, 119, 210, 0.2), 0 9px 22px rgba(36, 40, 47, 0.14) !important;
}

body .document-artboard-preview {
  cursor: pointer !important;
  color: inherit !important;
  appearance: none !important;
}

body .document-artboard-preview:focus-visible {
  outline: 2px solid #1677d2 !important;
  outline-offset: 3px !important;
}

@media (max-width: 760px) {
  body .document-artboard-pasteboard {
    gap: 18px !important;
    padding: 8px 4px 36px !important;
  }

  body .document-artboard-label {
    font-size: 10px !important;
  }
}

/* Source: release-527.css */
/* Release 527: compact, persistent artboard ordering. */

body .layers .artboard-manager-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

body .layers .artboard-manager-actions > button {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 6px !important;
  border: 0 !important;
  border-left: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body .layers .artboard-manager-actions > button:first-child {
  border-left: 0 !important;
}

body .layers .artboard-manager-actions > button img {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.82 !important;
}

body .layers .artboard-manager-actions > button:disabled {
  opacity: 0.28 !important;
}

body .layers .document-artboard-list > li {
  position: relative !important;
  cursor: grab !important;
  user-select: none !important;
}

body .layers .document-artboard-list > li.is-dragging {
  opacity: 0.42 !important;
  cursor: grabbing !important;
}

body .layers .document-artboard-list > li.is-drop-before::before,
body .layers .document-artboard-list > li.is-drop-after::after {
  position: absolute !important;
  left: 4px !important;
  right: 4px !important;
  z-index: 3 !important;
  height: 2px !important;
  background: var(--curve-accent, #2476d8) !important;
  content: "" !important;
  pointer-events: none !important;
}

body .layers .document-artboard-list > li.is-drop-before::before {
  top: -1px !important;
}

body .layers .document-artboard-list > li.is-drop-after::after {
  bottom: -1px !important;
}

@media (max-width: 760px) {
  body .layers .artboard-manager > header {
    min-height: 38px !important;
  }

  body .layers .artboard-manager-actions > button {
    width: 29px !important;
    min-width: 29px !important;
  }
}

/* Source: release-528.css */
/* Release 528: explicit artboard resize behavior. */

body .layers .artboard-resize-mode {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border-top: 1px solid var(--curve-line) !important;
  color: var(--curve-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .layers .artboard-resize-mode select {
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 3px 26px 3px 8px !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 3px !important;
  background-color: var(--curve-sheet, #ffffff) !important;
  color: var(--curve-text) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

@media (max-width: 760px) {
  body .layers .artboard-resize-mode {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 36px !important;
  }
}

/* Source: release-529.css */
/* Release 529: restore one clean iPhone document-title row. */
@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body::after,
  body .topbar::before,
  body .history-actions::before,
  body .history-actions::after,
  body #iosMenuButton::before,
  body #iosMenuButton::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  body .history-actions {
    display: block !important;
    grid-template-columns: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--iphone-title-row, 54px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body .document-chip {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    pointer-events: auto !important;
  }

  body .document-chip > span {
    display: none !important;
  }

  body #documentTitle {
    display: block !important;
    max-width: min(52vw, 210px) !important;
    overflow: hidden !important;
    color: var(--integrated-ink, #20242a) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    cursor: text !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body #documentTitle.is-editing {
    min-width: 96px !important;
    overflow: visible !important;
    border-bottom: 1px solid currentColor !important;
    outline: 0 !important;
    text-overflow: clip !important;
    user-select: text !important;
    -webkit-user-select: text !important;
  }

  body .topbar-back-button {
    display: grid !important;
  }

  body #iosMenuButton > img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }
}

/* Source: release-530.css */
/* Release 530: reliable touch renaming for the document title. */
@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body #documentTitle {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }

  body #documentTitle.is-editing {
    -webkit-touch-callout: default !important;
  }
}

/* Source: release-531.css */
/* Release 531: compact per-artboard guide management. */
body .artboard-inspector-panel .artboard-guide-manager {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .artboard-inspector-panel .artboard-guide-manager > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 36px !important;
  padding: 0 8px !important;
  border-bottom: 1px solid var(--curve-line) !important;
}

body .artboard-inspector-panel .artboard-guide-manager h3 {
  margin: 0 !important;
  color: var(--curve-text) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body .artboard-inspector-panel .artboard-guide-manager h3 output {
  margin-left: 3px !important;
  color: var(--curve-muted) !important;
  font-weight: 400 !important;
}

body .artboard-inspector-panel .artboard-guide-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

body .artboard-inspector-panel .artboard-guide-actions > button,
body .artboard-inspector-panel .guide-delete {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 0 !important;
  border-left: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .artboard-inspector-panel .artboard-guide-actions > button:first-child {
  border-left: 0 !important;
}

body .artboard-inspector-panel .artboard-guide-actions img,
body .artboard-inspector-panel .guide-delete img {
  width: 15px !important;
  height: 15px !important;
  opacity: 0.8 !important;
}

body .artboard-inspector-panel .artboard-guide-actions > button[aria-pressed="true"] {
  color: var(--curve-accent) !important;
  background: var(--curve-active) !important;
}

body .artboard-inspector-panel .artboard-guide-actions > button:disabled,
body .artboard-inspector-panel .guide-delete:disabled {
  opacity: 0.28 !important;
}

body .artboard-inspector-panel .document-guide-list {
  display: grid !important;
  gap: 0 !important;
  max-height: 128px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  list-style: none !important;
}

body .artboard-inspector-panel .document-guide-list:empty {
  display: none !important;
}

body .artboard-inspector-panel .document-guide-list > li {
  display: grid !important;
  grid-template-columns: minmax(82px, 0.85fr) minmax(116px, 1.15fr) 30px !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 3px 0 3px 8px !important;
  border-bottom: 1px solid var(--curve-line) !important;
}

body .artboard-inspector-panel .document-guide-list > li:last-child {
  border-bottom: 0 !important;
}

body .artboard-inspector-panel .guide-orientation,
body .artboard-inspector-panel .guide-position input {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 3px !important;
  background: var(--curve-sheet, #ffffff) !important;
  color: var(--curve-text) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

body .artboard-inspector-panel .guide-position {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding-left: 6px !important;
  color: var(--curve-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .artboard-inspector-panel .guide-position > span,
body .artboard-inspector-panel .guide-position > small {
  overflow: hidden !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 430px) {
  body .artboard-inspector-panel .document-guide-list > li {
    grid-template-columns: minmax(76px, 0.8fr) minmax(108px, 1.2fr) 30px !important;
  }
}

/* Source: release-532.css */
/* Release 532: per-artboard bleed, safe area, and crop-mark export. */
body .artboard-inspector-panel .artboard-print-boundaries {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .artboard-inspector-panel .artboard-print-boundaries > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 36px !important;
  padding: 0 8px !important;
  border-bottom: 1px solid var(--curve-line) !important;
}

body .artboard-inspector-panel .artboard-print-boundaries h3 {
  margin: 0 !important;
  color: var(--curve-text) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body .artboard-inspector-panel .print-boundary-toggle,
body .artboard-inspector-panel .print-crop-mark-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 32px !important;
  margin: 0 !important;
  color: var(--curve-text) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .artboard-inspector-panel .print-boundary-toggle input,
body .artboard-inspector-panel .print-crop-mark-toggle input {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
}

body .artboard-inspector-panel .print-boundary-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
  padding: 7px 8px !important;
}

body .artboard-inspector-panel .print-boundary-fields > label {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--curve-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

body .artboard-inspector-panel .print-boundary-fields select,
body .artboard-inspector-panel .print-boundary-fields input {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  border: 1px solid var(--curve-line) !important;
  border-radius: 3px !important;
  background: var(--curve-sheet, #ffffff) !important;
  color: var(--curve-text) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

body .artboard-inspector-panel .print-boundary-value {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body .artboard-inspector-panel .print-boundary-value small {
  overflow: hidden !important;
  color: var(--curve-muted) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .artboard-inspector-panel .print-crop-mark-toggle {
  padding: 0 8px !important;
  border-top: 1px solid var(--curve-line) !important;
}

body .artboard-inspector-panel #printBoundaryStatus {
  min-height: 24px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  overflow: hidden !important;
  color: var(--curve-muted) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .pasteboard-frame .artboard-boundary-overlay {
  position: absolute !important;
  left: 0 !important;
  top: 42px !important;
  z-index: 5 !important;
  display: none !important;
  width: var(--artboard-display-width) !important;
  height: var(--artboard-display-height) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body .pasteboard-frame .artboard-boundary-overlay.is-visible {
  display: block !important;
}

body .artboard-bleed-boundary,
body .artboard-trim-boundary,
body .artboard-safe-boundary {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
}

body .artboard-bleed-boundary {
  inset: calc(0px - var(--artboard-bleed-display)) !important;
  border: 1px dashed #d84949 !important;
}

body .artboard-trim-boundary {
  inset: 0 !important;
  border: 1px solid rgba(26, 31, 37, 0.72) !important;
}

body .artboard-safe-boundary {
  inset: var(--artboard-safe-display) !important;
  border: 1px dashed #149563 !important;
}

body .artboard-boundary-overlay .crop-mark {
  position: absolute !important;
  display: none !important;
  background: #111111 !important;
  pointer-events: none !important;
}

body .artboard-boundary-overlay.shows-crop-marks .crop-mark {
  display: block !important;
}

body .crop-mark-top-left-h,
body .crop-mark-bottom-left-h {
  left: calc(0px - var(--artboard-bleed-display) - 22px) !important;
  width: 14px !important;
  height: 1px !important;
}

body .crop-mark-top-right-h,
body .crop-mark-bottom-right-h {
  left: calc(100% + var(--artboard-bleed-display) + 8px) !important;
  width: 14px !important;
  height: 1px !important;
}

body .crop-mark-top-left-v,
body .crop-mark-top-right-v {
  top: calc(0px - var(--artboard-bleed-display) - 22px) !important;
  width: 1px !important;
  height: 14px !important;
}

body .crop-mark-bottom-left-v,
body .crop-mark-bottom-right-v {
  top: calc(100% + var(--artboard-bleed-display) + 8px) !important;
  width: 1px !important;
  height: 14px !important;
}

body .crop-mark-top-left-h,
body .crop-mark-top-right-h { top: 0 !important; }
body .crop-mark-bottom-left-h,
body .crop-mark-bottom-right-h { top: 100% !important; }
body .crop-mark-top-left-v,
body .crop-mark-bottom-left-v { left: 0 !important; }
body .crop-mark-top-right-v,
body .crop-mark-bottom-right-v { left: 100% !important; }

@media (max-width: 430px) {
  body .artboard-inspector-panel .print-boundary-fields {
    gap: 5px 6px !important;
  }

  body .artboard-inspector-panel .print-boundary-fields > label {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }
}

/* Source: release-533.css */
/* Release 533: ordered multi-artboard PDF export. */
body .layers .artboard-manager-actions #exportArtboardsPdfButton {
  border-left: 1px solid var(--curve-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .layers .artboard-manager-actions #exportArtboardsPdfButton img {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.5 !important;
}

body .layers .artboard-manager-actions #exportArtboardsPdfButton:disabled {
  opacity: 0.28 !important;
}

@media (max-width: 430px) {
  body .layers .artboard-manager-actions > button {
    width: 28px !important;
    min-width: 28px !important;
  }
}

/* Source: release-534.css */
/* Release 534: visible document title and workspace-level two-finger zoom. */
body .canvas-wrap {
  touch-action: none !important;
  overscroll-behavior: contain !important;
}

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body .history-actions {
    position: absolute !important;
    z-index: 6 !important;
    inset: env(safe-area-inset-top, 0px) 44px auto 44px !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--title-row-height, 48px) !important;
    min-height: var(--title-row-height, 48px) !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  body .document-chip {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: var(--title-row-height, 48px) !important;
    min-height: var(--title-row-height, 48px) !important;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  body #documentTitle {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    max-width: min(58vw, 220px) !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--integrated-ink, #20242a) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    cursor: text !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body #documentTitle.is-editing {
    min-width: 112px !important;
    overflow: visible !important;
    border-bottom: 1px solid currentColor !important;
    outline: 0 !important;
    text-overflow: clip !important;
    user-select: text !important;
    -webkit-user-select: text !important;
  }
}

/* Source: release-535.css */
/* Release 535: compact, context-aware iPhone Layers and Style inspectors. */

body .layers #layerStylesPanel[hidden] {
  display: none !important;
}

body .layers[data-style-section="fill"] #stylePaintPanel .style-color-field:has(#strokeColor),
body .layers[data-style-section="fill"] #stylePaintPanel label:has(#strokeWidth),
body .layers[data-style-section="fill"] #stylePaintPanel #noStrokeButton,
body .layers[data-style-section="fill"] #stylePaintPanel #swapPaintButton,
body .layers[data-style-section="fill"] #stylePaintPanel .stroke-options-panel,
body .layers[data-style-section="stroke"] #stylePaintPanel .style-color-field:has(#fillColor),
body .layers[data-style-section="stroke"] #stylePaintPanel #noFillButton,
body .layers[data-style-section="stroke"] #stylePaintPanel #swapPaintButton,
body .layers[data-style-section="stroke"] #stylePaintPanel .style-swatches {
  display: none !important;
}

body .layers[data-style-section="fill"] #stylePaintPanel .style-color-pair,
body .layers[data-style-section="stroke"] #stylePaintPanel .style-color-pair {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body .layers > [data-inspector-view="properties"].is-active:not([hidden]) {
    padding: 0 !important;
    overscroll-behavior-y: contain !important;
    scrollbar-gutter: stable !important;
  }

  body .layers > [data-inspector-view="properties"] > #styleSectionNav {
    position: sticky !important;
    z-index: 24 !important;
    top: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
    background: var(--curve-sheet, var(--ios-panel)) !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body .layers > [data-inspector-view="properties"] > #styleSectionNav::-webkit-scrollbar {
    display: none !important;
  }

  body .layers > [data-inspector-view="properties"] > #styleSectionNav button {
    position: relative !important;
    display: grid !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 39px !important;
    min-height: 39px !important;
    flex: 0 0 50px !important;
    grid-template-rows: 18px 12px !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 0 !important;
    padding: 3px 1px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--curve-muted) !important;
    font-weight: 400 !important;
  }

  body .layers > [data-inspector-view="properties"] > #styleSectionNav button.is-active {
    color: var(--curve-text) !important;
    background: var(--curve-active, #eaf2fc) !important;
    box-shadow: inset 0 -2px 0 var(--curve-accent, #2476d8) !important;
  }

  body .layers > [data-inspector-view="properties"] > #styleSectionNav button img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    opacity: 0.86 !important;
  }

  body .layers > [data-inspector-view="properties"] > #styleSectionNav button span {
    width: 100% !important;
    overflow: hidden !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 12px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers > [data-inspector-view="properties"] > .panel.is-panel-focus {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 7px 14px !important;
  }

  body .layers [data-style-surface] > .style-inspector-section,
  body .layers [data-style-surface] > .contextual-inspector-section,
  body .layers [data-style-surface] > .font-info-panel,
  body .layers [data-style-surface] > .text-styles-panel,
  body .layers [data-style-surface] > .paragraph-layout-panel {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body .layers [data-style-surface] :is(.style-inspector-section, .contextual-inspector-section, .font-info-panel, .text-styles-panel, .paragraph-layout-panel) > summary {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 5px !important;
    color: var(--curve-text) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
  }

  body .layers [data-style-surface] .style-inspector-content,
  body .layers [data-style-surface] .layer-style-content {
    gap: 5px !important;
    padding: 3px 4px 7px !important;
  }

  body .layers [data-style-surface] :is(label, .compact-field) {
    min-height: 29px !important;
    gap: 5px !important;
    margin: 0 !important;
    color: var(--curve-muted) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  body .layers [data-style-surface] :is(input:not([type="range"]):not([type="color"]), select, textarea) {
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  body .layers [data-style-surface] textarea {
    height: auto !important;
    min-height: 48px !important;
  }

  body .layers [data-style-surface] input[type="color"] {
    width: 34px !important;
    min-width: 34px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 2px !important;
    border-radius: 3px !important;
  }

  body .layers [data-style-surface] :is(.style-effects, .style-paint-actions, .layer-style-actions, .type-font-actions) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  body .layers [data-style-surface] :is(.style-effects, .style-paint-actions, .layer-style-actions, .type-font-actions) button,
  body .layers [data-style-surface] .align-grid button {
    min-width: 0 !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 2px 4px !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers [data-style-surface] .style-order-grid {
    gap: 1px !important;
    margin: 0 0 4px !important;
  }

  body .layers [data-style-surface] .style-order-grid button {
    min-height: 34px !important;
    height: 34px !important;
    grid-template-rows: 16px 11px !important;
    padding: 2px 1px !important;
    font-size: 8.5px !important;
    font-weight: 400 !important;
  }

  body .layers [data-style-surface] .style-order-grid button img {
    width: 15px !important;
    height: 15px !important;
  }

  body .layers [data-style-surface] .style-control-label {
    margin: 5px 0 3px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }

  body .layers [data-style-surface="Transform"] :is(.transform-reference-control, .quad-grid, .button-row, .transform-actions) {
    gap: 4px !important;
    margin: 0 0 5px !important;
  }

  body .layers [data-style-surface="Transform"] .transform-reference-grid button {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
  }

  body .layers [data-style-surface="Color"] > :is(label, .button-row, .align-grid, .wide-button) {
    margin: 5px 4px 0 !important;
  }

  body .layers #layersWorkspacePanel > .adobe-layer-header {
    min-height: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    padding: 0 7px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }

  body .layers #layersWorkspacePanel > #layerCommandToolbar {
    min-height: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    padding: 0 !important;
  }

  body .layers #layersWorkspacePanel > #layerCommandToolbar button {
    min-height: 39px !important;
    height: 39px !important;
    grid-template-rows: 17px 11px !important;
    gap: 0 !important;
    padding: 3px 0 2px !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
  }

  body .layers #layersWorkspacePanel > #layerCommandToolbar button img {
    width: 15px !important;
    height: 15px !important;
  }

  body .layers #layersWorkspacePanel > #layerCommandToolbar button span {
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 11px !important;
    letter-spacing: 0 !important;
  }

  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #layerPropertiesPanel[open],
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > #layerMoreMenu:not([hidden]) {
    width: 100% !important;
    min-height: 104px !important;
    max-height: min(20dvh, 154px) !important;
    flex: 0 1 min(20dvh, 154px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    scrollbar-gutter: stable !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body .layers #layersWorkspacePanel > #layerPropertiesPanel > summary,
  body .layers #layersWorkspacePanel > #layerMoreMenu > header {
    min-height: 31px !important;
    height: 31px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 31px !important;
  }

  body .layers #layerPropertiesPanel .layer-property-identity {
    min-height: 42px !important;
    grid-template-columns: 32px minmax(0, 1fr) auto 28px !important;
    gap: 5px !important;
    padding: 4px 5px !important;
  }

  body .layers #layerPropertiesPanel .layer-property-thumbnail {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
  }

  body .layers #layerPropertiesPanel .layer-property-name {
    min-height: 30px !important;
    gap: 1px !important;
    font-size: 9px !important;
  }

  body .layers #layerPropertiesPanel .layer-property-name-edit {
    gap: 2px !important;
  }

  body .layers #layerPropertiesPanel .layer-property-name-edit input {
    min-height: 27px !important;
    height: 27px !important;
    padding: 2px 5px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  body .layers #layerPropertiesPanel .layer-property-name-edit button,
  body .layers #layerPropertiesPanel #layerPropertiesCloseButton {
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 5px !important;
  }

  body .layers #layerPropertiesPanel .layer-property-meta {
    gap: 1px !important;
    font-size: 8px !important;
    font-weight: 400 !important;
  }

  body .layers #layerPropertiesPanel .layer-property-switches {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 0 4px !important;
    border-top: 1px solid var(--curve-line) !important;
    border-bottom: 1px solid var(--curve-line) !important;
  }

  body .layers #layerPropertiesPanel .layer-property-switches label {
    min-height: 29px !important;
    height: 29px !important;
    gap: 3px !important;
    padding: 0 3px !important;
    border-radius: 0 !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }

  body .layers #layerPropertiesPanel :is(.layer-transform-properties, .layer-property-section) {
    margin: 0 !important;
    padding: 0 5px 5px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
  }

  body .layers #layerPropertiesPanel :is(.layer-transform-properties > legend, .layer-property-section > summary) {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 2px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
  }

  body .layers #layerPropertiesPanel :is(.layer-property-grid, .layer-text-property-grid, .layer-image-adjustment-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  body .layers #layerPropertiesPanel :is(.layer-property-grid, .layer-text-property-grid, .layer-image-adjustment-grid) label {
    min-height: 28px !important;
    gap: 3px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }

  body .layers #layerPropertiesPanel :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select) {
    min-height: 27px !important;
    height: 27px !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }

  body .layers #layerMoreMenu .layer-action-section {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--curve-line) !important;
    border-radius: 0 !important;
  }

  body .layers #layerMoreMenu .layer-action-section > summary {
    min-height: 31px !important;
    height: 31px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }

  body .layers #layerMoreMenu .layer-action-section > summary small {
    font-size: 8px !important;
    font-weight: 400 !important;
  }

  body .layers #layerMoreMenu .layer-more-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1px !important;
    padding: 3px !important;
  }

  body .layers #layerMoreMenu .layer-more-grid button {
    min-width: 0 !important;
    min-height: 39px !important;
    height: 39px !important;
    grid-template-rows: 16px 11px !important;
    gap: 1px !important;
    padding: 3px 1px !important;
    overflow: hidden !important;
    border-radius: 2px !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body .layers #layerMoreMenu .layer-more-grid button img {
    width: 15px !important;
    height: 15px !important;
  }

  body .layers #layersWorkspacePanel .adobe-layer-stack > li {
    min-height: 44px !important;
    grid-template-columns: 16px 30px minmax(0, 1fr) auto !important;
    gap: 4px !important;
    padding: 3px 2px !important;
  }

  body .layers #layersWorkspacePanel .layer-drag-handle {
    width: 16px !important;
    min-width: 16px !important;
    height: 36px !important;
    padding: 0 !important;
  }

  body .layers #layersWorkspacePanel .layer-thumbnail,
  body .layers #layersWorkspacePanel .layer-thumbnail.has-art-preview {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  body .layers #layersWorkspacePanel .layer-name > span:first-child {
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 14px !important;
  }

  body .layers #layersWorkspacePanel .layer-kind {
    font-size: 8.5px !important;
    font-weight: 400 !important;
    line-height: 10px !important;
  }

  body .layers #layersWorkspacePanel .layer-toggle {
    width: 25px !important;
    min-width: 25px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 5px !important;
  }

  body .layers #layersWorkspacePanel .layer-toggle img {
    width: 15px !important;
    height: 15px !important;
  }
}

@media (max-height: 430px) and (orientation: landscape) {
  body .layers #layersWorkspacePanel[data-layer-panel="properties"] > #layerPropertiesPanel[open],
  body .layers #layersWorkspacePanel[data-layer-panel="more"] > #layerMoreMenu:not([hidden]) {
    min-height: 86px !important;
    max-height: 122px !important;
    flex-basis: 122px !important;
  }
}

/* Source: release-536.css */
/* Release 536: context-aware Style tabs with touch and keyboard navigation. */

body .layers #styleSectionNav [data-style-section][hidden],
body .layers #styleSectionNav [data-style-section][aria-hidden="true"] {
  display: none !important;
}

body .layers #styleSectionNav [role="tab"]:focus-visible {
  z-index: 2 !important;
  outline: 2px solid var(--curve-accent, #2476d8) !important;
  outline-offset: -2px !important;
}

body .layers > [data-inspector-view="properties"] {
  touch-action: pan-y !important;
}

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body .layers > [data-inspector-view="properties"] > #styleSectionNav {
    scroll-padding-inline: 2px !important;
    overscroll-behavior-x: contain !important;
  }

  body .layers > [data-inspector-view="properties"] > #styleSectionNav button[aria-selected="false"] {
    background: transparent !important;
    box-shadow: none !important;
  }

  body .layers > [data-inspector-view="properties"] > #styleSectionNav button[aria-selected="true"] img {
    opacity: 1 !important;
  }

  body .layers > [data-inspector-view="properties"] > #styleSectionNav button[aria-selected="true"] span {
    color: var(--curve-text) !important;
    font-weight: 400 !important;
  }
}

/* Source: release-537.css */
/* Release 537 adds deterministic workflow QA without changing the approved editor chrome. */

/* Source: release-538.css */
/* Release 538 is a behavior and QA release; the established iPhone layout is unchanged. */

/* Source: release-539.css */
/* Release 539: distinct compact Photo adjustment sections and command routing. */

body #stylePhotoSurface > .is-photo-adjustment-hidden {
  display: none !important;
}

body #stylePhotoSurface > .photo-adjustment-nav {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 6px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--curve-line);
  border-radius: 0;
  background: var(--curve-sheet, var(--ios-panel));
}

body #stylePhotoSurface > .photo-adjustment-nav button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 40px;
  grid-template-rows: 18px 12px;
  align-content: center;
  justify-items: center;
  gap: 0;
  padding: 4px 1px 3px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--curve-line);
  border-radius: 0;
  background: transparent;
  color: var(--curve-muted);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
}

body #stylePhotoSurface > .photo-adjustment-nav button:last-child {
  border-right: 0;
}

body #stylePhotoSurface > .photo-adjustment-nav button img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.84;
}

body #stylePhotoSurface > .photo-adjustment-nav button span {
  width: 100%;
  overflow: hidden;
  font-size: 9px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body #stylePhotoSurface > .photo-adjustment-nav button.is-active {
  background: var(--curve-active, #eaf2fc);
  color: var(--curve-text);
  box-shadow: inset 0 -2px 0 var(--curve-accent, #2476d8);
}

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body .layers > [data-inspector-view="properties"] #stylePhotoSurface > .photo-adjustment-nav {
    position: sticky;
    z-index: 20;
    top: 40px;
    min-height: 40px;
    margin: 0 -7px 5px;
    width: calc(100% + 14px);
  }

  body .layers > [data-inspector-view="properties"] #stylePhotoSurface > .photo-adjustment-nav button {
    min-height: 39px;
    height: 39px;
  }
}

/* Source: release-540.css */
/* Release 540: compact, action-specific Vector and PDF right-rail menus. */

body .tool-flyout :is(.vector-command-context, .pdf-command-context) {
  padding: 5px !important;
}

body .tool-flyout :is(.vector-command-context, .pdf-command-context) > strong {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 500 !important;
  letter-spacing: 0;
}

body .tool-flyout :is(.vector-command-context, .pdf-command-context) .flyout-adjustment-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

body .tool-flyout :is(.vector-command-context, .pdf-command-context) .flyout-adjustment-actions button,
body .tool-flyout :is(.vector-command-context, .pdf-command-context) .flyout-wide-action {
  min-width: 0;
  min-height: 38px;
  padding: 4px 2px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .tool-flyout :is(.vector-command-context, .pdf-command-context) .flyout-adjustment-actions button img,
body .tool-flyout :is(.vector-command-context, .pdf-command-context) .flyout-wide-action img {
  width: 17px;
  height: 17px;
}

body .tool-flyout :is(.vector-command-context, .pdf-command-context) .flyout-mini-status {
  margin: 4px 0 0;
  font-size: 9px;
  font-weight: 400 !important;
  line-height: 1.25;
  letter-spacing: 0;
}

body .tool-flyout .pdf-command-context > label {
  min-height: 32px;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 400;
}

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body .tool-flyout :is(.vector-command-context, .pdf-command-context) .flyout-adjustment-actions button,
  body .tool-flyout :is(.vector-command-context, .pdf-command-context) .flyout-wide-action {
    min-height: 36px;
  }
}

/* Source: release-541.css */
/* Release 541: compact working Photo Tone and Fill right-rail contexts. */

body .tool-flyout .photo-command-context {
  padding: 5px !important;
}

body .tool-flyout .photo-command-context > strong {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .tool-flyout .photo-command-context > label {
  min-height: 30px;
  padding-block: 2px;
  font-size: 10px;
  font-weight: 400;
}

body .tool-flyout .photo-command-context > label > span,
body .tool-flyout .photo-command-context > label > output {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
}

body .tool-flyout .photo-command-context .flyout-adjustment-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

body .tool-flyout .photo-command-context .flyout-adjustment-actions button {
  min-width: 0;
  min-height: 36px;
  padding: 4px 2px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .tool-flyout .photo-command-context .flyout-adjustment-actions button img {
  width: 17px;
  height: 17px;
}

body .tool-flyout .photo-command-context .flyout-mini-status {
  margin: 4px 0 0;
  font-size: 9px;
  font-weight: 400 !important;
  line-height: 1.25;
  letter-spacing: 0;
}

body .tool-flyout .photo-fill-color-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 3px 0 4px;
}

body .tool-flyout .photo-fill-color-row label {
  display: grid;
  min-width: 0;
  grid-template-rows: 12px 25px;
  justify-items: center;
  gap: 1px;
  margin: 0;
  padding: 2px;
  font-size: 9px;
  font-weight: 400;
}

body .tool-flyout .photo-fill-color-row input[type="color"] {
  width: 100%;
  min-width: 0;
  height: 25px;
  padding: 1px;
  border-radius: 2px;
}

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body .tool-flyout .photo-command-context > label {
    min-height: 29px;
  }
}

/* Source: release-542.css */
/* Release 542: working General Actions and PDF right-rail contexts. */

body .tool-flyout[data-context="general-actions"] .general-actions-context,
body .tool-flyout[data-context="general-pdf"] .pdf-redaction-adjustments {
  padding: 5px !important;
}

body .tool-flyout[data-context="general-actions"] .general-actions-context > strong,
body .tool-flyout[data-context="general-pdf"] .pdf-redaction-adjustments > strong {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .tool-flyout[data-context="general-actions"] .flyout-adjustment-actions,
body .tool-flyout[data-context="general-pdf"] .flyout-adjustment-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

body .tool-flyout[data-context="general-actions"] .flyout-adjustment-actions button,
body .tool-flyout[data-context="general-pdf"] .flyout-adjustment-actions button {
  min-width: 0;
  min-height: 36px;
  padding: 4px 2px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .tool-flyout[data-context="general-actions"] .flyout-adjustment-actions button img,
body .tool-flyout[data-context="general-pdf"] .flyout-adjustment-actions button img {
  width: 17px;
  height: 17px;
}

body .tool-flyout[data-context="general-actions"] .flyout-mini-status,
body .tool-flyout[data-context="general-pdf"] .flyout-mini-status,
body .tool-flyout[data-context="general-pdf"] .pdf-redaction-review-summary {
  font-size: 9px;
  font-weight: 400 !important;
  line-height: 1.25;
  letter-spacing: 0;
}

body .tool-flyout[data-context="general-pdf"] .pdf-redaction-review-list {
  max-height: 96px;
}

body .tool-flyout[data-context="general-pdf"] .pdf-redaction-review-row strong,
body .tool-flyout[data-context="general-pdf"] .pdf-redaction-review-row span,
body .tool-flyout[data-context="general-pdf"] .pdf-redaction-clear span {
  font-weight: 400 !important;
  letter-spacing: 0;
}

/* Source: release-543.css */
/* Release 543: compact editable Redaction appearance controls. */

body .tool-flyout .pdf-redaction-adjustments > strong + .pdf-redaction-overlay-text,
body .tool-flyout .pdf-redaction-adjustments > .flyout-mini-status + strong {
  margin-top: 4px;
}

body .tool-flyout .pdf-redaction-overlay-text {
  min-height: 30px;
  padding-block: 2px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
}

body .tool-flyout .pdf-redaction-appearance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 3px 0 4px;
}

body .tool-flyout .pdf-redaction-appearance-grid label {
  display: grid;
  min-width: 0;
  grid-template-rows: 12px 25px;
  justify-items: center;
  gap: 1px;
  margin: 0;
  padding: 2px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
}

body .tool-flyout .pdf-redaction-appearance-grid input[type="color"],
body .tool-flyout .pdf-redaction-appearance-grid select {
  width: 100%;
  min-width: 0;
  height: 25px;
  padding: 1px;
  border-radius: 2px;
  font-size: 9px;
  font-weight: 400;
}

body .tool-flyout .pdf-redaction-adjustments > strong {
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .tool-flyout .pdf-redaction-adjustments .flyout-adjustment-actions:not(.is-two) {
  grid-template-columns: minmax(0, 1fr);
}

/* Source: release-544.css */
/* Release 544: compact Hand navigation and full-pasteboard panning. */

body .tool-flyout .navigation-tool-context {
  gap: 3px;
}

body .tool-flyout .navigation-tool-context > strong,
body .tool-flyout .navigation-tool-context label,
body .tool-flyout .navigation-tool-context select,
body .tool-flyout .navigation-tool-context button,
body .tool-flyout .navigation-tool-context .flyout-mini-status {
  font-weight: 400;
  letter-spacing: 0;
}

body .tool-flyout .navigation-tool-context > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  min-height: 30px;
  gap: 6px;
  margin: 0;
}

body .tool-flyout .navigation-tool-context select {
  width: 76px;
  min-width: 0;
  height: 28px;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
}

body .tool-flyout .navigation-view-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

body .tool-flyout .navigation-view-actions button {
  min-width: 0;
  min-height: 39px;
  padding: 3px 1px;
  border-radius: 3px;
  font-size: 9px;
}

body .tool-flyout .navigation-view-actions img {
  width: 17px;
  height: 17px;
  stroke-width: 1.5;
}

body .canvas-wrap[data-active-tool="hand"] {
  cursor: grab;
}

body .canvas-wrap[data-active-tool="hand"].is-hand-panning {
  cursor: grabbing;
  user-select: none;
}

body .canvas-wrap[data-active-tool="hand"].is-hand-panning canvas {
  cursor: grabbing;
}

/* Source: release-545.css */
/* Release 545: compact, function-matched Transform commands. */

body .tool-flyout[data-group="transform"] .flyout-tool-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

body .tool-flyout[data-group="transform"] .flyout-tool-list button {
  min-width: 0;
  min-height: 42px;
  padding: 3px 1px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0;
}

body .tool-flyout[data-group="transform"] .flyout-tool-list img {
  width: 17px;
  height: 17px;
}

body .tool-flyout[data-group="transform"] .flyout-tool-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 360px) {
  body .tool-flyout[data-group="transform"] .flyout-tool-list button {
    min-height: 40px;
    font-size: 8px;
  }
}

/* Source: release-546.css */
/* Release 546: selection-aware precision Transform controls. */

body .tool-flyout[data-group="transform"] .transform-tool-context {
  gap: 6px;
  padding-block: 8px 7px;
}

body .tool-flyout[data-group="transform"] .transform-context-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  padding-inline: 1px;
}

body .tool-flyout[data-group="transform"] .transform-context-heading strong {
  font-size: 11px;
  font-weight: 500;
}

body .tool-flyout[data-group="transform"] .transform-context-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .tool-flyout[data-group="transform"] .flyout-transform-grid,
body .tool-flyout[data-group="transform"] .flyout-transform-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 7px;
}

body .tool-flyout[data-group="transform"] .flyout-transform-grid label,
body .tool-flyout[data-group="transform"] .flyout-transform-secondary-grid label {
  min-width: 0;
}

body .tool-flyout[data-group="transform"] input::placeholder {
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
  opacity: 1;
}

body .tool-flyout[data-group="transform"] input:disabled,
body .tool-flyout[data-group="transform"] select:disabled {
  opacity: 0.48;
}

body .tool-flyout[data-group="transform"] .flyout-mini-status {
  min-height: 14px;
  margin-top: 1px;
}

@media (max-width: 350px) {
  body .tool-flyout[data-group="transform"] .transform-tool-context {
    gap: 5px;
  }

  body .tool-flyout[data-group="transform"] .flyout-transform-grid,
  body .tool-flyout[data-group="transform"] .flyout-transform-secondary-grid {
    gap: 4px 5px;
  }
}

/* Source: release-547.css */
/* Release 547: Direct Select owns anchor and path editing tools. */

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .flyout-tool-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .flyout-tool-list > button {
  min-height: 42px;
  padding: 4px 2px 3px;
  font-size: 9px;
  font-weight: 400;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .flyout-tool-list > button img {
  width: 17px;
  height: 17px;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .direct-select-context {
  gap: 6px;
  padding-block: 8px 7px;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .direct-anchor-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .direct-coordinate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .direct-coordinate-grid label {
  min-width: 0;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .direct-anchor-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .direct-anchor-actions button {
  min-width: 0;
  min-height: 39px;
  padding-inline: 1px;
  font-size: 8px;
  font-weight: 400;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .direct-anchor-actions button img {
  width: 15px;
  height: 15px;
}

body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .direct-forward-icon {
  transform: rotate(180deg);
}

@media (max-width: 350px) {
  body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .flyout-tool-list > button {
    min-height: 40px;
    font-size: 8px;
  }

  body .tool-flyout[data-group="selection"][data-group-tool="directSelect"] .direct-select-context {
    gap: 5px;
  }
}

/* Source: release-548.css */
/* Release 548: object Select settings stay separate from pixel selection. */

body .tool-flyout[data-group="selection"][data-group-tool="select"] .object-select-context {
  gap: 6px;
  padding-block: 8px 7px;
}

body .tool-flyout[data-group="selection"][data-group-tool="select"] .object-select-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  padding-inline: 1px;
}

body .tool-flyout[data-group="selection"][data-group-tool="select"] .object-select-heading strong {
  font-size: 11px;
  font-weight: 500;
}

body .tool-flyout[data-group="selection"][data-group-tool="select"] .object-select-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .tool-flyout[data-group="selection"][data-group-tool="select"] .object-selection-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}

body .tool-flyout[data-group="selection"][data-group-tool="select"] .object-selection-actions button {
  min-height: 39px;
  padding: 3px 2px;
  font-size: 9px;
  font-weight: 400;
}

body .tool-flyout[data-group="selection"][data-group-tool="select"] .object-selection-actions button img {
  width: 16px;
  height: 16px;
}

body .tool-flyout[data-group="selection"][data-group-tool="select"] .flyout-mini-status {
  min-height: 14px;
  margin-top: 1px;
}

@media (max-width: 350px) {
  body .tool-flyout[data-group="selection"][data-group-tool="select"] .object-select-context {
    gap: 5px;
  }

  body .tool-flyout[data-group="selection"][data-group-tool="select"] .object-selection-actions button {
    min-height: 37px;
    font-size: 8px;
  }
}

/* Source: release-549.css */
/* Release 549: compact Object Select detection controls and marquee feedback. */

body .tool-flyout[data-group="selection"][data-group-tool="objectSelect"] .object-detection-context {
  gap: 5px;
  padding-block: 7px 6px;
}

body .tool-flyout[data-group="selection"][data-group-tool="objectSelect"] .object-detection-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  padding-inline: 1px;
}

body .tool-flyout[data-group="selection"][data-group-tool="objectSelect"] .object-detection-heading strong {
  font-size: 11px;
  font-weight: 500;
}

body .tool-flyout[data-group="selection"][data-group-tool="objectSelect"] .object-detection-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .tool-flyout[data-group="selection"][data-group-tool="objectSelect"] .object-detection-context > label {
  min-height: 28px;
}

body .tool-flyout[data-group="selection"][data-group-tool="objectSelect"] .object-detection-context > label.is-disabled {
  opacity: 0.55;
}

body .tool-flyout[data-group="selection"][data-group-tool="objectSelect"] .flyout-mini-status {
  min-height: 14px;
  margin-top: 1px;
  font-weight: 400;
}

@media (max-width: 350px) {
  body .tool-flyout[data-group="selection"][data-group-tool="objectSelect"] .object-detection-context {
    gap: 4px;
    padding-block: 6px 5px;
  }

  body .tool-flyout[data-group="selection"][data-group-tool="objectSelect"] .object-detection-context > label {
    min-height: 27px;
  }
}

/* Source: release-550.css */
/* Release 550: compact pixel and vector Magic Wand controls. */

body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .magic-wand-context {
  gap: 3px;
  padding-block: 5px 4px;
}

body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] {
  max-height: calc(100dvh - var(--flyout-top, var(--editor-top)) - var(--bottom-height) - 10px) !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .magic-wand-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  padding-inline: 1px;
}

body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .magic-wand-heading strong {
  font-size: 11px;
  font-weight: 500;
}

body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .magic-wand-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .magic-wand-context > label {
  min-height: 25px;
}

body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .flyout-tool-list > button {
  min-height: 37px !important;
  grid-template-rows: 17px 10px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .magic-wand-context[data-magic-target="pixels"] .magic-object-option,
body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .magic-wand-context[data-magic-target="objects"] .magic-pixel-option {
  display: none;
}

body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .flyout-mini-status {
  min-height: 14px;
  margin-top: 1px;
  font-weight: 400;
}

@media (max-width: 350px) {
  body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .magic-wand-context {
    gap: 2px;
    padding-block: 4px 3px;
  }

  body .tool-flyout[data-group="selection"][data-group-tool="magicWand"] .magic-wand-context > label {
    min-height: 24px;
  }
}

/* Source: release-551.css */
/* Release 551: point-by-point Polygon Lasso with compact iPhone controls. */

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] {
  max-height: calc(100dvh - var(--flyout-top, var(--editor-top)) - var(--bottom-height) - 10px) !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .flyout-tool-list > button {
  min-height: 37px !important;
  grid-template-rows: 17px 10px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-context {
  gap: 3px !important;
  padding: 5px 6px 4px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  padding-inline: 1px;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-heading strong {
  font-size: 11px;
  font-weight: 500;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-context > label {
  min-height: 25px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-actions {
  gap: 4px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-actions button {
  min-height: 34px !important;
  grid-template-columns: 16px auto !important;
  grid-template-rows: 1fr !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 3px 5px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-actions button img {
  width: 15px !important;
  height: 15px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .flyout-mini-status {
  min-height: 13px;
  margin-top: 1px;
  font-size: 9px;
  font-weight: 400;
  line-height: 12px;
}

@media (max-width: 350px) {
  body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-context {
    gap: 2px !important;
    padding-block: 4px 3px !important;
  }

  body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-context > label {
    min-height: 24px !important;
  }

  body .tool-flyout[data-group="selection"][data-group-tool="polygonLasso"] .polygon-lasso-actions button {
    min-height: 32px !important;
  }
}

/* Source: release-552.css */
/* Release 552: persistent edge-following Magnetic Lasso for iPhone. */

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] {
  max-height: calc(100dvh - var(--flyout-top, var(--editor-top)) - var(--bottom-height) - 10px) !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .flyout-tool-list > button {
  min-height: 34px !important;
  grid-template-rows: 16px 10px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-context {
  gap: 2px !important;
  padding: 4px 6px 3px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  padding-inline: 1px;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-heading strong {
  font-size: 11px;
  font-weight: 500;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-heading span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-context > label {
  min-height: 23px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-actions {
  gap: 4px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-actions button {
  min-height: 31px !important;
  grid-template-columns: 15px auto !important;
  grid-template-rows: 1fr !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-actions button img {
  width: 14px !important;
  height: 14px !important;
}

body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .flyout-mini-status {
  min-height: 12px;
  margin-top: 0;
  font-size: 9px;
  font-weight: 400;
  line-height: 11px;
}

@media (max-width: 350px) {
  body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-context {
    gap: 1px !important;
    padding-block: 3px 2px !important;
  }

  body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-context > label {
    min-height: 22px !important;
  }

  body .tool-flyout[data-group="selection"][data-group-tool="magneticLasso"] .magnetic-lasso-actions button {
    min-height: 29px !important;
  }
}

/* Source: release-553.css */
/* Release 553: unobstructed phone preview with an on-demand inspector sheet. */

@media (max-width: 700px) {
  body .app-shell.inspector-collapsed .layers {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body .app-shell.inspector-collapsed .canvas-wrap {
    bottom: var(--bottom-height) !important;
  }

  body .app-shell.inspector-collapsed .bottom-workflows {
    z-index: 2147483001 !important;
  }
}

/* Source: release-554.css */
/* Release 554: document title, Zoom tool, and workspace navigation fixes. */
body .canvas-wrap {
  touch-action: none !important;
  overscroll-behavior: contain !important;
}

body .canvas-wrap[data-active-tool="zoom"],
body .canvas-wrap[data-active-tool="zoom"] canvas {
  cursor: zoom-in !important;
}

body .document-artboard-pasteboard {
  padding: 56px 72px 96px !important;
}

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body .document-chip {
    position: fixed !important;
    z-index: 2147482200 !important;
    inset: env(safe-area-inset-top, 0px) auto auto 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(58vw, 220px) !important;
    min-width: 0 !important;
    height: var(--title-row-height, 48px) !important;
    min-height: var(--title-row-height, 48px) !important;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  body .document-chip > span {
    display: none !important;
  }

  body #documentTitle {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--integrated-ink, #20242a) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    cursor: text !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body #documentTitle.is-editing {
    min-width: 112px !important;
    overflow: visible !important;
    border-bottom: 1px solid currentColor !important;
    outline: 0 !important;
    text-overflow: clip !important;
    user-select: text !important;
    -webkit-user-select: text !important;
  }

  body .document-artboard-pasteboard {
    padding: 44px 52px 88px !important;
  }
}

/* Source: release-558.css */
/* Release 558: one integrated iPhone title row with a visible editable title and no legacy bubble. */
@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  :root {
    --title-row-height: 52px;
    --command-height: 45px;
    --topbar-height: calc(env(safe-area-inset-top, 0px) + var(--title-row-height) + var(--command-height));
    --editor-top: var(--topbar-height);
  }

  body::after,
  body .topbar::before,
  body .topbar::after,
  body .history-actions::before,
  body .history-actions::after,
  body #iosMenuButton::before,
  body #iosMenuButton::after,
  body #documentActionMenu button::before,
  body #documentActionMenu button::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  body .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 2147482500 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    grid-template-rows: var(--title-row-height) var(--command-height) !important;
    gap: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
    padding: env(safe-area-inset-top, 0px) 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-bottom: 1px solid var(--integrated-line, rgba(25, 28, 33, 0.14)) !important;
    border-radius: 0 !important;
    background: var(--integrated-bar, rgba(250, 250, 251, 0.98)) !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  body .topbar-back-button {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: var(--title-row-height) !important;
    min-height: var(--title-row-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--integrated-line, rgba(25, 28, 33, 0.14)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body .topbar-back-button img {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    object-fit: contain !important;
    opacity: 0.92 !important;
  }

  body .history-actions {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--title-row-height) !important;
    min-height: var(--title-row-height) !important;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body .topbar .history-actions .document-chip {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body .topbar .history-actions .document-chip > span {
    display: none !important;
  }

  html body .topbar .history-actions .document-chip #documentTitle {
    position: static !important;
    z-index: auto !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--integrated-ink, #20242a) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 32px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: text !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  html body .topbar .history-actions .document-chip #documentTitle::before,
  html body .topbar .history-actions .document-chip #documentTitle::after {
    content: none !important;
    display: none !important;
  }

  html body .topbar .history-actions .document-chip #documentTitle.is-editing {
    min-width: 112px !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--integrated-ink, #20242a) !important;
    outline: 0 !important;
    text-overflow: clip !important;
    user-select: text !important;
    -webkit-user-select: text !important;
  }

  body #iosMenuButton {
    position: fixed !important;
    inset: env(safe-area-inset-top, 0px) 0 auto auto !important;
    z-index: 2147482600 !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: var(--title-row-height) !important;
    min-height: var(--title-row-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-left: 1px solid var(--integrated-line, rgba(25, 28, 33, 0.14)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--integrated-ink, #20242a) !important;
    pointer-events: auto !important;
  }

  body #iosMenuButton > img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    opacity: 0.9 !important;
  }

  html body #mobileShareActions,
  html body .topbar .mobile-share-actions,
  html body .topbar #mobileShareButton,
  html body #mobileShareButton,
  body .mode-switcher,
  body .topbar .zoom-actions,
  body .topbar .view-actions,
  body .topbar .mobile-share-actions,
  body .topbar .export-actions,
  body .topbar .export-status {
    display: none !important;
    visibility: hidden !important;
  }

  body #documentActionMenu {
    position: fixed !important;
    inset: calc(env(safe-area-inset-top, 0px) + var(--title-row-height)) 0 auto 0 !important;
    z-index: 2147482550 !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--command-height) !important;
    min-height: var(--command-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid var(--integrated-line, rgba(25, 28, 33, 0.14)) !important;
    border-bottom: 1px solid var(--integrated-line, rgba(25, 28, 33, 0.14)) !important;
    border-radius: 0 !important;
    background: var(--integrated-bar, rgba(250, 250, 251, 0.98)) !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body #documentActionMenu button,
  body #documentActionMenu #undoButton,
  body #documentActionMenu #redoButton,
  body #documentActionMenu #deleteButton {
    position: static !important;
    display: grid !important;
    grid-template-rows: 20px 11px !important;
    place-items: center !important;
    gap: 1px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--command-height) !important;
    min-height: var(--command-height) !important;
    margin: 0 !important;
    padding: 4px 1px 3px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--integrated-ink, #20242a) !important;
  }

  body #documentActionMenu button + button {
    border-left: 1px solid var(--integrated-line, rgba(25, 28, 33, 0.14)) !important;
  }

  body #documentActionMenu button > img {
    position: static !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 0.86 !important;
  }

  body #documentActionMenu button > span {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 11px !important;
    overflow: hidden !important;
    color: var(--integrated-ink, #20242a) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 11px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Source: release-564.css */
/* Release 563: reliable iPhone workspace gestures and complete Artboard commands. */

body .canvas-wrap,
body .canvas-wrap .pasteboard-frame,
body .canvas-wrap canvas {
  touch-action: none !important;
  overscroll-behavior: contain !important;
}

body .layers > [data-inspector-view="artboard"] > .artboard-view-toggles,
body .layers .artboard-inspector-panel > .artboard-view-toggles {
  position: sticky !important;
  top: 32px !important;
  z-index: 12 !important;
  display: flex !important;
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 0 0 5px !important;
  padding: 0 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-top: 1px solid var(--curve-line, #d0d1d4) !important;
  border-bottom: 1px solid var(--curve-line, #d0d1d4) !important;
  border-radius: 0 !important;
  background: rgba(248, 248, 249, 0.98) !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

body .layers > [data-inspector-view="artboard"] > .artboard-view-toggles::-webkit-scrollbar,
body .layers .artboard-inspector-panel > .artboard-view-toggles::-webkit-scrollbar {
  display: none !important;
}

body .layers .artboard-view-toggles > button {
  display: grid !important;
  min-width: 52px !important;
  width: 52px !important;
  max-width: 52px !important;
  min-height: 43px !important;
  height: 43px !important;
  flex: 0 0 52px !important;
  grid-template-rows: 20px 12px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  padding: 3px 2px 2px !important;
  border: 0 !important;
  border-right: 1px solid rgba(132, 135, 141, 0.18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--curve-text, #151619) !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

body .layers .artboard-view-toggles > button img {
  width: 17px !important;
  height: 17px !important;
  opacity: 0.8 !important;
}

body .layers .artboard-view-toggles > button span {
  max-width: 48px !important;
  overflow: hidden !important;
  font-size: 8.5px !important;
  font-weight: 400 !important;
  line-height: 11px !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .layers .artboard-view-toggles > #gridToggleButton {
  border-left: 1px solid var(--curve-line, #d0d1d4) !important;
}

body .layers .artboard-view-toggles > button:disabled {
  opacity: 0.3 !important;
}

body .layers .artboard-view-toggles > button.is-active {
  background: var(--curve-active, #eaf2fc) !important;
  color: var(--curve-text, #151619) !important;
  box-shadow: inset 0 -2px 0 var(--curve-accent, #2476d8) !important;
}


/* Release 564: compact 3D workspace, shaped like the primary editor shell. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.preview3d-surface {
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  grid-template-rows: 96px minmax(0, 1fr) 96px;
  background: #edf0f3;
}

.preview3d-surface .preview3d-topbar {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: 49px 47px;
  min-height: 0;
  padding: 0;
  border-bottom: 1px solid rgba(26, 35, 46, 0.12);
  background: rgba(250, 251, 252, 0.97);
  box-shadow: none;
}

.preview3d-header-back {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  width: 46px;
  height: 49px;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(26, 35, 46, 0.1);
  background: transparent;
}

.preview3d-header-back img {
  width: 18px;
  height: 18px;
}

.preview3d-document-title {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-content: center;
  gap: 1px;
  padding: 0 12px;
}

.preview3d-document-title span {
  overflow: hidden;
  color: #6d7480;
  font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-document-title strong {
  overflow: hidden;
  color: #1d2229;
  font: 400 15px/18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-header-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  border-top: 1px solid rgba(26, 35, 46, 0.09);
}

.preview3d-header-actions button {
  display: grid;
  min-width: 0;
  min-height: 46px;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 3px 1px 2px;
  border: 0;
  border-right: 1px solid rgba(26, 35, 46, 0.09);
  background: transparent;
  color: #313840;
  font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-header-actions button:last-child { border-right: 0; }
.preview3d-header-actions button:active,
.preview3d-header-actions button:focus-visible { background: rgba(24, 119, 229, 0.09); color: #126dd1; outline: 0; }
.preview3d-header-actions img { width: 17px; height: 17px; opacity: 0.82; }
.preview3d-header-actions .preview3d-return { color: #126dd1; }

.preview3d-rail {
  display: flex;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: rgba(26, 35, 46, 0.1);
  background: rgba(249, 250, 251, 0.94);
  scrollbar-width: none;
}

.preview3d-rail::-webkit-scrollbar { display: none; }
.preview3d-left-rail { grid-column: 1; border-right: 1px solid rgba(26, 35, 46, 0.1); }
.preview3d-right-rail { grid-column: 3; border-left: 1px solid rgba(26, 35, 46, 0.1); }

.preview3d-rail > button,
.preview3d-rail > label {
  position: relative;
  display: grid;
  width: 46px;
  min-height: 40px;
  flex: 0 0 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(26, 35, 46, 0.07);
  border-radius: 0;
  background: transparent;
  color: #303840;
}

.preview3d-rail > button.is-active,
.preview3d-rail > button:active,
.preview3d-rail > button:focus-visible {
  background: rgba(24, 119, 229, 0.1);
  color: #126dd1;
  outline: 0;
}

.preview3d-rail > button img,
.preview3d-rail > label > img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.88;
}

.preview3d-rail span { display: none; }
.preview3d-rail .preview3d-view-control { height: 40px; }
.preview3d-rail .preview3d-view-control select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.preview3d-viewport,
.preview3d-surface #preview3dCanvas {
  grid-column: 2;
  grid-row: 2;
  background: #edf0f3;
}

.preview3d-build-tools,
.preview3d-editor {
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 96px;
  max-height: 96px;
  border-top: 1px solid rgba(26, 35, 46, 0.12);
  background: rgba(250, 251, 252, 0.98);
  box-shadow: none;
}

.preview3d-build-tools {
  display: grid;
  grid-template-rows: 42px 54px;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.preview3d-bottom-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  border-bottom: 1px solid rgba(26, 35, 46, 0.1);
}

.preview3d-bottom-tabs button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 42px;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 3px 1px 2px;
  border: 0;
  background: transparent;
  color: #5a626d;
  font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-bottom-tabs button img { width: 17px; height: 17px; opacity: 0.83; }
.preview3d-bottom-tabs button.is-active { color: #126dd1; background: rgba(24, 119, 229, 0.07); }
.preview3d-bottom-tabs button.is-active::after { position: absolute; right: 9px; bottom: 0; left: 9px; height: 2px; background: #126dd1; content: ""; }

.preview3d-dock-content,
.preview3d-dock-panel {
  min-width: 0;
  min-height: 0;
}

.preview3d-dock-panel {
  display: flex;
  height: 54px;
  align-items: stretch;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.preview3d-dock-panel::-webkit-scrollbar { display: none; }
.preview3d-dock-panel[hidden] { display: none; }

.preview3d-dock-panel > button,
.preview3d-build-summary {
  display: grid;
  min-width: 56px;
  min-height: 54px;
  flex: 0 0 56px;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 4px 5px;
  border: 0;
  border-right: 1px solid rgba(26, 35, 46, 0.08);
  background: transparent;
  color: #303840;
  font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

.preview3d-dock-panel > button:active,
.preview3d-dock-panel > button:focus-visible { background: rgba(24, 119, 229, 0.09); color: #126dd1; outline: 0; }
.preview3d-dock-panel > button img,
.preview3d-build-summary img { width: 17px; height: 17px; object-fit: contain; opacity: 0.86; }
.preview3d-build-summary { min-width: 94px; flex-basis: 94px; color: #606873; }
.preview3d-build-summary span { overflow: hidden; max-width: 84px; text-overflow: ellipsis; white-space: nowrap; }

.preview3d-editor { overflow-x: auto; }
.preview3d-editor-modes { min-width: 360px; min-height: 40px; }
.preview3d-editor-content { min-width: 360px; max-height: 54px; overflow: hidden; }

.preview3d-status {
  z-index: 7;
  left: 54px;
  bottom: calc(102px + env(safe-area-inset-bottom));
  max-width: calc(100vw - 108px);
  padding: 4px 7px;
  border-radius: 4px;
  font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-build-tools:not([hidden]) ~ .preview3d-status,
.preview3d-editor:not([hidden]) ~ .preview3d-status { bottom: calc(102px + env(safe-area-inset-bottom)); }

.preview3d-export-panel,
.preview3d-outliner-panel,
.preview3d-axes-panel,
.preview3d-camera-panel,
.preview3d-section-panel {
  position: absolute;
  z-index: 12;
  top: 100px;
  right: 52px;
  bottom: 102px;
  left: 52px;
  max-width: none;
  max-height: none;
  overflow: auto;
  border: 1px solid rgba(26, 35, 46, 0.14);
  border-radius: 0;
  box-shadow: 0 12px 26px rgba(31, 42, 55, 0.16);
}

@media (max-width: 520px) {
  .preview3d-surface { grid-template-columns: 42px minmax(0, 1fr) 42px; grid-template-rows: 92px minmax(0, 1fr) 92px; }
  .preview3d-surface .preview3d-topbar { grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 47px 45px; }
  .preview3d-header-back { width: 42px; height: 47px; }
  .preview3d-document-title { padding: 0 10px; }
  .preview3d-document-title strong { font-size: 14px; }
  .preview3d-header-actions button { min-height: 44px; }
  .preview3d-header-actions button span { display: none; }
  .preview3d-rail > button, .preview3d-rail > label { width: 42px; min-height: 38px; flex-basis: 38px; }
  .preview3d-rail .preview3d-view-control { height: 38px; }
  .preview3d-rail > button img, .preview3d-rail > label > img { width: 17px; height: 17px; }
  .preview3d-build-tools, .preview3d-editor { min-height: 92px; max-height: 92px; }
  .preview3d-build-tools { grid-template-rows: 40px 52px; }
  .preview3d-bottom-tabs button { min-height: 40px; }
  .preview3d-dock-panel { height: 52px; }
  .preview3d-dock-panel > button, .preview3d-build-summary { min-width: 53px; min-height: 52px; flex-basis: 53px; }
  .preview3d-build-summary { min-width: 84px; flex-basis: 84px; }
  .preview3d-status { left: 48px; bottom: calc(98px + env(safe-area-inset-bottom)); max-width: calc(100vw - 96px); }
  .preview3d-export-panel, .preview3d-outliner-panel, .preview3d-axes-panel, .preview3d-camera-panel, .preview3d-section-panel { top: 96px; right: 47px; bottom: 98px; left: 47px; }
}

html[data-theme="dark"] .preview3d-surface,
html[data-theme="dark"] .preview3d-viewport,
html[data-theme="dark"] .preview3d-surface #preview3dCanvas { background: #252b33; }
html[data-theme="dark"] .preview3d-surface .preview3d-topbar,
html[data-theme="dark"] .preview3d-rail,
html[data-theme="dark"] .preview3d-build-tools,
html[data-theme="dark"] .preview3d-editor { border-color: rgba(255, 255, 255, 0.1); background: rgba(38, 44, 52, 0.98); }
html[data-theme="dark"] .preview3d-document-title strong,
html[data-theme="dark"] .preview3d-header-actions button,
html[data-theme="dark"] .preview3d-rail > button,
html[data-theme="dark"] .preview3d-dock-panel > button { color: #e8edf3; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-surface,
  html[data-theme="auto"] .preview3d-viewport,
  html[data-theme="auto"] .preview3d-surface #preview3dCanvas { background: #252b33; }
  html[data-theme="auto"] .preview3d-surface .preview3d-topbar,
  html[data-theme="auto"] .preview3d-rail,
  html[data-theme="auto"] .preview3d-build-tools,
  html[data-theme="auto"] .preview3d-editor { border-color: rgba(255, 255, 255, 0.1); background: rgba(38, 44, 52, 0.98); }
  html[data-theme="auto"] .preview3d-document-title strong,
  html[data-theme="auto"] .preview3d-header-actions button,
  html[data-theme="auto"] .preview3d-rail > button,
  html[data-theme="auto"] .preview3d-dock-panel > button { color: #e8edf3; }
}

html[data-theme="dark"] .preview3d-rail > button > img,
html[data-theme="dark"] .preview3d-rail > label > img { filter: invert(1); }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-rail > button > img,
  html[data-theme="auto"] .preview3d-rail > label > img { filter: invert(1); }
}

/* Source: release-565.css */
/* Release 565: in-scene material and component catalogs. */
.preview3d-header-actions {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

@media (max-width: 520px) {
  .preview3d-header-actions button {
    min-width: 0;
    padding: 3px 0 2px;
  }

  .preview3d-header-actions button span { display: block; }
}

.preview3d-catalog-panel {
  position: absolute;
  z-index: 14;
  top: 100px;
  right: 52px;
  bottom: 102px;
  left: 52px;
  display: grid;
  grid-template-rows: 42px 34px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 46, 0.14);
  border-radius: 0;
  background: rgba(250, 251, 252, 0.98);
  box-shadow: 0 12px 26px rgba(31, 42, 55, 0.16);
}

.preview3d-catalog-panel[hidden] { display: none; }

.preview3d-catalog-panel > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.1);
}

.preview3d-catalog-panel > header strong {
  color: #2b323a;
  font: 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-catalog-panel > header button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.preview3d-catalog-panel > header img { width: 16px; height: 16px; }

.preview3d-catalog-filters {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid rgba(26, 35, 46, 0.08);
  scrollbar-width: none;
}

.preview3d-catalog-filters::-webkit-scrollbar { display: none; }

.preview3d-catalog-filters button {
  min-width: max-content;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid rgba(26, 35, 46, 0.06);
  background: transparent;
  color: #66707d;
  font: 400 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-catalog-filters button.is-active { color: #126dd1; background: rgba(24, 119, 229, 0.08); }

.preview3d-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  padding: 8px;
}

.preview3d-catalog-grid > button {
  display: grid;
  min-width: 0;
  min-height: 76px;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 7px 4px;
  border: 1px solid rgba(26, 35, 46, 0.1);
  border-radius: 4px;
  background: #fff;
  color: #333b44;
  font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

.preview3d-catalog-grid > button:active,
.preview3d-catalog-grid > button:focus-visible { border-color: #126dd1; background: rgba(24, 119, 229, 0.06); outline: 0; }
.preview3d-catalog-grid > button i { display: block; width: 30px; height: 30px; border: 1px solid rgba(26, 35, 46, 0.12); border-radius: 50%; background: var(--material-swatch); }
.preview3d-catalog-grid > button img { width: 22px; height: 22px; opacity: 0.86; }
.preview3d-catalog-grid > button span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.preview3d-catalog-grid > button small { color: #7a8490; font: 400 8px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

@media (max-width: 520px) {
  .preview3d-catalog-panel { top: 96px; right: 47px; bottom: 98px; left: 47px; grid-template-rows: 40px 32px minmax(0, 1fr); }
  .preview3d-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 6px; }
  .preview3d-catalog-grid > button { min-height: 70px; }
}

html[data-theme="dark"] .preview3d-catalog-panel { border-color: rgba(255, 255, 255, 0.12); background: rgba(38, 44, 52, 0.99); }
html[data-theme="dark"] .preview3d-catalog-panel > header strong,
html[data-theme="dark"] .preview3d-catalog-grid > button { color: #e7edf4; }
html[data-theme="dark"] .preview3d-catalog-grid > button { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-catalog-panel { border-color: rgba(255, 255, 255, 0.12); background: rgba(38, 44, 52, 0.99); }
  html[data-theme="auto"] .preview3d-catalog-panel > header strong,
  html[data-theme="auto"] .preview3d-catalog-grid > button { color: #e7edf4; }
  html[data-theme="auto"] .preview3d-catalog-grid > button { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }
}

/* Source: release-566.css */
/* Release 566: searchable, broader 3D material and component catalogs. */
.preview3d-catalog-panel {
  grid-template-rows: 42px 34px 38px minmax(0, 1fr);
}

.preview3d-catalog-search {
  display: grid;
  align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.08);
}

.preview3d-catalog-search input {
  width: 100%;
  height: 28px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid rgba(26, 35, 46, 0.14);
  border-radius: 4px;
  background: #fff;
  color: #303842;
  font: 400 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-catalog-search input:focus {
  border-color: #126dd1;
  outline: 0;
}

.preview3d-catalog-grid > button.is-selected {
  border-color: #126dd1;
  background: rgba(24, 119, 229, 0.07);
  box-shadow: inset 2px 0 0 #126dd1;
}

.preview3d-catalog-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 8px;
  color: #6c7580;
  font: 400 11px/16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

@media (max-width: 520px) {
  .preview3d-catalog-panel { grid-template-rows: 40px 32px 36px minmax(0, 1fr); }
  .preview3d-catalog-search { padding: 4px 6px; }
  .preview3d-catalog-search input { height: 26px; font-size: 10px; }
}

html[data-theme="dark"] .preview3d-catalog-search { border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .preview3d-catalog-search input { border-color: rgba(255, 255, 255, 0.14); background: rgba(17, 20, 25, 0.5); color: #e7edf4; }
html[data-theme="dark"] .preview3d-catalog-empty { color: #aeb7c2; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-catalog-search { border-color: rgba(255, 255, 255, 0.08); }
  html[data-theme="auto"] .preview3d-catalog-search input { border-color: rgba(255, 255, 255, 0.14); background: rgba(17, 20, 25, 0.5); color: #e7edf4; }
  html[data-theme="auto"] .preview3d-catalog-empty { color: #aeb7c2; }
}

/* Source: release-567.css */
/* Release 567: compact 3D render environment controls. */
.preview3d-render-panel {
  position: absolute;
  z-index: 14;
  top: 100px;
  right: 52px;
  bottom: 102px;
  left: 52px;
  display: grid;
  grid-template-rows: 42px 62px 48px 48px;
  align-content: start;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 46, 0.14);
  border-radius: 0;
  background: rgba(250, 251, 252, 0.98);
  box-shadow: 0 12px 26px rgba(31, 42, 55, 0.16);
}

.preview3d-render-panel[hidden] { display: none; }

.preview3d-render-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.1);
}

.preview3d-render-panel > header strong {
  color: #2b323a;
  font: 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-render-panel > header button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.preview3d-render-panel > header img { width: 16px; height: 16px; }

.preview3d-render-presets,
.preview3d-render-toggles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preview3d-render-presets {
  border-bottom: 1px solid rgba(26, 35, 46, 0.08);
}

.preview3d-render-presets button {
  display: grid;
  min-width: 0;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 5px 2px;
  border: 0;
  border-right: 1px solid rgba(26, 35, 46, 0.07);
  background: transparent;
  color: #535d68;
  font: 400 10px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-render-presets button:last-child { border-right: 0; }
.preview3d-render-presets button img { width: 17px; height: 17px; opacity: 0.84; }
.preview3d-render-presets button.is-active { background: rgba(24, 119, 229, 0.08); color: #126dd1; }

.preview3d-render-exposure {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 42px;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.08);
  color: #58626d;
  font: 400 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-render-exposure input { width: 100%; min-width: 0; }
.preview3d-render-exposure output { color: #3f4852; font: 400 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: right; }

.preview3d-render-toggles label {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-right: 1px solid rgba(26, 35, 46, 0.07);
  color: #58626d;
  font: 400 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-render-toggles label:last-child { border-right: 0; }
.preview3d-render-toggles input { accent-color: #126dd1; }

@media (max-width: 520px) {
  .preview3d-render-panel { top: 96px; right: 47px; bottom: 98px; left: 47px; grid-template-rows: 40px 60px 46px 46px; }
}

html[data-theme="dark"] .preview3d-render-panel { border-color: rgba(255, 255, 255, 0.12); background: rgba(38, 44, 52, 0.99); }
html[data-theme="dark"] .preview3d-render-panel > header strong,
html[data-theme="dark"] .preview3d-render-presets button,
html[data-theme="dark"] .preview3d-render-exposure output { color: #e7edf4; }
html[data-theme="dark"] .preview3d-render-exposure,
html[data-theme="dark"] .preview3d-render-toggles label { color: #c1cad4; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-render-panel { border-color: rgba(255, 255, 255, 0.12); background: rgba(38, 44, 52, 0.99); }
  html[data-theme="auto"] .preview3d-render-panel > header strong,
  html[data-theme="auto"] .preview3d-render-presets button,
  html[data-theme="auto"] .preview3d-render-exposure output { color: #e7edf4; }
  html[data-theme="auto"] .preview3d-render-exposure,
  html[data-theme="auto"] .preview3d-render-toggles label { color: #c1cad4; }
}

/* Source: release-568.css */
/* Release 568: compact numeric transform controls for selected 3D objects. */
.preview3d-transform-panel {
  position: absolute;
  z-index: 14;
  top: 100px;
  right: 52px;
  left: 52px;
  display: grid;
  max-height: 304px;
  grid-template-rows: 42px 30px minmax(0, 1fr) 44px;
  overflow: auto;
  border: 1px solid rgba(26, 35, 46, 0.14);
  border-radius: 0;
  background: rgba(250, 251, 252, 0.98);
  box-shadow: 0 12px 26px rgba(31, 42, 55, 0.16);
}

.preview3d-transform-panel[hidden] { display: none; }

.preview3d-transform-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.1);
}

.preview3d-transform-panel > header > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}

.preview3d-transform-panel > header strong {
  color: #2b323a;
  font: 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-transform-panel > header output {
  color: #7a838d;
  font: 400 10px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-transform-panel > header button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.preview3d-transform-panel > header img { width: 16px; height: 16px; }

.preview3d-transform-panel > p {
  overflow: hidden;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.08);
  color: #555f6a;
  font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-transform-fields {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preview3d-transform-fields label {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 7px 8px;
  border-right: 1px solid rgba(26, 35, 46, 0.07);
  border-bottom: 1px solid rgba(26, 35, 46, 0.07);
  color: #65707b;
  font: 400 9px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-transform-fields label:nth-child(3n) { border-right: 0; }

.preview3d-transform-fields input {
  width: 100%;
  min-width: 0;
  height: 22px;
  padding: 2px 4px;
  border: 0;
  border-bottom: 1px solid rgba(26, 35, 46, 0.16);
  border-radius: 0;
  background: transparent;
  color: #303941;
  font: 400 11px/16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  outline: 0;
}

.preview3d-transform-fields input:focus { border-bottom-color: #126dd1; }
.preview3d-transform-fields input:disabled { color: #9aa2aa; }

.preview3d-transform-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(26, 35, 46, 0.08);
}

.preview3d-transform-actions button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  border: 0;
  border-right: 1px solid rgba(26, 35, 46, 0.08);
  border-radius: 0;
  background: transparent;
  color: #4e5863;
  font: 400 10px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-transform-actions button:last-child { border-right: 0; }
.preview3d-transform-actions button img { width: 16px; height: 16px; }
.preview3d-transform-actions button:active:not(:disabled),
.preview3d-transform-actions button:focus-visible:not(:disabled) { background: rgba(24, 119, 229, 0.09); color: #126dd1; outline: 0; }
.preview3d-transform-actions button:disabled { color: #a8afb7; }

@media (max-width: 520px) {
  .preview3d-transform-panel { top: 96px; right: 47px; left: 47px; max-height: 300px; }
}

html[data-theme="dark"] .preview3d-transform-panel { border-color: rgba(255, 255, 255, 0.12); background: rgba(38, 44, 52, 0.99); }
html[data-theme="dark"] .preview3d-transform-panel > header strong,
html[data-theme="dark"] .preview3d-transform-fields input { color: #e7edf4; }
html[data-theme="dark"] .preview3d-transform-panel > p,
html[data-theme="dark"] .preview3d-transform-panel > header output,
html[data-theme="dark"] .preview3d-transform-fields label,
html[data-theme="dark"] .preview3d-transform-actions button { color: #c1cad4; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-transform-panel { border-color: rgba(255, 255, 255, 0.12); background: rgba(38, 44, 52, 0.99); }
  html[data-theme="auto"] .preview3d-transform-panel > header strong,
  html[data-theme="auto"] .preview3d-transform-fields input { color: #e7edf4; }
  html[data-theme="auto"] .preview3d-transform-panel > p,
  html[data-theme="auto"] .preview3d-transform-panel > header output,
  html[data-theme="auto"] .preview3d-transform-fields label,
  html[data-theme="auto"] .preview3d-transform-actions button { color: #c1cad4; }
}

/* Source: release-569.css */
/* Release 569: compact selected-object actions in the 3D transform sheet. */
.preview3d-transform-header-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}

.preview3d-transform-panel > header .preview3d-transform-header-actions button {
  width: 28px;
  height: 30px;
}

.preview3d-transform-header-actions button[aria-pressed="true"] {
  background: rgba(24, 119, 229, 0.09);
  color: #126dd1;
}

.preview3d-transform-header-actions button:active:not(:disabled),
.preview3d-transform-header-actions button:focus-visible:not(:disabled) {
  background: rgba(24, 119, 229, 0.12);
  color: #126dd1;
  outline: 0;
}

.preview3d-transform-header-actions button:disabled { opacity: 0.42; }

html[data-theme="dark"] .preview3d-transform-header-actions button[aria-pressed="true"] { background: rgba(82, 157, 238, 0.17); color: #93c7ff; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-transform-header-actions button[aria-pressed="true"] { background: rgba(82, 157, 238, 0.17); color: #93c7ff; }
}

/* Source: release-570.css */
/* Release 570: local favorites and recents for 3D materials and components. */
.preview3d-catalog-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 76px;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 46, 0.1);
  border-radius: 4px;
  background: #fff;
}

.preview3d-catalog-card.is-selected {
  border-color: #126dd1;
  background: rgba(24, 119, 229, 0.07);
  box-shadow: inset 2px 0 0 #126dd1;
}

.preview3d-catalog-card > button[data-3d-material-id],
.preview3d-catalog-card > button[data-3d-component-id] {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 74px;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 7px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #333b44;
  font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

.preview3d-catalog-card > button[data-3d-material-id]:active,
.preview3d-catalog-card > button[data-3d-component-id]:active,
.preview3d-catalog-card > button[data-3d-material-id]:focus-visible,
.preview3d-catalog-card > button[data-3d-component-id]:focus-visible { background: rgba(24, 119, 229, 0.06); outline: 0; }

.preview3d-catalog-card > button[data-3d-material-id] i {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(26, 35, 46, 0.12);
  border-radius: 50%;
  background: var(--material-swatch);
}

.preview3d-catalog-card > button[data-3d-component-id] img { width: 22px; height: 22px; opacity: 0.86; }
.preview3d-catalog-card > button > span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.preview3d-catalog-card > button > small { color: #7a8490; font: 400 8px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.preview3d-catalog-favorite {
  position: absolute;
  z-index: 1;
  top: 1px;
  right: 1px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #76808b;
}

.preview3d-catalog-favorite img { width: 14px; height: 14px; opacity: 0.72; }
.preview3d-catalog-favorite.is-active { color: #c28618; }
.preview3d-catalog-favorite.is-active img { opacity: 1; filter: sepia(0.9) saturate(3) hue-rotate(3deg); }
.preview3d-catalog-favorite:active,
.preview3d-catalog-favorite:focus-visible { background: rgba(24, 119, 229, 0.09); outline: 0; }

@media (max-width: 520px) {
  .preview3d-catalog-card { min-height: 70px; }
  .preview3d-catalog-card > button[data-3d-material-id],
  .preview3d-catalog-card > button[data-3d-component-id] { min-height: 68px; }
}

html[data-theme="dark"] .preview3d-catalog-card { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .preview3d-catalog-card > button[data-3d-material-id],
html[data-theme="dark"] .preview3d-catalog-card > button[data-3d-component-id] { color: #e7edf4; }
html[data-theme="dark"] .preview3d-catalog-card > button > small { color: #aeb7c2; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-catalog-card { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); }
  html[data-theme="auto"] .preview3d-catalog-card > button[data-3d-material-id],
  html[data-theme="auto"] .preview3d-catalog-card > button[data-3d-component-id] { color: #e7edf4; }
  html[data-theme="auto"] .preview3d-catalog-card > button > small { color: #aeb7c2; }
}

/* Source: release-571.css */
/* Release 571: direct in-scene room starter. */
.preview3d-dock-panel [data-3d-command="room-kit"] img { opacity: 0.84; }

/* Source: release-572.css */
/* Release 572: direct 3D furnishing starter. */
.preview3d-dock-panel [data-3d-command="furnish-kit"] img { opacity: 0.84; }

/* Source: release-573.css */
/* Release 573: tap-to-paint materials in the 3D scene. */
#preview3dMaterialPaintButton.is-active {
  background: rgba(24, 119, 229, 0.1);
  color: #126dd1;
}

#preview3dMaterialPaintButton.is-active img { opacity: 1; }

/* Source: release-574.css */
/* Release 574: local custom finish entry for the 3D material painter. */
#preview3dMaterialLibrary { grid-template-rows: 42px 34px 38px 38px minmax(0, 1fr); }

.preview3d-material-new {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  gap: 5px;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.08);
}

.preview3d-material-new input[type="text"] {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(26, 35, 46, 0.14);
  border-radius: 4px;
  background: #fff;
  color: #333b44;
  font: 400 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-material-new input[type="color"] {
  width: 30px;
  height: 28px;
  padding: 2px;
  border: 1px solid rgba(26, 35, 46, 0.14);
  border-radius: 4px;
  background: #fff;
}

.preview3d-material-new button {
  display: grid;
  width: 30px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(26, 35, 46, 0.1);
  border-radius: 4px;
  background: #f7f9fb;
}

.preview3d-material-new button img { width: 14px; height: 14px; opacity: 0.82; }
.preview3d-material-new button:active,
.preview3d-material-new button:focus-visible { border-color: #126dd1; background: rgba(24, 119, 229, 0.08); outline: 0; }

@media (max-width: 520px) {
  #preview3dMaterialLibrary { grid-template-rows: 40px 32px 34px 36px minmax(0, 1fr); }
  .preview3d-material-new { padding: 4px 6px; }
  .preview3d-material-new input[type="text"] { height: 26px; }
  .preview3d-material-new input[type="color"],
  .preview3d-material-new button { height: 26px; }
}

html[data-theme="dark"] .preview3d-material-new { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .preview3d-material-new input[type="text"],
html[data-theme="dark"] .preview3d-material-new input[type="color"],
html[data-theme="dark"] .preview3d-material-new button { border-color: rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.04); color: #e7edf4; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-material-new { border-color: rgba(255, 255, 255, 0.1); }
  html[data-theme="auto"] .preview3d-material-new input[type="text"],
  html[data-theme="auto"] .preview3d-material-new input[type="color"],
  html[data-theme="auto"] .preview3d-material-new button { border-color: rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.04); color: #e7edf4; }
}

/* Source: release-575.css */
/* Release 575: precise tap placement for 3D library components. */
.preview3d-catalog-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

#preview3dComponentPlaceButton.is-active {
  background: rgba(24, 119, 229, 0.1);
  color: #126dd1;
}

#preview3dComponentPlaceButton.is-active img { opacity: 1; }

#preview3dComponentLibrary .preview3d-catalog-card.is-selected > button[data-3d-component-id] {
  box-shadow: inset 2px 0 0 #126dd1;
}

@media (max-width: 520px) {
  .preview3d-catalog-header-actions { gap: 0; }
  #preview3dComponentPlaceButton { width: 28px; height: 28px; }
}

html[data-theme="dark"] #preview3dComponentPlaceButton.is-active { background: rgba(71, 146, 230, 0.16); color: #8bc2ff; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] #preview3dComponentPlaceButton.is-active { background: rgba(71, 146, 230, 0.16); color: #8bc2ff; }
}

/* Source: release-576.css */
/* Release 576: restrained visual guidance for 3D component placement. */
#preview3dViewport.is-placing-component canvas {
  cursor: crosshair;
}

@media (hover: none) {
  #preview3dViewport.is-placing-component canvas { cursor: default; }
}

/* Source: release-577.css */
/* Release 577: temporary, in-scene 3D distance readout. */
#preview3dViewport.is-measuring canvas { cursor: crosshair; }

.preview3d-measure-label {
  position: absolute;
  z-index: 23;
  min-width: 42px;
  padding: 3px 6px;
  border: 1px solid rgba(18, 109, 209, 0.42);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.94);
  color: #126dd1;
  font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

@media (hover: none) {
  #preview3dViewport.is-measuring canvas { cursor: default; }
}

html[data-theme="dark"] .preview3d-measure-label { border-color: rgba(139, 194, 255, 0.48); background: rgba(31, 38, 47, 0.94); color: #8bc2ff; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-measure-label { border-color: rgba(139, 194, 255, 0.48); background: rgba(31, 38, 47, 0.94); color: #8bc2ff; }
}

/* Source: release-578.css */
/* Release 578: compact pre-placement rotation for 3D library components. */
#preview3dComponentRotateButton {
  transition: background-color 140ms ease, color 140ms ease;
}

#preview3dComponentRotateButton img {
  transform: rotate(var(--placement-turn, 0deg));
  transition: transform 160ms ease;
}

#preview3dComponentRotateButton:active,
#preview3dComponentRotateButton:focus-visible {
  background: rgba(24, 119, 229, 0.08);
  color: #126dd1;
  outline: 0;
}

/* Source: release-579.css */
/* Release 579: restore direct 2D gesture navigation beneath the compact iPhone chrome. */
@media (max-width: 1400px) {
  body .canvas-wrap {
    overflow: auto !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
  }

  body .canvas-wrap .pasteboard-frame {
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    min-width: calc(100% - 56px) !important;
    height: max-content !important;
  }

  body .canvas-wrap #artboard {
    width: var(--artboard-display-width) !important;
    max-width: none !important;
    height: var(--artboard-display-height) !important;
    max-height: none !important;
  }
}

/* Source: release-580.css */
/* Release 580: the existing Build cube indicates when the live scene needs a refresh. */
@media (max-width: 1400px) {
  body .app-frame-right-nav .category-tool[data-action="preview3d"].is-preview-dirty {
    box-shadow: inset 2px 0 0 var(--ios-accent) !important;
    background: rgba(20, 115, 230, 0.07) !important;
  }
}

/* Source: release-581.css */
/* Release 581: Build controls preserve the compact live-scene update affordance. */
@media (max-width: 1400px) {
  body .app-frame-right-nav .category-tool[data-action="preview3d"].is-preview-dirty {
    transition: background-color 120ms ease, box-shadow 120ms ease;
  }
}

/* Source: release-582.css */
/* Release 582: preserve a real scaled pasteboard for direct iPhone navigation. */
@media (max-width: 1400px) {
  body .canvas-wrap {
    overflow: auto !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
  }

  body .canvas-wrap > .document-artboard-pasteboard {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    height: max-content !important;
    min-height: max-content !important;
  }

  body .canvas-wrap .pasteboard-frame {
    width: var(--artboard-display-width) !important;
    min-width: var(--artboard-display-width) !important;
    height: auto !important;
  }

  body .canvas-wrap #artboard {
    flex: 0 0 auto !important;
    width: var(--artboard-display-width) !important;
    max-width: none !important;
    height: var(--artboard-display-height) !important;
    max-height: none !important;
  }
}

/* Source: release-583.css */
/* Release 583: keep 3D touch gestures inside the compact viewport. */
@media (max-width: 1400px) {
  #preview3dViewport,
  #preview3dViewport > canvas,
  #preview3dCanvas {
    touch-action: none !important;
    overscroll-behavior: contain !important;
  }
}

.preview3d-right-rail [data-3d-command="orbit"].is-active {
  background: rgba(24, 119, 229, 0.1);
  color: #126dd1;
}

html[data-theme="dark"] .preview3d-right-rail [data-3d-command="orbit"].is-active {
  background: rgba(71, 146, 230, 0.16);
  color: #8bc2ff;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-right-rail [data-3d-command="orbit"].is-active {
    background: rgba(71, 146, 230, 0.16);
    color: #8bc2ff;
  }
}

/* Source: release-584.css */
/* Release 584: integrated mobile 3D stage and a clear 3D asset library. */
.preview3d-artboard-picker {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  color: #6d747d;
  font-size: 10px;
  line-height: 1;
}

.preview3d-artboard-picker select {
  min-width: 0;
  max-width: 148px;
  height: 28px;
  padding: 0 21px 0 7px;
  border: 1px solid rgba(26, 35, 46, 0.13);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.82);
  color: #303840;
  font-size: 11px;
}

.preview3d-artboard-picker[hidden] {
  display: none;
}

.preview3d-library-button {
  display: none;
}

@media (max-width: 760px) {
  /* The Add control becomes the first cell of the left rail, not a floating chip. */
  body .app-shell > .add-menu-button {
    position: fixed !important;
    top: 50px !important;
    left: var(--phone-left) !important;
    z-index: 2147483002 !important;
    display: grid !important;
    width: var(--rail-width) !important;
    min-width: var(--rail-width) !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--ios-ui-line) !important;
    border-bottom: 1px solid var(--ios-ui-line) !important;
    border-radius: 0 !important;
    background: var(--ios-ui-bg) !important;
    box-shadow: none !important;
  }

  body .sidebar {
    top: 92px !important;
  }

  /* Keep the document chrome visible and use the canvas area as the 3D stage. */
  body.preview3d-open .app-shell {
    visibility: visible !important;
  }

  body.preview3d-open .preview3d-modal {
    position: fixed !important;
    inset: 106px auto var(--bottom-height) calc(var(--phone-left) + var(--rail-width)) !important;
    z-index: 2147483500 !important;
    display: block !important;
    width: calc(var(--phone-width) - (var(--rail-width) * 2)) !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.preview3d-open .preview3d-surface {
    width: 100% !important;
    height: 100% !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    grid-template-rows: 42px minmax(0, 1fr) 92px !important;
    background: #edf0f3 !important;
  }

  body.preview3d-open .preview3d-topbar {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 42px !important;
    height: 42px !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  body.preview3d-open .preview3d-document-title {
    display: flex !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 8px !important;
  }

  body.preview3d-open .preview3d-document-title > #preview3dModeLabel {
    display: none !important;
  }

  body.preview3d-open .preview3d-document-title strong {
    overflow: hidden !important;
    min-width: 0 !important;
    max-width: 70px !important;
    color: #303840 !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.preview3d-open .preview3d-artboard-picker {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.preview3d-open .preview3d-artboard-picker > span {
    display: none !important;
  }

  body.preview3d-open .preview3d-artboard-picker select {
    width: 100% !important;
    max-width: none !important;
    height: 28px !important;
  }

  body.preview3d-open .preview3d-library-button {
    display: grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(26, 35, 46, 0.1) !important;
    background: transparent !important;
  }

  body.preview3d-open .preview3d-library-button img {
    width: 17px !important;
    height: 17px !important;
  }

  body.preview3d-open .preview3d-library-button span,
  body.preview3d-open .preview3d-header-actions {
    display: none !important;
  }

  body.preview3d-open .preview3d-header-back {
    order: 3 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-left: 1px solid rgba(26, 35, 46, 0.1) !important;
  }

  body.preview3d-open .preview3d-left-rail,
  body.preview3d-open .preview3d-right-rail,
  body.preview3d-open .preview3d-viewport,
  body.preview3d-open .preview3d-surface #preview3dCanvas {
    grid-row: 2 !important;
  }

  body.preview3d-open .preview3d-build-tools,
  body.preview3d-open .preview3d-editor {
    grid-row: 3 !important;
    min-height: 92px !important;
    max-height: 92px !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-catalog-panel,
  body.preview3d-open .preview3d-render-panel,
  body.preview3d-open .preview3d-transform-panel,
  body.preview3d-open .preview3d-export-panel,
  body.preview3d-open .preview3d-outliner-panel,
  body.preview3d-open .preview3d-axes-panel,
  body.preview3d-open .preview3d-camera-panel,
  body.preview3d-open .preview3d-section-panel {
    position: absolute !important;
    z-index: 24 !important;
    top: 42px !important;
    right: 42px !important;
    bottom: 92px !important;
    left: 42px !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* Source: release-585.css */
/* Release 585: one complete 3D artboard workspace, not a stage inside 2D chrome. */
@media (max-width: 760px) {
  /* The selected artboard opens in its own full editor shell, so there is never a second set of rails behind it. */
  body.preview3d-open .app-shell {
    visibility: hidden !important;
  }

  body.preview3d-open .preview3d-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: grid !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    place-items: stretch !important;
    background: #e7ebf0 !important;
  }

  body.preview3d-open .preview3d-surface {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    grid-template-rows: 92px minmax(0, 1fr) 92px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #edf0f3 !important;
  }

  /* Match the regular screen's title row and seven compact document actions. */
  body.preview3d-open .preview3d-topbar {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: 47px 45px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  body.preview3d-open .preview3d-header-back {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: initial !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 47px !important;
    border-right: 1px solid rgba(26, 35, 46, 0.1) !important;
    border-left: 0 !important;
  }

  body.preview3d-open .preview3d-document-title {
    position: relative !important;
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    align-content: center !important;
    gap: 1px !important;
    padding: 0 10px !important;
  }

  body.preview3d-open .preview3d-document-title > #preview3dModeLabel,
  body.preview3d-open .preview3d-document-title strong {
    display: block !important;
    max-width: calc(100% - 126px) !important;
  }

  body.preview3d-open .preview3d-document-title strong {
    color: #1d2229 !important;
    font-size: 14px !important;
  }

  body.preview3d-open .preview3d-artboard-picker {
    position: absolute !important;
    top: 10px !important;
    right: 9px !important;
    display: inline-flex !important;
    min-width: 0 !important;
    max-width: 118px !important;
    align-items: center !important;
  }

  body.preview3d-open .preview3d-artboard-picker[hidden] {
    display: none !important;
  }

  body.preview3d-open .preview3d-artboard-picker > span {
    display: none !important;
  }

  body.preview3d-open .preview3d-artboard-picker select {
    width: 118px !important;
    max-width: 118px !important;
    height: 28px !important;
  }

  /* Library is available in the 3D dock, leaving the document title unambiguous. */
  body.preview3d-open .preview3d-library-button {
    display: none !important;
  }

  body.preview3d-open .preview3d-header-actions {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-header-actions button {
    display: grid !important;
    min-height: 44px !important;
  }

  body.preview3d-open .preview3d-header-actions button span {
    display: none !important;
  }

  /* One left 3D rail, one right 3D rail, and the same compact dock pattern. */
  body.preview3d-open .preview3d-left-rail {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body.preview3d-open .preview3d-right-rail {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  body.preview3d-open .preview3d-viewport,
  body.preview3d-open .preview3d-surface #preview3dCanvas {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body.preview3d-open .preview3d-build-tools,
  body.preview3d-open .preview3d-editor {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-height: 92px !important;
    max-height: 92px !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-catalog-panel,
  body.preview3d-open .preview3d-render-panel,
  body.preview3d-open .preview3d-transform-panel,
  body.preview3d-open .preview3d-export-panel,
  body.preview3d-open .preview3d-outliner-panel,
  body.preview3d-open .preview3d-axes-panel,
  body.preview3d-open .preview3d-camera-panel,
  body.preview3d-open .preview3d-section-panel {
    position: absolute !important;
    z-index: 24 !important;
    top: 96px !important;
    right: 47px !important;
    bottom: 98px !important;
    left: 47px !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.preview3d-open .preview3d-status {
    left: 48px !important;
    bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 96px) !important;
  }
}

/* Source: release-586.css */
/* Release 586: reliable 3D dock selection and contained iPhone scene drawers. */
@media (max-width: 760px) {
  /* Scene drawers scroll inside the canvas area and retain their close control. */
  body.preview3d-open .preview3d-outliner-panel {
    box-sizing: border-box !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body.preview3d-open .preview3d-outliner-panel > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    min-height: 42px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px 0 10px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.1) !important;
    background: rgba(250, 251, 252, 0.99) !important;
  }

  body.preview3d-open .preview3d-outliner-panel > header > button {
    display: grid !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.preview3d-open .preview3d-outliner-panel > header > button img {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Source: release-587.css */
/* Release 587: 3D tool categories use the primary bottom-sheet pattern. */
@media (max-width: 760px) {
  /* The selected 3D category opens above a fixed bottom dock, just like the main workspace. */
  body.preview3d-open .preview3d-build-tools {
    grid-template-rows: minmax(0, 1fr) 42px !important;
    min-height: 164px !important;
    max-height: 164px !important;
    border-top: 1px solid rgba(26, 35, 46, 0.11) !important;
    background: rgba(250, 251, 252, 0.98) !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-row: 2 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    min-height: 42px !important;
    border-top: 1px solid rgba(26, 35, 46, 0.1) !important;
    border-bottom: 0 !important;
    background: rgba(250, 251, 252, 0.99) !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button {
    min-height: 42px !important;
    font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-dock-content {
    grid-row: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-panel {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 18px repeat(2, 52px) !important;
    grid-auto-rows: 52px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 122px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    background: rgba(250, 251, 252, 0.98) !important;
  }

  body.preview3d-open .preview3d-dock-panel::-webkit-scrollbar {
    display: none;
  }

  body.preview3d-open .preview3d-dock-panel[hidden] {
    display: none !important;
  }

  body.preview3d-open .preview3d-dock-panel::before {
    grid-column: 1 / -1;
    display: flex;
    height: 18px;
    align-items: center;
    padding: 4px 10px 0;
    color: #626b76;
    font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-transform: capitalize;
    content: attr(data-3d-dock-panel);
  }

  body.preview3d-open .preview3d-dock-panel > button,
  body.preview3d-open .preview3d-build-summary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    flex: initial !important;
    border-right: 1px solid rgba(26, 35, 46, 0.08) !important;
    border-top: 1px solid rgba(26, 35, 46, 0.06) !important;
    font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-build-summary {
    grid-column: span 2;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 0 8px !important;
    text-align: left !important;
  }

  /* Floating 3D inspectors leave both the new sheet and its persistent dock visible. */
  body.preview3d-open .preview3d-catalog-panel,
  body.preview3d-open .preview3d-render-panel,
  body.preview3d-open .preview3d-transform-panel,
  body.preview3d-open .preview3d-export-panel,
  body.preview3d-open .preview3d-outliner-panel,
  body.preview3d-open .preview3d-axes-panel,
  body.preview3d-open .preview3d-camera-panel,
  body.preview3d-open .preview3d-section-panel {
    bottom: 170px !important;
  }

  body.preview3d-open .preview3d-status {
    bottom: calc(170px + env(safe-area-inset-bottom)) !important;
  }
}

/* Source: release-588.css */
/* Release 588: reserve room for the complete 3D bottom sheet. */
@media (max-width: 760px) {
  /* The 3D canvas contracts above the fixed tool sheet instead of clipping it below the viewport. */
  body.preview3d-open .preview3d-surface {
    grid-template-rows: 92px minmax(0, 1fr) 164px !important;
  }

  body.preview3d-open .preview3d-build-tools,
  body.preview3d-open .preview3d-editor {
    min-height: 164px !important;
    max-height: 164px !important;
  }
}

/* Source: release-589.css */
/* Release 589: make the 3D tool dock use the main editor's integrated iPhone bottom-sheet rhythm. */
@media (max-width: 760px) {
  body.preview3d-open {
    --preview3d-bottom-sheet-height: min(356px, 42dvh);
  }

  /* The canvas yields a deliberate sheet area; the dock itself remains fixed at the true screen edge. */
  body.preview3d-open .preview3d-surface {
    grid-template-rows: 92px minmax(0, 1fr) var(--preview3d-bottom-sheet-height) !important;
  }

  body.preview3d-open .preview3d-build-tools {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 56px !important;
    min-height: var(--preview3d-bottom-sheet-height) !important;
    max-height: var(--preview3d-bottom-sheet-height) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    border-top: 1px solid rgba(26, 35, 46, 0.12) !important;
    background: rgba(250, 251, 252, 0.99) !important;
    box-shadow: 0 -8px 24px rgba(23, 32, 42, 0.07) !important;
  }

  /* Same fixed icon-and-label dock proportions as the primary Layers, Style, and Library navigation. */
  body.preview3d-open .preview3d-bottom-tabs {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-top: 1px solid rgba(26, 35, 46, 0.1) !important;
    border-bottom: 0 !important;
    background: rgba(250, 251, 252, 0.99) !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button {
    display: grid !important;
    grid-template-rows: 22px 13px !important;
    place-content: center !important;
    place-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 6px 2px 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #656c75 !important;
    font: 400 9px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button img {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.9;
  }

  body.preview3d-open .preview3d-bottom-tabs button span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font: inherit !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button.is-active {
    background: rgba(22, 119, 220, 0.1) !important;
    color: #1677dc !important;
    box-shadow: inset 0 2px 0 #1677dc !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button.is-active img {
    filter: invert(43%) sepia(94%) saturate(1593%) hue-rotate(189deg) brightness(91%) contrast(88%) !important;
    opacity: 1;
  }

  body.preview3d-open .preview3d-dock-content {
    grid-row: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Category tools are compact, scroll within the sheet, and never push the navigation off-screen. */
  body.preview3d-open .preview3d-dock-panel {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 58px !important;
    align-content: start !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 4px 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    background: rgba(250, 251, 252, 0.99) !important;
  }

  body.preview3d-open .preview3d-dock-panel::-webkit-scrollbar {
    display: none;
  }

  body.preview3d-open .preview3d-dock-panel[hidden] {
    display: none !important;
  }

  body.preview3d-open .preview3d-dock-panel::before {
    position: sticky;
    top: 0;
    z-index: 1;
    grid-column: 1 / -1;
    display: flex;
    height: 34px;
    align-items: center;
    padding: 0 8px;
    border-bottom: 1px solid rgba(26, 35, 46, 0.08);
    background: rgba(250, 251, 252, 0.99);
    color: #252c34;
    font: 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-transform: capitalize;
    content: attr(data-3d-dock-panel);
  }

  body.preview3d-open .preview3d-dock-panel > button,
  body.preview3d-open .preview3d-build-summary {
    display: grid !important;
    grid-template-rows: 22px 13px !important;
    place-content: center !important;
    place-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 5px 3px !important;
    border: 0 !important;
    border-right: 1px solid rgba(26, 35, 46, 0.07) !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #303741 !important;
    font: 400 9px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-dock-panel > button img,
  body.preview3d-open .preview3d-build-summary img {
    width: 20px !important;
    height: 20px !important;
  }

  body.preview3d-open .preview3d-dock-panel > button span,
  body.preview3d-open .preview3d-build-summary span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font: inherit !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.preview3d-open .preview3d-build-summary {
    grid-column: span 2;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 6px !important;
    padding: 0 9px !important;
    text-align: left !important;
  }

  /* Inspectors float above the selected category so the active dock remains available. */
  body.preview3d-open .preview3d-catalog-panel,
  body.preview3d-open .preview3d-render-panel,
  body.preview3d-open .preview3d-transform-panel,
  body.preview3d-open .preview3d-export-panel,
  body.preview3d-open .preview3d-outliner-panel,
  body.preview3d-open .preview3d-axes-panel,
  body.preview3d-open .preview3d-camera-panel,
  body.preview3d-open .preview3d-section-panel {
    bottom: calc(var(--preview3d-bottom-sheet-height) + 8px) !important;
  }

  body.preview3d-open .preview3d-status {
    bottom: calc(var(--preview3d-bottom-sheet-height) + env(safe-area-inset-bottom) + 8px) !important;
  }
}

/* Source: release-590.css */
/* Release 590: use the main editor sheet anatomy for every 3D category. */
@media (max-width: 760px) {
  body.preview3d-open {
    --preview3d-bottom-sheet-height: min(420px, 48dvh);
  }

  body.preview3d-open .preview3d-build-tools {
    grid-template-rows: 14px 42px minmax(0, 1fr) 56px !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-sheet-handle {
    grid-row: 1;
    justify-self: center;
    align-self: center;
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: #b8bec6;
  }

  body.preview3d-open .preview3d-sheet-header {
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(44px, 1fr) minmax(0, 1fr) minmax(44px, 1fr);
    align-items: center;
    min-height: 42px;
    padding: 0 8px;
    border-bottom: 1px solid rgba(26, 35, 46, 0.1);
    background: rgba(250, 251, 252, 0.99);
  }

  body.preview3d-open .preview3d-sheet-context {
    overflow: hidden;
    color: #606873;
    font: 400 12px/16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.preview3d-open .preview3d-sheet-header h2 {
    margin: 0;
    overflow: hidden;
    color: #1f252d;
    font: 400 17px/22px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.preview3d-open #preview3dDockClose {
    justify-self: end;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  body.preview3d-open #preview3dDockClose img {
    width: 19px;
    height: 19px;
  }

  body.preview3d-open .preview3d-dock-content {
    grid-row: 3 !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-row: 4 !important;
  }

  body.preview3d-open .preview3d-dock-panel::before {
    height: 36px;
    padding: 0 9px;
    color: #5e6772;
    font: 400 11px/16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  /* The Library starts as two clear destinations, like the main Library's compact category chooser. */
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 36px minmax(0, 1fr) !important;
    grid-auto-rows: unset !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > button {
    grid-row: 2;
    min-height: 0 !important;
    height: auto !important;
    background: rgba(246, 248, 250, 0.9) !important;
  }

  body.preview3d-open.preview3d-dock-collapsed {
    --preview3d-bottom-sheet-height: 56px;
  }

  body.preview3d-open.preview3d-dock-collapsed .preview3d-build-tools {
    grid-template-rows: 56px !important;
    border-radius: 0 !important;
  }

  body.preview3d-open.preview3d-dock-collapsed .preview3d-sheet-handle,
  body.preview3d-open.preview3d-dock-collapsed .preview3d-sheet-header,
  body.preview3d-open.preview3d-dock-collapsed .preview3d-dock-content {
    display: none !important;
  }

  body.preview3d-open.preview3d-dock-collapsed .preview3d-bottom-tabs {
    grid-row: 1 !important;
  }
}

/* Source: release-591.css */
/* Release 591: textured materials and object-level texture mapping. */
.preview3d-material-new {
  grid-template-columns: minmax(0, 1fr) 34px 34px 34px;
}

.preview3d-material-new button.is-ready {
  border-color: #126dd1;
  background: rgba(24, 119, 229, 0.08);
}

.preview3d-material-swatch {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgba(26, 35, 46, 0.16);
  border-radius: 4px;
  background: var(--material-swatch, #d7dee8);
}

.preview3d-catalog-grid > button .preview3d-material-swatch { border-radius: 4px; }
.preview3d-material-swatch.has-texture::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.76;
}
.preview3d-material-swatch[data-texture="wood"]::after {
  background: repeating-linear-gradient(8deg, rgba(68, 42, 21, 0.48) 0 1px, transparent 1px 6px, rgba(255, 232, 177, 0.25) 6px 7px);
}
.preview3d-material-swatch[data-texture="brick"]::after {
  background: linear-gradient(rgba(70, 39, 30, 0.52) 1px, transparent 1px) 0 0 / 100% 8px, linear-gradient(90deg, rgba(70, 39, 30, 0.44) 1px, transparent 1px) 0 0 / 12px 16px;
}
.preview3d-material-swatch[data-texture="tile"]::after {
  background: linear-gradient(rgba(38, 62, 72, 0.42) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgba(38, 62, 72, 0.42) 1px, transparent 1px) 0 0 / 8px 8px;
}
.preview3d-material-swatch[data-texture="concrete"]::after,
.preview3d-material-swatch[data-texture="marble"]::after {
  background: repeating-linear-gradient(132deg, transparent 0 5px, rgba(36, 48, 55, 0.28) 6px 7px, transparent 8px 13px);
}
.preview3d-material-swatch[data-texture="fabric"]::after {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(37, 44, 54, 0.2) 0 1px, transparent 1px 4px);
}
.preview3d-material-swatch[data-texture="grass"]::after {
  background: repeating-linear-gradient(112deg, rgba(21, 78, 50, 0.6) 0 1px, transparent 1px 4px, rgba(162, 197, 102, 0.24) 4px 5px);
}
.preview3d-material-swatch[data-texture="water"]::after {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0 1px, transparent 1px 5px);
}
.preview3d-material-swatch[data-texture="metal"]::after {
  background: linear-gradient(120deg, transparent 26%, rgba(255, 255, 255, 0.72) 45%, transparent 60%);
}
.preview3d-material-swatch[data-texture="shingles"]::after {
  background: repeating-linear-gradient(0deg, rgba(46, 48, 55, 0.54) 0 1px, transparent 1px 5px);
}
.preview3d-material-swatch[data-texture="image"] { background: var(--material-image) center / cover no-repeat, var(--material-swatch, #d7dee8); }
.preview3d-material-swatch[data-texture="image"]::after { display: none; }

.preview3d-texture-panel {
  grid-template-rows: 42px 76px minmax(0, 1fr);
}
.preview3d-texture-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.08);
}
.preview3d-texture-summary .preview3d-material-swatch { width: 42px; height: 42px; }
.preview3d-texture-summary strong,
.preview3d-texture-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview3d-texture-summary strong { color: #2b323a; font: 400 12px/16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.preview3d-texture-summary small { margin-top: 2px; color: #717b86; font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.preview3d-texture-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  padding: 10px;
  overflow: auto;
}
.preview3d-texture-controls label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(26, 35, 46, 0.1);
  border-radius: 4px;
  color: #48525d;
  font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.preview3d-texture-controls label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview3d-texture-controls label output { color: #126dd1; font-variant-numeric: tabular-nums; }
.preview3d-texture-controls label input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: #126dd1; }
.preview3d-texture-controls label input[type="color"] { width: 26px; height: 22px; padding: 1px; border: 1px solid rgba(26, 35, 46, 0.14); border-radius: 3px; background: #fff; }
.preview3d-texture-controls > button {
  grid-column: 1 / -1;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(26, 35, 46, 0.12);
  border-radius: 4px;
  background: #f6f8fa;
  color: #39424c;
  font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 760px) {
  body.preview3d-open #preview3dMaterialLibrary { grid-template-rows: 40px 32px 34px 34px minmax(0, 1fr); }
  body.preview3d-open .preview3d-material-new { grid-template-columns: minmax(0, 1fr) 30px 30px 30px; gap: 4px; padding: 3px 7px; }
  body.preview3d-open .preview3d-material-new input[type="text"],
  body.preview3d-open .preview3d-material-new input[type="color"],
  body.preview3d-open .preview3d-material-new button { height: 25px; }
  body.preview3d-open .preview3d-texture-panel { grid-template-rows: 40px 70px minmax(0, 1fr); }
  body.preview3d-open .preview3d-texture-controls { gap: 5px; padding: 7px; }
  body.preview3d-open .preview3d-texture-controls label { padding: 5px; }
}

html[data-theme="dark"] .preview3d-texture-summary { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .preview3d-texture-summary strong,
html[data-theme="dark"] .preview3d-texture-controls label,
html[data-theme="dark"] .preview3d-texture-controls > button { color: #e5ebf1; }
html[data-theme="dark"] .preview3d-texture-controls label,
html[data-theme="dark"] .preview3d-texture-controls > button { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .preview3d-texture-controls label input[type="color"] { border-color: rgba(255, 255, 255, 0.16); background: transparent; }

/* Source: release-592.css */
/* Release 592: readable component previews and a compact 3D layer stack. */
.preview3d-component-preview {
  position: relative;
  display: block;
  width: 42px;
  height: 31px;
  overflow: hidden;
  color: #4c5c6b;
}

.preview3d-component-preview i {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 1.25px solid currentColor;
  border-radius: 2px;
}

.preview3d-component-preview-main { inset: 8px 5px 3px; background: rgba(115, 138, 159, 0.18); }
.preview3d-component-preview-detail { display: none; }

.preview3d-component-preview.is-door { color: #6f5133; }
.preview3d-component-preview.is-door .preview3d-component-preview-main { inset: 2px 10px 2px; background: rgba(150, 103, 60, 0.18); }
.preview3d-component-preview.is-door .is-a { display: block; width: 3px; height: 3px; right: 12px; top: 16px; border-radius: 50%; background: currentColor; }
.preview3d-component-preview.is-door .is-b { display: block; width: 1px; height: 25px; left: 21px; top: 3px; border-width: 0 0 0 1px; }

.preview3d-component-preview.is-window { color: #28768d; }
.preview3d-component-preview.is-window .preview3d-component-preview-main { inset: 5px 4px; background: rgba(96, 196, 232, 0.16); }
.preview3d-component-preview.is-window .is-a,
.preview3d-component-preview.is-window .is-b { display: block; background: currentColor; border: 0; }
.preview3d-component-preview.is-window .is-a { width: 1px; height: 20px; left: 20px; top: 6px; }
.preview3d-component-preview.is-window .is-b { width: 34px; height: 1px; left: 4px; top: 15px; }

.preview3d-component-preview.is-chair { color: #5c6570; }
.preview3d-component-preview.is-chair .preview3d-component-preview-main { inset: 13px 10px 10px; }
.preview3d-component-preview.is-chair .is-a { display: block; width: 21px; height: 11px; left: 10px; top: 2px; }
.preview3d-component-preview.is-chair .is-b,
.preview3d-component-preview.is-chair .is-c { display: block; width: 2px; height: 10px; top: 21px; border-width: 0 1px 0 0; }
.preview3d-component-preview.is-chair .is-b { left: 12px; }
.preview3d-component-preview.is-chair .is-c { right: 12px; }

.preview3d-component-preview.is-table { color: #75614e; }
.preview3d-component-preview.is-table .preview3d-component-preview-main { inset: 11px 3px 16px; border-radius: 3px; background: rgba(146, 111, 73, 0.18); }
.preview3d-component-preview.is-table .is-a,
.preview3d-component-preview.is-table .is-b { display: block; width: 2px; height: 14px; top: 15px; border-width: 0 1px 0 0; }
.preview3d-component-preview.is-table .is-a { left: 8px; }
.preview3d-component-preview.is-table .is-b { right: 8px; }

.preview3d-component-preview.is-sofa { color: #7a657a; }
.preview3d-component-preview.is-sofa .preview3d-component-preview-main { inset: 13px 4px 5px; background: rgba(166, 132, 165, 0.2); }
.preview3d-component-preview.is-sofa .is-a { display: block; inset: 5px 4px 15px; background: rgba(166, 132, 165, 0.12); }
.preview3d-component-preview.is-sofa .is-b,
.preview3d-component-preview.is-sofa .is-c { display: block; width: 5px; height: 18px; top: 8px; background: rgba(166, 132, 165, 0.12); }
.preview3d-component-preview.is-sofa .is-b { left: 3px; }
.preview3d-component-preview.is-sofa .is-c { right: 3px; }

.preview3d-component-preview.is-bed { color: #587387; }
.preview3d-component-preview.is-bed .preview3d-component-preview-main { inset: 8px 3px 4px; background: rgba(124, 173, 195, 0.18); }
.preview3d-component-preview.is-bed .is-a,
.preview3d-component-preview.is-bed .is-b { display: block; width: 12px; height: 6px; top: 10px; background: rgba(255, 255, 255, 0.82); }
.preview3d-component-preview.is-bed .is-a { left: 7px; }
.preview3d-component-preview.is-bed .is-b { left: 22px; }

.preview3d-component-preview.is-casework { color: #765d44; }
.preview3d-component-preview.is-casework .preview3d-component-preview-main { inset: 4px 6px 3px; background: rgba(155, 119, 82, 0.18); }
.preview3d-component-preview.is-casework .is-a { display: block; width: 1px; height: 21px; left: 20px; top: 6px; border-width: 0 0 0 1px; }
.preview3d-component-preview.is-casework .is-b,
.preview3d-component-preview.is-casework .is-c { display: block; width: 4px; height: 1px; top: 17px; background: currentColor; border: 0; }
.preview3d-component-preview.is-casework .is-b { left: 14px; }
.preview3d-component-preview.is-casework .is-c { right: 14px; }

.preview3d-component-preview.is-plumbing { color: #4f7b8a; }
.preview3d-component-preview.is-plumbing .preview3d-component-preview-main { inset: 9px 8px 3px; border-radius: 8px 8px 4px 4px; background: rgba(107, 192, 223, 0.15); }
.preview3d-component-preview.is-plumbing .is-a { display: block; width: 18px; height: 6px; left: 12px; top: 3px; border-radius: 5px 5px 0 0; border-bottom: 0; }
.preview3d-component-preview.is-plumbing .is-b { display: block; width: 4px; height: 7px; left: 19px; top: 1px; border-width: 1px 1px 0; }

.preview3d-component-preview.is-appliance { color: #5b6875; }
.preview3d-component-preview.is-appliance .preview3d-component-preview-main { inset: 3px 9px 2px; background: rgba(104, 123, 140, 0.15); }
.preview3d-component-preview.is-appliance .is-a { display: block; width: 16px; height: 1px; left: 13px; top: 10px; background: currentColor; border: 0; }
.preview3d-component-preview.is-appliance .is-b { display: block; width: 10px; height: 10px; left: 16px; top: 15px; border-radius: 50%; }

.preview3d-component-preview.is-light { color: #b68124; }
.preview3d-component-preview.is-light .preview3d-component-preview-main { width: 14px; height: 14px; left: 14px; top: 12px; border-radius: 50%; background: rgba(255, 207, 93, 0.25); }
.preview3d-component-preview.is-light .is-a { display: block; width: 1px; height: 9px; left: 21px; top: 1px; background: currentColor; border: 0; }
.preview3d-component-preview.is-light .is-b,
.preview3d-component-preview.is-light .is-c { display: block; width: 5px; height: 5px; border-width: 1px 0 0 1px; transform: rotate(45deg); }
.preview3d-component-preview.is-light .is-b { left: 7px; top: 14px; }
.preview3d-component-preview.is-light .is-c { right: 7px; top: 14px; }

.preview3d-component-preview.is-plant { color: #4d7c53; }
.preview3d-component-preview.is-plant .preview3d-component-preview-main { width: 19px; height: 18px; left: 11px; top: 3px; border-radius: 50%; background: rgba(105, 170, 94, 0.25); }
.preview3d-component-preview.is-plant .is-a { display: block; width: 4px; height: 12px; left: 19px; top: 17px; background: #9b704a; border-color: #805837; }
.preview3d-component-preview.is-plant .is-b { display: block; width: 28px; height: 6px; left: 7px; top: 24px; background: rgba(119, 95, 75, 0.12); }

.preview3d-component-preview.is-site { color: #617180; }
.preview3d-component-preview.is-site .preview3d-component-preview-main { inset: 15px 3px 4px; background: rgba(104, 127, 145, 0.15); }
.preview3d-component-preview.is-site .is-a,
.preview3d-component-preview.is-site .is-b { display: block; width: 1px; height: 20px; top: 4px; background: currentColor; border: 0; }
.preview3d-component-preview.is-site .is-a { left: 12px; }
.preview3d-component-preview.is-site .is-b { right: 12px; }

.preview3d-component-preview.is-linked { color: #176f94; }
.preview3d-component-preview.is-linked .preview3d-component-preview-main { inset: 6px 8px; background: rgba(48, 151, 194, 0.12); }
.preview3d-component-preview.is-linked .is-a { display: block; inset: 11px 3px 2px 13px; background: rgba(48, 151, 194, 0.1); }

.preview3d-outliner-panel {
  grid-template-rows: auto auto minmax(88px, 1fr) auto;
}

.preview3d-outliner-header-actions {
  display: flex;
  align-items: center;
  gap: 1px;
}

.preview3d-outliner-header-actions #group3dSelectionButton.is-active {
  background: rgba(24, 119, 229, 0.1);
  color: #126dd1;
}

.preview3d-outliner-panel > header strong,
.preview3d-outliner-heading strong {
  font-weight: 500;
}

.preview3d-object-list li {
  grid-template-columns: 30px minmax(0, 1fr);
}

.preview3d-object-list li.is-nested {
  padding-left: 24px;
}

.preview3d-object-list li.preview3d-group-row {
  min-height: 34px;
  grid-template-columns: 30px minmax(0, 1fr);
  padding: 3px 8px;
  background: rgba(23, 33, 43, 0.035);
}

.preview3d-group-row > button:nth-child(2) {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.preview3d-group-row > button:nth-child(2) > img { width: 16px; height: 16px; }
.preview3d-group-row span { min-width: 0; display: grid; gap: 1px; }
.preview3d-group-row strong { overflow: hidden; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.preview3d-group-row small { color: #77818c; font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

.preview3d-object-select strong { font-weight: 500; }
.preview3d-collections { border-top: 1px solid rgba(23, 33, 43, 0.1); }
.preview3d-collections summary { min-height: 32px; display: flex; align-items: center; padding: 0 11px; cursor: pointer; color: #626d78; font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; list-style: none; }
.preview3d-collections summary::-webkit-details-marker { display: none; }
.preview3d-collections summary::after { margin-left: auto; content: "+"; color: #68737e; font-size: 16px; }
.preview3d-collections[open] summary::after { content: "-"; }
.preview3d-collections .preview3d-tag-list { max-height: 122px; }

html[data-theme="dark"] .preview3d-object-list li.preview3d-group-row { background: rgba(255, 255, 255, 0.055); }
html[data-theme="dark"] .preview3d-collections { border-color: rgba(255, 255, 255, 0.1); }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-object-list li.preview3d-group-row { background: rgba(255, 255, 255, 0.055); }
  html[data-theme="auto"] .preview3d-collections { border-color: rgba(255, 255, 255, 0.1); }
}

@media (max-width: 520px) {
  .preview3d-component-preview { transform: scale(0.92); }
  .preview3d-outliner-panel { grid-template-rows: auto auto minmax(86px, 1fr) auto; }
  .preview3d-object-list li { min-height: 38px; }
}

/* Source: release-593.css */
/* Release 593: compact project controls and distinct build-system component previews. */
.preview3d-project-panel {
  position: absolute;
  z-index: 24;
  top: 56px;
  right: 8px;
  left: 40px;
  max-height: min(412px, calc(100% - 154px));
  overflow: auto;
  border: 1px solid rgba(44, 55, 68, 0.16);
  border-radius: 6px;
  background: rgba(250, 251, 253, 0.98);
  box-shadow: 0 10px 28px rgba(23, 33, 43, 0.16);
  color: #17212b;
}

.preview3d-project-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(44, 55, 68, 0.12);
}

.preview3d-project-panel > header strong,
.preview3d-project-panel strong { font-weight: 500; }

.preview3d-project-panel > header button,
.preview3d-project-list button,
.preview3d-project-add button {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
}

.preview3d-project-panel button:hover { background: rgba(27, 112, 210, 0.09); }
.preview3d-project-panel img { width: 17px; height: 17px; }

.preview3d-project-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid rgba(44, 55, 68, 0.12);
}

.preview3d-project-tabs button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #5a6875;
  font: inherit;
  font-size: 11px;
  font-weight: 400;
}

.preview3d-project-tabs button img { width: 15px; height: 15px; }
.preview3d-project-tabs button.is-active { color: #176fd2; border-bottom-color: #176fd2; }
.preview3d-project-section { padding: 9px 10px 12px; }
.preview3d-project-section[hidden] { display: none; }

.preview3d-project-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px 28px;
  gap: 6px;
  align-items: center;
}

.preview3d-project-section[data-3d-project-section="grids"] .preview3d-project-add { grid-template-columns: minmax(0, 1fr) 78px 58px 28px; }

.preview3d-project-add input,
.preview3d-project-add select {
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(44, 55, 68, 0.18);
  border-radius: 4px;
  background: #fff;
  color: #26313c;
  font: inherit;
  font-size: 11px;
  font-weight: 400;
}

.preview3d-project-add button { border: 1px solid rgba(44, 55, 68, 0.14); background: #fff; }

.preview3d-project-list {
  display: grid;
  gap: 1px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.preview3d-project-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  min-height: 39px;
  align-items: center;
  border-bottom: 1px solid rgba(44, 55, 68, 0.08);
}

.preview3d-project-list span { min-width: 0; }
.preview3d-project-list strong,
.preview3d-project-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview3d-project-list strong { font-size: 12px; }
.preview3d-project-list small { margin-top: 2px; color: #768390; font-size: 10px; font-weight: 400; }
.preview3d-project-list .is-empty { display: block; padding: 16px 4px; color: #768390; font-size: 11px; text-align: center; }

.preview3d-quantity-heading { padding: 2px 0 8px; border-bottom: 1px solid rgba(44, 55, 68, 0.1); }
.preview3d-quantity-heading strong,
.preview3d-quantity-heading small { display: block; }
.preview3d-quantity-heading strong { font-size: 12px; }
.preview3d-quantity-heading small { margin-top: 2px; color: #768390; font-size: 10px; font-weight: 400; }

.preview3d-quantity-summary > div:not(.preview3d-quantity-heading) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(44, 55, 68, 0.08);
  font-size: 11px;
}
.preview3d-quantity-summary > div:not(.preview3d-quantity-heading) strong { grid-column: 2; grid-row: 1; }
.preview3d-quantity-summary > div:not(.preview3d-quantity-heading) small { grid-column: 1 / -1; color: #768390; font-size: 10px; font-weight: 400; }
.preview3d-quantity-summary > p { margin: 16px 0; color: #768390; font-size: 11px; text-align: center; }

.preview3d-component-preview.is-structure { color: #52697a; }
.preview3d-component-preview.is-structure .preview3d-component-preview-main { inset: 4px 15px; background: rgba(93, 123, 145, 0.15); }
.preview3d-component-preview.is-structure .is-a { display: block; width: 26px; height: 3px; left: 8px; top: 4px; background: currentColor; border: 0; }
.preview3d-component-preview.is-structure .is-b { display: block; width: 26px; height: 3px; left: 8px; bottom: 4px; background: currentColor; border: 0; }

.preview3d-component-preview.is-build { color: #60777f; }
.preview3d-component-preview.is-build .preview3d-component-preview-main { inset: 15px 3px 3px; background: rgba(100, 128, 138, 0.14); }
.preview3d-component-preview.is-build .is-a { display: block; width: 28px; height: 1px; left: 7px; top: 12px; background: currentColor; border: 0; transform: rotate(-26deg); }
.preview3d-component-preview.is-build .is-b { display: block; width: 3px; height: 19px; left: 6px; top: 5px; border-width: 0 1px 0 0; }
.preview3d-component-preview.is-build .is-c { display: block; width: 3px; height: 19px; right: 6px; top: 5px; border-width: 0 1px 0 0; }

@media (max-width: 520px) {
  .preview3d-project-panel { top: 54px; left: 40px; right: 6px; max-height: min(396px, calc(100% - 146px)); }
  .preview3d-project-tabs button span { font-size: 10px; }
  .preview3d-project-section { padding: 8px; }
  .preview3d-project-section[data-3d-project-section="grids"] .preview3d-project-add { grid-template-columns: minmax(0, 1fr) 68px 52px 28px; }
}

/* Source: release-594.css */
/* Release 594: compact Photo and Vector to 3D conversion controls. */
.three-d-conversion-adjustments {
  display: grid;
  gap: 7px;
}

.three-d-conversion-adjustments > strong {
  font-size: 12px;
  font-weight: 400;
}

.three-d-conversion-adjustments output {
  min-width: 38px;
  color: #64717d;
  font: 400 10px/1.2 inherit;
  text-align: right;
}

.three-d-conversion-adjustments .flyout-mini-status {
  margin: 0;
}

/* Source: release-595.css */
/* Release 595: preserve readable, compact transform feedback for editable 3D sources. */
.preview3d-transform-panel > p {
  min-width: 0;
  font-weight: 400;
}

.preview3d-transform-actions:has(#edit3dTransformSourceButton:not([hidden])) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Source: release-596.css */
/* Release 596: the source-to-scene refresh state stays light and readable. */
.three-d-conversion-adjustments .flyout-mini-status {
  font-weight: 400;
}

/* Source: release-597.css */
/* Release 597: the 3D inspector follows the primary four-destination iPhone dock. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-bottom-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Selected category content scrolls in place; the four destination tabs remain reachable. */
  body.preview3d-open .preview3d-dock-content {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-panel {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body.preview3d-open .preview3d-sheet-header h2,
  body.preview3d-open .preview3d-sheet-context,
  body.preview3d-open .preview3d-bottom-tabs button,
  body.preview3d-open .preview3d-dock-panel > button,
  body.preview3d-open .preview3d-build-summary {
    font-weight: 400 !important;
  }
}

/* Build formats belong to Export, rather than being a second scene destination. */
.preview3d-build-export-formats {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(23, 33, 43, 0.1);
}

/* Source: release-598.css */
/* Release 598: rail and dock responsibilities stay distinct in the 3D workspace. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-rail > button,
  body.preview3d-open .preview3d-rail > label,
  body.preview3d-open .preview3d-bottom-tabs button,
  body.preview3d-open .preview3d-dock-panel > button {
    font-weight: 400 !important;
  }

  /* The always-available rails stay compact even when long Model/Create lists are open. */
  body.preview3d-open .preview3d-rail > button span,
  body.preview3d-open .preview3d-rail > label span {
    font-weight: 400 !important;
  }
}

/* Source: release-599.css */
/* Release 599: 3D Style keeps texture adjustment compact and above its fixed dock. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-texture-panel {
    bottom: calc(var(--preview3d-bottom-sheet-height) + 8px) !important;
    max-height: min(392px, calc(100dvh - var(--preview3d-bottom-sheet-height) - 112px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.preview3d-open .preview3d-texture-panel,
  body.preview3d-open .preview3d-texture-panel label,
  body.preview3d-open .preview3d-texture-panel output {
    font-weight: 400 !important;
  }
}

/* Source: release-600.css */
/* Release 600: direct material-to-texture context without adding another panel. */
.preview3d-material-title {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 1px;
}

.preview3d-material-title strong {
  overflow: hidden;
  color: #2b323a;
  font: 400 12px/15px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-material-active {
  display: block;
  overflow: hidden;
  color: #717b86;
  font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#preview3dTextureSettingsButton.is-ready {
  box-shadow: inset 0 -2px #126dd1;
}

@media (max-width: 760px) {
  body.preview3d-open #preview3dMaterialLibrary > header {
    grid-template-columns: minmax(0, 1fr) repeat(3, 30px) !important;
    column-gap: 3px;
  }

  body.preview3d-open .preview3d-material-title strong { font: 400 11px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  body.preview3d-open .preview3d-material-active { font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
}

html[data-theme="dark"] .preview3d-material-title strong { color: #e5ebf1; }
html[data-theme="dark"] .preview3d-material-active { color: #a8b1bc; }

/* Source: release-601.css */
/* Release 601: the Model sheet keeps its selected-object state visible at a glance. */
.preview3d-build-summary > span {
  min-width: 0;
}

.preview3d-build-summary strong,
.preview3d-build-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-build-summary strong {
  color: #3c4752;
  font: 400 10px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-build-summary small {
  margin-top: 1px;
  color: #75818d;
  font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-build-summary.has-selection {
  background: rgba(24, 119, 229, 0.06) !important;
}

.preview3d-build-summary.is-locked strong,
.preview3d-build-summary.is-hidden strong { color: #7b5b3b; }

@media (max-width: 760px) {
  body.preview3d-open .preview3d-build-summary {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-content: center;
  }

  body.preview3d-open .preview3d-build-summary strong { font: 400 10px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  body.preview3d-open .preview3d-build-summary small { font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
}

html[data-theme="dark"] .preview3d-build-summary strong { color: #e1e8ef; }
html[data-theme="dark"] .preview3d-build-summary small { color: #a4afba; }

/* Source: release-602.css */
/* Release 602: selected-object summary opens the matching Transform controls. */
.preview3d-build-summary:enabled { cursor: pointer; }
.preview3d-build-summary:enabled:active,
.preview3d-build-summary:enabled:focus-visible { background: rgba(24, 119, 229, 0.12) !important; outline: 0; }
.preview3d-build-summary:disabled { opacity: 1; }

/* Source: release-603.css */
/* Release 603: the 3D dock uses the same fixed bottom-sheet rhythm as the primary iPhone editor. */
@media (max-width: 760px) {
  body.preview3d-open {
    --preview3d-bottom-sheet-height: clamp(232px, 34dvh, 312px);
  }

  /* Keep the complete sheet inside the surface grid so its tabs never fall below the viewport. */
  body.preview3d-open .preview3d-surface {
    grid-template-rows: 92px minmax(0, 1fr) var(--preview3d-bottom-sheet-height) !important;
  }

  body.preview3d-open .preview3d-build-tools {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    grid-template-rows: 12px 38px minmax(0, 1fr) 56px !important;
    min-height: var(--preview3d-bottom-sheet-height) !important;
    height: var(--preview3d-bottom-sheet-height) !important;
    max-height: var(--preview3d-bottom-sheet-height) !important;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
    overflow: hidden !important;
    border-radius: 14px 14px 0 0 !important;
    border-top: 1px solid rgba(26, 35, 46, 0.12) !important;
    background: rgba(250, 251, 252, 0.99) !important;
    box-shadow: 0 -8px 24px rgba(23, 32, 42, 0.07) !important;
  }

  body.preview3d-open .preview3d-sheet-handle {
    grid-row: 1 !important;
    display: block !important;
    width: 32px !important;
    height: 4px !important;
    margin: auto !important;
    border-radius: 2px !important;
    background: #b8bec6 !important;
  }

  body.preview3d-open .preview3d-sheet-header {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(42px, 1fr) minmax(0, 1fr) minmax(42px, 1fr) !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.1) !important;
    background: transparent !important;
  }

  body.preview3d-open .preview3d-sheet-context { font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  body.preview3d-open .preview3d-sheet-header h2 { font: 400 15px/20px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  body.preview3d-open #preview3dDockClose { width: 30px !important; height: 30px !important; }

  body.preview3d-open .preview3d-dock-content {
    grid-row: 3 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-panel {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 48px !important;
    align-content: start !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 4px 6px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    background: transparent !important;
  }

  body.preview3d-open .preview3d-dock-panel::-webkit-scrollbar { display: none; }
  body.preview3d-open .preview3d-dock-panel[hidden] { display: none !important; }

  body.preview3d-open .preview3d-dock-panel::before {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    grid-column: 1 / -1 !important;
    height: 26px !important;
    padding: 0 8px !important;
    background: rgba(250, 251, 252, 0.99) !important;
    color: #626c77 !important;
    font: 400 10px/26px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-dock-panel > button,
  body.preview3d-open .preview3d-build-summary {
    display: grid !important;
    grid-template-rows: 18px 11px !important;
    place-content: center !important;
    place-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-right: 1px solid rgba(26, 35, 46, 0.07) !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #303741 !important;
    font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-dock-panel > button img,
  body.preview3d-open .preview3d-build-summary img { width: 17px !important; height: 17px !important; }

  body.preview3d-open .preview3d-build-summary {
    grid-column: span 2;
    grid-template-columns: 17px minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 0 8px !important;
    text-align: left !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-top: 1px solid rgba(26, 35, 46, 0.1) !important;
    border-bottom: 0 !important;
    background: rgba(250, 251, 252, 0.99) !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button {
    display: grid !important;
    grid-template-rows: 20px 12px !important;
    place-content: center !important;
    place-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 6px 2px 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #656c75 !important;
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button img { width: 19px !important; height: 19px !important; }
  body.preview3d-open .preview3d-bottom-tabs button.is-active { background: rgba(22, 119, 220, 0.1) !important; color: #1677dc !important; box-shadow: inset 0 2px 0 #1677dc !important; }

  body.preview3d-open.preview3d-dock-collapsed { --preview3d-bottom-sheet-height: 56px; }
  body.preview3d-open.preview3d-dock-collapsed .preview3d-build-tools { grid-template-rows: 56px !important; border-radius: 0 !important; }
  body.preview3d-open.preview3d-dock-collapsed .preview3d-sheet-handle,
  body.preview3d-open.preview3d-dock-collapsed .preview3d-sheet-header,
  body.preview3d-open.preview3d-dock-collapsed .preview3d-dock-content { display: none !important; }
  body.preview3d-open.preview3d-dock-collapsed .preview3d-bottom-tabs { grid-row: 1 !important; }

  /* Every 3D inspector opens above the retained sheet and can scroll within the available canvas area. */
  body.preview3d-open .preview3d-catalog-panel,
  body.preview3d-open .preview3d-render-panel,
  body.preview3d-open .preview3d-transform-panel,
  body.preview3d-open .preview3d-export-panel,
  body.preview3d-open .preview3d-outliner-panel,
  body.preview3d-open .preview3d-axes-panel,
  body.preview3d-open .preview3d-camera-panel,
  body.preview3d-open .preview3d-section-panel,
  body.preview3d-open .preview3d-project-panel,
  body.preview3d-open .preview3d-texture-panel {
    top: 96px !important;
    right: 47px !important;
    bottom: calc(var(--preview3d-bottom-sheet-height) + 8px) !important;
    left: 47px !important;
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.preview3d-open .preview3d-status {
    bottom: calc(var(--preview3d-bottom-sheet-height) + env(safe-area-inset-bottom) + 8px) !important;
  }
}

/* Source: release-604.css */
/* Release 604: make the 3D Model destination a real scene panel, not a sparse tool grid. */
@media (max-width: 760px) {
  body.preview3d-open {
    --preview3d-bottom-sheet-height: clamp(304px, 38dvh, 352px);
  }

  /* Match the primary editor: a contained sheet above one stable, full-width destination strip. */
  body.preview3d-open .preview3d-surface {
    grid-template-rows: 92px minmax(0, 1fr) var(--preview3d-bottom-sheet-height) !important;
  }

  body.preview3d-open .preview3d-build-tools {
    grid-template-rows: 12px 38px minmax(0, 1fr) 56px !important;
    min-height: var(--preview3d-bottom-sheet-height) !important;
    height: var(--preview3d-bottom-sheet-height) !important;
    max-height: var(--preview3d-bottom-sheet-height) !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-row: 4 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-top: 1px solid rgba(26, 35, 46, 0.1) !important;
    background: rgba(250, 251, 252, 0.99) !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button {
    grid-template-rows: 20px 12px !important;
    min-height: 56px !important;
    height: 56px !important;
    gap: 2px !important;
    padding: 6px 2px 4px !important;
    color: #656c75 !important;
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button img {
    width: 19px !important;
    height: 19px !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button.is-active {
    background: rgba(22, 119, 220, 0.1) !important;
    color: #1677dc !important;
    box-shadow: inset 0 2px 0 #1677dc !important;
  }

  /* Model uses a layer stack with a short action strip, mirroring the main Layers sheet. */
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(250, 251, 252, 0.99) !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"]::before {
    display: none !important;
    content: none !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-build-summary {
    display: grid !important;
    grid-column: auto !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    flex: 0 0 48px !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    gap: 8px !important;
    padding: 0 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.09) !important;
    color: #303741 !important;
    text-align: left !important;
  }

  body.preview3d-open .preview3d-model-tool-strip,
  body.preview3d-open .preview3d-model-more {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    flex: 0 0 48px !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.09) !important;
  }

  body.preview3d-open .preview3d-model-more {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-model-more[hidden] { display: none !important; }

  body.preview3d-open .preview3d-model-tool-strip button,
  body.preview3d-open .preview3d-model-more button {
    display: grid !important;
    grid-template-rows: 18px 11px !important;
    place-content: center !important;
    place-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 4px 2px !important;
    border: 0 !important;
    border-right: 1px solid rgba(26, 35, 46, 0.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #303741 !important;
    font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-model-tool-strip button:last-child,
  body.preview3d-open .preview3d-model-more button:last-child { border-right: 0 !important; }

  body.preview3d-open .preview3d-model-tool-strip button img,
  body.preview3d-open .preview3d-model-more button img {
    width: 17px !important;
    height: 17px !important;
  }

  body.preview3d-open .preview3d-model-tool-strip button.is-active,
  body.preview3d-open .preview3d-model-tool-strip button:active,
  body.preview3d-open .preview3d-model-more button:active {
    background: rgba(22, 119, 220, 0.09) !important;
    color: #1677dc !important;
  }

  body.preview3d-open .preview3d-model-layer-section {
    display: grid !important;
    grid-template-rows: 28px minmax(0, 1fr) !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-model-layer-section > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important;
    color: #626c77 !important;
    font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-model-layer-section > header output {
    color: #7a838e !important;
    font: inherit !important;
  }

  body.preview3d-open .preview3d-dock-layer-list {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    list-style: none !important;
    scrollbar-width: none !important;
  }

  body.preview3d-open .preview3d-dock-layer-list::-webkit-scrollbar { display: none; }

  body.preview3d-open .preview3d-dock-layer-list > li {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 44px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.07) !important;
  }

  body.preview3d-open .preview3d-dock-layer-list > li.is-selected {
    background: rgba(22, 119, 220, 0.1) !important;
    box-shadow: inset 2px 0 0 #1677dc !important;
  }

  body.preview3d-open .preview3d-dock-layer-list button {
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #303741 !important;
  }

  body.preview3d-open .preview3d-dock-layer-list [data-dock-model-visible] {
    display: grid !important;
    place-items: center !important;
    border-right: 1px solid rgba(26, 35, 46, 0.07) !important;
  }

  body.preview3d-open .preview3d-dock-layer-list [data-dock-model-visible] img {
    width: 17px !important;
    height: 17px !important;
  }

  body.preview3d-open .preview3d-dock-layer-list [data-dock-model-select] {
    display: grid !important;
    grid-template-columns: 19px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
    text-align: left !important;
  }

  body.preview3d-open .preview3d-dock-layer-list [data-dock-model-select] > img {
    width: 18px !important;
    height: 18px !important;
  }

  body.preview3d-open .preview3d-dock-layer-list [data-dock-model-select] span {
    display: grid !important;
    min-width: 0 !important;
    gap: 1px !important;
  }

  body.preview3d-open .preview3d-dock-layer-list [data-dock-model-select] strong,
  body.preview3d-open .preview3d-dock-layer-list [data-dock-model-select] small {
    overflow: hidden !important;
    font: 400 10px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.preview3d-open .preview3d-dock-layer-list [data-dock-model-select] small { color: #727b86 !important; }
  body.preview3d-open .preview3d-dock-layer-list > li.is-empty { display: grid !important; grid-column: 1 / -1 !important; place-items: center !important; color: #727b86 !important; font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }

  /* Every inspector stays between the rails and above the sheet; it can never cover a dock edge. */
  body.preview3d-open .preview3d-catalog-panel,
  body.preview3d-open .preview3d-render-panel,
  body.preview3d-open .preview3d-transform-panel,
  body.preview3d-open .preview3d-export-panel,
  body.preview3d-open .preview3d-outliner-panel,
  body.preview3d-open .preview3d-axes-panel,
  body.preview3d-open .preview3d-camera-panel,
  body.preview3d-open .preview3d-section-panel,
  body.preview3d-open .preview3d-project-panel,
  body.preview3d-open .preview3d-texture-panel {
    top: 96px !important;
    right: 47px !important;
    bottom: calc(var(--preview3d-bottom-sheet-height) + 8px) !important;
    left: 47px !important;
    max-height: none !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Source: release-605.css */
/* Release 605: separate the four 3D dock destinations into purpose-built panels. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="create"],
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"],
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] {
    display: block !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    background: rgba(250, 251, 252, 0.99) !important;
    scrollbar-width: none !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="create"]::-webkit-scrollbar,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"]::-webkit-scrollbar,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"]::-webkit-scrollbar { display: none; }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="create"]::before,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"]::before,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"]::before {
    display: none !important;
    content: none !important;
  }

  /* Create is a compact construction catalogue, not a duplicate transform panel. */
  body.preview3d-open .preview3d-create-group { border-bottom: 1px solid rgba(26, 35, 46, 0.09) !important; }
  body.preview3d-open .preview3d-create-group > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-height: 28px !important;
    padding: 7px 12px 4px !important;
    color: #303741 !important;
  }

  body.preview3d-open .preview3d-create-group > header span,
  body.preview3d-open .preview3d-dock-section-intro > span {
    font: 400 11px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-create-group > header small,
  body.preview3d-open .preview3d-dock-section-intro > small {
    overflow: hidden !important;
    color: #79828d !important;
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.preview3d-open .preview3d-create-actions {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    border-top: 1px solid rgba(26, 35, 46, 0.06) !important;
  }

  body.preview3d-open .preview3d-create-actions button {
    display: grid !important;
    grid-template-rows: 18px 11px !important;
    place-content: center !important;
    place-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 4px 1px !important;
    border: 0 !important;
    border-right: 1px solid rgba(26, 35, 46, 0.07) !important;
    background: transparent !important;
    color: #303741 !important;
    font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-create-actions button:nth-child(5n) { border-right: 0 !important; }
  body.preview3d-open .preview3d-create-actions button:active { background: rgba(22, 119, 220, 0.1) !important; color: #1677dc !important; }
  body.preview3d-open .preview3d-create-actions button img { width: 17px !important; height: 17px !important; }

  /* Style presents individual appearance settings as rows with supporting detail. */
  body.preview3d-open .preview3d-dock-section-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-height: 36px !important;
    padding: 10px 12px 6px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.09) !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"] > button,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > button {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 16px !important;
    grid-template-rows: none !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important;
    background: transparent !important;
    color: #303741 !important;
    text-align: left !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"] > button:active,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > button:active { background: rgba(22, 119, 220, 0.1) !important; }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"] > button > img:first-child,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > button > img:first-child { width: 20px !important; height: 20px !important; }
  body.preview3d-open .preview3d-row-chevron { width: 15px !important; height: 15px !important; opacity: 0.55 !important; }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"] > button > span,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > button > span {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"] > button strong,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > button strong {
    font: 400 11px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"] > button small,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > button small {
    overflow: hidden !important;
    color: #747e89 !important;
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Library is intentionally a two-resource chooser rather than another tool grid. */
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > button {
    min-height: 62px !important;
    height: 62px !important;
  }
}

/* Source: release-606.css */
/* Release 606: each 3D bottom destination has its own controls and visual hierarchy. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="create"] {
    display: grid !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-create-family-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-height: 38px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.1) !important;
    background: rgba(246, 248, 250, 0.98) !important;
  }

  body.preview3d-open .preview3d-create-family-tabs button {
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6a737d !important;
    font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-create-family-tabs button.is-active {
    border-bottom-color: #1677dc !important;
    color: #1677dc !important;
  }

  body.preview3d-open .preview3d-create-family {
    display: block !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body.preview3d-open .preview3d-create-family[hidden] { display: none !important; }
  body.preview3d-open .preview3d-create-family .preview3d-create-group { min-height: 100% !important; }
  body.preview3d-open .preview3d-create-family .preview3d-create-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body.preview3d-open .preview3d-create-family .preview3d-create-actions button:nth-child(5n) { border-right: 1px solid rgba(26, 35, 46, 0.07) !important; }
  body.preview3d-open .preview3d-create-family .preview3d-create-actions button:nth-child(4n) { border-right: 0 !important; }
  body.preview3d-open .preview3d-create-family .preview3d-create-actions button { min-height: 50px !important; height: 50px !important; }

  /* Style keeps a real current-object preview above appearance controls. */
  body.preview3d-open .preview3d-style-selection {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 54px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important;
    background: rgba(246, 248, 250, 0.82) !important;
  }

  body.preview3d-open .preview3d-style-swatch {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(26, 35, 46, 0.12) !important;
    border-radius: 5px !important;
    background: var(--preview3d-style-color, linear-gradient(135deg, #d9e0e8 0 48%, #f7f9fb 48% 52%, #d9e0e8 52%)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
  }

  body.preview3d-open .preview3d-style-selection > span:last-child { display: grid !important; gap: 2px !important; min-width: 0 !important; }
  body.preview3d-open .preview3d-style-selection strong { font: 400 11px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  body.preview3d-open .preview3d-style-selection small { overflow: hidden !important; color: #747e89 !important; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

  /* Library becomes an asset browser entry point with visual previews. */
  body.preview3d-open .preview3d-library-cards { display: grid !important; gap: 0 !important; }
  body.preview3d-open .preview3d-library-cards > button {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 70px !important;
    height: 70px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #303741 !important;
    text-align: left !important;
  }

  body.preview3d-open .preview3d-library-cards > button:active { background: rgba(22, 119, 220, 0.1) !important; }
  body.preview3d-open .preview3d-library-cards > button > span:nth-child(2) { display: grid !important; min-width: 0 !important; gap: 2px !important; }
  body.preview3d-open .preview3d-library-cards strong { font: 400 11px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  body.preview3d-open .preview3d-library-cards small { overflow: hidden !important; color: #747e89 !important; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

  body.preview3d-open .preview3d-library-preview {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
    width: 48px !important;
    height: 44px !important;
    padding: 3px !important;
    border: 1px solid rgba(26, 35, 46, 0.1) !important;
    border-radius: 5px !important;
    background: #f5f7f8 !important;
  }

  body.preview3d-open .preview3d-library-preview i { display: block !important; min-width: 0 !important; border-radius: 2px !important; }
  body.preview3d-open .preview3d-library-preview.is-material i:nth-child(1) { background: repeating-linear-gradient(45deg, #b7865e 0 3px, #dfb98e 3px 6px) !important; }
  body.preview3d-open .preview3d-library-preview.is-material i:nth-child(2) { background: linear-gradient(135deg, #d7dce0 0 48%, #ffffff 48% 52%, #c1c8cd 52%) !important; }
  body.preview3d-open .preview3d-library-preview.is-material i:nth-child(3) { background: repeating-linear-gradient(0deg, #7194ad 0 2px, #d6e2e9 2px 5px) !important; }
  body.preview3d-open .preview3d-library-preview.is-component { grid-template-columns: 1fr 1fr !important; grid-template-rows: 1fr 1fr !important; }
  body.preview3d-open .preview3d-library-preview.is-component i:nth-child(1) { grid-row: 1 / -1 !important; background: #9aa5b1 !important; }
  body.preview3d-open .preview3d-library-preview.is-component i:nth-child(2) { background: #c9955e !important; }
  body.preview3d-open .preview3d-library-preview.is-component i:nth-child(3) { background: #77a08b !important; }
}

/* Source: release-607.css */
/* Release 607: hard-reset the 3D dock into four visibly different working panels. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-build-tools {
    grid-template-rows: 12px 38px minmax(0, 1fr) 56px !important;
    background: #fbfcfd !important;
  }

  body.preview3d-open .preview3d-dock-content { position: relative !important; background: #fbfcfd !important; }
  body.preview3d-open .preview3d-dock-panel { background: #fbfcfd !important; }
  body.preview3d-open .preview3d-dock-panel[hidden] { display: none !important; }
  body.preview3d-open .preview3d-dock-panel.is-active:not([hidden]) { display: block !important; }

  /* Model remains a layer-and-transform stack from Release 604. */
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"].is-active:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
  }
  body.preview3d-open .preview3d-model-layer-actions {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    flex: 0 0 44px !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.09) !important;
    background: #f8fafb !important;
  }
  body.preview3d-open .preview3d-model-layer-actions button {
    display: grid !important;
    grid-template-rows: 17px 10px !important;
    place-content: center !important;
    place-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 3px 1px !important;
    border: 0 !important;
    border-right: 1px solid rgba(26, 35, 46, 0.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #3f4954 !important;
    font: 400 7px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }
  body.preview3d-open .preview3d-model-layer-actions button:last-child { border-right: 0 !important; }
  body.preview3d-open .preview3d-model-layer-actions button img { width: 16px !important; height: 16px !important; }
  body.preview3d-open .preview3d-model-layer-actions button:active { background: rgba(22, 119, 220, 0.09) !important; color: #1677dc !important; }
  body.preview3d-open .preview3d-model-layer-actions button:disabled { color: #aeb6bf !important; opacity: 0.7 !important; }

  /* Create is a tool family picker, then one compact related-tool palette. */
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="create"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-create-family-tabs,
  body.preview3d-open .preview3d-library-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    height: 38px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.1) !important;
    background: #f4f6f8 !important;
  }

  body.preview3d-open .preview3d-create-family-tabs button,
  body.preview3d-open .preview3d-library-tabs button {
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #68727d !important;
    font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-create-family-tabs button.is-active,
  body.preview3d-open .preview3d-library-tabs button.is-active { border-bottom-color: #1677dc !important; color: #1677dc !important; }
  body.preview3d-open .preview3d-create-family[hidden],
  body.preview3d-open .preview3d-library-view[hidden] { display: none !important; }
  body.preview3d-open .preview3d-create-family.is-active { display: block !important; min-height: 0 !important; overflow-y: auto !important; }
  body.preview3d-open .preview3d-create-family .preview3d-create-group { min-height: 100% !important; border: 0 !important; }
  body.preview3d-open .preview3d-create-family .preview3d-create-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body.preview3d-open .preview3d-create-family .preview3d-create-actions button { min-height: 54px !important; height: 54px !important; border-right: 1px solid rgba(26, 35, 46, 0.07) !important; }
  body.preview3d-open .preview3d-create-family .preview3d-create-actions button:nth-child(4n) { border-right: 0 !important; }

  /* Style is the selected object's finish workspace, with direct finish choices. */
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"].is-active:not([hidden]) { display: block !important; overflow-y: auto !important; }
  body.preview3d-open .preview3d-style-finishes { border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important; }
  body.preview3d-open .preview3d-style-finishes > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 27px !important;
    padding: 5px 12px 2px !important;
    color: #66717d !important;
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-style-finishes > header button { min-height: 22px !important; padding: 0 3px !important; border: 0 !important; background: transparent !important; color: #1677dc !important; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  body.preview3d-open .preview3d-style-finishes > div { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; padding: 0 8px 7px !important; }
  body.preview3d-open .preview3d-style-finishes > div > button { display: grid !important; grid-template-rows: 24px 11px !important; place-content: center !important; gap: 2px !important; min-height: 40px !important; padding: 1px !important; border: 0 !important; background: transparent !important; color: #4e5863 !important; font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  body.preview3d-open .preview3d-style-finishes i { display: block !important; width: 24px !important; height: 24px !important; border: 1px solid rgba(26, 35, 46, 0.12) !important; border-radius: 4px !important; background: var(--finish) !important; }
  body.preview3d-open .preview3d-active-mode,
  body.preview3d-open .preview3d-placement-mode {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    margin: 7px 8px !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(22, 119, 220, 0.16) !important;
    border-radius: 4px !important;
    background: rgba(22, 119, 220, 0.06) !important;
    color: #3e4a57 !important;
  }
  body.preview3d-open .preview3d-active-mode > img,
  body.preview3d-open .preview3d-placement-mode > img { width: 17px !important; height: 17px !important; }
  body.preview3d-open .preview3d-active-mode > span,
  body.preview3d-open .preview3d-placement-mode > span { display: grid !important; min-width: 0 !important; gap: 1px !important; }
  body.preview3d-open .preview3d-active-mode strong,
  body.preview3d-open .preview3d-placement-mode strong { overflow: hidden !important; font: 400 10px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  body.preview3d-open .preview3d-active-mode small,
  body.preview3d-open .preview3d-placement-mode small { overflow: hidden !important; color: #6f7a86 !important; font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  body.preview3d-open .preview3d-active-mode button,
  body.preview3d-open .preview3d-placement-mode button {
    display: grid !important;
    place-items: center !important;
    min-width: 31px !important;
    min-height: 28px !important;
    padding: 0 6px !important;
    border: 1px solid rgba(22, 119, 220, 0.22) !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #1677dc !important;
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }
  body.preview3d-open .preview3d-placement-mode { grid-template-columns: 18px minmax(0, 1fr) 30px auto !important; margin: 6px 8px 4px !important; }
  body.preview3d-open .preview3d-placement-mode button img { width: 15px !important; height: 15px !important; }

  /* Library opens as an actual mini asset browser, not a second tool list. */
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"].is-active:not([hidden]) { display: grid !important; grid-template-rows: 36px 38px minmax(0, 1fr) !important; overflow: hidden !important; }
  body.preview3d-open .preview3d-library-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.preview3d-open .preview3d-library-view.is-active { display: block !important; min-height: 0 !important; overflow-y: auto !important; }
  body.preview3d-open .preview3d-inline-library-filters { position: sticky !important; top: 0 !important; z-index: 1 !important; display: flex !important; gap: 4px !important; min-height: 32px !important; margin: 0 !important; padding: 6px 8px 4px !important; overflow-x: auto !important; overflow-y: hidden !important; border-bottom: 1px solid rgba(26, 35, 46, 0.07) !important; background: #f8fafc !important; scrollbar-width: none !important; }
  body.preview3d-open .preview3d-inline-library-filters::-webkit-scrollbar { display: none !important; }
  body.preview3d-open .preview3d-inline-library-filters button { flex: 0 0 auto !important; min-height: 21px !important; padding: 0 8px !important; border: 1px solid rgba(26, 35, 46, 0.1) !important; border-radius: 3px !important; background: #fff !important; color: #66727e !important; font: 400 9px/19px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; white-space: nowrap !important; }
  body.preview3d-open .preview3d-inline-library-filters button.is-active { border-color: rgba(22, 119, 220, 0.34) !important; background: rgba(22, 119, 220, 0.1) !important; color: #176fcb !important; }
  body.preview3d-open .preview3d-inline-library-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; min-height: 35px !important; border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important; background: #fff !important; }
  body.preview3d-open .preview3d-inline-library-actions button { display: grid !important; grid-template-columns: 14px minmax(0, 1fr) !important; align-items: center !important; justify-content: center !important; gap: 4px !important; min-width: 0 !important; min-height: 35px !important; padding: 0 5px !important; border: 0 !important; border-right: 1px solid rgba(26, 35, 46, 0.07) !important; border-radius: 0 !important; background: transparent !important; color: #596571 !important; font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; white-space: nowrap !important; }
  body.preview3d-open .preview3d-inline-library-actions button:last-child { border-right: 0 !important; }
  body.preview3d-open .preview3d-inline-library-actions button img { width: 14px !important; height: 14px !important; }
  body.preview3d-open .preview3d-inline-library-actions button.is-active { color: #176fcb !important; background: rgba(22, 119, 220, 0.08) !important; }
  body.preview3d-open .preview3d-inline-library-actions button:disabled { color: #aeb6bf !important; }
  body.preview3d-open .preview3d-inline-material-composer { display: grid !important; grid-template-columns: minmax(0, 1fr) 28px 52px 28px 28px !important; gap: 4px !important; align-items: center !important; min-height: 38px !important; padding: 5px 8px !important; border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important; background: #f8fafc !important; }
  body.preview3d-open .preview3d-inline-material-composer[hidden] { display: none !important; }
  body.preview3d-open .preview3d-inline-material-composer input[type="text"] { min-width: 0 !important; height: 27px !important; padding: 0 7px !important; border: 1px solid rgba(26, 35, 46, 0.13) !important; border-radius: 3px !important; background: #fff !important; color: #39424c !important; font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  body.preview3d-open .preview3d-inline-material-composer input[type="color"],
  body.preview3d-open .preview3d-inline-material-composer button { display: grid !important; place-items: center !important; width: 28px !important; height: 27px !important; margin: 0 !important; padding: 2px !important; border: 1px solid rgba(26, 35, 46, 0.12) !important; border-radius: 3px !important; background: #fff !important; }
  body.preview3d-open .preview3d-inline-material-composer #preview3dInlineMaterialTextureButton { display: flex !important; width: 52px !important; justify-content: center !important; gap: 3px !important; color: #596571 !important; font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  body.preview3d-open .preview3d-inline-material-composer button img { width: 14px !important; height: 14px !important; }
  body.preview3d-open .preview3d-inline-material-composer #preview3dInlineMaterialTextureButton.is-ready { border-color: #1677dc !important; background: rgba(22, 119, 220, 0.08) !important; }
  body.preview3d-open .preview3d-inline-assets { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; padding: 8px 8px 4px !important; gap: 6px !important; }
  body.preview3d-open .preview3d-inline-assets > button { display: grid !important; grid-template-rows: 34px 11px !important; place-content: center !important; gap: 3px !important; min-height: 51px !important; padding: 3px !important; border: 1px solid rgba(26, 35, 46, 0.09) !important; border-radius: 4px !important; background: #fff !important; color: #4d5761 !important; font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
  body.preview3d-open .preview3d-inline-assets > button.is-active,
  body.preview3d-open .preview3d-inline-assets > button:active { border-color: #1677dc !important; background: rgba(22, 119, 220, 0.08) !important; }
  body.preview3d-open .preview3d-inline-assets > button > .preview3d-material-swatch { display: block !important; width: 34px !important; height: 34px !important; overflow: hidden !important; border: 1px solid rgba(26, 35, 46, 0.1) !important; border-radius: 3px !important; }
  body.preview3d-open .preview3d-inline-assets > button > .preview3d-component-preview { width: 34px !important; height: 34px !important; margin: 0 auto !important; }
  body.preview3d-open .preview3d-component-preview { display: block !important; color: #526171 !important; }
  body.preview3d-open .preview3d-component-illustration { display: block !important; width: 100% !important; height: 100% !important; overflow: visible !important; }
  body.preview3d-open .preview3d-inline-components .is-door { color: #9b7148 !important; }
  body.preview3d-open .preview3d-inline-components .is-window { color: #6393ae !important; }
  body.preview3d-open .preview3d-inline-components .is-chair,
  body.preview3d-open .preview3d-inline-components .is-table,
  body.preview3d-open .preview3d-inline-components .is-sofa,
  body.preview3d-open .preview3d-inline-components .is-bed,
  body.preview3d-open .preview3d-inline-components .is-casework { color: #816342 !important; }
  body.preview3d-open .preview3d-inline-components .is-plumbing { color: #518c9b !important; }
  body.preview3d-open .preview3d-inline-components .is-appliance,
  body.preview3d-open .preview3d-inline-components .is-structure { color: #657484 !important; }
  body.preview3d-open .preview3d-inline-components .is-light { color: #b58732 !important; }
  body.preview3d-open .preview3d-inline-components .is-plant { color: #4d875d !important; }
  body.preview3d-open .preview3d-inline-components .is-site { color: #7a7051 !important; }
  /* Object cards need enough visual room to make a chair, fixture, or building part recognizable. */
  body.preview3d-open .preview3d-inline-components { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; }
  body.preview3d-open .preview3d-inline-components > button { grid-template-columns: 42px minmax(0, 1fr) !important; grid-template-rows: none !important; align-items: center !important; justify-items: start !important; gap: 6px !important; min-height: 54px !important; padding: 5px 6px !important; text-align: left !important; }
  body.preview3d-open .preview3d-inline-components > button > .preview3d-component-preview { width: 42px !important; height: 42px !important; margin: 0 !important; }
  body.preview3d-open .preview3d-inline-components > button > span { display: -webkit-box !important; min-width: 0 !important; overflow: hidden !important; color: #46515c !important; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; white-space: normal !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; }
  body.preview3d-open .preview3d-inline-empty { grid-column: 1 / -1 !important; margin: 14px 0 !important; color: #768390 !important; font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; text-align: center !important; }
  body.preview3d-open .preview3d-library-browse { display: grid !important; grid-template-columns: 17px minmax(0, 1fr) 15px !important; align-items: center !important; gap: 8px !important; width: calc(100% - 16px) !important; min-height: 36px !important; margin: 0 8px 8px !important; padding: 0 8px !important; border: 1px solid rgba(26, 35, 46, 0.1) !important; border-radius: 4px !important; background: #fff !important; color: #4e5863 !important; font: 400 10px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; text-align: left !important; }
  body.preview3d-open .preview3d-library-browse img { width: 16px !important; height: 16px !important; }
  body.preview3d-open .preview3d-library-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 0 8px 8px !important; }
  body.preview3d-open .preview3d-library-actions button { display: grid !important; grid-template-columns: 15px minmax(0, 1fr) !important; align-items: center !important; gap: 6px !important; min-height: 34px !important; padding: 0 7px !important; border: 1px solid rgba(26, 35, 46, 0.1) !important; border-radius: 4px !important; background: #fff !important; color: #4e5863 !important; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; text-align: left !important; }
  body.preview3d-open .preview3d-library-actions img { width: 15px !important; height: 15px !important; }
}

/* Source: release-616.css */
/* Release 616: keep one active 3D destination fully visible above the persistent iPhone dock. */
@media (max-width: 760px) {
  body.preview3d-open {
    --preview3d-bottom-sheet-height: clamp(304px, 40dvh, 352px);
  }

  body.preview3d-open .preview3d-surface {
    grid-template-rows: 92px minmax(0, 1fr) var(--preview3d-bottom-sheet-height) !important;
  }

  body.preview3d-open .preview3d-build-tools {
    grid-template-rows: 12px 38px minmax(0, 1fr) 56px !important;
    min-height: var(--preview3d-bottom-sheet-height) !important;
    height: var(--preview3d-bottom-sheet-height) !important;
    max-height: var(--preview3d-bottom-sheet-height) !important;
  }

  body.preview3d-open .preview3d-dock-content {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  body.preview3d-open .preview3d-dock-panel.is-active:not([hidden]) {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"].is-active:not([hidden]) {
    display: flex !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-model-layer-section,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-dock-layer-list {
    min-height: 0 !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="create"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="create"] .preview3d-create-family.is-active {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"].is-active:not([hidden]) {
    display: block !important;
    overflow-y: auto !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 36px 38px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-library-view.is-active {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-row: 4 !important;
    min-height: 56px !important;
    height: 56px !important;
    background: #fbfcfd !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button {
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open.preview3d-dock-collapsed .preview3d-build-tools {
    grid-template-rows: 56px !important;
  }
}

/* Source: release-619.css */
/* Release 619: searchable 3D library shelves remain compact on iPhone. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-inline-library-search {
    position: sticky !important;
    top: 32px !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: 15px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 33px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important;
    background: #ffffff !important;
  }

  body.preview3d-open .preview3d-inline-library-search img {
    width: 15px !important;
    height: 15px !important;
    opacity: 0.64;
  }

  body.preview3d-open .preview3d-inline-library-search input {
    min-width: 0 !important;
    height: 24px !important;
    padding: 0 7px !important;
    border: 1px solid rgba(26, 35, 46, 0.13) !important;
    border-radius: 3px !important;
    background: #f8fafc !important;
    color: #39424c !important;
    font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }
}

/* Source: release-620.css */
/* Release 620: retain the compact iPhone dock while making its web tabs keyboard-ready. */
body.preview3d-open .preview3d-bottom-tabs button:focus-visible,
body.preview3d-open .preview3d-create-family-tabs button:focus-visible,
body.preview3d-open .preview3d-library-tabs button:focus-visible {
  outline: 2px solid var(--ios-accent);
  outline-offset: -2px;
}

/* Source: release-621.css */
/* Release 621: keep the 3D Library target visible without adding a floating inspector. */
body.preview3d-open .preview3d-library-selection {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(28, 39, 51, 0.12);
  color: var(--ios-text);
}

body.preview3d-open .preview3d-library-selection > img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

body.preview3d-open .preview3d-library-selection > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

body.preview3d-open .preview3d-library-selection strong,
body.preview3d-open .preview3d-library-selection small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0;
}

body.preview3d-open .preview3d-library-selection strong {
  font-size: 11px;
  line-height: 14px;
}

body.preview3d-open .preview3d-library-selection small {
  color: var(--ios-muted);
  font-size: 10px;
  line-height: 12px;
}

/* Source: release-622.css */
/* Release 622: make every Library row explicit so its asset browser cannot be clipped. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 36px 35px 38px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > .preview3d-dock-section-intro {
    grid-row: 1;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > .preview3d-library-selection {
    grid-row: 2;
    min-height: 0;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > .preview3d-library-tabs {
    grid-row: 3;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"] > .preview3d-library-view {
    grid-row: 4;
    min-height: 0;
  }
}

/* Source: release-624.css */
@media (max-width: 760px) {
  /* Keep component actions reachable while the catalog itself scrolls. */
  body.preview3d-open .preview3d-inline-component-actions {
    position: sticky !important;
    top: 32px !important;
    z-index: 3 !important;
  }

  body.preview3d-open .preview3d-inline-component-manager {
    position: sticky !important;
    top: 67px !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px 28px !important;
    gap: 4px !important;
    align-items: center !important;
    min-height: 39px !important;
    padding: 5px 8px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.1) !important;
    background: #f8fafc !important;
  }

  body.preview3d-open .preview3d-inline-component-manager[hidden] { display: none !important; }
  body.preview3d-open .preview3d-inline-component-manager label { min-width: 0 !important; }
  body.preview3d-open .preview3d-inline-component-manager input {
    width: 100% !important;
    height: 27px !important;
    padding: 0 7px !important;
    border: 1px solid rgba(26, 35, 46, 0.13) !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #39424c !important;
    font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-inline-component-manager button {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 27px !important;
    margin: 0 !important;
    padding: 2px !important;
    border: 1px solid rgba(26, 35, 46, 0.12) !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #596571 !important;
  }

  body.preview3d-open .preview3d-inline-component-manager button img { width: 14px !important; height: 14px !important; }
  body.preview3d-open .preview3d-inline-component-manager #preview3dInlineComponentRemoveButton { color: #ad4f4f !important; }
  body.preview3d-open .preview3d-inline-component-manager small {
    grid-column: 1 / -1 !important;
    overflow: hidden !important;
    color: #68737e !important;
    font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Source: release-625.css */
/* Release 625: direct, unit-aware Push/Pull in the compact 3D transform inspector. */
.preview3d-push-pull-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(72px, auto) 28px 48px;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.08);
  color: #56616d;
  font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-push-pull-controls > span,
.preview3d-push-pull-controls output {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview3d-push-pull-controls output { color: #2f3943; text-align: center; }
.preview3d-push-pull-controls button,
.preview3d-push-pull-controls select {
  width: 28px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(26, 35, 46, 0.12);
  border-radius: 3px;
  background: #fff;
  color: #3e4954;
  font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-push-pull-controls button { display: grid; place-items: center; }
.preview3d-push-pull-controls button img { width: 14px; height: 14px; }
.preview3d-push-pull-controls label { min-width: 0; }
.preview3d-push-pull-controls select { width: 48px; padding: 0 2px; }
.preview3d-push-pull-controls button:active:not(:disabled),
.preview3d-push-pull-controls button:focus-visible:not(:disabled) { border-color: #1677dc; background: rgba(22, 119, 220, 0.08); outline: 0; }
.preview3d-push-pull-controls.is-disabled { color: #9aa3ac; }
.preview3d-push-pull-controls button:disabled,
.preview3d-push-pull-controls select:disabled { color: #aab2ba; background: #f5f6f7; }

@media (max-width: 760px) {
  body.preview3d-open .preview3d-transform-panel { grid-template-rows: 42px 30px 36px minmax(0, 1fr) 44px !important; }
  body.preview3d-open .preview3d-push-pull-controls { grid-template-columns: minmax(0, 1fr) 26px minmax(64px, auto) 26px 44px; min-height: 36px; padding: 4px 8px; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  body.preview3d-open .preview3d-push-pull-controls button { width: 26px; height: 24px; }
  body.preview3d-open .preview3d-push-pull-controls select { width: 44px; height: 24px; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
}

html[data-theme="dark"] .preview3d-push-pull-controls { border-color: rgba(255, 255, 255, 0.1); color: #c2cad2; }
html[data-theme="dark"] .preview3d-push-pull-controls output { color: #ebf0f5; }
html[data-theme="dark"] .preview3d-push-pull-controls button,
html[data-theme="dark"] .preview3d-push-pull-controls select { border-color: rgba(255, 255, 255, 0.14); background: #303740; color: #e4eaf0; }

/* Source: release-626.css */
/* Release 626: in-scene solid modeling controls stay compact within the 3D Model workspace. */
.preview3d-solid-controls {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(26, 35, 46, 0.1);
  background: #f8fafc;
}

.preview3d-solid-controls[hidden] { display: none; }
.preview3d-solid-controls > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 8px 0 10px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.07);
  color: #3f4a55;
  font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-solid-controls > header button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.preview3d-solid-controls > header button img { width: 14px; height: 14px; }
.preview3d-solid-controls > label {
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #66727e;
  font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-solid-controls > label input { width: 15px; height: 15px; accent-color: #1677dc; }
.preview3d-solid-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(26, 35, 46, 0.07); }
.preview3d-solid-actions button {
  display: grid;
  min-width: 0;
  min-height: 40px;
  grid-template-rows: 16px 10px;
  place-content: center;
  place-items: center;
  gap: 2px;
  padding: 3px 2px;
  border: 0;
  border-right: 1px solid rgba(26, 35, 46, 0.07);
  border-radius: 0;
  background: #fff;
  color: #4b5661;
  font: 400 8px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.preview3d-solid-actions button:last-child { border-right: 0; }
.preview3d-solid-actions button img { width: 15px; height: 15px; }
.preview3d-solid-actions button:active:not(:disabled),
.preview3d-solid-actions button:focus-visible:not(:disabled) { background: rgba(22, 119, 220, 0.08); color: #1677dc; outline: 0; }
.preview3d-solid-actions button:disabled { color: #a8b0b8; background: #f7f8f9; }
.preview3d-solid-controls > p { margin: 0; padding: 5px 10px 6px; color: #727d88; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

html[data-theme="dark"] .preview3d-solid-controls { border-color: rgba(255, 255, 255, 0.11); background: #2b323a; }
html[data-theme="dark"] .preview3d-solid-controls > header { border-color: rgba(255, 255, 255, 0.1); color: #edf1f5; }
html[data-theme="dark"] .preview3d-solid-controls > label,
html[data-theme="dark"] .preview3d-solid-controls > p { color: #b9c2ca; }
html[data-theme="dark"] .preview3d-solid-actions { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .preview3d-solid-actions button { border-color: rgba(255, 255, 255, 0.1); background: #333b44; color: #e1e7ec; }

/* Source: release-627.css */
/* Release 627: Follow Me stays editable inside the compact 3D Model workspace. */
.preview3d-follow-me-controls {
  flex: 0 0 auto;
  border: 1px solid rgba(26, 35, 46, 0.12);
  border-radius: 7px;
  overflow: hidden;
  background: #f7f8fa;
  color: #27313b;
  font: 400 10px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.preview3d-follow-me-controls[hidden] { display: none; }
.preview3d-follow-me-controls > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 7px 0 9px;
  border-bottom: 1px solid rgba(26, 35, 46, 0.08);
  font: 400 10px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.preview3d-follow-me-controls > header button {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
}
.preview3d-follow-me-controls > header button img { width: 14px; height: 14px; }
.preview3d-follow-me-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 7px 9px; }
.preview3d-follow-me-fields label { display: grid; min-width: 0; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 4px; }
.preview3d-follow-me-fields label > span { color: #68737e; }
.preview3d-follow-me-fields input,
.preview3d-follow-me-fields select {
  min-width: 0;
  height: 25px;
  padding: 0 5px;
  border: 1px solid rgba(26, 35, 46, 0.12);
  border-radius: 5px;
  background: #fff;
  color: #29333d;
  font: 400 10px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.preview3d-follow-me-fields input:disabled,
.preview3d-follow-me-fields select:disabled { background: #f0f2f4; color: #a1a9b1; }
.preview3d-follow-me-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(26, 35, 46, 0.08); }
.preview3d-follow-me-actions button {
  display: flex;
  min-width: 0;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 6px;
  border: 0;
  border-right: 1px solid rgba(26, 35, 46, 0.08);
  background: #fff;
  color: #303a44;
  font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.preview3d-follow-me-actions button:last-child { border-right: 0; }
.preview3d-follow-me-actions button img { width: 14px; height: 14px; }
.preview3d-follow-me-actions button:active:not(:disabled),
.preview3d-follow-me-actions button:focus-visible:not(:disabled) { background: rgba(22, 119, 220, 0.08); color: #1677dc; outline: 0; }
.preview3d-follow-me-actions button:disabled { color: #a8b0b8; background: #f7f8f9; }
.preview3d-follow-me-controls > p { margin: 0; padding: 5px 9px 6px; color: #727d88; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

@media (max-width: 560px) {
  body.preview3d-open .preview3d-follow-me-controls { font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  body.preview3d-open .preview3d-follow-me-fields { gap: 4px; padding: 6px 8px; }
  body.preview3d-open .preview3d-follow-me-fields label { grid-template-columns: 43px minmax(0, 1fr); }
  body.preview3d-open .preview3d-follow-me-fields input,
  body.preview3d-open .preview3d-follow-me-fields select { height: 24px; font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  body.preview3d-open .preview3d-follow-me-actions button { min-height: 29px; font: 400 8px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
}

html[data-theme="dark"] .preview3d-follow-me-controls { border-color: rgba(255, 255, 255, 0.11); background: #2b323a; color: #e7edf2; }
html[data-theme="dark"] .preview3d-follow-me-controls > header,
html[data-theme="dark"] .preview3d-follow-me-actions { border-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .preview3d-follow-me-fields label > span,
html[data-theme="dark"] .preview3d-follow-me-controls > p { color: #b9c2ca; }
html[data-theme="dark"] .preview3d-follow-me-fields input,
html[data-theme="dark"] .preview3d-follow-me-fields select,
html[data-theme="dark"] .preview3d-follow-me-actions button { border-color: rgba(255, 255, 255, 0.1); background: #333b44; color: #e1e7ec; }
html[data-theme="dark"] .preview3d-follow-me-actions button:disabled,
html[data-theme="dark"] .preview3d-follow-me-fields input:disabled,
html[data-theme="dark"] .preview3d-follow-me-fields select:disabled { background: #2b3138; color: #77818b; }

/* Source: release-628.css */
/* Release 628: direct architectural creation keeps the existing compact 3D dock geometry. */
.preview3d-create-actions button[data-3d-command="wall"] img,
.preview3d-create-actions button[data-3d-command="room"] img,
.preview3d-create-actions button[data-3d-command="door"] img,
.preview3d-create-actions button[data-3d-command="window"] img { object-fit: contain; }

/* Source: release-629.css */
/* Release 629: direct Door and Window commands use the existing compact scene-placement cue. */
.preview3d-create-actions button[data-3d-command="door"] img,
.preview3d-create-actions button[data-3d-command="window"] img { object-fit: contain; }

/* Source: release-630.css */
/* Release 630: wall-aware architectural placement keeps the existing compact ghost treatment. */
.preview3d-viewport.is-placing-component { cursor: crosshair; }

/* Source: release-631.css */
/* Release 631: reserve two-finger gestures in the live 3D viewport for navigation. */
#preview3dViewport,
#preview3dViewport > canvas {
  touch-action: none;
}

/* Source: release-632.css */
/* Release 632: the Model More strip exposes five distinct scene actions on iPhone. */
@media (max-width: 1400px) {
  body.preview3d-open .preview3d-model-more {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-model-more [data-3d-command="isolate"].is-active {
    background: rgba(20, 115, 230, 0.09) !important;
    color: #1473e6 !important;
  }
}

/* Source: release-633.css */
/* Release 633: keep 3D Model names touch-editable without expanding the dock. */
body.preview3d-open [data-dock-model-name].is-editing {
  display: inline-block;
  min-width: 72px;
  outline: 1px solid var(--accent, #1683f6);
  outline-offset: 2px;
}

body.preview3d-open [data-dock-model-select] {
  touch-action: manipulation;
}

/* Source: release-634.css */
/* Release 634: show real 3D layer groups in the compact Model dock. */
body.preview3d-open .preview3d-dock-layer-list > li.preview3d-dock-group-row {
  background: rgba(23, 33, 43, 0.035);
}

body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-visible] {
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(26, 35, 46, 0.07);
}

body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-visible] img {
  width: 17px;
  height: 17px;
}

body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-select] {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  text-align: left;
}

body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-select] > img {
  width: 18px;
  height: 18px;
}

body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-select] span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-select] strong,
body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-select] small {
  overflow: hidden;
  font: 400 10px/13px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-select] small { color: #727b86; }
body.preview3d-open .preview3d-dock-layer-list > li.is-nested [data-dock-model-select] { padding-left: 24px !important; }

html[data-theme="dark"] body.preview3d-open .preview3d-dock-layer-list > li.preview3d-dock-group-row { background: rgba(255, 255, 255, 0.055); }

/* Source: release-635.css */
/* Release 635: preserve a visible inline edit state for 3D group names. */
body.preview3d-open [data-dock-model-group-name].is-editing {
  display: inline-block;
  min-width: 72px;
  outline: 1px solid var(--accent, #1683f6);
  outline-offset: 2px;
}

body.preview3d-open [data-dock-model-group-select] { touch-action: manipulation; }

/* Source: release-636.css */
/* Release 636: compact disclosure for grouped 3D scene objects. */
body.preview3d-open .preview3d-dock-layer-list > li.preview3d-dock-group-row {
  grid-template-columns: 42px 30px minmax(0, 1fr) !important;
}

body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-collapse] {
  display: grid;
  width: 30px;
  min-width: 30px !important;
  place-items: center;
  border-right: 1px solid rgba(26, 35, 46, 0.07) !important;
}

body.preview3d-open .preview3d-dock-layer-list [data-dock-model-group-collapse] img {
  width: 14px;
  height: 14px;
}

/* Source: release-637.css */
/* Release 637: scene order controls stay compact in 3D Model. */
@media (max-width: 1400px) {
  body.preview3d-open .preview3d-model-more {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

.preview3d-arrange-actions { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* Source: release-638.css */
/* Release 638: recognizable component miniatures in the compact 3D layer stacks. */
.preview3d-object-select > .preview3d-component-preview,
[data-dock-model-select] > .preview3d-component-preview {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  min-height: 22px;
  margin: 0;
  padding: 2px;
  color: #34414f;
  border: 1px solid #d7dde4;
  border-radius: 4px;
  background: #ffffff;
}

.preview3d-object-select > .preview3d-component-preview .preview3d-component-illustration,
[data-dock-model-select] > .preview3d-component-preview .preview3d-component-illustration {
  width: 100%;
  height: 100%;
  stroke-width: 2.25;
}

/* Source: release-639.css */
/* Release 639: keep the active 3D object recognizable in its compact summary. */
.preview3d-build-summary-icon {
  flex: 0 0 26px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  overflow: hidden;
}

.preview3d-build-summary-icon > img {
  width: 18px !important;
  height: 18px !important;
  opacity: 0.78;
}

.preview3d-build-summary-icon > .preview3d-component-preview {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 2px;
  color: #34414f;
  border: 1px solid #d7dde4;
  border-radius: 4px;
  background: #ffffff;
}

.preview3d-build-summary-icon .preview3d-component-illustration {
  width: 100%;
  height: 100%;
  stroke-width: 2.25;
}

html[data-theme="dark"] .preview3d-build-summary-icon > .preview3d-component-preview {
  color: #e7edf4;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-build-summary-icon > .preview3d-component-preview {
    color: #e7edf4;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
  }
}

/* Source: release-640.css */
/* Release 640: show calibrated component dimensions before placement. */
body.preview3d-open .preview3d-inline-components > button > .preview3d-inline-component-copy {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  gap: 1px;
  overflow: hidden;
  color: #46515c;
  font: 400 9px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  white-space: normal !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: initial !important;
}

body.preview3d-open .preview3d-inline-components > button > .preview3d-inline-component-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.preview3d-open .preview3d-inline-components > button > .preview3d-inline-component-copy > small {
  overflow: hidden;
  color: #778391;
  font: 400 8px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="dark"] body.preview3d-open .preview3d-inline-components > button > .preview3d-inline-component-copy { color: #e7edf4; }
html[data-theme="dark"] body.preview3d-open .preview3d-inline-components > button > .preview3d-inline-component-copy > small { color: #aeb7c2; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.preview3d-open .preview3d-inline-components > button > .preview3d-inline-component-copy { color: #e7edf4; }
  html[data-theme="auto"] body.preview3d-open .preview3d-inline-components > button > .preview3d-inline-component-copy > small { color: #aeb7c2; }
}

/* Source: release-641.css */
/* Release 641: set a component scale before placing it in the compact 3D Library strip. */
body.preview3d-open .preview3d-placement-mode {
  grid-template-columns: 18px minmax(56px, 1fr) 48px 30px auto !important;
  gap: 4px !important;
}

body.preview3d-open .preview3d-placement-mode > span {
  min-width: 0 !important;
}

body.preview3d-open .preview3d-placement-scale,
body.preview3d-open #preview3dPlacementScale {
  display: block !important;
  min-width: 0 !important;
}

body.preview3d-open #preview3dPlacementScale {
  width: 48px !important;
  height: 27px !important;
  margin: 0 !important;
  padding: 0 3px 0 5px !important;
  border: 1px solid rgba(26, 35, 46, 0.14) !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #4d5863 !important;
  font: 400 9px/25px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

html[data-theme="dark"] body.preview3d-open #preview3dPlacementScale {
  border-color: rgba(229, 236, 244, 0.18) !important;
  background: #202832 !important;
  color: #e6edf5 !important;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.preview3d-open #preview3dPlacementScale {
    border-color: rgba(229, 236, 244, 0.18) !important;
    background: #202832 !important;
    color: #e6edf5 !important;
  }
}

/* Source: release-642.css */
/* Release 642: keep proportional 3D resizing inside the existing Transform grid. */
body.preview3d-open .preview3d-transform-fields #preview3dUniformScale {
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  padding: 1px 3px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(26, 35, 46, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #303941 !important;
  font: 400 10px/16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  outline: 0 !important;
}

body.preview3d-open .preview3d-transform-fields #preview3dUniformScale:focus { border-bottom-color: #126dd1 !important; }
body.preview3d-open .preview3d-transform-fields #preview3dUniformScale:disabled { color: #9aa2aa !important; }

html[data-theme="dark"] body.preview3d-open .preview3d-transform-fields #preview3dUniformScale { color: #edf2f7 !important; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.preview3d-open .preview3d-transform-fields #preview3dUniformScale { color: #edf2f7 !important; }
}

/* Source: release-643.css */
/* Release 643: texture import is a direct material action, not a hidden draft flow. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-inline-material-actions [data-3d-inline-material-action="upload"] {
    color: #176fcb !important;
    font-weight: 400 !important;
  }
}

/* Source: release-644.css */
/* Release 644: real 3D surface choices stay compact with texture mapping. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-texture-controls .preview3d-texture-finish select {
    grid-column: 1 / -1;
    width: 100%;
    height: 24px;
    padding: 0 5px;
    border: 1px solid rgba(26, 35, 46, 0.14);
    border-radius: 3px;
    background: #fff;
    color: #48525d;
    font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
}

/* Source: release-645.css */
/* Release 645: an active 3D finish can be copied without adding another Library row. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-library-selection {
    grid-template-columns: 18px minmax(0, 1fr) 28px;
  }

  body.preview3d-open #preview3dInlineMaterialDuplicateButton {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(28, 39, 51, 0.1);
    border-radius: 0;
    background: transparent;
    color: #596571;
  }

  body.preview3d-open #preview3dInlineMaterialDuplicateButton img {
    width: 15px;
    height: 15px;
  }

  body.preview3d-open #preview3dInlineMaterialDuplicateButton:disabled { color: #b6bec7; }
}

/* Source: release-646.css */
/* Release 646: replace an object's texture without leaving the compact 3D inspector. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-texture-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  body.preview3d-open .preview3d-texture-actions > button {
    display: inline-flex;
    min-width: 0;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 6px;
    border: 1px solid rgba(26, 35, 46, 0.12);
    border-radius: 4px;
    background: #fff;
    color: #48525d;
    font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  body.preview3d-open .preview3d-texture-actions > button img {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }

  body.preview3d-open .preview3d-texture-actions > button:disabled {
    color: #aeb7c0;
    background: #f8f9fa;
  }
}

/* Source: release-647.css */
/* Release 647: saved 3D finishes stay one tap away in the compact Library strip. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-library-selection {
    grid-template-columns: 18px minmax(0, 1fr) 28px 28px;
  }

  body.preview3d-open #preview3dInlineMaterialFavoriteButton {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(28, 39, 51, 0.1);
    border-radius: 0;
    background: transparent;
    color: #596571;
  }

  body.preview3d-open #preview3dInlineMaterialFavoriteButton img {
    width: 15px;
    height: 15px;
  }

  body.preview3d-open #preview3dInlineMaterialFavoriteButton.is-active { color: #176fcb; background: rgba(22, 119, 220, 0.08); }
  body.preview3d-open #preview3dInlineMaterialFavoriteButton:disabled { color: #b6bec7; }
}

/* Source: release-648.css */
/* Release 648: apply a selected finish across a 3D multi-selection without widening the Library sheet. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-library-selection {
    grid-template-columns: 18px minmax(0, 1fr) 28px 28px;
  }

  body.preview3d-open .preview3d-library-selection.has-bulk-apply {
    grid-template-columns: 18px minmax(0, 1fr) 28px 28px 28px;
  }

  body.preview3d-open #preview3dInlineMaterialApplySelectionButton {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(28, 39, 51, 0.1);
    border-radius: 0;
    background: transparent;
    color: #176fcb;
  }

  body.preview3d-open #preview3dInlineMaterialApplySelectionButton img {
    width: 15px;
    height: 15px;
  }

  body.preview3d-open #preview3dInlineMaterialApplySelectionButton:disabled {
    color: #b6bec7;
  }
}

/* Source: release-650.css */
/* Release 650: local 3D finishes gain compact management without a second library panel. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-library-selection.has-local-material {
    grid-template-columns: 18px minmax(0, 1fr) 28px 28px 28px;
  }

  body.preview3d-open .preview3d-library-selection.has-local-material.has-bulk-apply {
    grid-template-columns: 18px minmax(0, 1fr) 28px 28px 28px 28px;
  }

  body.preview3d-open #preview3dInlineMaterialManageButton {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(28, 39, 51, 0.1);
    border-radius: 0;
    background: transparent;
    color: #596571;
  }

  body.preview3d-open #preview3dInlineMaterialManageButton img {
    width: 15px;
    height: 15px;
  }

  body.preview3d-open #preview3dInlineMaterialManageButton[aria-expanded="true"] {
    color: #176fcb;
    background: rgba(22, 119, 220, 0.08);
  }

  body.preview3d-open .preview3d-inline-material-manager {
    position: sticky;
    top: 67px;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px 28px;
    gap: 4px;
    align-items: center;
    min-height: 39px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(26, 35, 46, 0.1);
    background: #f8fafc;
  }

  body.preview3d-open .preview3d-inline-material-manager[hidden] { display: none; }
  body.preview3d-open .preview3d-inline-material-manager label { min-width: 0; }
  body.preview3d-open .preview3d-inline-material-manager input {
    width: 100%;
    height: 27px;
    padding: 0 7px;
    border: 1px solid rgba(26, 35, 46, 0.13);
    border-radius: 3px;
    background: #fff;
    color: #39424c;
    font: 400 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  body.preview3d-open .preview3d-inline-material-manager button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 27px;
    margin: 0;
    padding: 2px;
    border: 1px solid rgba(26, 35, 46, 0.12);
    border-radius: 3px;
    background: #fff;
    color: #596571;
  }

  body.preview3d-open .preview3d-inline-material-manager button img { width: 14px; height: 14px; }
  body.preview3d-open #preview3dInlineMaterialRemoveButton { color: #ad4f4f; }
  body.preview3d-open .preview3d-inline-material-manager small {
    grid-column: 1 / -1;
    overflow: hidden;
    color: #68737e;
    font: 400 8px/11px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Source: release-651.css */
/* Release 651: linked-component redefinition stays compact in the 3D Library. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-inline-component-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-inline-component-actions button {
    gap: 2px !important;
    padding: 0 4px !important;
  }
}

/* Source: release-652.css */
/* Release 652: linked component instance controls stay inside the compact manager. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-inline-component-instance-actions {
    position: sticky;
    top: 119px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    min-height: 31px;
    border-bottom: 1px solid rgba(26, 35, 46, 0.1);
    background: #f8fafc;
  }

  body.preview3d-open .preview3d-inline-component-instance-actions[hidden] { display: none; }

  body.preview3d-open .preview3d-inline-component-instance-actions button {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 31px;
    padding: 0 8px;
    border: 0;
    border-right: 1px solid rgba(26, 35, 46, 0.08);
    border-radius: 0;
    background: transparent;
    color: #596571;
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: nowrap;
  }

  body.preview3d-open .preview3d-inline-component-instance-actions button:last-child { border-right: 0; }
  body.preview3d-open .preview3d-inline-component-instance-actions button img { width: 14px; height: 14px; }
  body.preview3d-open .preview3d-inline-component-instance-actions button:disabled { color: #aeb6bf; }
}

/* Source: release-654.css */
/* Release 654: linked component selection stays compact beside instance editing. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-inline-component-instance-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.preview3d-open .preview3d-inline-component-instance-actions button {
    padding: 0 6px;
  }
}

/* Source: release-656.css */
/* Release 656: custom component miniatures keep their source identity. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-component-preview.is-vector { color: #536f7d; }
  body.preview3d-open .preview3d-component-preview.is-media { color: #6b6784; }
}

/* Source: release-657.css */
/* Release 657: make material finishes recognizable before applying them. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-inline-materials > button {
    grid-template-rows: 42px minmax(0, 1fr) !important;
    align-content: start !important;
    min-height: 65px !important;
    gap: 2px !important;
  }

  body.preview3d-open .preview3d-inline-materials > button > .preview3d-material-swatch {
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto !important;
  }

  body.preview3d-open .preview3d-inline-material-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 0 !important;
    text-align: center !important;
  }

  body.preview3d-open .preview3d-inline-material-copy > span,
  body.preview3d-open .preview3d-inline-material-copy > small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
  }

  body.preview3d-open .preview3d-inline-material-copy > span {
    color: #46515d !important;
    font: 400 8px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-inline-material-copy > small {
    color: #77828d !important;
    font: 400 7px/9px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-inline-materials > button.is-active .preview3d-inline-material-copy > span {
    color: #176fcb !important;
  }
}

/* Source: release-658.css */
/* Release 658: keep the chosen component visible in the compact placement strip. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-placement-mode {
    grid-template-columns: 24px minmax(50px, 1fr) 48px 30px auto !important;
  }

  body.preview3d-open .preview3d-placement-preview {
    display: grid !important;
    width: 22px !important;
    height: 22px !important;
    place-items: center !important;
    overflow: hidden !important;
    color: #316070 !important;
  }

  body.preview3d-open .preview3d-placement-preview > .preview3d-component-preview,
  body.preview3d-open .preview3d-placement-preview .preview3d-component-illustration {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
  }
}

/* Source: release-659.css */
/* Release 659: keep calibrated placement dimensions compact and legible. */
@media (max-width: 720px) {
  body.preview3d-open #preview3dPlacementDetail {
    font-variant-numeric: tabular-nums !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
}

/* Source: release-660.css */
/* Release 660: preserve the compact level-aware placement strip. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-placement-mode > span {
    min-width: 0 !important;
  }
}

/* Source: release-661.css */
/* Release 661: compact explicit active-level control for project placement. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-project-list li.preview3d-project-level-row {
    grid-template-columns: 28px 28px minmax(0, 1fr) 28px;
  }

  body.preview3d-open .preview3d-project-level-row [data-3d-project-level-active][aria-pressed="true"] {
    background: rgba(23, 111, 210, 0.12);
    color: #176fd2;
  }

  body.preview3d-open .preview3d-project-level-row.is-active strong {
    color: #176fd2;
  }

  body.preview3d-open .preview3d-project-level-row strong {
    font-weight: 400;
  }
}

/* Source: release-663.css */
/* Release 663: compact selected-object move-to-level action. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-transform-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.preview3d-open .preview3d-transform-actions:has(#edit3dTransformSourceButton:not([hidden])) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.preview3d-open .preview3d-transform-actions button {
    gap: 3px;
    padding: 0 4px;
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  body.preview3d-open .preview3d-transform-actions button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Source: release-666.css */
/* Release 666: keep an empty 3D artboard visually intentional and compact. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-empty-artboard {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 18px;
    color: #657182;
    text-align: center;
    font: 400 11px/15px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  body.preview3d-open .preview3d-empty-artboard img {
    width: 22px;
    height: 22px;
    margin: 0 auto;
    opacity: 0.72;
  }
}

/* Source: release-667.css */
/* Release 667: lock the approved compact 3D rails; sheet content must not reflow them. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-surface {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    grid-template-rows: 92px minmax(0, 1fr) 92px !important;
  }

  body.preview3d-open .preview3d-rail > button,
  body.preview3d-open .preview3d-rail > label {
    width: 42px !important;
    min-width: 42px !important;
    min-height: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-rail > button > span,
  body.preview3d-open .preview3d-rail > label > span {
    display: none !important;
  }

  body.preview3d-open .preview3d-rail > button > img,
  body.preview3d-open .preview3d-rail > label > img {
    width: 17px !important;
    height: 17px !important;
  }

  body.preview3d-open .preview3d-rail .preview3d-view-control {
    height: 38px !important;
  }
}

/* Source: release-668.css */
/* Release 668: custom image components keep their actual source preview in the existing 3D library. */
body.preview3d-open .preview3d-component-preview.has-image {
  overflow: hidden;
  background: #eef2f5;
}

body.preview3d-open .preview3d-component-preview > .preview3d-component-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Source: release-669.css */
/* Release 669: imported 3D model components reuse the existing source-image preview treatment. */

/* Source: release-670.css */
/* Release 670: component creation uses the existing compact Library state without changing the 3D toolbars. */

/* Source: release-671.css */
/* Release 671: show the full uploaded texture in existing compact material swatches. */
body.preview3d-open .preview3d-material-swatch[data-texture="image"] {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #edf1f4;
}

/* Source: release-672.css */
/* Release 672: identify an armed Library component without changing the approved 3D toolbars. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-library-selection.is-component-placement {
    background: rgba(22, 119, 220, 0.055);
    box-shadow: inset 2px 0 0 #176fcb;
  }
}

/* Source: release-673.css */
/* Release 673: carry image-based component identity into the existing 3D placement readout. */
@media (max-width: 720px) {
  body.preview3d-open .preview3d-library-selection > img.has-component-image {
    border: 1px solid rgba(26, 35, 46, 0.12);
    border-radius: 3px;
    background: #fff;
    object-fit: cover;
  }
}

/* Source: release-678.css */
/* Release 678: keep the approved 3D four-destination bottom navigation in view. */
@media (max-width: 1024px) {
  body.preview3d-open {
    --preview3d-bottom-sheet-height: clamp(304px, 40dvh, 352px) !important;
  }

  body.preview3d-open .preview3d-surface {
    grid-template-rows: 92px minmax(0, 1fr) var(--preview3d-bottom-sheet-height) !important;
  }

  body.preview3d-open .preview3d-build-tools {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    grid-template-rows: 12px 38px minmax(0, 1fr) 56px !important;
    min-height: var(--preview3d-bottom-sheet-height) !important;
    height: var(--preview3d-bottom-sheet-height) !important;
    max-height: var(--preview3d-bottom-sheet-height) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-content {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-self: end !important;
    min-height: 56px !important;
    height: 56px !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button {
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
  }

  body.preview3d-open.preview3d-dock-collapsed {
    --preview3d-bottom-sheet-height: 56px !important;
  }

  body.preview3d-open.preview3d-dock-collapsed .preview3d-build-tools {
    grid-template-rows: 56px !important;
  }

  body.preview3d-open.preview3d-dock-collapsed .preview3d-bottom-tabs {
    grid-row: 1 !important;
  }
}

/* Source: release-679.css */
/* Release 679: runtime delivery hardening only. The approved editor layout is unchanged. */

/* Source: release-680.css */
/* Release 680: compact, scrollable 3D dock with the approved four destinations always visible. */
@media (max-width: 1024px) {
  body.preview3d-open {
    --preview3d-bottom-sheet-height: clamp(360px, 52dvh, 464px) !important;
  }

  body.preview3d-open .preview3d-surface {
    grid-template-rows: 92px minmax(0, 1fr) var(--preview3d-bottom-sheet-height) !important;
  }

  body.preview3d-open .preview3d-build-tools {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
    min-height: var(--preview3d-bottom-sheet-height) !important;
    height: var(--preview3d-bottom-sheet-height) !important;
    max-height: var(--preview3d-bottom-sheet-height) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-sheet-handle {
    align-self: center !important;
    width: 32px !important;
    height: 3px !important;
  }

  body.preview3d-open .preview3d-sheet-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    align-items: center !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px 0 12px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.09) !important;
  }

  body.preview3d-open .preview3d-sheet-context { display: none !important; }
  body.preview3d-open .preview3d-sheet-header h2 {
    margin: 0 !important;
    color: #202832 !important;
    font: 400 15px/18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open #preview3dDockClose {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
  }
  body.preview3d-open #preview3dDockClose img { width: 17px !important; height: 17px !important; }

  body.preview3d-open .preview3d-dock-content {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-panel.is-active:not([hidden]) {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  /* Model follows the main Layers panel: sticky commands and a layer list that owns the remaining height. */
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"].is-active:not([hidden]) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-build-summary {
    flex: 0 0 36px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
  }

  body.preview3d-open .preview3d-model-tool-strip,
  body.preview3d-open .preview3d-model-layer-actions {
    flex: 0 0 40px !important;
    min-height: 40px !important;
    height: 40px !important;
  }

  body.preview3d-open .preview3d-model-tool-strip button,
  body.preview3d-open .preview3d-model-layer-actions button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 2px 1px !important;
    font: 400 7px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-model-tool-strip button img,
  body.preview3d-open .preview3d-model-layer-actions button img { width: 15px !important; height: 15px !important; }

  body.preview3d-open .preview3d-model-layer-section {
    flex: 1 1 0 !important;
    min-height: 96px !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-dock-layer-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Secondary Model controls float above the list instead of consuming its scroll space. */
  body.preview3d-open .preview3d-model-more:not([hidden]),
  body.preview3d-open .preview3d-solid-controls:not([hidden]),
  body.preview3d-open .preview3d-follow-me-controls:not([hidden]) {
    position: absolute !important;
    z-index: 4 !important;
    right: 8px !important;
    left: 8px !important;
    overflow: auto !important;
    border: 1px solid rgba(26, 35, 46, 0.14) !important;
    border-radius: 6px !important;
    background: #fbfcfd !important;
    box-shadow: 0 8px 20px rgba(23, 33, 43, 0.14) !important;
  }

  body.preview3d-open .preview3d-model-more:not([hidden]) {
    top: 42px !important;
    min-height: 40px !important;
    height: 40px !important;
  }

  body.preview3d-open .preview3d-solid-controls:not([hidden]),
  body.preview3d-open .preview3d-follow-me-controls:not([hidden]) {
    top: 42px !important;
    bottom: 8px !important;
    padding: 8px !important;
  }

  /* Every destination has a real internal scroll surface above the same fixed tab strip. */
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="create"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-create-family-tabs,
  body.preview3d-open .preview3d-library-tabs {
    min-height: 34px !important;
    height: 34px !important;
  }

  body.preview3d-open .preview3d-create-family-tabs button,
  body.preview3d-open .preview3d-library-tabs button { height: 34px !important; }

  body.preview3d-open .preview3d-create-family.is-active {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"].is-active:not([hidden]) {
    display: block !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 34px 48px 34px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-library-view.is-active {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* This is the same persistent four-destination tab anatomy as the primary editor. */
  body.preview3d-open .preview3d-bottom-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 56px !important;
    height: 56px !important;
    overflow: hidden !important;
    border-top: 1px solid rgba(26, 35, 46, 0.1) !important;
    background: #fbfcfd !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button {
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 6px 2px 4px !important;
    font: 400 9px/12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open.preview3d-dock-collapsed {
    --preview3d-bottom-sheet-height: 56px !important;
  }

  body.preview3d-open.preview3d-dock-collapsed .preview3d-build-tools { grid-template-rows: 56px !important; }
  body.preview3d-open.preview3d-dock-collapsed .preview3d-bottom-tabs { grid-row: 1 !important; }
}

/* Source: release-681.css */
/* Release 681: keep every 3D bottom destination inside the iPhone viewport. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-build-tools {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin-inline: 0 !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button {
    width: 25vw !important;
    min-width: 0 !important;
    max-width: 25vw !important;
    overflow: hidden !important;
  }
}

/* Source: release-682.css */
/* Release 682: every 3D destination uses a single compact sticky command row. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-build-summary small,
  body.preview3d-open .preview3d-dock-section-intro,
  body.preview3d-open .preview3d-style-selection small,
  body.preview3d-open .preview3d-active-mode small,
  body.preview3d-open .preview3d-library-selection {
    display: none !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-build-summary {
    flex: 0 0 30px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 10px !important;
  }

  body.preview3d-open .preview3d-model-tool-strip,
  body.preview3d-open .preview3d-create-family-tabs,
  body.preview3d-open .preview3d-style-command-bar,
  body.preview3d-open .preview3d-library-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    min-height: 40px !important;
    height: 40px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.1) !important;
    background: #fbfcfd !important;
  }

  body.preview3d-open .preview3d-model-tool-strip { flex: 0 0 40px !important; }

  body.preview3d-open .preview3d-create-family-tabs,
  body.preview3d-open .preview3d-library-tabs,
  body.preview3d-open .preview3d-style-command-bar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.preview3d-open .preview3d-create-family-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  body.preview3d-open .preview3d-style-command-bar button {
    display: grid !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    padding: 3px 2px !important;
    border: 0 !important;
    border-right: 1px solid rgba(26, 35, 46, 0.07) !important;
    background: transparent !important;
    color: #34404d !important;
    font: 400 8px/10px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open .preview3d-style-command-bar button:last-child { border-right: 0 !important; }
  body.preview3d-open .preview3d-style-command-bar button img { width: 15px !important; height: 15px !important; }
  body.preview3d-open .preview3d-create-group > header { display: none !important; }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"].is-active:not([hidden]) {
    display: block !important;
    overflow-y: auto !important;
  }

  body.preview3d-open .preview3d-style-selection {
    min-height: 34px !important;
    padding: 0 10px !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"].is-active:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-library-tabs { flex: 0 0 40px !important; }

  body.preview3d-open .preview3d-library-view.is-active:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Source: release-683.css */
/* Release 683: Model More expands above the layer list without adding another sticky row. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-model-more:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 40px !important;
    top: 72px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: min(160px, calc(100% - 50px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body.preview3d-open .preview3d-model-more button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px 2px !important;
  }
}

/* Source: release-684.css */
/* Release 684: Model subtools begin below the persistent object command row. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-arrange-controls:not([hidden]),
  body.preview3d-open .preview3d-solid-controls:not([hidden]),
  body.preview3d-open .preview3d-follow-me-controls:not([hidden]) {
    top: 72px !important;
    bottom: 8px !important;
    max-height: calc(100% - 80px) !important;
  }
}

/* Source: release-685.css */
/* Release 685: stabilize the approved 3D sheet without changing its chrome. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"].is-active:not([hidden]) {
    min-height: 0 !important;
  }

  /* The layer stack owns the remaining sheet height on short iPhone viewports. */
  body.preview3d-open .preview3d-model-layer-section {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    min-height: 96px !important;
  }

  body.preview3d-open .preview3d-model-layer-section > header {
    flex: 0 0 28px !important;
    min-height: 28px !important;
  }

  body.preview3d-open .preview3d-dock-layer-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 6px !important;
    touch-action: pan-y !important;
  }

  /* Every scroll surface keeps vertical touch scrolling independent from the canvas camera. */
  body.preview3d-open .preview3d-create-family.is-active,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"].is-active:not([hidden]),
  body.preview3d-open .preview3d-library-view.is-active,
  body.preview3d-open .preview3d-model-more:not([hidden]),
  body.preview3d-open .preview3d-solid-controls:not([hidden]),
  body.preview3d-open .preview3d-follow-me-controls:not([hidden]) {
    min-height: 0 !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.preview3d-open .preview3d-bottom-tabs,
  body.preview3d-open .preview3d-bottom-tabs button,
  body.preview3d-open .preview3d-sheet-header button {
    touch-action: manipulation !important;
  }
}

/* Source: release-686.css */
/* Release 686: Model subtools stay inside the approved 3D dock. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"].is-active > #preview3dTransformPanel:not([hidden]) {
    position: absolute !important;
    z-index: 7 !important;
    top: 72px !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    display: grid !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    border: 1px solid rgba(23, 33, 43, 0.13) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 20px rgba(23, 33, 43, 0.12) !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] > #preview3dTransformPanel > header strong,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] > #preview3dTransformPanel > p,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] > #preview3dTransformPanel label,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] > #preview3dTransformPanel button {
    font-weight: 400 !important;
  }
}

/* Source: release-687.css */
/* Release 687: placement stays in the approved 3D dock and requires a chosen location before commit. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-build-tools {
    grid-template-rows: 8px 34px 44px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open .preview3d-sheet-handle { grid-row: 1 !important; }
  body.preview3d-open .preview3d-sheet-header { grid-row: 2 !important; }

  body.preview3d-open .preview3d-placement-mode {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    grid-template-columns: 22px minmax(48px, 1fr) 48px 30px auto 30px !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-top: 1px solid rgba(26, 35, 46, 0.08) !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.08) !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
  }

  body.preview3d-open .preview3d-placement-mode[hidden] { display: none !important; }
  body.preview3d-open .preview3d-placement-mode > span { min-width: 0 !important; }
  body.preview3d-open .preview3d-placement-preview,
  body.preview3d-open .preview3d-placement-preview > img {
    display: grid !important;
    width: 22px !important;
    height: 22px !important;
    place-items: center !important;
    object-fit: contain !important;
  }

  body.preview3d-open .preview3d-placement-mode strong,
  body.preview3d-open .preview3d-placement-mode small,
  body.preview3d-open .preview3d-placement-mode button,
  body.preview3d-open .preview3d-placement-mode select {
    font-weight: 400 !important;
  }

  body.preview3d-open .preview3d-placement-mode [data-3d-placement-confirm] {
    display: inline-flex !important;
    min-width: 48px !important;
    gap: 3px !important;
    padding: 0 5px !important;
  }

  body.preview3d-open .preview3d-placement-mode [data-3d-placement-confirm][hidden] { display: none !important; }
  body.preview3d-open .preview3d-placement-mode [data-3d-placement-confirm] img { width: 14px !important; height: 14px !important; }

  body.preview3d-open .preview3d-dock-content {
    grid-row: 4 !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-row: 5 !important;
  }

  body.preview3d-open.preview3d-dock-collapsed .preview3d-build-tools {
    grid-template-rows: 56px !important;
  }

  body.preview3d-open.preview3d-dock-collapsed .preview3d-placement-mode { display: none !important; }
  body.preview3d-open.preview3d-dock-collapsed .preview3d-bottom-tabs { grid-row: 1 !important; }
}

/* Source: release-688.css */
/* Release 688: Structure placement reuses the approved compact 3D dock. */

/* Source: release-689.css */
/* Release 689: Push/Pull previews stay compact inside the approved Transform inspector. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-push-pull-controls {
    grid-template-columns: minmax(0, 1fr) 24px minmax(56px, auto) 24px 40px 24px 24px !important;
    gap: 3px !important;
    padding: 4px 7px !important;
  }

  body.preview3d-open .preview3d-push-pull-controls button,
  body.preview3d-open .preview3d-push-pull-controls select {
    width: 24px !important;
    height: 24px !important;
    font-weight: 400 !important;
  }

  body.preview3d-open .preview3d-push-pull-controls select { width: 40px !important; }
  body.preview3d-open #preview3dPushPullApply { border-color: #1677dc !important; color: #1677dc !important; }
}

/* Source: release-690.css */
/* Release 690: Build placement rotation remains in the approved compact placement strip. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode [data-3d-placement-turn][hidden] {
    display: none !important;
  }
}

/* Source: release-691.css */
/* Release 691: Rotated room-kit placement uses the existing approved compact controls. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode {
    font-weight: 400;
  }
}

/* Source: release-692.css */
/* Release 692: Structured 3D placement previews preserve the approved editor shell. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode {
    font-weight: 400;
  }
}

/* Source: release-693.css */
/* Release 693: Room placement previews include their architectural openings in the existing compact strip. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode {
    font-weight: 400;
  }
}

/* Source: release-694.css */
/* Release 694: Component placement previews use the existing 3D component geometry in the approved shell. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode {
    font-weight: 400;
  }
}

/* Source: release-695.css */
/* Release 695: Door and window placement previews snap to the committed wall attachment center. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode {
    font-weight: 400;
  }
}

/* Source: release-696.css */
/* Release 696: Build placement previews refresh at the selected scale before Place. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode {
    font-weight: 400;
  }
}

/* Source: release-697.css */
/* Release 697: 3D Components and Materials stay in the compact Library dock. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode {
    font-weight: 400;
  }
}

/* Source: release-698.css */
/* Release 698: Library editors dismiss with the shared 3D outside-tap behavior. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode {
    font-weight: 400;
  }
}

/* Source: release-699.css */
/* Release 699: Switching Library tabs clears the previous inline editor. */
@media (max-width: 1024px) {
  body.preview3d-open .preview3d-placement-mode {
    font-weight: 400;
  }
}

/* Source: release-700.css */
/* Release 700: keep the desktop 3D shell contained while preserving the approved iPhone layout. */
@media (min-width: 1025px) {
  body.preview3d-open {
    --preview3d-bottom-sheet-height: clamp(320px, 38dvh, 360px) !important;
  }

  body.preview3d-open #preview3dModal,
  body.preview3d-open .preview3d-surface {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-surface {
    grid-template-rows: 96px minmax(0, 1fr) var(--preview3d-bottom-sheet-height) !important;
  }

  body.preview3d-open .preview3d-build-tools {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    grid-template-rows: 8px 34px 44px minmax(0, 1fr) 56px !important;
    min-height: var(--preview3d-bottom-sheet-height) !important;
    height: var(--preview3d-bottom-sheet-height) !important;
    max-height: var(--preview3d-bottom-sheet-height) !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-sheet-handle { grid-row: 1 !important; }
  body.preview3d-open .preview3d-sheet-header { grid-row: 2 !important; }
  body.preview3d-open .preview3d-placement-mode { grid-row: 3 !important; }

  body.preview3d-open .preview3d-dock-content {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-bottom-tabs {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 56px !important;
    height: 56px !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-bottom-tabs button {
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    font-weight: 400 !important;
  }

  body.preview3d-open .preview3d-dock-panel.is-active:not([hidden]) {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  body.preview3d-open .preview3d-dock-section-intro,
  body.preview3d-open .preview3d-library-selection {
    display: none !important;
  }

  body.preview3d-open .preview3d-model-tool-strip,
  body.preview3d-open .preview3d-create-family-tabs,
  body.preview3d-open .preview3d-style-command-bar,
  body.preview3d-open .preview3d-library-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    min-height: 40px !important;
    height: 40px !important;
    background: #fbfcfd !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"].is-active:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body.preview3d-open .preview3d-model-tool-strip { flex: 0 0 40px !important; }
  body.preview3d-open .preview3d-model-layer-section {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.preview3d-open .preview3d-dock-layer-list {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="create"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }
  body.preview3d-open .preview3d-create-family.is-active,
  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="style"].is-active:not([hidden]) {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="library"].is-active:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body.preview3d-open .preview3d-library-tabs { flex: 0 0 40px !important; }
  body.preview3d-open .preview3d-library-view.is-active:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.preview3d-open.preview3d-dock-collapsed {
    --preview3d-bottom-sheet-height: 56px !important;
  }
  body.preview3d-open.preview3d-dock-collapsed .preview3d-build-tools {
    grid-template-rows: 56px !important;
  }
  body.preview3d-open.preview3d-dock-collapsed .preview3d-bottom-tabs { grid-row: 1 !important; }
}

/* Source: release-701.css */
/* Release 701: readable desktop 3D Library cards within the contained dock. */
@media (min-width: 1025px) {
  body.preview3d-open .preview3d-inline-assets {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  body.preview3d-open .preview3d-inline-assets > button {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 60px !important;
    padding: 6px !important;
  }

  body.preview3d-open .preview3d-inline-assets .preview3d-component-preview,
  body.preview3d-open .preview3d-inline-assets .preview3d-material-swatch {
    width: 38px !important;
    height: 38px !important;
  }

  body.preview3d-open .preview3d-inline-material-copy,
  body.preview3d-open .preview3d-inline-component-copy {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  body.preview3d-open .preview3d-inline-material-copy > span,
  body.preview3d-open .preview3d-inline-material-copy > small,
  body.preview3d-open .preview3d-inline-component-copy > span,
  body.preview3d-open .preview3d-inline-component-copy > small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
  }
}

/* Source: release-702.css */
/* Release 702: desktop 3D dock header matches the approved compact mobile sheet. */
@media (min-width: 1025px) {
  body.preview3d-open .preview3d-sheet-handle {
    align-self: center !important;
    width: 32px !important;
    height: 3px !important;
  }

  body.preview3d-open .preview3d-sheet-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    align-items: center !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px 0 12px !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.09) !important;
  }

  body.preview3d-open .preview3d-sheet-context { display: none !important; }
  body.preview3d-open .preview3d-sheet-header h2 {
    margin: 0 !important;
    color: #202832 !important;
    font: 400 15px/18px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  body.preview3d-open #preview3dDockClose {
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
  }

  body.preview3d-open #preview3dDockClose img {
    width: 17px !important;
    height: 17px !important;
  }
}

/* Source: release-703.css */
/* Release 703: keep 3D interaction dismissal keyboard-only; approved chrome is unchanged. */

/* Source: release-704.css */
/* Release 704: extend existing 3D keyboard dismissal to the full workspace. */

/* Source: release-705.css */
/* Release 705: add keyboard viewport actions without changing approved 3D chrome. */

/* Source: release-706.css */
/* Release 706: keep wall placement on the active level and refresh the selected 3D object. */

/* Source: release-707.css */
/* Release 707: keep every 3D dock header as a title plus one compact sticky tool row. */
body.preview3d-open .preview3d-build-summary small,
body.preview3d-open .preview3d-dock-section-intro,
body.preview3d-open .preview3d-style-selection small,
body.preview3d-open .preview3d-active-mode small,
body.preview3d-open .preview3d-library-selection {
  display: none !important;
}

body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-build-summary {
  flex: 0 0 30px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
}

/* Source: release-708.css */
/* Release 708: deliver the current editor shell without changing the approved navigation. */

/* Source: release-709.css */
/* Release 709: PDF-page graphics join the existing Photo and Vector Make 3D workflow. */

/* Source: release-710.css */
/* Release 710: converted Photo, Vector, and PDF layers keep their source identity in 2D and 3D lists. */

/* Source: release-711.css */
/* Release 711: source labels use each conversion's saved identity across artboard changes. */

/* Source: release-712.css */
/* Release 712: the 3D-to-2D handoff uses each object's saved Photo, Vector, or PDF source. */

/* Source: release-713.css */
/* Release 713: 3D scene icons match each converted Photo, Vector, or PDF source. */

/* Source: release-714.css */
/* Release 714: remove the empty placement track whenever no 3D object is being placed. */
@media (max-width: 1024px) {
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(#preview3dPlacementMode[hidden]) {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(#preview3dPlacementMode[hidden]) .preview3d-dock-content {
    grid-row: 3 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(#preview3dPlacementMode[hidden]) .preview3d-bottom-tabs {
    grid-row: 4 !important;
  }
}

/* Source: release-715.css */
/* Release 715: the 3D sheet reserves placement space only while an object is being placed. */
@media (max-width: 1024px) {
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-sheet-handle {
    grid-row: 1 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-sheet-header {
    grid-row: 2 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-content {
    grid-row: 3 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-bottom-tabs {
    grid-row: 4 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-build-tools {
    grid-template-rows: 8px 34px 44px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-placement-mode {
    grid-row: 3 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-dock-content {
    grid-row: 4 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-bottom-tabs {
    grid-row: 5 !important;
  }
}

/* Source: release-716.css */
/* Release 716: the 3D sheet reserves placement space only while an object is being placed. */
@media (max-width: 1024px) {
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-sheet-handle {
    grid-row: 1 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-sheet-header {
    grid-row: 2 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-content {
    grid-row: 3 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-bottom-tabs {
    grid-row: 4 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-build-tools {
    grid-template-rows: 8px 34px 44px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-placement-mode {
    grid-row: 3 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-dock-content {
    grid-row: 4 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-bottom-tabs {
    grid-row: 5 !important;
  }

  /* A hidden row wins over a stale interaction class, so the sticky controls sit directly below the header. */
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(.preview3d-placement-mode[hidden]) {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(.preview3d-placement-mode[hidden]) .preview3d-sheet-handle {
    grid-row: 1 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(.preview3d-placement-mode[hidden]) .preview3d-sheet-header {
    grid-row: 2 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(.preview3d-placement-mode[hidden]) .preview3d-dock-content {
    grid-row: 3 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(.preview3d-placement-mode[hidden]) .preview3d-bottom-tabs {
    grid-row: 4 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(.preview3d-placement-mode:not([hidden])) {
    grid-template-rows: 8px 34px 44px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(.preview3d-placement-mode:not([hidden])) .preview3d-placement-mode {
    grid-row: 3 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(.preview3d-placement-mode:not([hidden])) .preview3d-dock-content {
    grid-row: 4 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) .preview3d-build-tools:has(.preview3d-placement-mode:not([hidden])) .preview3d-bottom-tabs {
    grid-row: 5 !important;
  }
}

/* Keep the mobile sheet geometry tied to the runtime placement state, not child visibility. */
@media (max-width: 1024px) {
  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement {
    grid-template-rows: 8px 34px 44px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-placement-mode {
    grid-row: 3 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-dock-content {
    grid-row: 4 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-bottom-tabs {
    grid-row: 5 !important;
  }
}

/* Source: release-717.css */
/* Release 717: the 3D Model sheet begins with its sticky command row. */
@media (max-width: 1024px) {
  /*
   * The selection is already clear in the highlighted Scene layers row. Keeping
   * a second summary above the commands created an empty-looking band on iPhone.
   */
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-build-summary {
    display: none !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-model-tool-strip {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(26, 35, 46, 0.09) !important;
    background: #fbfcfd !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-model-layer-section {
    grid-row: 2 !important;
    min-height: 0 !important;
  }
}

/* Source: release-718.css */
/* Release 718: every 3D category starts directly with its one sticky command row. */
@media (max-width: 1024px) {
  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement {
    grid-template-rows: 8px 34px 44px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-sheet-handle {
    grid-row: 1 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-sheet-header {
    grid-row: 2 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-dock-content {
    grid-row: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-placement-mode {
    grid-row: 3 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-dock-content {
    grid-row: 4 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-bottom-tabs {
    grid-row: 4 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-bottom-tabs {
    grid-row: 5 !important;
  }

  /* Older releases added pseudo headings before each panel; the sheet title already names the category. */
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel::before {
    display: none !important;
    content: none !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-build-summary {
    display: none !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-model-tool-strip {
    grid-row: 1 !important;
    margin: 0 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-model-layer-section {
    grid-row: 2 !important;
    margin: 0 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="create"].is-active:not([hidden]) .preview3d-create-family-tabs,
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="style"].is-active:not([hidden]) .preview3d-style-command-bar,
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="library"].is-active:not([hidden]) .preview3d-library-tabs {
    margin-top: 0 !important;
  }
}

/* Source: release-719.css */
/* Release 719: every 3D category starts directly with its one sticky command row. */
@media (max-width: 1024px) {
  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement {
    grid-template-rows: 8px 34px 44px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-sheet-handle {
    grid-row: 1 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-sheet-header {
    grid-row: 2 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-dock-content {
    grid-row: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-placement-mode {
    grid-row: 3 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-dock-content {
    grid-row: 4 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-bottom-tabs {
    grid-row: 4 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-bottom-tabs {
    grid-row: 5 !important;
  }

  /* Older releases added pseudo headings before each panel; the sheet title already names the category. */
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel::before {
    display: none !important;
    content: none !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-build-summary {
    display: none !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-model-tool-strip {
    grid-row: 1 !important;
    margin: 0 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-model-layer-section {
    grid-row: 2 !important;
    margin: 0 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="create"].is-active:not([hidden]) .preview3d-create-family-tabs,
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="style"].is-active:not([hidden]) .preview3d-style-command-bar,
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="library"].is-active:not([hidden]) .preview3d-library-tabs {
    margin-top: 0 !important;
  }
}


/* Project library */
.project-library-screen {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  grid-template-rows: 58px 56px minmax(0, 1fr);
  overflow: hidden;
  background: #f4f5f7;
  color: #1b2026;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}

.project-library-screen[hidden] { display: none; }

.project-library-header,
.project-library-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #d9dde2;
  background: #fff;
}

.project-library-header { justify-content: space-between; }
.project-library-brand,
.project-library-header-actions,
.project-card-details { display: flex; align-items: center; }
.project-library-brand { gap: 9px; font-size: 18px; }
.project-library-brand img { width: 30px; height: 30px; }
.project-library-brand strong,
.project-card-copy strong,
.project-library-empty strong { font-weight: 500; }
.project-library-header-actions { gap: 6px; }

.project-library-header button,
.project-library-controls select,
.project-library-folders button,
.project-card-more,
.project-card-menu button {
  min-height: 36px;
  border: 1px solid #d6dae0;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
}

.project-library-header button { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; }
.project-library-header button img,
.project-library-search img,
.project-library-folders img,
.project-card-more img { width: 18px; height: 18px; }
.project-library-header .project-library-primary { border-color: #1477d4; background: #1477d4; color: #fff; }
.project-library-header .project-library-primary img { filter: brightness(0) invert(1); }
.project-library-header .project-library-icon-button { width: 36px; justify-content: center; padding: 0; }

.project-library-controls { justify-content: space-between; }
.project-library-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(520px, 70%);
  height: 36px;
  padding: 0 10px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  background: #fff;
}
.project-library-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font: inherit; }
.project-library-controls select { padding: 0 30px 0 10px; }

.project-library-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 0; }
.project-library-folders { display: flex; flex-direction: column; padding: 14px 10px; border-right: 1px solid #d9dde2; background: #fff; }
.project-library-folders nav { display: grid; gap: 3px; }
.project-library-folders button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 0 10px; border-color: transparent; text-align: left; }
.project-library-folders button.is-active { background: #e4f0fc; color: #075da8; }
.project-library-folders output { color: #717982; font-size: 12px; }
.project-library-folders small { margin-top: auto; padding: 10px; color: #69717a; line-height: 1.4; }
.project-library-content { min-width: 0; overflow: auto; padding: 20px; }
.project-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; align-items: start; }
.project-card { position: relative; min-width: 0; border: 1px solid #d8dce1; border-radius: 7px; background: #fff; overflow: visible; }
.project-card:focus-within { border-color: #1477d4; box-shadow: 0 0 0 2px rgba(20, 119, 212, .14); }
.project-card-preview { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; border-radius: 6px 6px 0 0; background: #e9ebee; }
.project-card-preview > img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.project-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: #edf0f3; }
.project-card-placeholder img { width: 44px; height: 44px; opacity: .55; }
.project-device-badge { position: absolute; left: 7px; bottom: 7px; padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,.92); color: #4f5861; font-size: 10px; }
.project-card-details { min-height: 57px; gap: 8px; padding: 8px 7px 8px 10px; }
.project-card-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.project-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.project-card-copy small { color: #707781; font-size: 11px; }
.project-card-more { width: 34px; min-height: 34px; padding: 0; border-color: transparent; }
.project-card-menu { position: absolute; z-index: 5; right: 7px; top: calc(100% - 10px); display: grid; width: 156px; padding: 5px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; box-shadow: 0 8px 22px rgba(20, 27, 35, .18); }
.project-card-menu[hidden] { display: none; }
.project-card-menu button { min-height: 32px; padding: 0 9px; border-color: transparent; text-align: left; }
.project-card-menu button:hover { background: #edf4fb; }
.project-library-empty { place-items: center; gap: 8px; min-height: 55vh; color: #68717a; text-align: center; }
.project-library-empty:not([hidden]) { display: grid; }
.project-library-empty img { width: 52px; height: 52px; opacity: .48; }

@media (max-width: 700px) {
  .project-library-screen { grid-template-rows: 54px 52px minmax(0, 1fr); }
  .project-library-header,
  .project-library-controls { padding-inline: 10px; }
  .project-library-brand strong { font-size: 16px; }
  .project-library-header-actions button span { display: none; }
  .project-library-header-actions button { width: 36px; justify-content: center; padding: 0; }
  .project-library-layout { grid-template-columns: 1fr; }
  .project-library-folders { display: block; overflow-x: auto; padding: 7px 10px; border-right: 0; border-bottom: 1px solid #d9dde2; }
  .project-library-folders nav { display: flex; width: max-content; }
  .project-library-folders button { grid-template-columns: 18px auto auto; width: auto; min-height: 34px; white-space: nowrap; }
  .project-library-folders small { display: none; }
  .project-library-layout { grid-template-rows: 49px minmax(0, 1fr); }
  .project-library-content { padding: 12px 10px 24px; }
  .project-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .project-library-search { width: min(62%, 360px); }
  .project-library-controls select { min-width: 0; max-width: 38%; }
  .project-card-details { min-height: 54px; padding-left: 8px; }
  .project-card-menu { position: fixed; right: 12px; bottom: 12px; top: auto; width: min(220px, calc(100vw - 24px)); }
}

/* Compact project commands remain fully visible on iPhone. */
.project-library-screen {
  grid-template-rows: 54px 46px 52px minmax(0, 1fr);
}
.project-library-header { padding-inline: 14px; }
.project-library-header > .project-library-icon-button { display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0; }
.project-library-command-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid #d9dde2;
  background: #fff;
}
.project-library-command-bar button {
  display: grid;
  grid-template-columns: 18px auto;
  place-content: center;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 45px;
  padding: 0 6px;
  border: 0;
  border-right: 1px solid #e0e3e7;
  border-radius: 0;
  background: #fff;
  color: #1b2026;
  font: inherit;
  font-size: 12px;
}
.project-library-command-bar button:last-child { border-right: 0; }
.project-library-command-bar button:disabled { color: #9ba1a8; opacity: .58; }
.project-library-command-bar img { width: 18px; height: 18px; }
.project-folder-heading { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 6px 5px 10px; color: #68717a; font-size: 12px; }
.project-folder-heading button { display: grid; place-items: center; width: 30px; min-height: 30px; padding: 0; }
.project-folder-heading img { width: 16px; height: 16px; }
.project-card-select {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 7px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #aab1b9;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
}
.project-card-select img { width: 15px; height: 15px; opacity: 0; }
.project-card.is-selected { border-color: #1477d4; box-shadow: 0 0 0 2px rgba(20,119,212,.16); }
.project-card.is-selected .project-card-select { border-color: #1477d4; background: #1477d4; }
.project-card.is-selected .project-card-select img { opacity: 1; filter: brightness(0) invert(1); }

@media (max-width: 700px) {
  .project-library-screen { grid-template-rows: 50px 44px 48px minmax(0, 1fr); }
  .project-library-brand img { width: 27px; height: 27px; }
  .project-library-command-bar button { grid-template-columns: 1fr; grid-template-rows: 19px 12px; gap: 1px; min-height: 43px; padding: 2px 1px; font-size: 10px; }
  .project-library-command-bar img { justify-self: center; width: 17px; height: 17px; }
  .project-library-layout { grid-template-rows: 46px minmax(0, 1fr); }
  .project-folder-heading { display: none; }
}

@media print {
  body > .app-shell { display: none !important; }
  .project-library-screen { position: static; display: block; background: #fff; }
  .project-library-header,
  .project-library-command-bar,
  .project-library-controls,
  .project-library-folders,
  .project-card-menu,
  .project-card-select,
  .project-card-more { display: none !important; }
  .project-library-layout { display: block; }
  .project-library-content { overflow: visible; padding: 0; }
  .project-library-grid { display: block; }
  .project-library-screen.is-printing-selection .project-card:not(.is-selected) { display: none; }
  .project-card { width: 100%; border: 0; box-shadow: none !important; break-inside: avoid; }
  .project-card-preview { aspect-ratio: auto; min-height: 70vh; background: #fff; }
  .project-card-preview > img { max-height: 75vh; object-fit: contain; }
  .project-device-badge { display: none; }
}

.project-setup-sheet {
  position: fixed;
  z-index: 4100;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 54px;
  width: min(420px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 24px));
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid #cfd4da;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(18, 24, 31, .26);
  color: #1b2026;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}
.project-setup-sheet[hidden] { display: none; }
.project-setup-sheet > header,
.project-setup-sheet > footer { display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid #dce0e5; }
.project-setup-sheet > header { justify-content: space-between; }
.project-setup-sheet > header strong { font-weight: 500; }
.project-setup-sheet > header button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; }
.project-setup-sheet > header img { width: 19px; height: 19px; }
.project-setup-sheet > footer { justify-content: flex-end; gap: 8px; border-top: 1px solid #dce0e5; border-bottom: 0; }
.project-setup-sheet > footer button { min-width: 82px; min-height: 36px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; font: inherit; }
.project-setup-sheet > footer .project-sheet-primary { border-color: #1477d4; background: #1477d4; color: #fff; }
.project-setup-body { display: grid; gap: 12px; overflow: auto; padding: 14px; }
.project-setup-body label { display: grid; gap: 5px; min-width: 0; color: #4f5861; font-size: 12px; }
.project-setup-body input,
.project-setup-body select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #cbd1d7; border-radius: 6px; background: #fff; color: #1b2026; font: inherit; font-size: 14px; }
.project-size-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: end; gap: 8px; }
.project-size-row > button { display: grid; place-items: center; width: 36px; height: 38px; padding: 0; border: 1px solid #cbd1d7; border-radius: 6px; background: #fff; }
.project-size-row > button img { width: 17px; height: 17px; }
.project-setting-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.project-setup-body p { margin: 0; color: #69717a; font-size: 12px; line-height: 1.4; }

@media (max-width: 700px) {
  .project-library-controls { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
  .project-library-search { width: 100%; }
  .project-library-controls select { width: 104px; max-width: none; padding-right: 22px; font-size: 12px; }
  .project-library-command-bar { width: 100%; min-width: 0; overflow: hidden; }
  .project-library-command-bar button { width: auto; overflow: hidden; }
  .project-library-command-bar button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .project-setup-sheet { top: auto; bottom: 0; width: 100%; max-height: min(650px, calc(100dvh - 16px)); transform: translateX(-50%); border-radius: 8px 8px 0 0; }
}

/* Source: release-726.css */
/* Release 726: every 3D category starts directly with its one sticky command row. */
/* The approved 3D layout is preserved while Video becomes a first-class workspace category. */
@media (max-width: 1024px) {
  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement {
    grid-template-rows: 8px 34px 44px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-sheet-handle {
    grid-row: 1 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-sheet-header {
    grid-row: 2 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-dock-content {
    grid-row: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-placement-mode {
    grid-row: 3 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-dock-content {
    grid-row: 4 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) #preview3dBuildTools .preview3d-bottom-tabs {
    grid-row: 4 !important;
  }

  body.preview3d-open.preview3d-placement-active:not(.preview3d-dock-collapsed) #preview3dBuildTools.has-placement .preview3d-bottom-tabs {
    grid-row: 5 !important;
  }

  /* Older releases added pseudo headings before each panel; the sheet title already names the category. */
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel::before {
    display: none !important;
    content: none !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-build-summary {
    display: none !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"].is-active:not([hidden]) {
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-model-tool-strip {
    grid-row: 1 !important;
    margin: 0 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="model"] .preview3d-model-layer-section {
    grid-row: 2 !important;
    margin: 0 !important;
  }

  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="create"].is-active:not([hidden]) .preview3d-create-family-tabs,
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="style"].is-active:not([hidden]) .preview3d-style-command-bar,
  body.preview3d-open:not(.preview3d-dock-collapsed) .preview3d-dock-panel[data-3d-dock-panel="library"].is-active:not([hidden]) .preview3d-library-tabs {
    margin-top: 0 !important;
  }
}


/* Project library */
.project-library-screen {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  grid-template-rows: 58px 56px minmax(0, 1fr);
  overflow: hidden;
  background: #f4f5f7;
  color: #1b2026;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}

.project-library-screen[hidden] { display: none; }

.project-library-header,
.project-library-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #d9dde2;
  background: #fff;
}

.project-library-header { justify-content: space-between; }
.project-library-brand,
.project-library-header-actions,
.project-card-details { display: flex; align-items: center; }
.project-library-brand { gap: 9px; font-size: 18px; }
.project-library-brand img { width: 30px; height: 30px; }
.project-library-brand strong,
.project-card-copy strong,
.project-library-empty strong { font-weight: 500; }
.project-library-header-actions { gap: 6px; }

.project-library-header button,
.project-library-controls select,
.project-library-folders button,
.project-card-more,
.project-card-menu button {
  min-height: 36px;
  border: 1px solid #d6dae0;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
}

.project-library-header button { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; }
.project-library-header button img,
.project-library-search img,
.project-library-folders img,
.project-card-more img { width: 18px; height: 18px; }
.project-library-header .project-library-primary { border-color: #1477d4; background: #1477d4; color: #fff; }
.project-library-header .project-library-primary img { filter: brightness(0) invert(1); }
.project-library-header .project-library-icon-button { width: 36px; justify-content: center; padding: 0; }

.project-library-controls { justify-content: space-between; }
.project-library-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(520px, 70%);
  height: 36px;
  padding: 0 10px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  background: #fff;
}
.project-library-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font: inherit; }
.project-library-controls select { padding: 0 30px 0 10px; }

.project-library-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 0; }
.project-library-folders { display: flex; flex-direction: column; padding: 14px 10px; border-right: 1px solid #d9dde2; background: #fff; }
.project-library-folders nav { display: grid; gap: 3px; }
.project-library-folders button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 0 10px; border-color: transparent; text-align: left; }
.project-library-folders button.is-active { background: #e4f0fc; color: #075da8; }
.project-library-folders output { color: #717982; font-size: 12px; }
.project-library-folders small { margin-top: auto; padding: 10px; color: #69717a; line-height: 1.4; }
.project-library-content { min-width: 0; overflow: auto; padding: 20px; }
.project-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; align-items: start; }
.project-card { position: relative; min-width: 0; border: 1px solid #d8dce1; border-radius: 7px; background: #fff; overflow: visible; }
.project-card:focus-within { border-color: #1477d4; box-shadow: 0 0 0 2px rgba(20, 119, 212, .14); }
.project-card-preview { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; border-radius: 6px 6px 0 0; background: #e9ebee; }
.project-card-preview > img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.project-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: #edf0f3; }
.project-card-placeholder img { width: 44px; height: 44px; opacity: .55; }
.project-device-badge { position: absolute; left: 7px; bottom: 7px; padding: 3px 6px; border-radius: 4px; background: rgba(255,255,255,.92); color: #4f5861; font-size: 10px; }
.project-card-details { min-height: 57px; gap: 8px; padding: 8px 7px 8px 10px; }
.project-card-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.project-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.project-card-copy small { color: #707781; font-size: 11px; }
.project-card-more { width: 34px; min-height: 34px; padding: 0; border-color: transparent; }
.project-card-menu { position: absolute; z-index: 5; right: 7px; top: calc(100% - 10px); display: grid; width: 156px; padding: 5px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; box-shadow: 0 8px 22px rgba(20, 27, 35, .18); }
.project-card-menu[hidden] { display: none; }
.project-card-menu button { min-height: 32px; padding: 0 9px; border-color: transparent; text-align: left; }
.project-card-menu button:hover { background: #edf4fb; }
.project-library-empty { place-items: center; gap: 8px; min-height: 55vh; color: #68717a; text-align: center; }
.project-library-empty:not([hidden]) { display: grid; }
.project-library-empty img { width: 52px; height: 52px; opacity: .48; }

@media (max-width: 700px) {
  .project-library-screen { grid-template-rows: 54px 52px minmax(0, 1fr); }
  .project-library-header,
  .project-library-controls { padding-inline: 10px; }
  .project-library-brand strong { font-size: 16px; }
  .project-library-header-actions button span { display: none; }
  .project-library-header-actions button { width: 36px; justify-content: center; padding: 0; }
  .project-library-layout { grid-template-columns: 1fr; }
  .project-library-folders { display: block; overflow-x: auto; padding: 7px 10px; border-right: 0; border-bottom: 1px solid #d9dde2; }
  .project-library-folders nav { display: flex; width: max-content; }
  .project-library-folders button { grid-template-columns: 18px auto auto; width: auto; min-height: 34px; white-space: nowrap; }
  .project-library-folders small { display: none; }
  .project-library-layout { grid-template-rows: 49px minmax(0, 1fr); }
  .project-library-content { padding: 12px 10px 24px; }
  .project-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .project-library-search { width: min(62%, 360px); }
  .project-library-controls select { min-width: 0; max-width: 38%; }
  .project-card-details { min-height: 54px; padding-left: 8px; }
  .project-card-menu { position: fixed; right: 12px; bottom: 12px; top: auto; width: min(220px, calc(100vw - 24px)); }
}

/* The header overflow is a compact document menu, separate from the tool drawer. */
.document-options-menu {
  position: fixed;
  z-index: 240;
  top: 54px;
  right: 6px;
  width: min(304px, calc(100vw - 12px));
  max-height: calc(100dvh - 64px);
  overflow: auto;
  padding: 0 12px 12px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  background: #fff;
  color: #1b2026;
  box-shadow: 0 8px 24px rgba(20, 28, 36, .16);
}
.document-options-menu[hidden] { display: none !important; }
.document-options-menu > header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 43px;
  margin: 0 -12px 10px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid #dce0e5;
  background: #fff;
}
.document-options-menu > header strong { font-size: 15px; font-weight: 500; }
.document-options-menu > header button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; }
.document-options-menu > header img,
.document-menu-commands img,
.document-menu-size button img { width: 18px; height: 18px; }
.document-options-menu > label,
.document-menu-size label { display: grid; gap: 4px; min-width: 0; margin-bottom: 9px; color: #56606a; font-size: 11px; font-weight: 400; }
.document-options-menu label b { font-weight: 400; }
.document-options-menu select,
.document-options-menu input { width: 100%; min-width: 0; height: 36px; padding: 0 9px; border: 1px solid #cbd1d7; border-radius: 5px; background: #fff; color: #1b2026; font: inherit; font-size: 13px; }
.document-menu-size { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 8px; }
.document-menu-size > button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 36px; margin-bottom: 9px; padding: 0 8px; border: 1px solid #cbd1d7; border-radius: 5px; background: #f7f8f9; color: #1b2026; font: inherit; font-size: 12px; }
.document-menu-commands { display: grid; border-top: 1px solid #dce0e5; }
.document-menu-commands button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; border: 0; border-bottom: 1px solid #edf0f2; background: transparent; color: #1b2026; font: inherit; font-size: 13px; text-align: left; }
.document-menu-commands button:last-child { border-bottom: 0; }

/* Video and GIF editing stays attached to the active artboard. */
.artboard-media-timeline {
  position: fixed;
  z-index: 185;
  left: 50%;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 92px));
  max-height: min(246px, calc(100dvh - 170px));
  overflow: auto;
  transform: translateX(-50%);
  border: 1px solid #cfd4da;
  border-radius: 6px;
  background: #fff;
  color: #1b2026;
  box-shadow: 0 8px 24px rgba(20, 28, 36, .18);
}
.artboard-media-timeline[hidden] { display: none !important; }
.artboard-media-timeline > header { display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; min-height: 40px; padding: 0 5px 0 10px; border-bottom: 1px solid #dce0e5; }
.artboard-media-timeline > header strong { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.artboard-media-timeline > header output { color: #66707a; font-size: 11px; font-variant-numeric: tabular-nums; }
.artboard-media-timeline > header button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; }
.artboard-media-timeline > header img { width: 18px; height: 18px; }
.artboard-media-track { position: relative; height: 37px; margin: 0 10px; }
.artboard-media-track::before { content: ""; position: absolute; inset: 16px 0 auto; height: 5px; border-radius: 2px; background: #dfe3e7; }
.artboard-media-trim-range { position: absolute; z-index: 1; top: 16px; height: 5px; border-radius: 2px; background: #1477d4; pointer-events: none; }
.artboard-media-track input { position: absolute; z-index: 2; inset: 4px 0 auto; width: 100%; height: 28px; margin: 0; background: transparent; }
.artboard-media-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(48px, 1fr); overflow-x: auto; border-top: 1px solid #edf0f2; border-bottom: 1px solid #dce0e5; }
.artboard-media-actions button { display: grid; grid-template-rows: 21px 12px; place-items: center; min-width: 48px; height: 48px; padding: 5px 2px 3px; border: 0; border-right: 1px solid #edf0f2; background: #fff; color: #1b2026; font: inherit; font-size: 9px; }
.artboard-media-actions img { width: 18px; height: 18px; }
.artboard-media-actions button:disabled { opacity: .38; }
.artboard-media-settings { display: grid; grid-template-columns: 88px 110px minmax(130px, 1fr); gap: 8px; padding: 8px 10px 10px; }
.artboard-media-settings label { display: grid; gap: 3px; min-width: 0; color: #66707a; font-size: 9px; }
.artboard-media-settings select { width: 100%; min-width: 0; height: 30px; padding: 0 6px; border: 1px solid #cbd1d7; border-radius: 4px; background: #fff; color: #1b2026; font: inherit; font-size: 11px; }
.artboard-music-volume { grid-template-columns: minmax(0, 1fr) auto; }
.artboard-music-volume span { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artboard-music-volume input { width: 100%; min-width: 0; }
.artboard-music-volume output { align-self: center; color: #1b2026; font-size: 10px; }

@media (max-width: 700px) {
  .artboard-media-timeline { width: calc(100vw - 12px); bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .artboard-media-settings { grid-template-columns: 72px 92px minmax(110px, 1fr); gap: 6px; padding-inline: 7px; }
}

/* Compact project commands remain fully visible on iPhone. */
.project-library-screen {
  grid-template-rows: 54px 46px 52px minmax(0, 1fr);
}
.project-library-header { padding-inline: 14px; }
.project-library-header > .project-library-icon-button { display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0; }
.project-library-command-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid #d9dde2;
  background: #fff;
}
.project-library-command-bar button {
  display: grid;
  grid-template-columns: 18px auto;
  place-content: center;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 45px;
  padding: 0 6px;
  border: 0;
  border-right: 1px solid #e0e3e7;
  border-radius: 0;
  background: #fff;
  color: #1b2026;
  font: inherit;
  font-size: 12px;
}
.project-library-command-bar button:last-child { border-right: 0; }
.project-library-command-bar button:disabled { color: #9ba1a8; opacity: .58; }
.project-library-command-bar img { width: 18px; height: 18px; }
.project-folder-heading { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 6px 5px 10px; color: #68717a; font-size: 12px; }
.project-folder-heading button { display: grid; place-items: center; width: 30px; min-height: 30px; padding: 0; }
.project-folder-heading img { width: 16px; height: 16px; }
.project-card-select {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 7px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #aab1b9;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
}
.project-card-select img { width: 15px; height: 15px; opacity: 0; }
.project-card.is-selected { border-color: #1477d4; box-shadow: 0 0 0 2px rgba(20,119,212,.16); }
.project-card.is-selected .project-card-select { border-color: #1477d4; background: #1477d4; }
.project-card.is-selected .project-card-select img { opacity: 1; filter: brightness(0) invert(1); }

@media (max-width: 700px) {
  .project-library-screen { grid-template-rows: 50px 44px 48px minmax(0, 1fr); }
  .project-library-brand img { width: 27px; height: 27px; }
  .project-library-command-bar button { grid-template-columns: 1fr; grid-template-rows: 19px 12px; gap: 1px; min-height: 43px; padding: 2px 1px; font-size: 10px; }
  .project-library-command-bar img { justify-self: center; width: 17px; height: 17px; }
  .project-library-layout { grid-template-rows: 46px minmax(0, 1fr); }
  .project-folder-heading { display: none; }
}

@media print {
  body > .app-shell { display: none !important; }
  .project-library-screen { position: static; display: block; background: #fff; }
  .project-library-header,
  .project-library-command-bar,
  .project-library-controls,
  .project-library-folders,
  .project-card-menu,
  .project-card-select,
  .project-card-more { display: none !important; }
  .project-library-layout { display: block; }
  .project-library-content { overflow: visible; padding: 0; }
  .project-library-grid { display: block; }
  .project-library-screen.is-printing-selection .project-card:not(.is-selected) { display: none; }
  .project-card { width: 100%; border: 0; box-shadow: none !important; break-inside: avoid; }
  .project-card-preview { aspect-ratio: auto; min-height: 70vh; background: #fff; }
  .project-card-preview > img { max-height: 75vh; object-fit: contain; }
  .project-device-badge { display: none; }
}

.project-setup-sheet {
  position: fixed;
  z-index: 4100;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 54px;
  width: min(420px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 24px));
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1px solid #cfd4da;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(18, 24, 31, .26);
  color: #1b2026;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}
.project-setup-sheet[hidden] { display: none; }
.project-setup-sheet > header,
.project-setup-sheet > footer { display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid #dce0e5; }
.project-setup-sheet > header { justify-content: space-between; }
.project-setup-sheet > header strong { font-weight: 500; }
.project-setup-sheet > header button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; }
.project-setup-sheet > header img { width: 19px; height: 19px; }
.project-setup-sheet > footer { justify-content: flex-end; gap: 8px; border-top: 1px solid #dce0e5; border-bottom: 0; }
.project-setup-sheet > footer button { min-width: 82px; min-height: 36px; border: 1px solid #cfd4da; border-radius: 6px; background: #fff; font: inherit; }
.project-setup-sheet > footer .project-sheet-primary { border-color: #1477d4; background: #1477d4; color: #fff; }
.project-setup-body { display: grid; gap: 12px; overflow: auto; padding: 14px; }
.project-setup-body label { display: grid; gap: 5px; min-width: 0; color: #4f5861; font-size: 12px; }
.project-setup-body input,
.project-setup-body select { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #cbd1d7; border-radius: 6px; background: #fff; color: #1b2026; font: inherit; font-size: 14px; }
.project-size-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: end; gap: 8px; }
.project-size-row > button { display: grid; place-items: center; width: 36px; height: 38px; padding: 0; border: 1px solid #cbd1d7; border-radius: 6px; background: #fff; }
.project-size-row > button img { width: 17px; height: 17px; }
.save-as-size-row > button.is-locked { border-color: #1477d4; background: #eaf4ff; color: #1477d4; }
.save-as-size-row > button:disabled { border-color: #dfe3e7; background: #f3f4f5; opacity: .55; }
.project-setting-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.project-setup-body p { margin: 0; color: #69717a; font-size: 12px; line-height: 1.4; }

@media (max-width: 700px) {
  .project-library-controls { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
  .project-library-search { width: 100%; }
  .project-library-controls select { width: 104px; max-width: none; padding-right: 22px; font-size: 12px; }
  .project-library-command-bar { width: 100%; min-width: 0; overflow: hidden; }
  .project-library-command-bar button { width: auto; overflow: hidden; }
  .project-library-command-bar button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .project-setup-sheet { top: auto; bottom: 0; width: 100%; max-height: min(650px, calc(100dvh - 16px)); transform: translateX(-50%); border-radius: 8px 8px 0 0; }
}

/* Release 726: compact, rail-aware editing controls. */
.artboard-media-timeline {
  left: max(54px, calc(50% - 280px));
  right: max(46px, calc(50% - 280px));
  width: auto;
  transform: none;
}

.flyout-paragraph-align {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #cbd1d7;
  border-radius: 4px;
}
.flyout-paragraph-align button {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  border-right: 1px solid #dce0e5;
  border-radius: 0;
  background: #fff;
}
.flyout-paragraph-align button:last-child { border-right: 0; }
.flyout-paragraph-align button.is-active { background: #e8f3ff; color: #126fc1; }
.paragraph-align-icon { display: grid; align-content: center; gap: 2px; width: 18px; height: 18px; }
.paragraph-align-icon i { display: block; height: 2px; border-radius: 1px; background: currentColor; }
.paragraph-align-icon.is-left i:nth-child(even),
.paragraph-align-icon.is-right i:nth-child(even) { width: 12px; }
.paragraph-align-icon.is-right i:nth-child(even) { justify-self: end; }
.paragraph-align-icon.is-center i:nth-child(even) { width: 12px; justify-self: center; }

body .tool-flyout .flyout-adjustments {
  gap: 4px !important;
  padding: 6px 7px 7px !important;
}
body .tool-flyout .flyout-adjustments > strong {
  font-size: 11px !important;
  line-height: 14px !important;
}
body .tool-flyout .flyout-adjustments label {
  grid-template-columns: 48px minmax(0, 1fr) 34px !important;
  gap: 5px !important;
  min-height: 27px !important;
  font-size: 10px !important;
  line-height: 13px !important;
}
body .tool-flyout .flyout-adjustments input,
body .tool-flyout .flyout-adjustments select {
  height: 27px !important;
  font-size: 10px !important;
}
body .tool-flyout .flyout-adjustment-actions { gap: 3px !important; }
body .tool-flyout .flyout-adjustment-actions button {
  min-height: 38px !important;
  grid-template-rows: 18px 11px !important;
  padding: 3px 1px !important;
  border-radius: 4px !important;
  font-size: 9px !important;
}
body .tool-flyout .flyout-adjustment-actions button img { width: 16px !important; height: 16px !important; }
body .tool-flyout .flyout-disclosure > summary {
  min-height: 30px !important;
  padding-block: 4px !important;
  font-size: 10px !important;
}
body .tool-flyout .flyout-mini-status { margin: 1px 0 0 !important; padding: 4px 0 0 !important; font-size: 9px !important; line-height: 12px !important; }

@media (max-width: 700px) {
  .artboard-media-timeline {
    left: 56px;
    right: 43px;
    width: auto;
    max-height: min(218px, calc(100dvh - 170px));
  }
  .artboard-media-timeline > header { min-height: 34px; }
  .artboard-media-track { height: 30px; }
  .artboard-media-track::before,
  .artboard-media-trim-range { top: 13px; }
  .artboard-media-track input { inset-block-start: 1px; }
  .artboard-media-actions button { height: 42px; grid-template-rows: 18px 11px; min-width: 43px; padding-block: 4px 2px; }
  .artboard-media-actions img { width: 16px; height: 16px; }
  .artboard-media-settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; padding: 5px 6px 7px; }
  .artboard-media-settings select { height: 27px; }
  .artboard-music-volume { grid-column: 1 / -1; }
}

/* Source: release-727.css */
/* Release 727: compact inspectors and an editable layered media timeline. */
@media (max-width: 700px) {
  .layers .adobe-layer-toolbar,
  .layers .style-section-nav,
  .layers .artboard-view-toggles,
  .layers .library-section-tabs {
    position: sticky !important;
    z-index: 18 !important;
    top: 0 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(44px, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .layers .adobe-layer-toolbar::-webkit-scrollbar,
  .layers .style-section-nav::-webkit-scrollbar,
  .layers .artboard-view-toggles::-webkit-scrollbar,
  .layers .library-section-tabs::-webkit-scrollbar { display: none; }
  .layers .adobe-layer-toolbar button,
  .layers .style-section-nav button,
  .layers .artboard-view-toggles button,
  .layers .library-section-tabs button {
    min-width: 44px !important;
    height: 42px !important;
    padding: 3px 2px !important;
    gap: 1px !important;
    font: 400 8px/10px inherit !important;
  }
  .layers .adobe-layer-toolbar img,
  .layers .style-section-nav img,
  .layers .artboard-view-toggles img,
  .layers .library-section-tabs img { width: 16px !important; height: 16px !important; }
  .inspector-view .panel.controls,
  .inspector-view .style-section,
  .inspector-view .library-section { gap: 6px !important; padding: 7px 9px !important; }
  .inspector-view .button-row { gap: 4px !important; }
  .inspector-view .button-row button { min-height: 34px !important; padding: 4px !important; }
  .artboard-media-timeline { max-height: min(282px, calc(100dvh - 156px)); }
}

.artboard-media-ruler { display: flex; justify-content: space-between; padding: 3px 8px 2px 49px; color: #7b838c; font-size: 8px; font-variant-numeric: tabular-nums; }
.artboard-media-range-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 3px 6px; border-top: 1px solid #edf0f2; color: #68717a; font-size: 8px; }
.artboard-media-range-readout span { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.artboard-media-range-readout output { color: #1b2026; font-variant-numeric: tabular-nums; }
.artboard-media-tracks { display: grid; border-top: 1px solid #e4e7ea; }
.artboard-media-track-row { display: grid; grid-template-columns: 43px minmax(0, 1fr); min-height: 31px; border-bottom: 1px solid #e4e7ea; }
.artboard-media-track-label { display: grid; place-items: center; border-right: 1px solid #e4e7ea; color: #5d6670; font-size: 8px; }
.artboard-media-track { position: relative; height: 30px; margin: 0 6px; }
.artboard-media-track::before { top: 10px; height: 10px; border-radius: 2px; background: #dfe3e7; }
.artboard-media-trim-range { top: 10px; height: 10px; border-radius: 2px; }
.artboard-media-track > input[type="range"] { position: absolute; inset: 1px 0 auto; width: 100%; height: 28px; margin: 0; background: transparent; }
.artboard-media-track > #artboardMediaScrubber { z-index: 5; pointer-events: auto; }
.artboard-media-range-handle { z-index: 6 !important; pointer-events: none; }
.artboard-media-range-handle::-webkit-slider-thumb { width: 14px; height: 24px; border: 2px solid #fff; border-radius: 3px; background: #1477d4; box-shadow: 0 0 0 1px #1477d4; pointer-events: auto; appearance: none; }
.artboard-media-range-handle::-moz-range-thumb { width: 12px; height: 22px; border: 2px solid #fff; border-radius: 3px; background: #1477d4; box-shadow: 0 0 0 1px #1477d4; pointer-events: auto; }
.artboard-media-track > #artboardMediaScrubber::-webkit-slider-thumb { width: 2px; height: 25px; border: 0; border-radius: 0; background: #111; appearance: none; }
.artboard-media-audio-range { align-self: center; height: 16px; margin: 0 6px; overflow: hidden; border-radius: 2px; background: repeating-linear-gradient(90deg, #d8ecdf 0 3px, #b9d9c4 3px 4px); color: #315b40; font-size: 8px; line-height: 16px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.artboard-media-actions { grid-auto-columns: 43px; scrollbar-width: thin; }
.artboard-media-actions button { min-width: 43px; height: 40px; grid-template-rows: 17px 10px; padding: 3px 1px 2px; }
.artboard-media-actions img { width: 15px; height: 15px; }
.artboard-media-settings { padding-block: 4px 6px; }

/* Source: release-728.css */
/* Release 728: CapCut-like track focus and Linearity-like compact inspectors. */
.artboard-media-track-viewport { --timeline-zoom: 1; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.artboard-media-track-content { width: calc(100% * var(--timeline-zoom)); min-width: 100%; }
.artboard-media-trim-range { overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 16px, rgba(0,0,0,.05) 16px 17px), #1477d4; box-shadow: inset 0 0 0 1px rgba(0,64,128,.24); }
.artboard-media-track-row.is-audio .artboard-media-audio-range { background: repeating-linear-gradient(90deg, #d8ecdf 0 4px, #a9cfb6 4px 5px, #d8ecdf 5px 8px); }
.artboard-timeline-zoom { grid-template-columns: minmax(0, 1fr) 34px !important; }
.artboard-timeline-zoom span { grid-column: 1 / -1; }
.artboard-timeline-zoom input { width: 100%; min-width: 0; }
.artboard-timeline-zoom output { align-self: center; color: #1b2026; font-size: 10px; }
@media (max-width: 700px) {
  .layers .style-section-nav,
  .layers .artboard-view-toggles,
  .layers .library-section-tabs,
  .layers .adobe-layer-toolbar { background: #fff !important; border: 0 !important; border-bottom: 1px solid #d9dde2 !important; box-shadow: none !important; }
  .layers .style-section-nav button,
  .layers .artboard-view-toggles button,
  .layers .library-section-tabs button,
  .layers .adobe-layer-toolbar button { position: relative; min-width: 48px !important; border: 0 !important; border-right: 1px solid #edf0f2 !important; border-radius: 0 !important; background: #fff !important; }
  .layers .style-section-nav button.is-active::after,
  .layers .library-section-tabs button.is-active::after,
  .layers .adobe-layer-toolbar button.is-active::after { content: ""; position: absolute; inset: auto 5px 0; height: 2px; background: #1477d4; }
  .layers .panel > h2,
  .layers .panel-heading,
  .layers .mini-status { margin-block: 2px !important; }
  .artboard-media-settings { grid-template-columns: minmax(0, 1.3fr) 72px 92px !important; }
  .artboard-music-volume { grid-column: 1 / -1; }
}

/* Source: release-729.css */
/* Release 729: movable layered timeline and denser mobile Style inspector. */
.artboard-media-trim-range { pointer-events: auto !important; cursor: grab; touch-action: none; min-width: 12px; }
.artboard-media-trim-range.is-dragging,
.artboard-media-layer-clip.is-dragging { cursor: grabbing; }
.artboard-media-layer-tracks { display: contents; }
.artboard-media-layer-lane { position: relative; min-width: 0; height: 31px; overflow: hidden; }
.artboard-media-layer-clip { position: absolute; z-index: 2; top: 7px; height: 17px; min-width: 12px; overflow: hidden; border: 1px solid #6e9f80; border-radius: 2px; background: repeating-linear-gradient(90deg,#d8ecdf 0 8px,#c2dfcc 8px 9px); color: #25362c; font: inherit; font-size: 8px; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: grab; touch-action: none; }
.artboard-media-track-row:not(.is-audio) .artboard-media-layer-clip { border-color: #7c9fc7; background: #dbe9f7; color: #20364e; }
.artboard-media-layer-handle { position: absolute; z-index: 3; inset: 1px 0 auto; width: 100%; height: 28px; margin: 0; pointer-events: none; background: transparent; appearance: none; }
.artboard-media-layer-handle::-webkit-slider-thumb { width: 10px; height: 25px; border: 1px solid #1477d4; border-radius: 2px; background: #fff; pointer-events: auto; appearance: none; }
.artboard-media-layer-controls { position: absolute; z-index: 4; inset: 4px 3px auto auto; display: flex; gap: 1px; opacity: .9; }
.artboard-media-layer-controls button { display: grid; width: 21px; height: 22px; padding: 3px; border: 0; border-left: 1px solid #d9dde2; border-radius: 0; background: #fff; place-items: center; }
.artboard-media-layer-controls img { width: 12px; height: 12px; }
.artboard-media-track-empty { grid-column: 1 / -1; margin: 0; padding: 7px 9px; color: #68717b; font-size: 9px; }
@media (max-width: 700px) {
  .layers [data-style-surface] { gap: 3px !important; padding: 5px 8px 10px !important; }
  .layers [data-style-surface] > h2 { display: none !important; }
  .layers [data-style-surface] :is(.style-inspector-section,.font-info-panel,.text-styles-panel,.paragraph-layout-panel,.stroke-options-panel) { margin: 0 !important; border: 0 !important; border-bottom: 1px solid #e1e4e7 !important; border-radius: 0 !important; background: #fff !important; }
  .layers [data-style-surface] :is(.style-inspector-section,.font-info-panel,.text-styles-panel,.paragraph-layout-panel,.stroke-options-panel) > summary { min-height: 32px !important; padding: 6px 2px !important; font-size: 11px !important; font-weight: 500 !important; }
  .layers [data-style-surface] :is(.style-inspector-content,.layer-style-fields,.paragraph-layout-grid,.stroke-options-grid,.quad-grid,.button-row) { gap: 4px !important; padding: 4px 0 6px !important; }
  .layers [data-style-surface] label { min-height: 28px !important; gap: 3px !important; margin: 0 !important; font-size: 9px !important; }
  .layers [data-style-surface] :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]),select,button) { min-height: 28px !important; padding-block: 3px !important; font-size: 10px !important; }
  .layers [data-style-surface] .mini-status { display: none !important; }
  .layers .style-section-nav { min-height: 44px !important; max-height: 44px !important; }
  .layers .style-section-nav button { min-width: 46px !important; height: 43px !important; padding: 3px 4px !important; gap: 1px !important; }
  .layers .style-section-nav button img { width: 15px !important; height: 15px !important; }
  .layers .style-section-nav button span { font-size: 8px !important; }
}

/* Source: release-730.css */
/* Release 730: contextual Style controls and an artboard-attached timeline. */
.canvas-wrap {
  grid-template-rows: max-content max-content;
  align-content: start;
  row-gap: 6px;
}
.artboard-media-timeline {
  position: relative !important;
  z-index: 30;
  inset: auto !important;
  justify-self: center;
  width: min(560px, 100%) !important;
  max-width: 100%;
  max-height: min(230px, calc(100dvh - 170px));
  margin: 0;
  transform: none !important;
  box-shadow: 0 3px 10px rgba(20, 28, 36, .12);
}

/* The sticky row is contextual instead of repeating every Style category. */
.style-section-nav[data-compact-context="type"] button:not([data-style-section="location"]):not([data-style-section="appearance"]):not([data-style-section="fill"]):not([data-style-section="type"]),
.style-section-nav[data-compact-context="photo"] button:not([data-style-section="location"]):not([data-style-section="appearance"]):not([data-style-section="photo"]),
.style-section-nav[data-compact-context="effects"] button:not([data-style-section="appearance"]):not([data-style-section="effects"]),
.style-section-nav[data-compact-context="fill"] button:not([data-style-section="appearance"]):not([data-style-section="fill"]):not([data-style-section="stroke"]),
.style-section-nav[data-compact-context="stroke"] button:not([data-style-section="appearance"]):not([data-style-section="fill"]):not([data-style-section="stroke"]),
.style-section-nav[data-compact-context="arrange"] button:not([data-style-section="location"]):not([data-style-section="arrange"]):not([data-style-section="appearance"]),
.style-section-nav[data-compact-context="location"] button:not([data-style-section="location"]):not([data-style-section="arrange"]):not([data-style-section="appearance"]) {
  display: none !important;
}

@media (max-width: 700px) {
  .canvas-wrap { padding-bottom: 72px !important; }
  .artboard-media-timeline {
    width: 100% !important;
    max-height: 226px;
    border-radius: 4px;
  }
  .artboard-media-timeline > header { min-height: 32px; }
  .artboard-media-range-readout { min-height: 25px; padding-block: 3px; }
  .artboard-media-actions button { height: 38px; min-width: 40px; grid-template-rows: 16px 10px; padding-block: 3px 2px; }
  .artboard-media-actions img { width: 14px; height: 14px; }
  .artboard-media-settings { gap: 3px !important; padding: 4px 5px 6px !important; }
  .artboard-media-settings select { height: 25px !important; }

  .layers .style-section-nav { justify-content: flex-start !important; }
  .layers .style-section-nav button { flex: 1 1 0 !important; min-width: 0 !important; max-width: 82px; }
  .layers #styleTypeSurface { padding-top: 3px !important; }
  .layers #styleTypeSurface > label,
  .layers #styleTypeSurface > .compact-field {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 2px 0 !important;
    border-bottom: 1px solid #edf0f2;
  }
  .layers #styleTypeSurface > label > :is(input, select) { width: 100%; min-width: 0; }
  .layers #styleTypeSurface :is(.type-font-actions,.font-collection-actions,.text-style-editor,.style-effects,.style-paint-actions) { gap: 0 !important; }
  .layers #styleTypeSurface :is(.type-font-actions,.font-collection-actions,.text-style-editor) button { border-radius: 0 !important; }
  .layers #styleTypeSurface :is(.text-style-group,.paragraph-layout-grid,.text-frame-grid,.variable-font-grid,.opentype-grid) { gap: 4px !important; padding: 4px 0 !important; }
  .layers #styleTypeSurface .text-style-group > label { grid-template-columns: 68px minmax(0, 1fr) !important; }
  .layers #styleTypeSurface details:not([open]) { min-height: 32px !important; }
}

/* Source: release-731.css */
/* Release 731: Linearity-style compact typography inspector. */
@media (max-width: 700px) {
  .layers #styleTypeSurface {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: 5px !important;
    row-gap: 0 !important;
  }
  .layers #styleTypeSurface > * { min-width: 0; }
  .layers #styleTypeSurface > label:has(#fontFamily) { order: 1; grid-column: 1 / -1; }
  .layers #styleTypeSurface > .type-style-field { order: 2; grid-column: 1; }
  .layers #styleTypeSurface > .type-size-field { order: 2; grid-column: 2; }
  .layers #styleTypeSurface > .type-format-toolbar { order: 3; grid-column: 1 / -1; }
  .layers #styleTypeSurface > .type-align-field { order: 4; grid-column: 1 / -1; }
  .layers #styleTypeSurface > label:has(#typeTracking) { order: 5; grid-column: 1; }
  .layers #styleTypeSurface > label:has(#typeLeading) { order: 5; grid-column: 2; }
  .layers #styleTypeSurface > label:has(#typeCase) { order: 6; grid-column: 1; }
  .layers #styleTypeSurface > label:has(#typeMode) { order: 6; grid-column: 2; }
  .layers #styleTypeSurface > label:has(#typeWarp) { order: 7; grid-column: 1 / -1; }
  .layers #styleTypeSurface > #typePathPanel { order: 20; grid-column: 1 / -1; }
  .layers #styleTypeSurface > #advancedTypographyPanel { order: 30; grid-column: 1 / -1; }
  .layers #styleTypeSurface > #paragraphLayoutPanel { order: 40; grid-column: 1 / -1; }
  .layers #styleTypeSurface > #textStylesPanel { order: 50; grid-column: 1 / -1; }
  .layers #styleTypeSurface > #fontInfoPanel { order: 60; grid-column: 1 / -1; }
  .layers #styleTypeSurface > .type-font-actions { order: 61; grid-column: 1 / -1; }
  .layers #styleTypeSurface > #typeFontStatus { order: 62; grid-column: 1 / -1; }
  .layers #styleTypeSurface > .button-row,
  .layers #styleTypeSurface > #applyTypeSettingsButton { display: none !important; }

  .layers #styleTypeSurface > .type-primary-field,
  .layers #styleTypeSurface > label:has(#typeTracking),
  .layers #styleTypeSurface > label:has(#typeLeading),
  .layers #styleTypeSurface > label:has(#typeCase),
  .layers #styleTypeSurface > label:has(#typeMode) {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 32px !important;
  }
  .layers #styleTypeSurface > label:has(#fontFamily),
  .layers #styleTypeSurface > label:has(#typeWarp) {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }
  .type-format-toolbar,
  .type-align-toolbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    min-height: 31px;
    border: 1px solid #cbd1d7;
    border-radius: 4px;
    background: #fff;
  }
  .type-format-toolbar button,
  .type-align-toolbar button {
    display: grid;
    place-items: center;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #dce0e5 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1b2026;
    font-size: 14px !important;
  }
  .type-format-toolbar button:last-child,
  .type-align-toolbar button:last-child { border-right: 0 !important; }
  .type-format-toolbar button.is-active,
  .type-align-toolbar button.is-active { background: #e8f3ff !important; color: #126fc1; }
  .type-align-field { grid-template-columns: 42px minmax(0, 1fr) !important; }
  .type-align-field > #typeAlign { display: none !important; }
  .type-align-toolbar { width: 100%; }

  .layers #textStylesPanel .text-style-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 62px;
    align-items: center;
    gap: 3px !important;
    padding: 3px 0 !important;
  }
  .layers #textStylesPanel .text-style-group > label {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-width: 0;
  }
  .layers #textStylesPanel .text-style-editor {
    display: grid !important;
    grid-template-columns: repeat(2, 29px);
    gap: 2px !important;
  }
  .layers #textStylesPanel .text-style-editor input[type="hidden"] { display: none !important; }
  .layers #textStylesPanel .text-style-editor button { width: 29px; min-width: 29px; height: 29px; padding: 6px !important; }
  .layers #textStylesPanel .text-style-editor img { width: 15px; height: 15px; }
}

/* Source: release-732.css */
/* Release 732: explicit workspace identity, video Timeline access, and compact AI editing. */
.artboard-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.workspace-tool-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid #d9dee4;
  border-radius: 4px;
  background: #fff;
  color: #565f68;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

.ai-edit-panel {
  position: fixed;
  z-index: 190;
  left: 48px;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: min(292px, calc(100vw - 56px));
  padding: 0 9px 9px;
  border: 1px solid #cfd5db;
  border-radius: 6px;
  background: #f8f9fa;
  box-shadow: 0 8px 24px rgba(18, 25, 32, .18);
}

.ai-edit-panel[hidden] { display: none !important; }
.ai-edit-panel > header,
.ai-edit-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ai-edit-panel > header { min-height: 38px; border-bottom: 1px solid #dde1e5; }
.ai-edit-panel > header > span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.ai-edit-panel > header img,
.ai-edit-panel > footer img { width: 17px; height: 17px; }
.ai-edit-panel > header button { width: 30px; height: 30px; padding: 6px; border: 0; background: transparent; }
.ai-edit-panel textarea { width: 100%; min-height: 62px; margin: 7px 0; resize: vertical; }
.ai-edit-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 7px; }
.ai-edit-scope button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 34px;
  padding: 4px 6px;
  border: 1px solid #d4d9de;
  border-right: 0;
  border-radius: 0;
  background: #fff;
  font-size: 11px;
  font-weight: 400;
}
.ai-edit-scope button:first-child { border-radius: 4px 0 0 4px; }
.ai-edit-scope button:last-child { border-right: 1px solid #d4d9de; border-radius: 0 4px 4px 0; }
.ai-edit-scope button.is-active { background: #e8f3ff; color: #126fc1; }
.ai-edit-scope img { width: 16px; height: 16px; }
.ai-edit-quick-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ai-edit-quick-actions button { min-height: 28px; padding: 4px 7px; border-radius: 4px; font-size: 10px; font-weight: 400; }
.ai-edit-panel > footer small { min-width: 0; color: #5f6871; font-size: 10px; line-height: 1.25; }
.ai-edit-panel > footer > button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 5px 9px; border-radius: 4px; }

@media (max-width: 700px) {
  .sidebar .tool-grid { min-height: 100%; }
  .sidebar .ai-rail-tool { margin-top: auto; }
  .sidebar .contextual-rail-tool[hidden] { display: none !important; }
  .workspace-tool-label { max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
  .ai-edit-panel { top: auto; max-height: min(360px, calc(100dvh - 118px)); overflow-y: auto; }
}

/* Source: release-733.css */
/* Release 733: reliable workspace switching, compact Style panels, and touch AI selection. */
@media (max-width: 700px) {
  body .sidebar .ai-rail-tool {
    position: sticky !important;
    z-index: 4;
    bottom: 0;
    margin-top: 0 !important;
    background: #fff !important;
    box-shadow: 0 -1px 0 #d8dde2;
  }

  .layers .style-section-nav {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(48px, 1fr);
    width: 100%;
    max-width: 100%;
    min-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    scrollbar-width: none;
  }
  .layers .style-section-nav::-webkit-scrollbar { display: none; }
  .layers .style-section-nav button {
    width: auto !important;
    max-width: none !important;
    min-width: 48px !important;
    min-height: 44px !important;
    padding: 3px 2px !important;
    border-radius: 0 !important;
  }

  .layers [data-inspector-view="properties"] > .panel,
  .layers [data-inspector-view="properties"] [data-style-surface] {
    padding: 4px 7px 8px !important;
  }
  .layers [data-inspector-view="properties"] details > summary {
    min-height: 31px !important;
    padding: 5px 2px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  }
  .layers [data-inspector-view="properties"] :is(.style-inspector-content,.layer-style-fields,.paragraph-layout-grid,.text-frame-grid,.paragraph-composition-grid,.variable-font-grid,.opentype-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px 0 !important;
  }
  .layers [data-inspector-view="properties"] label {
    min-width: 0;
    margin: 0 !important;
  }
  .layers [data-inspector-view="properties"] :is(input,select) {
    min-width: 0;
    max-width: 100%;
  }
  .layers [data-inspector-view="properties"] :is(.button-row,.style-paint-actions,.layer-style-actions,.type-font-actions) {
    gap: 2px !important;
    margin: 3px 0 !important;
  }
  .layers [data-inspector-view="properties"] :is(button,input,select) { min-height: 29px; }
}

/* Source: release-734.css */
/* Release 734: compact, contextual mobile Style inspector. */
@media (max-width: 700px) {
  body .sidebar .ai-rail-tool {
    position: sticky !important;
    z-index: 4;
    bottom: 0;
    margin-top: 0 !important;
    background: #fff !important;
    box-shadow: 0 -1px 0 #d8dde2;
  }

  .layers .style-section-nav {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(48px, 1fr);
    width: 100%;
    max-width: 100%;
    min-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    scrollbar-width: none;
  }
  .layers .style-section-nav::-webkit-scrollbar { display: none; }
  .layers .style-section-nav button {
    width: auto !important;
    max-width: none !important;
    min-width: 48px !important;
    min-height: 44px !important;
    padding: 3px 2px !important;
    border-radius: 0 !important;
  }
  .layers [data-inspector-view="properties"] :is(.style-inspector-content,.layer-style-fields,.paragraph-layout-grid,.text-frame-grid,.paragraph-composition-grid,.variable-font-grid,.opentype-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > #styleTypeSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 4px 5px !important;
    padding: 4px 7px 8px !important;
  }

  html body .app-shell .layers #styleTypeSurface > * {
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface > h2 { display: none !important; }
  html body .app-shell .layers #styleTypeSurface > label:has(#fontFamily) { order: 1; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .type-style-field { order: 2; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > .type-size-field { order: 2; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar { order: 3; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > .type-align-field { order: 3; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeTracking) { order: 4; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeLeading) { order: 4; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeCase) { order: 5; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeMode) { order: 5; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeWarp) { order: 6; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #typePathPanel { order: 20; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #paragraphLayoutPanel { order: 21; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #textStylesPanel { order: 22; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #advancedTypographyPanel { order: 23; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #fontInfoPanel { order: 24; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions { order: 25; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #typeFontStatus { order: 26; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .button-row,
  html body .app-shell .layers #styleTypeSurface > #applyTypeSettingsButton { display: none !important; }

  html body .app-shell .layers #styleTypeSurface > label {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
  html body .app-shell .layers #styleTypeSurface > label:has(#fontFamily),
  html body .app-shell .layers #styleTypeSurface > label:has(#typeWarp) {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }
  html body .app-shell .layers #styleTypeSurface > label :is(input, select) {
    width: 100% !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar,
  html body .app-shell .layers #styleTypeSurface .type-align-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-height: 29px !important;
    overflow: hidden !important;
    border: 1px solid #cbd1d7 !important;
    border-radius: 4px !important;
    background: #fff !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar button,
  html body .app-shell .layers #styleTypeSurface .type-align-toolbar button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #dce0e5 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button:last-child {
    border-right: 0 !important;
  }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button.is-active {
    background: #e8f3ff !important;
    color: #126fc1 !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-align-field {
    display: block !important;
    min-height: 29px !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-align-field > #typeAlign { display: none !important; }

  html body .app-shell .layers #styleTypeSurface > details {
    min-height: 31px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid #d9dde2 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html body .app-shell .layers #styleTypeSurface > details > summary {
    min-height: 31px !important;
    padding: 7px 2px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions button {
    min-height: 30px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface > #typeFontStatus {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  html body .app-shell .layers [data-style-surface] > details[hidden] {
    display: none !important;
  }
}

/* Source: release-735.css */
/* Release 734: compact, contextual mobile Style inspector. */
@media (max-width: 700px) {
  html body .app-shell .layers.has-panel-focus > [data-inspector-view="properties"] > #styleTypeSurface:not(.is-panel-focus) {
    display: none !important;
  }

  body .sidebar .ai-rail-tool {
    position: sticky !important;
    z-index: 4;
    bottom: 0;
    margin-top: 0 !important;
    background: #fff !important;
    box-shadow: 0 -1px 0 #d8dde2;
  }

  .layers .style-section-nav {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(48px, 1fr);
    width: 100%;
    max-width: 100%;
    min-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    scrollbar-width: none;
  }
  .layers .style-section-nav::-webkit-scrollbar { display: none; }
  .layers .style-section-nav button {
    width: auto !important;
    max-width: none !important;
    min-width: 48px !important;
    min-height: 44px !important;
    padding: 3px 2px !important;
    border-radius: 0 !important;
  }
  .layers [data-inspector-view="properties"] :is(.style-inspector-content,.layer-style-fields,.paragraph-layout-grid,.text-frame-grid,.paragraph-composition-grid,.variable-font-grid,.opentype-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > #styleTypeSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 4px 5px !important;
    padding: 4px 7px 8px !important;
  }

  html body .app-shell .layers #styleTypeSurface > * {
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface > h2 { display: none !important; }
  html body .app-shell .layers #styleTypeSurface > label:has(#fontFamily) { order: 1; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .type-style-field { order: 2; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > .type-size-field { order: 2; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar { order: 3; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > .type-align-field { order: 3; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeTracking) { order: 4; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeLeading) { order: 4; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeCase) { order: 5; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeMode) { order: 5; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeWarp) { order: 6; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #typePathPanel { order: 20; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #paragraphLayoutPanel { order: 21; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #textStylesPanel { order: 22; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #advancedTypographyPanel { order: 23; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #fontInfoPanel { order: 24; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions { order: 25; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #typeFontStatus { order: 26; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .button-row,
  html body .app-shell .layers #styleTypeSurface > #applyTypeSettingsButton { display: none !important; }

  html body .app-shell .layers #styleTypeSurface > label {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
  html body .app-shell .layers #styleTypeSurface > label:has(#fontFamily),
  html body .app-shell .layers #styleTypeSurface > label:has(#typeWarp) {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }
  html body .app-shell .layers #styleTypeSurface > label :is(input, select) {
    width: 100% !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar,
  html body .app-shell .layers #styleTypeSurface .type-align-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-height: 29px !important;
    overflow: hidden !important;
    border: 1px solid #cbd1d7 !important;
    border-radius: 4px !important;
    background: #fff !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar button,
  html body .app-shell .layers #styleTypeSurface .type-align-toolbar button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #dce0e5 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button:last-child {
    border-right: 0 !important;
  }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button.is-active {
    background: #e8f3ff !important;
    color: #126fc1 !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-align-field {
    display: block !important;
    min-height: 29px !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-align-field > #typeAlign { display: none !important; }

  html body .app-shell .layers #styleTypeSurface > details {
    min-height: 31px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid #d9dde2 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html body .app-shell .layers #styleTypeSurface > details > summary {
    min-height: 31px !important;
    padding: 7px 2px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions button {
    min-height: 30px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface > #typeFontStatus {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  html body .app-shell .layers [data-style-surface] > details[hidden] {
    display: none !important;
  }

  /* Location: reference point plus paired coordinates, never one control per row. */
  html body .app-shell .layers #styleTransformSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 4px 5px !important;
    padding: 5px 7px 8px !important;
  }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > h2 { display: none !important; }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > .transform-reference-control,
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > details,
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > .button-row,
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > .mini-status {
    grid-column: 1 / -1 !important;
  }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > label {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > label :is(input,select) {
    width: 100% !important;
    min-height: 29px !important;
    padding: 3px 6px !important;
  }
  html body .app-shell .layers #styleTransformSurface .transform-reference-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 2px 0 !important;
  }

  /* Arrange: familiar order and alignment symbols in dense segmented grids. */
  html body .app-shell .layers #styleArrangePanel .style-inspector-content {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 5px !important;
  }
  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }
  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) button {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 3px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .app-shell .layers #styleArrangePanel .style-order-grid button img {
    width: 15px !important;
    height: 15px !important;
  }

  /* Appearance and effects share compact paired values without duplicated panels. */
  html body .app-shell .layers #styleAppearancePanel .style-inspector-content,
  html body .app-shell .layers #layerStylesPanel .style-inspector-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html body .app-shell .layers #styleAppearancePanel .style-effects,
  html body .app-shell .layers #layerStylesPanel :is(.layer-style-toolbar,.layer-style-actions,.mini-status) {
    grid-column: 1 / -1 !important;
  }

  /* Fill and Stroke are separate destinations even though they share paint data. */
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel .style-color-field:has(#strokeColor),
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel #noStrokeButton,
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel label:has(#strokeWidth),
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel .stroke-options-panel,
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel .style-color-field:has(#fillColor),
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel #noFillButton,
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel .style-swatches,
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > label:has(#fillMode),
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > .button-row,
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > label:has(#gradientAccent),
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > .align-grid,
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > #applyFillModeButton {
    display: none !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus {
    padding: 5px 7px 8px !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > h2 { display: none !important; }
  html body .app-shell .layers #stylePaintPanel .style-color-pair,
  html body .app-shell .layers #stylePaintPanel .style-paint-actions {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 32px !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-color-pair > *,
  html body .app-shell .layers #stylePaintPanel .style-paint-actions > * {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-swatches {
    display: flex !important;
    gap: 5px !important;
    padding: 3px 0 !important;
  }
}

/* Source: release-736.css */
/* Release 734: compact, contextual mobile Style inspector. */
@media (max-width: 700px) {
  html body .app-shell .layers .style-section-nav button:is([data-style-section="arrange"],[data-style-section="stroke"]) {
    display: none !important;
  }
  html body .app-shell .layers .style-section-nav {
    grid-auto-columns: minmax(50px, 1fr) !important;
  }
  html body .app-shell .layers .style-subsection-field {
    position: sticky !important;
    z-index: 10 !important;
    top: 92px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 2px 7px !important;
    border-bottom: 1px solid #d8dde2 !important;
    background: #fff !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers .style-subsection-field[hidden] { display: none !important; }
  html body .app-shell .layers .style-subsection-field select {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers.has-panel-focus > [data-inspector-view="properties"] > #styleTypeSurface:not(.is-panel-focus) {
    display: none !important;
  }

  body .sidebar .ai-rail-tool {
    position: sticky !important;
    z-index: 4;
    bottom: 0;
    margin-top: 0 !important;
    background: #fff !important;
    box-shadow: 0 -1px 0 #d8dde2;
  }

  .layers .style-section-nav {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(48px, 1fr);
    width: 100%;
    max-width: 100%;
    min-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    scrollbar-width: none;
  }
  .layers .style-section-nav::-webkit-scrollbar { display: none; }
  .layers .style-section-nav button {
    width: auto !important;
    max-width: none !important;
    min-width: 48px !important;
    min-height: 44px !important;
    padding: 3px 2px !important;
    border-radius: 0 !important;
  }
  .layers [data-inspector-view="properties"] :is(.style-inspector-content,.layer-style-fields,.paragraph-layout-grid,.text-frame-grid,.paragraph-composition-grid,.variable-font-grid,.opentype-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > #styleTypeSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 4px 5px !important;
    padding: 4px 7px 8px !important;
  }

  html body .app-shell .layers #styleTypeSurface > * {
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface > h2 { display: none !important; }
  html body .app-shell .layers #styleTypeSurface > label:has(#fontFamily) { order: 1; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .type-style-field { order: 2; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > .type-size-field { order: 2; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar { order: 3; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > .type-align-field { order: 3; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeTracking) { order: 4; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeLeading) { order: 4; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeCase) { order: 5; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeMode) { order: 5; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeWarp) { order: 6; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #typePathPanel { order: 20; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #paragraphLayoutPanel { order: 21; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #textStylesPanel { order: 22; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #advancedTypographyPanel { order: 23; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #fontInfoPanel { order: 24; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions { order: 25; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #typeFontStatus { order: 26; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .button-row,
  html body .app-shell .layers #styleTypeSurface > #applyTypeSettingsButton { display: none !important; }

  html body .app-shell .layers #styleTypeSurface > label {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
  html body .app-shell .layers #styleTypeSurface > label:has(#fontFamily),
  html body .app-shell .layers #styleTypeSurface > label:has(#typeWarp) {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }
  html body .app-shell .layers #styleTypeSurface > label :is(input, select) {
    width: 100% !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar,
  html body .app-shell .layers #styleTypeSurface .type-align-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-height: 29px !important;
    overflow: hidden !important;
    border: 1px solid #cbd1d7 !important;
    border-radius: 4px !important;
    background: #fff !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar button,
  html body .app-shell .layers #styleTypeSurface .type-align-toolbar button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #dce0e5 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button:last-child {
    border-right: 0 !important;
  }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button.is-active {
    background: #e8f3ff !important;
    color: #126fc1 !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-align-field {
    display: block !important;
    min-height: 29px !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-align-field > #typeAlign { display: none !important; }

  html body .app-shell .layers #styleTypeSurface > details {
    min-height: 31px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid #d9dde2 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html body .app-shell .layers #styleTypeSurface > details > summary {
    min-height: 31px !important;
    padding: 7px 2px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions button {
    min-height: 30px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface > #typeFontStatus {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  html body .app-shell .layers [data-style-surface] > details[hidden] {
    display: none !important;
  }

  /* Location: reference point plus paired coordinates, never one control per row. */
  html body .app-shell .layers #styleTransformSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 4px 5px !important;
    padding: 5px 7px 8px !important;
  }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > h2 { display: none !important; }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > .transform-reference-control,
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > details,
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > .button-row,
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > .mini-status {
    grid-column: 1 / -1 !important;
  }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > label {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > label :is(input,select) {
    width: 100% !important;
    min-height: 29px !important;
    padding: 3px 6px !important;
  }
  html body .app-shell .layers #styleTransformSurface .transform-reference-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 2px 0 !important;
  }

  /* Arrange: familiar order and alignment symbols in dense segmented grids. */
  html body .app-shell .layers #styleArrangePanel .style-inspector-content {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 5px !important;
  }
  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }
  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) button {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 3px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .app-shell .layers #styleArrangePanel .align-grid button {
    font-size: 0 !important;
  }
  html body .app-shell .layers #styleArrangePanel .align-grid button::before {
    content: "";
    display: block;
    width: 17px;
    height: 13px;
    margin: auto;
    background: linear-gradient(#20252a 0 0) left top / 100% 1px no-repeat,
      linear-gradient(#20252a 0 0) left center / 68% 1px no-repeat,
      linear-gradient(#20252a 0 0) left bottom / 88% 1px no-repeat;
  }
  html body .app-shell .layers #styleArrangePanel .style-order-grid button img {
    width: 15px !important;
    height: 15px !important;
  }

  /* Appearance and effects share compact paired values without duplicated panels. */
  html body .app-shell .layers #styleAppearancePanel .style-inspector-content,
  html body .app-shell .layers #layerStylesPanel .style-inspector-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html body .app-shell .layers #styleAppearancePanel .style-effects,
  html body .app-shell .layers #layerStylesPanel :is(.layer-style-toolbar,.layer-style-actions,.mini-status) {
    grid-column: 1 / -1 !important;
  }

  /* Fill and Stroke are separate destinations even though they share paint data. */
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel .style-color-field:has(#strokeColor),
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel #noStrokeButton,
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel label:has(#strokeWidth),
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel .stroke-options-panel,
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel .style-color-field:has(#fillColor),
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel #noFillButton,
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel .style-swatches,
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > label:has(#fillMode),
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > .button-row,
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > label:has(#gradientAccent),
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > .align-grid,
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > #applyFillModeButton {
    display: none !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus {
    padding: 5px 7px 8px !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > h2 { display: none !important; }
  html body .app-shell .layers #stylePaintPanel .style-color-pair,
  html body .app-shell .layers #stylePaintPanel .style-paint-actions {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 32px !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-color-pair > *,
  html body .app-shell .layers #stylePaintPanel .style-paint-actions > * {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-swatches {
    display: flex !important;
    gap: 5px !important;
    padding: 3px 0 !important;
  }
}

/* Source: release-750.css */
/* Release 734: compact, contextual mobile Style inspector. */
@media (max-width: 700px) {
  /* Definitive Style inspector: one destination row, one optional mode row, then controls. */
  html body .app-shell .layers .style-section-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    flex: 0 0 42px !important;
    min-height: 42px !important;
    height: 42px !important;
    background: #fff !important;
    box-shadow: 0 1px 0 #d8dde2 !important;
  }
  html body .app-shell .layers .style-section-nav button {
    min-height: 42px !important;
    height: 42px !important;
    padding: 2px 1px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers .style-section-nav button img {
    width: 16px !important;
    height: 16px !important;
  }
  html body .app-shell .layers :is(#styleAppearancePanel,#layerStylesPanel,#imageEffectsPanel,#stylePaintPanel,#styleArrangePanel) > summary {
    display: none !important;
  }
  html body .app-shell .layers :is(#styleAppearancePanel,#layerStylesPanel,#imageEffectsPanel,#stylePaintPanel,#styleArrangePanel) {
    border: 0 !important;
    padding: 0 !important;
  }
  html body .app-shell .layers :is(#styleAppearancePanel,#layerStylesPanel,#imageEffectsPanel,#stylePaintPanel,#styleArrangePanel) > .style-inspector-content {
    padding: 5px 0 !important;
  }
  html body .app-shell .layers [data-inspector-view="properties"] :is(input,select,button) {
    font-weight: 400 !important;
  }
  html body .app-shell .layers [data-inspector-view="properties"] :is(input:not([type="range"]):not([type="color"]),select) {
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
  }
  html body .app-shell .layers [data-inspector-view="properties"] label {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* Precision mobile sliders: slim visual track with a full touch target. */
  html body .app-shell .layers input[type="range"] {
    --range-progress: 50%;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    accent-color: #1687e8 !important;
    touch-action: pan-y !important;
  }
  html body .app-shell .layers input[type="range"]::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 3px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(to right, #1687e8 0 var(--range-progress), #d5dbe1 var(--range-progress) 100%) !important;
  }
  html body .app-shell .layers input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -6.5px !important;
    border: 2px solid #1687e8 !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(20, 31, 43, 0.22) !important;
  }
  html body .app-shell .layers input[type="range"]::-moz-range-track {
    width: 100% !important;
    height: 3px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #d5dbe1 !important;
  }
  html body .app-shell .layers input[type="range"]::-moz-range-progress {
    height: 3px !important;
    border-radius: 999px !important;
    background: #1687e8 !important;
  }
  html body .app-shell .layers input[type="range"]::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #1687e8 !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(20, 31, 43, 0.22) !important;
  }
  html body .app-shell .layers input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(22, 135, 232, 0.2), 0 1px 2px rgba(20, 31, 43, 0.22) !important;
  }
  html body .app-shell .layers input[type="range"]:disabled {
    opacity: 0.42 !important;
  }
  html body .app-shell .layers output {
    min-width: 30px !important;
    color: #58636e !important;
    font-size: 9px !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  html body .app-shell .layers [data-inspector-view="properties"] details > summary {
    min-height: 29px !important;
    padding: 6px 2px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers .style-section-nav button:is([data-style-section="arrange"],[data-style-section="stroke"]) {
    display: none !important;
  }
  html body .app-shell .layers .style-section-nav {
    grid-auto-columns: minmax(50px, 1fr) !important;
  }
  html body .app-shell .layers .style-subsection-field {
    position: sticky !important;
    z-index: 79 !important;
    top: 42px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 2px 7px !important;
    border-bottom: 1px solid #d8dde2 !important;
    background: #fff !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers .style-subsection-field[hidden] { display: none !important; }
  html body .app-shell .layers .style-subsection-field select {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 7px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers.has-panel-focus > [data-inspector-view="properties"] > #styleTypeSurface:not(.is-panel-focus) {
    display: none !important;
  }

  html body .app-shell .layers > [data-inspector-view="properties"] {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
  }

  html body .app-shell .layers[data-style-section="appearance"] #styleAppearancePanel,
  html body .app-shell .layers[data-style-section="appearance"] #layerStylesPanel,
  html body .app-shell .layers[data-style-section="effects"] #imageEffectsPanel {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  html body .app-shell .layers[data-style-section="appearance"] #styleAppearancePanel > .style-inspector-content,
  html body .app-shell .layers[data-style-section="appearance"] #layerStylesPanel > .style-inspector-content,
  html body .app-shell .layers[data-style-section="effects"] #imageEffectsPanel > .style-inspector-content {
    display: grid !important;
    visibility: visible !important;
  }

  html body .app-shell .layers[data-style-section="appearance"] #styleAppearanceSurface.is-panel-focus,
  html body .app-shell .layers[data-style-section="effects"] #styleAppearanceSurface.is-panel-focus {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 7px 8px !important;
    overflow: visible !important;
  }

  html body .app-shell .layers[data-style-section="appearance"] #styleAppearanceSurface.is-panel-focus > h2,
  html body .app-shell .layers[data-style-section="effects"] #styleAppearanceSurface.is-panel-focus > h2 {
    display: none !important;
  }

  body .sidebar .ai-rail-tool {
    position: sticky !important;
    z-index: 4;
    bottom: 0;
    margin-top: 0 !important;
    background: #fff !important;
    box-shadow: 0 -1px 0 #d8dde2;
  }

  .layers .style-section-nav {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(48px, 1fr);
    width: 100%;
    max-width: 100%;
    min-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    scrollbar-width: none;
  }
  .layers .style-section-nav::-webkit-scrollbar { display: none; }
  .layers .style-section-nav button {
    width: auto !important;
    max-width: none !important;
    min-width: 48px !important;
    min-height: 44px !important;
    padding: 3px 2px !important;
    border-radius: 0 !important;
  }
  .layers [data-inspector-view="properties"] :is(.style-inspector-content,.layer-style-fields,.paragraph-layout-grid,.text-frame-grid,.paragraph-composition-grid,.variable-font-grid,.opentype-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > #styleTypeSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 4px 5px !important;
    padding: 4px 7px 8px !important;
  }

  html body .app-shell .layers #styleTypeSurface > * {
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface > h2 { display: none !important; }
  html body .app-shell .layers #styleTypeSurface > label:has(#fontFamily) { order: 1; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .type-style-field { order: 2; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > .type-size-field { order: 2; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar { order: 3; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > .type-align-field { order: 3; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeTracking) { order: 4; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeLeading) { order: 4; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeCase) { order: 5; grid-column: 1; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeMode) { order: 5; grid-column: 2; }
  html body .app-shell .layers #styleTypeSurface > label:has(#typeWarp) { order: 6; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #typePathPanel { order: 20; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #paragraphLayoutPanel { order: 21; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #textStylesPanel { order: 22; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #advancedTypographyPanel { order: 23; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #fontInfoPanel { order: 24; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions { order: 25; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > #typeFontStatus { order: 26; grid-column: 1 / -1; }
  html body .app-shell .layers #styleTypeSurface > .button-row,
  html body .app-shell .layers #styleTypeSurface > #applyTypeSettingsButton { display: none !important; }

  html body .app-shell .layers #styleTypeSurface > label {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
  html body .app-shell .layers #styleTypeSurface > label:has(#fontFamily),
  html body .app-shell .layers #styleTypeSurface > label:has(#typeWarp) {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }
  html body .app-shell .layers #styleTypeSurface > label :is(input, select) {
    width: 100% !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 3px 7px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar,
  html body .app-shell .layers #styleTypeSurface .type-align-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-height: 29px !important;
    overflow: hidden !important;
    border: 1px solid #cbd1d7 !important;
    border-radius: 4px !important;
    background: #fff !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar button,
  html body .app-shell .layers #styleTypeSurface .type-align-toolbar button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #dce0e5 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button:last-child {
    border-right: 0 !important;
  }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button.is-active {
    background: #e8f3ff !important;
    color: #126fc1 !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-align-field {
    display: block !important;
    min-height: 29px !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-align-field > #typeAlign { display: none !important; }

  html body .app-shell .layers #styleTypeSurface > details {
    min-height: 31px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid #d9dde2 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  html body .app-shell .layers #styleTypeSurface > details > summary {
    min-height: 31px !important;
    padding: 7px 2px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  html body .app-shell .layers #styleTypeSurface > .type-font-actions button {
    min-height: 30px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTypeSurface > #typeFontStatus {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  html body .app-shell .layers [data-style-surface] > details[hidden] {
    display: none !important;
  }

  /* Location: reference point plus paired coordinates, never one control per row. */
  html body .app-shell .layers #styleTransformSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 4px 5px !important;
    padding: 5px 7px 8px !important;
  }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > h2 { display: none !important; }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > .transform-reference-control,
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > details,
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > .button-row,
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > .mini-status {
    grid-column: 1 / -1 !important;
  }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > label {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #styleTransformSurface.is-panel-focus > label :is(input,select) {
    width: 100% !important;
    min-height: 29px !important;
    padding: 3px 6px !important;
  }
  html body .app-shell .layers #styleTransformSurface .transform-reference-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 10px !important;
  }
  html body .app-shell .layers #styleTransformSurface .quad-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-column: 1 / -1 !important;
    gap: 3px 5px !important;
    margin: 0 !important;
  }
  html body .app-shell .layers #styleTransformSurface .quad-grid > label,
  html body .app-shell .layers #styleTransformSurface > .button-row > label {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #styleTransformSurface :is(.quad-grid,.button-row) input[type="number"] {
    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
  }
  html body .app-shell .layers #styleTransformSurface > .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 !important;
  }
  html body .app-shell .layers #styleTransformSurface > .transform-option {
    display: inline-flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 26px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #styleTransformSurface > .transform-option input {
    width: 15px !important;
    min-width: 15px !important;
    height: 15px !important;
  }
  html body .app-shell .layers #styleTransformSurface > .transform-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  html body .app-shell .layers #styleTransformSurface > .transform-actions button {
    min-height: 27px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #styleTransformSurface > label:has(#wallThickness),
  html body .app-shell .layers #styleTransformSurface > label:has(#extrudeHeight),
  html body .app-shell .layers #styleTransformSurface > label:has(#openingType),
  html body .app-shell .layers #styleTransformSurface > #modelInfo,
  html body .app-shell .layers #styleTransformSurface > #replaceModelButton {
    display: none !important;
  }

  /* Arrange: familiar order and alignment symbols in dense segmented grids. */
  html body .app-shell .layers #styleArrangePanel .style-inspector-content {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 5px !important;
  }
  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }
  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) button {
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 3px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .app-shell .layers #styleArrangePanel .align-grid button {
    font-size: 0 !important;
  }
  html body .app-shell .layers #styleArrangePanel .align-grid button::before {
    content: "";
    display: block;
    width: 17px;
    height: 13px;
    margin: auto;
    background: linear-gradient(#20252a 0 0) left top / 100% 1px no-repeat,
      linear-gradient(#20252a 0 0) left center / 68% 1px no-repeat,
      linear-gradient(#20252a 0 0) left bottom / 88% 1px no-repeat;
  }
  html body .app-shell .layers #styleArrangePanel .style-order-grid button img {
    width: 15px !important;
    height: 15px !important;
  }

  /* Appearance and effects share compact paired values without duplicated panels. */
  html body .app-shell .layers #styleAppearancePanel .style-inspector-content,
  html body .app-shell .layers #layerStylesPanel .style-inspector-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 30px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label :is(input,select) {
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label:has(#blendMode) {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }
  html body .app-shell .layers #layerStylesPanel .layer-style-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    width: 100% !important;
  }
  html body .app-shell .layers #layerStylesPanel .layer-style-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .app-shell .layers #layerStylesPanel .layer-style-fields > label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    border: 1px solid #d8dde2 !important;
    border-radius: 4px !important;
    background: #fff !important;
  }
  html body .app-shell .layers #layerStylesPanel .layer-style-fields > label > span {
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #layerStylesPanel .layer-style-fields > label :is(input,select) {
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .app-shell .layers #layerStylesPanel .layer-style-enabled {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border: 1px solid #cbd1d7 !important;
    border-radius: 4px !important;
  }
  html body .app-shell .layers #layerStylesPanel .layer-style-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  html body .app-shell .layers #layerStylesPanel .layer-style-actions button {
    min-height: 29px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #styleAppearancePanel .style-effects,
  html body .app-shell .layers #layerStylesPanel :is(.layer-style-toolbar,.layer-style-actions,.mini-status) {
    grid-column: 1 / -1 !important;
  }

  /* Effects are preset image treatments; layer shadows and glows stay in Appearance. */
  html body .app-shell .layers #imageEffectsPanel .image-effects-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }
  html body .app-shell .layers #imageEffectsPanel .image-effect-presets {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html body .app-shell .layers #imageEffectsPanel .image-effect-presets button {
    display: grid !important;
    grid-template-rows: 48px auto !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 2px !important;
    overflow: hidden !important;
    border: 1px solid #d7dce1 !important;
    border-radius: 4px !important;
    background: #fff !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #imageEffectsPanel .image-effect-presets button.is-active {
    border-color: #1687e8 !important;
    box-shadow: inset 0 0 0 1px #1687e8 !important;
    color: #126fc1 !important;
  }
  html body .app-shell .layers #imageEffectsPanel .image-effect-preview {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    border-radius: 2px !important;
    background-color: #d7dde2 !important;
    background-image: linear-gradient(135deg, #ef6b54 0 34%, #57b6c8 34% 67%, #f1c85b 67%);
    background-position: center !important;
    background-size: cover !important;
  }
  html body .app-shell .layers #imageEffectsPanel .image-effect-strength {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 30px !important;
    margin: 0 !important;
  }
  html body .app-shell .layers #imageEffectsPanel .image-effect-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html body .app-shell .layers #imageEffectsPanel .image-effect-actions button {
    min-height: 30px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #imageEffectsPanel .mini-status {
    margin: 0 !important;
    font-size: 9px !important;
  }

  /* Fill and Stroke are separate destinations even though they share paint data. */
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel .style-color-field:has(#strokeColor),
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel #noStrokeButton,
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel label:has(#strokeWidth),
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel .stroke-options-panel,
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel .style-color-field:has(#fillColor),
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel #noFillButton,
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel .style-swatches,
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > label:has(#fillMode),
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > .button-row,
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > label:has(#gradientAccent),
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > .align-grid,
  html body .app-shell .layers[data-style-section="stroke"] #styleColorSurface > #applyFillModeButton {
    display: none !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus {
    padding: 5px 7px 8px !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > h2 { display: none !important; }
  html body .app-shell .layers #stylePaintPanel .style-color-pair,
  html body .app-shell .layers #stylePaintPanel .style-paint-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 2px !important;
    min-height: 27px !important;
    margin: 0 !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-color-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body .app-shell .layers #stylePaintPanel > .style-inspector-content {
    display: grid !important;
    grid-template-columns: minmax(72px, 0.8fr) minmax(116px, 1.2fr) !important;
    align-items: center !important;
    gap: 3px 5px !important;
    padding: 2px 0 !important;
  }
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel .style-color-pair,
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel .style-color-pair {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body .app-shell .layers[data-style-section="fill"] #stylePaintPanel .style-paint-actions,
  html body .app-shell .layers[data-style-section="stroke"] #stylePaintPanel .style-paint-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-color-pair > *,
  html body .app-shell .layers #stylePaintPanel .style-paint-actions > * {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-color-field {
    display: grid !important;
    grid-template-columns: 34px 26px !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-color-field input[type="color"] {
    width: 26px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 1px !important;
    border-radius: 4px !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-paint-actions button {
    min-width: 0 !important;
    min-height: 27px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-swatches {
    display: flex !important;
    grid-column: 1 / -1 !important;
    gap: 4px !important;
    min-height: 26px !important;
    padding: 1px 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-swatches button {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--swatch) !important;
  }
  html body .app-shell .layers #stylePaintPanel .style-inspector-content > label:has(#strokeWidth) {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 34px !important;
    grid-column: 1 / -1 !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 28px !important;
    margin: 0 !important;
  }
  html body .app-shell .layers #stylePaintPanel .stroke-options-panel {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  html body .app-shell .layers #stylePaintPanel .stroke-options-panel > summary {
    min-height: 28px !important;
    padding: 3px 2px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers #stylePaintPanel .stroke-options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 5px !important;
    padding: 3px 0 1px !important;
  }
  html body .app-shell .layers #stylePaintPanel .stroke-options-grid label {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 27px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #stylePaintPanel .stroke-options-grid :is(select,input,button) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 27px !important;
    height: 27px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #stylePaintPanel .stroke-options-grid .stroke-custom-dash {
    grid-column: 1 / -1 !important;
  }
  html body .app-shell .layers #stylePaintPanel #strokeSwapArrowsButton {
    min-height: 27px !important;
    height: 27px !important;
    gap: 4px !important;
  }
  html body .app-shell .layers #stylePaintPanel #strokeSwapArrowsButton img {
    width: 14px !important;
    height: 14px !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > label:has(#fillMode),
  html body .app-shell .layers #styleColorSurface.is-panel-focus > label:has(#gradientAccent) {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 27px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > label :is(select,input[type="color"]) {
    height: 27px !important;
    min-height: 27px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > .button-row {
    margin: 0 !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > .button-row > label {
    display: grid !important;
    grid-template-columns: 28px 26px !important;
    justify-content: start !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 27px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > .button-row input[type="color"] {
    width: 26px !important;
    padding: 1px !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > .align-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin: 0 !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > .align-grid button {
    min-height: 27px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers #styleColorSurface.is-panel-focus > :is(label,.button-row,.align-grid) {
    margin: 3px 0 !important;
  }
  html body .app-shell .layers[data-style-section="fill"] #styleColorSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 4px !important;
  }
  html body .app-shell .layers[data-style-section="fill"] #styleColorSurface.is-panel-focus > #stylePaintPanel,
  html body .app-shell .layers[data-style-section="fill"] #styleColorSurface.is-panel-focus > .fill-mode-control,
  html body .app-shell .layers[data-style-section="fill"] #styleColorSurface.is-panel-focus > .fill-palette-grid,
  html body .app-shell .layers[data-style-section="fill"] #styleColorSurface.is-panel-focus > #applyFillModeButton {
    grid-column: 1 / -1 !important;
  }
  html body .app-shell .layers[data-style-section="fill"] #styleColorSurface.is-panel-focus > .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html body .app-shell .layers[data-style-section="fill"] #styleColorSurface.is-panel-focus > .fill-gradient-colors,
  html body .app-shell .layers[data-style-section="fill"] #styleColorSurface.is-panel-focus > .fill-accent-control {
    margin: 0 !important;
  }
  html body .app-shell .layers[data-style-section="fill"] #styleColorSurface.is-panel-focus > #applyFillModeButton {
    min-height: 29px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }

  /* Fill and Stroke are independent mobile inspectors. */
  html body .app-shell .layers :is(#styleFillPanel,#styleStrokePanel) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html body .app-shell .layers :is(#styleFillPanel,#styleStrokePanel)[hidden] {
    display: none !important;
  }
  html body .app-shell .layers :is(#styleFillPanel,#styleStrokePanel) > summary {
    display: none !important;
  }
  html body .app-shell .layers :is(#styleFillPanel,#styleStrokePanel) > .paint-section-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 6px !important;
    padding: 2px 0 !important;
  }
  html body .app-shell .layers .paint-primary-row,
  html body .app-shell .layers .paint-precision-row,
  html body .app-shell .layers .gradient-controls-row,
  html body .app-shell .layers .paint-select-row,
  html body .app-shell .layers .stroke-width-row,
  html body .app-shell .layers .stroke-options-panel,
  html body .app-shell .layers #applyFillModeButton {
    grid-column: 1 / -1 !important;
  }
  html body .app-shell .layers .paint-precision-row {
    display: grid !important;
    grid-template-columns: minmax(82px, 0.8fr) minmax(122px, 1.2fr) auto !important;
    align-items: center !important;
    gap: 4px !important;
  }
  html body .app-shell .layers .paint-precision-row label {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers .paint-precision-row label:has(input[type="range"]) {
    grid-template-columns: 34px minmax(44px, 1fr) 34px !important;
  }
  html body .app-shell .layers .paint-precision-row :is(input,button) {
    min-width: 0 !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers .gradient-controls-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    gap: 4px !important;
  }
  html body .app-shell .layers .gradient-controls-row label {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers .gradient-controls-row :is(input,button) {
    height: 27px !important;
    min-height: 27px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers .paint-primary-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 29px !important;
  }
  html body .app-shell .layers .paint-primary-row .style-color-field,
  html body .app-shell .layers .paint-select-row,
  html body .app-shell .layers .stroke-width-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 28px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers .paint-primary-row .style-color-field {
    grid-template-columns: 44px 30px !important;
  }
  html body .app-shell .layers .paint-primary-row input[type="color"],
  html body .app-shell .layers .fill-gradient-colors input[type="color"] {
    width: 30px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 1px !important;
    border-radius: 3px !important;
  }
  html body .app-shell .layers .paint-primary-row button,
  html body .app-shell .layers .paint-select-row select,
  html body .app-shell .layers #applyFillModeButton {
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers .fill-gradient-colors {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-column: 1 / -1 !important;
    gap: 4px !important;
  }
  html body .app-shell .layers .fill-gradient-colors label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }
  html body .app-shell .layers .stroke-width-row {
    grid-template-columns: 44px minmax(0, 1fr) 36px !important;
  }
  html body .app-shell .layers .stroke-options-panel > summary {
    min-height: 28px !important;
    padding: 6px 2px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }
  html body .app-shell .layers :is(#styleFillPanel,#styleStrokePanel) .stroke-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 5px !important;
    padding: 2px 0 !important;
  }

  /* Type keeps everyday controls visible and secondary controls collapsed. */
  html body .app-shell .layers #styleTypeSurface > label,
  html body .app-shell .layers #styleTypeSurface > .type-align-field,
  html body .app-shell .layers #styleTypeSurface > .type-format-toolbar {
    min-height: 27px !important;
  }
  html body .app-shell .layers #styleTypeSurface > label :is(input,select),
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button {
    height: 27px !important;
    min-height: 27px !important;
  }
  html body .app-shell .layers #styleTypeSurface > details {
    min-height: 28px !important;
  }
  html body .app-shell .layers #styleTypeSurface > details > summary {
    min-height: 28px !important;
    padding: 6px 2px !important;
  }
}

/* Photostrator 3D brand alignment: graphite structure with restrained champagne accents. */
:root {
  --brand-graphite: #1e1f22;
  --brand-champagne: #ddb274;
  --brand-champagne-soft: #f8f4ec;
  --brand-divider: #d8dadd;
}

.document-brand-mark {
  display: block !important;
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
}

.workspace-brand-mark {
  display: none;
}

.document-chip {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.document-theme-setting {
  display: grid !important;
  gap: 5px !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid var(--brand-divider) !important;
}

.document-theme-setting > span {
  color: #62666d !important;
  font-size: 10px !important;
}

.document-theme-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid #cfd2d6 !important;
  border-radius: 6px !important;
}

.document-theme-options button {
  display: grid !important;
  grid-template-columns: 16px auto !important;
  place-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 31px !important;
  padding: 3px 5px !important;
  border: 0 !important;
  border-right: 1px solid #d8dadd !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--brand-graphite) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

.document-theme-options button:last-child {
  border-right: 0 !important;
}

.document-theme-options button img {
  width: 15px !important;
  height: 15px !important;
}

.document-theme-options button.is-active {
  background: var(--brand-champagne-soft) !important;
  color: #7c5528 !important;
  box-shadow: inset 0 -2px 0 var(--brand-champagne) !important;
}

.project-library-brand img,
.brand img {
  object-fit: cover !important;
  object-position: center !important;
  background: var(--brand-graphite) !important;
}

.project-library-brand strong,
.brand strong {
  color: var(--brand-graphite) !important;
  font-weight: 650 !important;
}

@media (max-width: 1400px) {
  :root {
    --ios-accent: var(--brand-champagne) !important;
    --integrated-active: var(--brand-champagne) !important;
  }

  .workspace-brand-mark {
    position: fixed !important;
    left: calc(50% - 82px) !important;
    top: 12px !important;
    z-index: 10024 !important;
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    pointer-events: none !important;
  }

  html body .app-shell :is(.style-section-nav,.library-section-nav,.artboard-section-nav) button.is-active,
  html body .app-shell .layers :is(button[aria-selected="true"],button.is-active) {
    color: #855b29 !important;
  }

  html body .app-shell .layers .style-section-nav button.is-active,
  html body .app-shell .layers .library-section-nav button.is-active,
  html body .app-shell .layers .artboard-section-nav button.is-active {
    border-bottom-color: var(--brand-champagne) !important;
    background: var(--brand-champagne-soft) !important;
  }

  html body .app-shell .bottom-workflows button.is-active {
    background: rgba(221, 178, 116, 0.18) !important;
  }

  html body .app-shell .bottom-workflows button.is-active::before,
  html body .app-shell .bottom-workflows button.is-active::after {
    color: var(--brand-champagne) !important;
    background-color: var(--brand-champagne) !important;
  }

  html body .app-shell .bottom-workflows button.is-active::after {
    background-color: transparent !important;
  }

  html body .app-shell .layers input[type="range"] {
    accent-color: var(--brand-champagne) !important;
  }

  html body .app-shell .layers input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--brand-champagne) 0 var(--range-progress), #d5dbe1 var(--range-progress) 100%) !important;
  }

  html body .app-shell .layers input[type="range"]::-webkit-slider-thumb {
    border-color: var(--brand-champagne) !important;
  }

  html body .app-shell .layers input[type="range"]::-moz-range-progress {
    background: var(--brand-champagne) !important;
  }

  html body .app-shell .layers input[type="range"]::-moz-range-thumb {
    border-color: var(--brand-champagne) !important;
  }
}

/* Release 750: approved competitor grouping and supplied horizontal logo. */
@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  html body .topbar .history-actions .document-chip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px 11px !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 2px !important;
    max-width: 170px !important;
  }

  html body .topbar .history-actions .document-brand-logo {
    display: block !important;
    width: 110px !important;
    height: 30px !important;
    overflow: hidden !important;
  }

  html body .topbar .history-actions .document-brand-logo img {
    display: block !important;
    width: 110px !important;
    height: 30px !important;
    object-fit: contain !important;
  }

  html body .topbar .history-actions .document-brand-logo-dark { display: none !important; }
  html[data-theme="dark"] body .topbar .history-actions .document-brand-logo-light { display: none !important; }
  html[data-theme="dark"] body .topbar .history-actions .document-brand-logo-dark { display: block !important; }

  html body .topbar .history-actions .document-chip #documentTitle {
    width: 100% !important;
    min-height: 11px !important;
    font-size: 9px !important;
    line-height: 11px !important;
    text-align: center !important;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body .topbar .history-actions .document-brand-logo-light { display: none !important; }
  html[data-theme="auto"] body .topbar .history-actions .document-brand-logo-dark { display: block !important; }
}

@media (max-width: 1400px) {
  html body .app-shell .layers .style-section-nav {
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    overflow-x: hidden !important;
  }

  html body .app-shell .layers .style-section-nav button,
  html body .app-shell .layers .style-section-nav button:is([data-style-section="arrange"],[data-style-section="stroke"]) {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface #styleArrangePanel {
    grid-column: 1 / -1 !important;
    margin-top: 2px !important;
  }

  html body .app-shell .layers #styleColorSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
  }

  html body .app-shell .layers #styleColorSurface #styleFillPanel,
  html body .app-shell .layers #styleColorSurface #styleStrokePanel {
    display: block !important;
    width: 100% !important;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-divider: #3a3d42;
  --ios-bg: #1b1d20 !important;
  --ios-sheet: #24262a !important;
  --ios-control: #303238 !important;
  --ios-ink: #f8f4ec !important;
  --ios-muted: #a9a8a5 !important;
  --integrated-bar: #202226 !important;
  --integrated-line: #3a3d42 !important;
  --integrated-ink: #f8f4ec !important;
  --integrated-muted: #aaa9a6 !important;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .app-shell,
:root[data-theme="dark"] .workspace,
:root[data-theme="dark"] .canvas-wrap {
  background: #1b1d20 !important;
  color: #f8f4ec !important;
}

:root[data-theme="dark"] :is(.topbar,.sidebar,.right-quickbar,.bottom-workflows,.layers,.document-options-menu,.project-library-screen,.project-setup-sheet) {
  border-color: #3a3d42 !important;
  background: #24262a !important;
  color: #f8f4ec !important;
}

:root[data-theme="dark"] :is(.layers,.document-options-menu,.project-library-screen,.project-setup-sheet) :is(input,select,button,summary) {
  border-color: #45484e !important;
  background-color: #303238 !important;
  color: #f8f4ec !important;
}

:root[data-theme="dark"] .document-theme-setting > span {
  color: #aaa9a6 !important;
}

:root[data-theme="dark"] .document-theme-options button.is-active {
  background: #433b31 !important;
  color: #f1c98e !important;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --brand-divider: #3a3d42;
    --ios-bg: #1b1d20 !important;
    --ios-sheet: #24262a !important;
    --ios-control: #303238 !important;
    --ios-ink: #f8f4ec !important;
    --ios-muted: #a9a8a5 !important;
    --integrated-bar: #202226 !important;
    --integrated-line: #3a3d42 !important;
    --integrated-ink: #f8f4ec !important;
    --integrated-muted: #aaa9a6 !important;
  }

  :root[data-theme="auto"] body,
  :root[data-theme="auto"] .app-shell,
  :root[data-theme="auto"] .workspace,
  :root[data-theme="auto"] .canvas-wrap {
    background: #1b1d20 !important;
    color: #f8f4ec !important;
  }

  :root[data-theme="auto"] :is(.topbar,.sidebar,.right-quickbar,.bottom-workflows,.layers,.document-options-menu,.project-library-screen,.project-setup-sheet) {
    border-color: #3a3d42 !important;
    background: #24262a !important;
    color: #f8f4ec !important;
  }

  :root[data-theme="auto"] :is(.layers,.document-options-menu,.project-library-screen,.project-setup-sheet) :is(input,select,button,summary) {
    border-color: #45484e !important;
    background-color: #303238 !important;
    color: #f8f4ec !important;
  }

  :root[data-theme="auto"] .document-theme-setting > span {
    color: #aaa9a6 !important;
  }

  :root[data-theme="auto"] .document-theme-options button.is-active {
    background: #433b31 !important;
    color: #f1c98e !important;
  }
}

/* Release 748: direct, contextual Style inspector modeled on professional mobile editors. */
@media (max-width: 1400px) {
  html body .app-shell .layers .style-section-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 54px !important;
    grid-template-columns: none !important;
    justify-content: start !important;
    width: 100% !important;
    height: 45px !important;
    min-height: 45px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-bottom: 1px solid #d8dadd !important;
    background: #fff !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
  }

  html body .app-shell .layers .style-section-nav::-webkit-scrollbar {
    display: none !important;
  }

  html body .app-shell .layers .style-section-nav button,
  html body .app-shell .layers .style-section-nav button:is([data-style-section="arrange"],[data-style-section="stroke"]) {
    position: relative !important;
    display: grid !important;
    grid-template-rows: 19px 12px !important;
    place-items: center !important;
    gap: 1px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 45px !important;
    min-height: 45px !important;
    padding: 4px 1px 3px !important;
    border: 0 !important;
    border-right: 1px solid #ececef !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #555a62 !important;
    font-size: 8px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers .style-section-nav button img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
  }

  html body .app-shell .layers .style-section-nav button.is-active {
    background: var(--brand-champagne-soft) !important;
    color: #775126 !important;
    box-shadow: inset 0 -2px 0 var(--brand-champagne) !important;
  }

  html body .app-shell .layers .style-subsection-field {
    display: none !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] {
    padding: 0 7px 64px !important;
    overflow-x: hidden !important;
  }

  html body .app-shell .layers [data-style-surface] {
    gap: 4px !important;
    margin: 0 !important;
    padding: 5px 0 8px !important;
    border: 0 !important;
  }

  html body .app-shell .layers [data-style-surface] > h2 {
    display: none !important;
  }

  html body .app-shell .layers [data-style-surface] :is(label,.style-inspector-content > label) {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers [data-style-surface] :is(input:not([type="range"]):not([type="color"]),select) {
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 6px !important;
    border: 1px solid #cfd2d6 !important;
    border-radius: 4px !important;
    background: #f7f7f8 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers [data-style-surface] button {
    min-height: 28px !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers [data-style-surface] details {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #dedfe2 !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers [data-style-surface] details > summary {
    min-height: 30px !important;
    padding: 7px 2px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  html body .app-shell .layers #styleAppearancePanel .style-inspector-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 4px 0 6px !important;
  }

  html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 33px !important;
    align-items: center !important;
    gap: 3px !important;
  }

  html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label:has(select) {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }

  html body .app-shell .layers #layerStylesPanel .layer-style-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
    gap: 5px !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers #layerStylesPanel .layer-style-enabled {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 28px !important;
    border: 1px solid #cfd2d6 !important;
    border-radius: 4px !important;
  }

  html body .app-shell .layers #layerStylesPanel .layer-style-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 6px !important;
  }

  html body .app-shell .layers #layerStylesPanel .layer-style-fields label {
    display: grid !important;
    grid-template-columns: minmax(42px, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
  }

  html body .app-shell .layers #layerStylesPanel .layer-style-fields label:has(input[type="range"]) {
    grid-column: 1 / -1 !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  html body .app-shell .layers #layerStylesPanel .layer-style-actions,
  html body .app-shell .layers #imageEffectsPanel .image-effect-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding-top: 5px !important;
  }

  html body .app-shell .layers #imageEffectsPanel .image-effects-content {
    display: grid !important;
    gap: 5px !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers #imageEffectsPanel .image-effect-presets {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    max-height: 142px !important;
    overflow-y: auto !important;
  }

  html body .app-shell .layers #imageEffectsPanel .image-effect-presets button {
    display: grid !important;
    grid-template-rows: 34px 12px !important;
    min-width: 0 !important;
    min-height: 51px !important;
    padding: 2px !important;
  }

  html body .app-shell .layers #imageEffectsPanel .image-effect-preview {
    width: 100% !important;
    height: 34px !important;
    border-radius: 3px !important;
  }

  html body .app-shell .layers #styleArrangePanel .style-inspector-content {
    display: grid !important;
    gap: 5px !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers #styleArrangePanel .style-order-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  html body .app-shell .layers #styleArrangePanel .align-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) button {
    display: grid !important;
    grid-template-rows: 18px 11px !important;
    place-items: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    min-height: 35px !important;
    padding: 2px !important;
  }

  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
  }

  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) span {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 7px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .app-shell .layers #styleTransformSurface {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body .app-shell .layers #styleTransformSurface :is(.transform-reference-control,.quad-grid,.transform-actions,#modelInfo,#replaceModelButton) {
    grid-column: 1 / -1 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    align-items: center !important;
    gap: 5px !important;
  }

  html body .app-shell .layers #styleTransformSurface .quad-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body .app-shell .layers #styleTransformSurface :is(.quad-grid,.button-row) label {
    display: grid !important;
    grid-template-columns: 14px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 2px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-option {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 26px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body .app-shell .layers #styleTypeSurface {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 4px 6px !important;
  }

  html body .app-shell .layers #styleTypeSurface > :is(label:first-of-type,.type-font-actions,#typeFontStatus,#fontInfoPanel,#textStylesPanel,#paragraphLayoutPanel,#typePathPanel,#advancedTypographyPanel,.type-align-field) {
    grid-column: 1 / -1 !important;
  }

  html body .app-shell .layers #styleTypeSurface > label {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 28px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-font-actions,
  html body .app-shell .layers #styleTypeSurface .type-format-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-font-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-format-toolbar button {
    min-height: 28px !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-align-field {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-align-field > select {
    display: none !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-align-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-align-toolbar button {
    min-width: 0 !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface .mini-status {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    font-size: 8px !important;
  }

  :root[data-theme="dark"] .layers .style-section-nav,
  :root[data-theme="dark"] .layers .style-section-nav button,
  :root[data-theme="dark"] .layers [data-style-surface] :is(input:not([type="range"]),select),
  :root[data-theme="dark"] .layers [data-style-surface] button {
    border-color: #45484e !important;
    background: #303238 !important;
    color: #f8f4ec !important;
  }
}

@media (max-width: 390px) {
  html body .app-shell .layers .style-section-nav {
    grid-auto-columns: 50px !important;
  }

  html body .app-shell .layers .style-section-nav button,
  html body .app-shell .layers .style-section-nav button:is([data-style-section="arrange"],[data-style-section="stroke"]) {
    width: 50px !important;
    min-width: 50px !important;
  }
}

/* Compact Appearance stack: attributes remain visible without repeating inspectors. */
#styleAppearancePanel .appearance-stack { grid-column: 1 / -1; border-top: 1px solid var(--line, #d8dde2); margin-top: 2px; }
.appearance-stack-heading, .appearance-attribute-row, .appearance-stack-actions { display: grid; align-items: center; min-width: 0; }
.appearance-stack-heading { grid-template-columns: 1fr auto; min-height: 28px; padding: 0 6px; color: var(--muted, #65717d); font-size: 11px; }
.appearance-stack-list { border-block: 1px solid var(--line, #d8dde2); }
.appearance-attribute-row { grid-template-columns: 30px 24px minmax(0, 1fr) 30px; min-height: 36px; border-bottom: 1px solid var(--line, #d8dde2); }
.appearance-attribute-row:last-child { border-bottom: 0; }
.appearance-attribute-row.is-disabled { opacity: .52; }
.appearance-attribute-row button { min-width: 0; min-height: 34px; padding: 4px; border: 0; background: transparent; }
.appearance-attribute-row img { width: 16px; height: 16px; }
.appearance-attribute-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appearance-attribute-swatch { width: 17px; height: 17px; border: 1px solid var(--line-strong, #aeb7c0); background: var(--attribute-color); }
.appearance-attribute-swatch.is-empty { background: linear-gradient(135deg, transparent 45%, #d65353 46% 54%, transparent 55%); }
.appearance-stack-empty { margin: 0; padding: 12px 8px; color: var(--muted, #65717d); font-size: 11px; }
.appearance-stack-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.appearance-stack-actions button { min-width: 0; min-height: 42px; padding: 4px 2px; border: 0; border-right: 1px solid var(--line, #d8dde2); background: transparent; display: grid; place-items: center; gap: 1px; font-size: 10px; }
.appearance-stack-actions button:last-child { border-right: 0; }
.appearance-stack-actions img { width: 17px; height: 17px; }

/* Release 749: compact branded title and denser pro-style inspector. */
@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  :root {
    --title-row-height: 44px !important;
    --command-height: 42px !important;
    --topbar-height: calc(env(safe-area-inset-top, 0px) + var(--title-row-height) + var(--command-height)) !important;
    --editor-top: var(--topbar-height) !important;
  }

  html body .topbar .history-actions .document-chip {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    justify-content: center !important;
    gap: 6px !important;
    max-width: 190px !important;
  }

  html body .topbar .history-actions .document-brand-mark {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 5px !important;
  }

  html body .topbar .history-actions .document-chip > .document-chip-text {
    display: grid !important;
    grid-template-rows: 10px 17px !important;
    align-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body .topbar .history-actions .document-brand-name {
    display: block !important;
    overflow: hidden !important;
    color: #777b82 !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 10px !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .topbar .history-actions .document-chip #documentTitle {
    min-height: 17px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 17px !important;
    text-align: left !important;
  }

  html body #documentActionMenu button,
  html body #documentActionMenu #undoButton,
  html body #documentActionMenu #redoButton,
  html body #documentActionMenu #deleteButton {
    grid-template-rows: 18px 10px !important;
    padding: 3px 1px 2px !important;
  }

  html body #documentActionMenu button > img { width: 17px !important; height: 17px !important; }
  html body #documentActionMenu button > span { height: 10px !important; font-size: 8px !important; line-height: 10px !important; }
}

@media (max-width: 1400px) {
  html body .app-shell .layers .style-section-nav {
    grid-auto-columns: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  html body .app-shell .layers .style-section-nav button,
  html body .app-shell .layers .style-section-nav button:is([data-style-section="arrange"],[data-style-section="stroke"]) {
    grid-template-rows: 16px 10px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px 1px 2px !important;
    font-size: 7px !important;
  }

  html body .app-shell .layers .style-section-nav button img { width: 15px !important; height: 15px !important; }
  html body .app-shell .layers [data-inspector-view="properties"] { padding-inline: 5px !important; }
  html body .app-shell .layers [data-style-surface] { gap: 2px !important; padding: 3px 0 5px !important; }

  html body .app-shell .layers [data-style-surface] details > summary {
    min-height: 26px !important;
    padding: 5px 2px !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers [data-style-surface] :is(input:not([type="range"]):not([type="color"]),select) {
    height: 24px !important;
    min-height: 24px !important;
    padding: 1px 5px !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers [data-style-surface] button { min-height: 24px !important; padding: 2px 4px !important; font-size: 8px !important; }
  html body .app-shell .layers #styleAppearancePanel .style-inspector-content,
  html body .app-shell .layers #layerStylesPanel .layer-style-fields,
  html body .app-shell .layers #styleArrangePanel .style-inspector-content,
  html body .app-shell .layers #imageEffectsPanel .image-effects-content { gap: 3px !important; padding: 2px 0 3px !important; }

  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) button {
    grid-template-rows: 15px 9px !important;
    min-height: 30px !important;
  }

  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) img { width: 14px !important; height: 14px !important; }
  html body .app-shell .layers #imageEffectsPanel .image-effect-presets { max-height: 118px !important; gap: 3px !important; }
  html body .app-shell .layers #imageEffectsPanel .image-effect-presets button { grid-template-rows: 28px 10px !important; min-height: 42px !important; }
  html body .app-shell .layers #imageEffectsPanel .image-effect-preview { height: 28px !important; }
  html body .app-shell .layers #styleTypeSurface { gap: 2px 4px !important; }
  html body .app-shell .layers #styleTypeSurface > label { min-height: 24px !important; grid-template-columns: 38px minmax(0, 1fr) !important; }
  .appearance-stack-heading { min-height: 24px !important; font-size: 9px !important; }
  .appearance-attribute-row { min-height: 30px !important; grid-template-columns: 27px 21px minmax(0, 1fr) 27px !important; }
  .appearance-attribute-row button { min-height: 29px !important; }
  .appearance-stack-actions button { min-height: 34px !important; font-size: 8px !important; }
}

/* Release 750 final overrides: preserve approved header and six-category Style rail. */
@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  html body .topbar .history-actions .document-chip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px 11px !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 2px !important;
    max-width: 170px !important;
  }

  html body .topbar .history-actions .document-brand-logo,
  html body .topbar .history-actions .document-brand-logo img {
    display: block !important;
    width: 110px !important;
    height: 30px !important;
    object-fit: contain !important;
  }

  html body .topbar .history-actions .document-brand-logo { overflow: hidden !important; }
  html body .topbar .history-actions .document-brand-logo-dark { display: none !important; }
  html[data-theme="dark"] body .topbar .history-actions .document-brand-logo-light { display: none !important; }
  html[data-theme="dark"] body .topbar .history-actions .document-brand-logo-dark { display: block !important; }

  html body .topbar .history-actions .document-chip #documentTitle {
    width: 100% !important;
    min-height: 11px !important;
    padding: 0 !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    line-height: 11px !important;
    text-align: center !important;
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body .topbar .history-actions .document-brand-logo-light { display: none !important; }
  html[data-theme="auto"] body .topbar .history-actions .document-brand-logo-dark { display: block !important; }
}

@media (max-width: 1400px) {
  html body .app-shell .layers > [data-inspector-view="properties"] > #styleSectionNav {
    display: flex !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  html body .app-shell .layers > [data-inspector-view="properties"] > #styleSectionNav > button:not([hidden]) {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body .app-shell .layers #styleTransformSurface #styleArrangePanel {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  html body .app-shell .layers #styleColorSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
  }

  html body .app-shell .layers #styleColorSurface #styleFillPanel,
  html body .app-shell .layers #styleColorSurface #styleStrokePanel {
    display: block !important;
    width: 100% !important;
  }
}

/* Source: release-751.css */
/* Release 751: restore stable mobile chrome and isolate professional inspector destinations. */

[hidden] { display: none !important; }

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  html body .topbar .history-actions .document-chip {
    display: grid !important;
    grid-template-columns: 23px minmax(0, 1fr) !important;
    grid-template-rows: 34px !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 5px !important;
    width: min(190px, calc(100vw - 104px)) !important;
    max-width: min(190px, calc(100vw - 104px)) !important;
    min-width: 0 !important;
    padding: 0 3px !important;
    overflow: hidden !important;
  }

  html body .topbar .history-actions .document-brand-mark {
    display: block !important;
    width: 21px !important;
    height: 26px !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body .topbar .history-actions .document-chip-text {
    display: grid !important;
    grid-template-rows: 11px 17px !important;
    align-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body .topbar .history-actions .document-brand-name {
    display: block !important;
    overflow: hidden !important;
    color: #6e737a !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 11px !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .topbar .history-actions .document-chip #documentTitle {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 17px !important;
    overflow: hidden !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 17px !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .app-shell > .ios-menu-button {
    z-index: 3200 !important;
    display: grid !important;
    top: max(4px, env(safe-area-inset-top)) !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    place-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .app-shell > .add-menu-button {
    z-index: 1800 !important;
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    place-items: center !important;
    visibility: visible !important;
  }

  html body .app-shell > .add-menu-button > span {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center !important;
    line-height: 1 !important;
    transform: none !important;
  }

  html body .document-options-menu {
    position: fixed !important;
    z-index: 3190 !important;
    top: calc(max(4px, env(safe-area-inset-top)) + 42px) !important;
    right: max(6px, calc((100vw - var(--phone-width, 100vw)) / 2 + 6px)) !important;
    left: auto !important;
    width: min(292px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - 58px) !important;
    overflow-y: auto !important;
  }

  html body .artboard-context-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 4px !important;
  }

  html body .quick-3d-view-button {
    display: inline-grid !important;
    grid-template-columns: 15px auto !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 26px !important;
    padding: 3px 6px !important;
    border: 1px solid #cfd6dd !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #20262c !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
  }

  html body .quick-3d-view-button img { width: 15px !important; height: 15px !important; }
  html body .workspace-tool-label { max-width: 64px !important; min-height: 26px !important; padding: 0 5px !important; font-size: 9px !important; }

  /* A Style destination owns one surface. Older release rules may not force another one open. */
  html body .app-shell .layers [data-inspector-view="properties"] > [data-style-surface]:not(.is-panel-focus),
  html body .app-shell .layers [data-inspector-view="properties"] > [data-style-surface][aria-hidden="true"] {
    display: none !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > [data-style-surface].is-panel-focus[aria-hidden="false"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > #styleTransformSurface:not(.is-panel-focus),
  html body .app-shell .layers [data-inspector-view="properties"] > #styleAppearanceSurface:not(.is-panel-focus),
  html body .app-shell .layers [data-inspector-view="properties"] > #styleColorSurface:not(.is-panel-focus),
  html body .app-shell .layers [data-inspector-view="properties"] > #styleTypeSurface:not(.is-panel-focus),
  html body .app-shell .layers [data-inspector-view="properties"] > #stylePhotoSurface:not(.is-panel-focus) {
    display: none !important;
  }

  html body .app-shell .layers .style-section-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-columns: unset !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html body .app-shell .layers .style-section-nav > button,
  html body .app-shell .layers .style-section-nav > button:not([hidden]) {
    display: grid !important;
    grid-template-rows: 16px 9px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 3px 1px 2px !important;
    overflow: hidden !important;
    font-size: 7px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers .style-section-nav > button img { width: 15px !important; height: 15px !important; }

  html body .app-shell .layers #styleColorSurface.is-panel-focus {
    display: block !important;
    padding: 3px 6px 6px !important;
  }

  html body .app-shell .layers #styleColorSurface > h2,
  html body .app-shell .layers #stylePhotoSurface > h2,
  html body .app-shell .layers #styleTypeSurface > h2 { display: none !important; }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack {
    border-top: 1px solid #d8dde2 !important;
    border-bottom: 1px solid #d8dde2 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 25px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-heading > span:last-child {
    min-width: 18px !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    background: #eef1f4 !important;
    text-align: center !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-attribute-row {
    display: grid !important;
    grid-template-columns: 28px 23px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    min-height: 31px !important;
    border-top: 1px solid #e3e6e9 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-attribute-row button {
    min-width: 0 !important;
    min-height: 29px !important;
    padding: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-attribute-row .appearance-attribute-name {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-attribute-swatch {
    width: 15px !important;
    height: 15px !important;
    justify-self: center !important;
    border: 1px solid #aeb6be !important;
    border-radius: 2px !important;
    background: var(--attribute-color, transparent) !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 34px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-actions button {
    display: grid !important;
    grid-template-columns: 14px auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 3px 2px !important;
    border: 0 !important;
    border-right: 1px solid #d8dde2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-actions button:last-child { border-right: 0 !important; }
  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-actions img { width: 14px !important; height: 14px !important; }

  html body .app-shell .layers #styleColorSurface .paint-section > summary {
    display: flex !important;
    min-height: 25px !important;
    padding: 4px 2px !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-section-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 5px !important;
    padding: 3px 0 4px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-section-content > :is(.paint-primary-row,.paint-precision-row,.paint-select-row,.fill-gradient-colors,.gradient-controls-row,.stroke-options-panel,.stroke-width-row,#applyFillModeButton) {
    grid-column: 1 / -1 !important;
  }

  html body .app-shell .layers #styleColorSurface :is(.paint-primary-row,.paint-precision-row,.fill-gradient-colors,.gradient-controls-row) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-precision-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto !important; }
  html body .app-shell .layers #styleColorSurface label { min-height: 25px !important; margin: 0 !important; font-size: 9px !important; }

  html body .app-shell .layers #stylePhotoSurface.is-panel-focus {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 3px 6px !important;
    padding: 3px 6px 6px !important;
  }

  html body .app-shell .layers #stylePhotoSurface > #photoAdjustmentNav,
  html body .app-shell .layers #stylePhotoSurface > :is(.tone-settings,.button-row,.mini-status) {
    grid-column: 1 / -1 !important;
  }

  html body .app-shell .layers #stylePhotoSurface > label:not(.is-photo-adjustment-hidden) {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav {
    position: sticky !important;
    top: 40px !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    height: 36px !important;
    min-height: 36px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav button {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 2px 1px !important;
    font-size: 7px !important;
  }

  html body .app-shell .layers #styleTypeSurface.is-panel-focus {
    gap: 2px 4px !important;
    padding: 3px 6px 6px !important;
  }

  html body .app-shell .layers #styleTypeSurface > label { min-height: 25px !important; }
  html body .app-shell .layers #styleTypeSurface > details > summary { min-height: 27px !important; padding: 5px 2px !important; }

  html body .app-shell .layers .artboard-view-toggles {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-height: 42px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html body .app-shell .layers .artboard-view-toggles button {
    display: grid !important;
    grid-template-rows: 17px 9px !important;
    place-items: center !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 3px 1px 2px !important;
    font-size: 7px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers .artboard-view-toggles img { width: 16px !important; height: 16px !important; }

  html body .app-shell .layers .artboard-view-options {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    border-bottom: 1px solid #d8dde2 !important;
  }

  html body .app-shell .layers .artboard-view-options button {
    display: grid !important;
    grid-template-rows: 16px 9px !important;
    place-items: center !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 3px 1px !important;
    border: 0 !important;
    border-right: 1px solid #d8dde2 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 7px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers .artboard-view-options button:last-child { border-right: 0 !important; }
  html body .app-shell .layers .artboard-view-options img { width: 15px !important; height: 15px !important; }
}

.adobe-layer-stack > .layer-artboard-row {
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  padding: 0 6px;
  border-bottom: 1px solid #d8dde2;
  background: #f4f6f8;
}

.adobe-layer-stack > .layer-artboard-row.is-active { background: #e9f3fd; box-shadow: inset 3px 0 #1687e8; }
.layer-artboard-row button { min-width: 28px; min-height: 38px; padding: 4px; border: 0; background: transparent; }
.layer-artboard-row button img { width: 15px; height: 15px; transform: rotate(0deg); }
.layer-artboard-row.is-active button img { transform: rotate(-90deg); }
.layer-artboard-thumbnail { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #b9c1c9; border-radius: 4px; background: #fff; }
.layer-artboard-thumbnail img { width: 18px; height: 18px; }
.layer-artboard-row .layer-name { min-width: 0; }
.layer-artboard-row .layer-name > span:first-child { display: block; overflow: hidden; font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.layer-artboard-row .layer-kind { display: block; color: #69747f; font-size: 9px; font-weight: 400; }
.adobe-layer-stack > .is-artboard-child { padding-left: 18px !important; }
.adobe-layer-stack > .layer-empty { margin-left: 18px; }

:root[data-theme="dark"] .document-brand-name { color: #b8b1a7 !important; }
:root[data-theme="dark"] :is(.style-section-nav,.quick-3d-view-button,.artboard-view-toggles,.artboard-view-options,.layer-artboard-thumbnail) { background: #303238 !important; color: #f8f4ec !important; }
:root[data-theme="dark"] .layer-artboard-row { border-color: #474b51; background: #292b30; }
:root[data-theme="dark"] .layer-artboard-row.is-active { background: #26394b; }

/* Source: release-752.css */
/* Release 752: compact competitor-standard Type and Paint inspectors. */

html body .app-shell .layers .compact-icon-button {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 1px solid #d5d9df !important;
  border-radius: 4px !important;
  background: #fff !important;
}

html body .app-shell .layers .compact-icon-button img {
  width: 15px !important;
  height: 15px !important;
}

html body .app-shell .layers .sr-only-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Type */
html body .app-shell .layers #styleTypeSurface.is-panel-focus {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 0 !important;
  padding: 0 6px 72px !important;
}

html body .app-shell .layers #styleTypeSurface > h2 { display: none !important; }

html body .app-shell .layers #styleTypeSurface .type-primary-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 60px 30px !important;
  align-items: end !important;
  gap: 4px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #e2e5e9 !important;
}

html body .app-shell .layers #styleTypeSurface .type-primary-row > label,
html body .app-shell .layers #styleTypeSurface .type-metrics-grid > label,
html body .app-shell .layers #styleTypeSurface .paragraph-layout-grid > label,
html body .app-shell .layers #styleTypeSurface .type-path-grid > label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 9px !important;
  color: #66707c !important;
}

html body .app-shell .layers #styleTypeSurface .type-primary-row :is(select,input),
html body .app-shell .layers #styleTypeSurface .type-metrics-grid :is(select,input),
html body .app-shell .layers #styleTypeSurface .paragraph-layout-grid :is(select,input),
html body .app-shell .layers #styleTypeSurface .type-path-grid :is(select,input) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  border: 1px solid #d5d9df !important;
  border-radius: 4px !important;
  background: #f8f9fa !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

html body .app-shell .layers #styleTypeSurface .type-font-field { grid-column: 1 !important; }
html body .app-shell .layers #styleTypeSurface .type-style-field[hidden] { display: none !important; }
html body .app-shell .layers #styleTypeSurface .type-size-field { grid-column: 2 !important; }
html body .app-shell .layers #styleTypeSurface #importLocalFontButton { grid-column: 3 !important; align-self: end !important; }

html body .app-shell .layers #styleTypeSurface .type-tool-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 5px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid #e2e5e9 !important;
}

html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  height: 30px !important;
  border: 1px solid #d5d9df !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #fff !important;
}

html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1px solid #e2e5e9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button:last-child { border-right: 0 !important; }
html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button.is-active {
  background: #e8f2ff !important;
  color: #0969da !important;
}

html body .app-shell .layers #styleTypeSurface .type-align-field {
  position: relative !important;
  display: block !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .app-shell .layers #styleTypeSurface .type-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px 0 !important;
}

html body .app-shell .layers #styleTypeSurface .type-compact-disclosure,
html body .app-shell .layers #styleTypeSurface #typePathPanel {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e5e9 !important;
  background: transparent !important;
}

html body .app-shell .layers #styleTypeSurface #typePathPanel[hidden] { display: none !important; }

html body .app-shell .layers #styleTypeSurface :is(.type-compact-disclosure,#typePathPanel) > summary {
  min-height: 31px !important;
  padding: 7px 2px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

html body .app-shell .layers #styleTypeSurface .text-style-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 64px !important;
  align-items: end !important;
  gap: 4px !important;
  padding: 4px 0 !important;
}

html body .app-shell .layers #styleTypeSurface .text-style-group > label {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 9px !important;
}

html body .app-shell .layers #styleTypeSurface .text-style-group select {
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px 5px !important;
  font-size: 11px !important;
}

html body .app-shell .layers #styleTypeSurface .text-style-editor {
  display: grid !important;
  grid-template-columns: 30px 30px !important;
  gap: 4px !important;
}

html body .app-shell .layers #styleTypeSurface .paragraph-layout-grid,
html body .app-shell .layers #styleTypeSurface .type-path-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px 0 !important;
}

html body .app-shell .layers #styleTypeSurface .type-path-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 0 0 5px !important;
}

html body .app-shell .layers #styleTypeSurface .type-path-actions button {
  min-height: 30px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
}

/* Paint */
html body .app-shell .layers #styleColorSurface.is-panel-focus {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 0 !important;
  padding: 0 6px 72px !important;
}

html body .app-shell .layers #styleColorSurface > h2 { display: none !important; }

html body .app-shell .layers #styleColorSurface .paint-utility-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 34px !important;
  padding: 2px 0 !important;
  border-bottom: 1px solid #e2e5e9 !important;
  font-size: 11px !important;
}

html body .app-shell .layers #styleColorSurface .paint-section {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #e2e5e9 !important;
  background: transparent !important;
}

html body .app-shell .layers #styleColorSurface .paint-section > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 34px !important;
  padding: 7px 2px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

html body .app-shell .layers #styleColorSurface .paint-summary-swatch {
  width: 18px !important;
  height: 18px !important;
  border: 1px solid #aeb5be !important;
  border-radius: 3px !important;
  background: var(--paint-summary-color, transparent) !important;
}

html body .app-shell .layers #styleColorSurface .paint-summary-swatch[style*="transparent"] {
  background: linear-gradient(135deg, transparent 44%, #d04a4a 45% 55%, transparent 56%) !important;
}

html body .app-shell .layers #styleColorSurface .paint-section-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
  padding: 5px 0 7px !important;
}

html body .app-shell .layers #styleColorSurface .paint-color-row {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 30px 30px !important;
  align-items: center !important;
  gap: 4px !important;
}

html body .app-shell .layers #styleColorSurface .paint-swatch-control {
  display: block !important;
  width: 32px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 2px !important;
  border: 1px solid #d5d9df !important;
  border-radius: 4px !important;
}

html body .app-shell .layers #styleColorSurface .paint-swatch-control input[type="color"] {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body .app-shell .layers #styleColorSurface .paint-hex-control {
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .app-shell .layers #styleColorSurface .paint-hex-control input {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 2px 7px !important;
  border: 1px solid #d5d9df !important;
  border-radius: 4px !important;
  background: #f8f9fa !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

html body .app-shell .layers #styleColorSurface .paint-none-icon {
  position: relative !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  border: 1px solid currentColor !important;
  border-radius: 2px !important;
}

html body .app-shell .layers #styleColorSurface .paint-none-icon::after {
  content: "" !important;
  position: absolute !important;
  left: -2px !important;
  top: 6px !important;
  width: 18px !important;
  height: 2px !important;
  background: #c33 !important;
  transform: rotate(-45deg) !important;
}

html body .app-shell .layers #styleColorSurface .paint-settings-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

html body .app-shell .layers #styleColorSurface .paint-settings-grid > label,
html body .app-shell .layers #styleColorSurface .fill-gradient-colors > label,
html body .app-shell .layers #styleColorSurface .gradient-controls-row > label,
html body .app-shell .layers #styleColorSurface .stroke-options-grid > label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 9px !important;
  color: #66707c !important;
}

html body .app-shell .layers #styleColorSurface .paint-settings-grid :is(select,input:not([type="range"])),
html body .app-shell .layers #styleColorSurface .gradient-controls-row input,
html body .app-shell .layers #styleColorSurface .stroke-options-grid :is(select,input) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px 6px !important;
  border: 1px solid #d5d9df !important;
  border-radius: 4px !important;
  background: #f8f9fa !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

html body .app-shell .layers #styleColorSurface .paint-range-field {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

html body .app-shell .layers #styleColorSurface .paint-range-field > span { grid-column: 1 / -1 !important; }
html body .app-shell .layers #styleColorSurface .paint-range-field input[type="range"] {
  grid-column: 1 !important;
  width: 100% !important;
  height: 18px !important;
  min-height: 18px !important;
}
html body .app-shell .layers #styleColorSurface .paint-range-field output {
  grid-column: 2 !important;
  align-self: center !important;
  min-width: 38px !important;
  font-size: 9px !important;
  text-align: right !important;
}

html body .app-shell .layers #styleStrokePanel .paint-settings-grid > label:last-child { grid-column: 1 / -1 !important; }

html body .app-shell .layers #styleColorSurface .fill-gradient-options {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
}
html body .app-shell .layers #styleColorSurface .fill-gradient-options[hidden] { display: none !important; }

html body .app-shell .layers #styleColorSurface .fill-gradient-colors {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

html body .app-shell .layers #styleColorSurface .fill-gradient-colors input[type="color"] {
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 2px !important;
}

html body .app-shell .layers #styleColorSurface .gradient-controls-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px !important;
  align-items: end !important;
  gap: 4px !important;
}

html body .app-shell .layers #styleColorSurface .stroke-options-panel {
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e5e9 !important;
}

html body .app-shell .layers #styleColorSurface .stroke-options-panel > summary {
  min-height: 30px !important;
  padding: 7px 2px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

html body .app-shell .layers #styleColorSurface .stroke-options-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 5px 0 !important;
}

html body .app-shell .layers #styleColorSurface .stroke-custom-dash,
html body .app-shell .layers #styleColorSurface #strokeSwapArrowsButton { grid-column: 1 / -1 !important; }

html body .app-shell .layers #styleColorSurface #strokeSwapArrowsButton {
  min-height: 30px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
}

@media (max-width: 360px) {
  html body .app-shell .layers #styleTypeSurface .type-primary-row { grid-template-columns: minmax(0, 1fr) 54px 30px !important; }
  html body .app-shell .layers #styleTypeSurface .type-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body .app-shell .layers #styleColorSurface .paint-settings-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body .app-shell .layers #styleColorSurface .paint-settings-grid > label,
  html body .app-shell .layers #styleStrokePanel .paint-settings-grid > label:last-child { grid-column: 1 !important; }
}

:root[data-theme="dark"] html body .app-shell .layers :is(#styleTypeSurface,#styleColorSurface) {
  color: #f4f5f7 !important;
}
:root[data-theme="dark"] html body .app-shell .layers :is(#styleTypeSurface,#styleColorSurface) :is(select,input:not([type="range"]),.compact-icon-button,.type-format-toolbar,.type-align-toolbar) {
  border-color: #555b65 !important;
  background: #303238 !important;
  color: #f4f5f7 !important;
}
:root[data-theme="dark"] html body .app-shell .layers :is(#styleTypeSurface,#styleColorSurface) :is(.type-primary-row,.type-tool-row,.type-compact-disclosure,.paint-utility-row,.paint-section,.stroke-options-panel) {
  border-color: #464b54 !important;
}

/* Source: release-753.css */
/* Release 753: compact graphic Type and Paint controls. */

html body .app-shell .layers #styleTypeSurface.is-panel-focus,
html body .app-shell .layers #styleColorSurface.is-panel-focus {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

html body .app-shell .layers #styleTypeSurface .type-primary-row {
  grid-template-columns: minmax(0, 1fr) 52px 28px !important;
  gap: 3px !important;
  padding: 4px 0 !important;
}

html body .app-shell .layers #styleTypeSurface .type-primary-row :is(select,input),
html body .app-shell .layers #styleTypeSurface .type-metrics-grid :is(select,input),
html body .app-shell .layers #styleTypeSurface :is(.type-flow-grid,.paragraph-layout-grid,.type-path-grid) :is(select,input) {
  height: 26px !important;
  min-height: 26px !important;
  padding: 1px 5px !important;
  font-size: 10px !important;
}

html body .app-shell .layers #styleTypeSurface .compact-icon-button {
  width: 28px !important;
  min-width: 28px !important;
  height: 26px !important;
  min-height: 26px !important;
}

html body .app-shell .layers #styleTypeSurface .type-tool-row {
  gap: 4px !important;
  padding: 4px 0 !important;
}

html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) {
  height: 28px !important;
}

html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button {
  height: 26px !important;
  min-height: 26px !important;
}

html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button img {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
}

html body .app-shell .layers #styleTypeSurface .type-metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 4px 0 !important;
}

html body .app-shell .layers #styleTypeSurface :is(.type-flow-grid,.paragraph-layout-grid,.type-path-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 4px 0 !important;
}

html body .app-shell .layers #styleTypeSurface :is(.type-flow-grid,.paragraph-layout-grid,.type-path-grid) > label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 9px !important;
  color: #66707c !important;
}

html body .app-shell .layers #styleTypeSurface :is(.type-compact-disclosure,#typePathPanel) > summary {
  min-height: 28px !important;
  padding: 6px 2px !important;
  line-height: 14px !important;
}

html body .app-shell .layers #styleTypeSurface .type-frame-options {
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e5e9 !important;
}

html body .app-shell .layers #styleTypeSurface .type-frame-options > summary {
  min-height: 27px !important;
  padding: 6px 2px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

html body .app-shell .layers #styleTypeSurface .text-style-group {
  grid-template-columns: minmax(0, 1fr) 59px !important;
  gap: 3px !important;
  padding: 3px 0 !important;
}

html body .app-shell .layers #styleTypeSurface .text-style-group > label {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  min-height: 26px !important;
  gap: 3px !important;
}

html body .app-shell .layers #styleTypeSurface .text-style-group select {
  height: 26px !important;
  min-height: 26px !important;
}

html body .app-shell .layers #styleTypeSurface .text-style-editor {
  grid-template-columns: 28px 28px !important;
  gap: 3px !important;
}

html body .app-shell .layers #styleColorSurface .paint-utility-row,
html body .app-shell .layers #styleColorSurface .paint-section > summary {
  min-height: 30px !important;
  padding: 4px 1px !important;
}

html body .app-shell .layers #styleColorSurface .paint-section-content {
  gap: 4px !important;
  padding: 4px 0 5px !important;
}

html body .app-shell .layers #styleColorSurface .paint-color-row {
  grid-template-columns: 30px minmax(0, 1fr) 28px 28px !important;
  gap: 3px !important;
}

html body .app-shell .layers #styleColorSurface .paint-swatch-control,
html body .app-shell .layers #styleColorSurface .paint-hex-control input,
html body .app-shell .layers #styleColorSurface .paint-color-row .compact-icon-button {
  height: 27px !important;
  min-height: 27px !important;
}

html body .app-shell .layers #styleColorSurface .paint-swatch-control {
  width: 30px !important;
}

html body .app-shell .layers #styleColorSurface .paint-mode-toolbar,
html body .app-shell .layers #styleColorSurface .stroke-choice-toolbar {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  height: 28px !important;
  border: 1px solid #d5d9df !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #fff !important;
}

html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) button {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: 1px solid #e2e5e9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #30343a !important;
}

html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) button:last-child {
  border-right: 0 !important;
}

html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) button.is-active {
  background: #e8f2ff !important;
  color: #0969da !important;
}

html body .app-shell .layers #styleColorSurface .paint-mode-icon {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  border: 1px solid currentColor !important;
  border-radius: 2px !important;
}

html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-solid { background: #f06c4f !important; }
html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-linear { background: linear-gradient(135deg, #f06c4f, #167c80) !important; }
html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-radial { background: radial-gradient(circle, #fff 0 18%, #f06c4f 35%, #167c80 100%) !important; }
html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-mesh { background: conic-gradient(from 45deg, #f06c4f, #fff, #167c80, #f06c4f) !important; }
html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-pattern { background: repeating-linear-gradient(45deg, #d9dde3 0 3px, #fff 3px 6px) !important; }
html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-stripe { background: repeating-linear-gradient(90deg, #167c80 0 3px, #fff 3px 6px) !important; }
html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-dot { background-color: #fff !important; background-image: radial-gradient(#30343a 1.5px, transparent 1.5px) !important; background-size: 5px 5px !important; }
html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-checker { background: conic-gradient(#30343a 25%, #fff 0 50%, #30343a 0 75%, #fff 0) 0 0 / 8px 8px !important; }

html body .app-shell .layers #styleColorSurface .paint-pattern-options,
html body .app-shell .layers #styleColorSurface .stroke-options-panel {
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #e2e5e9 !important;
}

html body .app-shell .layers #styleColorSurface :is(.paint-pattern-options,.stroke-options-panel) > summary {
  min-height: 27px !important;
  padding: 6px 2px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
}

html body .app-shell .layers #styleColorSurface .pattern-mode-toolbar {
  margin: 3px 0 4px !important;
}

html body .app-shell .layers #styleColorSurface .paint-settings-grid,
html body .app-shell .layers #styleColorSurface .stroke-options-grid {
  gap: 4px !important;
}

html body .app-shell .layers #styleColorSurface .paint-opacity-grid,
html body .app-shell .layers #styleColorSurface .stroke-primary-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body .app-shell .layers #styleColorSurface .paint-range-field {
  grid-template-columns: minmax(0, 1fr) 34px !important;
}

html body .app-shell .layers #styleColorSurface .paint-range-field output {
  min-width: 34px !important;
}

html body .app-shell .layers #styleColorSurface .fill-gradient-colors,
html body .app-shell .layers #styleColorSurface .stroke-visual-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

html body .app-shell .layers #styleColorSurface .stroke-visual-options {
  padding: 4px 0 !important;
}

html body .app-shell .layers #styleColorSurface .stroke-choice-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  min-width: 0 !important;
  font-size: 9px !important;
  color: #66707c !important;
}

html body .app-shell .layers #styleColorSurface .stroke-line-icon {
  display: block !important;
  width: 24px !important;
  height: 3px !important;
  color: currentColor !important;
}

html body .app-shell .layers #styleColorSurface .stroke-line-icon.is-solid { background: currentColor !important; }
html body .app-shell .layers #styleColorSurface .stroke-line-icon.is-dashed { background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px) !important; }
html body .app-shell .layers #styleColorSurface .stroke-line-icon.is-dotted { background: radial-gradient(circle, currentColor 0 1.5px, transparent 1.6px) 0 0 / 6px 3px repeat-x !important; }
html body .app-shell .layers #styleColorSurface .stroke-line-icon.is-dash-dot { background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 10px, currentColor 10px 12px, transparent 12px 16px) !important; }
html body .app-shell .layers #styleColorSurface .stroke-line-icon.is-custom { background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 14px, transparent 14px 17px) !important; }

html body .app-shell .layers #styleColorSurface :is(.stroke-align-icon,.stroke-cap-icon,.stroke-join-icon) {
  position: relative !important;
  display: block !important;
  width: 18px !important;
  height: 16px !important;
}

html body .app-shell .layers #styleColorSurface .stroke-align-icon {
  border: 1px solid currentColor !important;
  border-radius: 2px !important;
}

html body .app-shell .layers #styleColorSurface .stroke-align-icon::after {
  content: "" !important;
  position: absolute !important;
  left: -3px !important;
  right: -3px !important;
  height: 2px !important;
  background: currentColor !important;
}

html body .app-shell .layers #styleColorSurface .stroke-align-icon.is-inside::after { top: 3px !important; left: 2px !important; right: 2px !important; }
html body .app-shell .layers #styleColorSurface .stroke-align-icon.is-center::after { top: 6px !important; }
html body .app-shell .layers #styleColorSurface .stroke-align-icon.is-outside::after { bottom: -3px !important; }

html body .app-shell .layers #styleColorSurface .stroke-cap-icon::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 7px !important;
  height: 2px !important;
  background: currentColor !important;
}

html body .app-shell .layers #styleColorSurface .stroke-cap-icon.is-butt::after,
html body .app-shell .layers #styleColorSurface .stroke-cap-icon.is-square::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px 0 !important;
  border-right: 1px solid currentColor !important;
  border-left: 1px solid currentColor !important;
}

html body .app-shell .layers #styleColorSurface .stroke-cap-icon.is-round::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px 0 !important;
  border: 2px solid currentColor !important;
  border-radius: 8px !important;
}

html body .app-shell .layers #styleColorSurface .stroke-cap-icon.is-square::after {
  top: 3px !important;
  right: -2px !important;
  bottom: 3px !important;
  left: -2px !important;
}

html body .app-shell .layers #styleColorSurface .stroke-join-icon::before,
html body .app-shell .layers #styleColorSurface .stroke-join-icon::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  width: 10px !important;
  height: 2px !important;
  background: currentColor !important;
}

html body .app-shell .layers #styleColorSurface .stroke-join-icon::before { left: 1px !important; transform: rotate(-48deg) !important; transform-origin: right center !important; }
html body .app-shell .layers #styleColorSurface .stroke-join-icon::after { right: 1px !important; transform: rotate(48deg) !important; transform-origin: left center !important; }
html body .app-shell .layers #styleColorSurface .stroke-join-icon.is-round { border-top: 3px solid currentColor !important; border-radius: 9px 9px 0 0 !important; }
html body .app-shell .layers #styleColorSurface .stroke-join-icon.is-bevel { clip-path: polygon(20% 100%, 35% 20%, 65% 20%, 80% 100%) !important; background: currentColor !important; }

html body .app-shell .layers #styleColorSurface .stroke-options-grid {
  padding: 4px 0 !important;
}

html body .app-shell .layers #styleColorSurface .stroke-options-grid :is(select,input) {
  height: 26px !important;
  min-height: 26px !important;
  padding: 1px 5px !important;
  font-size: 10px !important;
}

@media (max-width: 360px) {
  html body .app-shell .layers #styleTypeSurface :is(.type-flow-grid,.paragraph-layout-grid,.type-path-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

:root[data-theme="dark"] html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) {
  border-color: #555b65 !important;
  background: #303238 !important;
}

:root[data-theme="dark"] html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) button {
  border-color: #555b65 !important;
  color: #f4f5f7 !important;
}

:root[data-theme="dark"] html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button img {
  filter: invert(1) !important;
}

/* Source: release-757.css */
/* Release 757: restore a usable, conventional inspector after the 755 override regression. */
@media (max-width: 700px) {
  html body .app-shell .layers > [data-inspector-view="properties"] {
    display: block;
    min-height: 0;
    overflow: auto;
    padding: 0 8px 64px;
  }

  html body .app-shell .layers #styleSectionNav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    width: calc(100% + 16px);
    min-height: 44px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0 -8px 6px;
    overflow: hidden;
    border-bottom: 1px solid #d8dde3;
    background: #fff;
  }

  html body .app-shell .layers #styleSectionNav > button {
    display: grid;
    min-width: 0;
    min-height: 44px;
    grid-template-rows: 18px 12px;
    place-items: center;
    gap: 2px;
    padding: 4px 2px;
    border: 0;
    border-right: 1px solid #edf0f3;
    border-radius: 0;
    background: transparent;
    color: #24282d;
    font-size: 9px;
    font-weight: 400;
  }

  html body .app-shell .layers #styleSectionNav > button img { width: 17px; height: 17px; }
  html body .app-shell .layers #styleSectionNav > button.is-active { box-shadow: inset 0 -2px #c98d27; background: #f5f7f9; }

  html body .app-shell .layers [data-style-surface] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  html body .app-shell .layers [data-style-surface] > h2 { display: none; }
  html body .app-shell .layers [data-style-surface] :is(input,select,button) { min-height: 30px; font-size: 11px; }
  html body .app-shell .layers [data-style-surface] input[type="range"] { min-height: 22px; }
  html body .app-shell .layers [data-style-surface] :is(details,.style-inspector-section) { margin: 0; border: 0; border-bottom: 1px solid #d8dde3; border-radius: 0; }
  html body .app-shell .layers [data-style-surface] details > summary { min-height: 34px; padding: 7px 2px; font-size: 11px; font-weight: 400; }
  html body .app-shell .layers [data-style-surface] .style-inspector-content { gap: 6px; padding: 6px 0 8px; }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel > summary { display: none; }
  html body .app-shell .layers #styleColorSurface .paint-utility-row { display: flex; min-height: 30px; justify-content: flex-end; align-items: center; }
  html body .app-shell .layers #styleColorSurface .paint-utility-row > span { display: none; }
}

/* Source: release-758.css */
/* Release 758: competitor-style Type inspector, preserving every existing function. */

@media (max-width: 700px) {
  html body .app-shell .layers #styleTypeSurface {
    display: grid !important;
    gap: 5px !important;
    padding: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-primary-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px 30px !important;
    gap: 4px !important;
    align-items: end !important;
    padding: 0 0 6px !important;
    border-bottom: 1px solid #d8dde3 !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-primary-row > label {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-primary-row :is(select,input) {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-style-field,
  html body .app-shell .layers #styleTypeSurface #removeLocalFontButton,
  html body .app-shell .layers #styleTypeSurface #typeFontStatus { display: none !important; }

  html body .app-shell .layers #styleTypeSurface #importLocalFontButton {
    display: grid !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    place-items: center !important;
    padding: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface #importLocalFontButton img { width: 15px !important; height: 15px !important; }

  html body .app-shell .layers #styleTypeSurface .type-tool-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 0 0 6px !important;
    border-bottom: 1px solid #d8dde3 !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: 31px !important;
    overflow: hidden !important;
    border: 1px solid #cfd5dc !important;
    border-radius: 4px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-align-field { display: block !important; min-width: 0 !important; margin: 0 !important; }
  html body .app-shell .layers #styleTypeSurface .sr-only-select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }

  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button {
    display: grid !important;
    min-width: 0 !important;
    width: auto !important;
    height: 29px !important;
    min-height: 29px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #e2e6ea !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button:last-child { border-right: 0 !important; }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button.is-active { background: #e8f2ff !important; color: #1674ce !important; }
  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) img { width: 14px !important; height: 14px !important; }

  html body .app-shell .layers #styleTypeSurface .type-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 0 0 6px !important;
    border-bottom: 1px solid #d8dde3 !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-metrics-grid > label {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-metrics-grid :is(input,select) {
    width: 100% !important;
    min-width: 0 !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  html body .app-shell .layers #styleTypeSurface > details {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #d8dde3 !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface > details > summary {
    min-height: 34px !important;
    padding: 8px 2px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-flow-grid,.paragraph-layout-grid,.type-path-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 4px 0 8px !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-flow-grid,.paragraph-layout-grid,.type-path-grid) > label {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleTypeSurface .text-style-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
    gap: 4px !important;
    align-items: end !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface .text-style-group > label { display: grid !important; min-width: 0 !important; gap: 2px !important; font-size: 9px !important; }
  html body .app-shell .layers #styleTypeSurface .text-style-editor { display: grid !important; grid-template-columns: repeat(2, 30px) !important; gap: 2px !important; }
  html body .app-shell .layers #styleTypeSurface .text-style-editor button { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; padding: 0 !important; }
}

/* Source: release-759.css */
/* Release 759: compact professional Transform and Arrange inspector. */

@media (max-width: 700px) {
  html body .app-shell .layers #styleTransformSurface {
    display: grid !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 58px !important;
    padding: 4px 0 6px !important;
    border-bottom: 1px solid #d8dde3 !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-grid {
    display: grid !important;
    width: 66px !important;
    height: 66px !important;
    grid-template-columns: repeat(3, 22px) !important;
    grid-template-rows: repeat(3, 22px) !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid #cfd5dc !important;
    border-radius: 3px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-grid button {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid #d8dde3 !important;
    border-bottom: 1px solid #d8dde3 !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-grid button.is-active { background: #e8f2ff !important; box-shadow: inset 0 0 0 1px #1674ce !important; }

  html body .app-shell .layers #styleTransformSurface .quad-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body .app-shell .layers #styleTransformSurface :is(.quad-grid,.button-row) > label {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleTransformSurface :is(.quad-grid,.button-row) input {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  html body .app-shell .layers #styleTransformSurface > .button-row:not(.transform-actions) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid #d8dde3 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-option {
    display: inline-flex !important;
    min-height: 24px !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 10px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-option input { width: 15px !important; height: 15px !important; min-height: 15px !important; margin: 0 !important; }

  html body .app-shell .layers #styleTransformSurface .transform-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 34px) !important;
    justify-content: start !important;
    gap: 3px !important;
    padding: 5px 0 7px !important;
    border-bottom: 1px solid #d8dde3 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-actions button {
    display: grid !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 32px !important;
    min-height: 32px !important;
    place-items: center !important;
    padding: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-actions img { width: 16px !important; height: 16px !important; }
  html body .app-shell .layers #styleTransformSurface > :is(label:not(.transform-option),#modelInfo,#replaceModelButton) { display: none !important; }

  html body .app-shell .layers #styleTransformSurface #styleArrangePanel {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #d8dde3 !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface #styleArrangePanel > summary { min-height: 34px !important; padding: 8px 2px !important; font-size: 11px !important; font-weight: 400 !important; }
  html body .app-shell .layers #styleTransformSurface #styleArrangePanel .style-inspector-content { display: grid !important; gap: 4px !important; padding: 4px 0 8px !important; }
  html body .app-shell .layers #styleTransformSurface #styleArrangePanel .style-control-label { font-size: 9px !important; color: #65707b !important; }

  html body .app-shell .layers #styleTransformSurface :is(.style-order-grid,.align-grid) {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid #cfd5dc !important;
    border-radius: 4px !important;
  }

  html body .app-shell .layers #styleTransformSurface .align-grid { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; grid-auto-flow: row !important; }
  html body .app-shell .layers #styleTransformSurface :is(.style-order-grid,.align-grid) button { display: grid !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; place-items: center !important; padding: 0 !important; border: 0 !important; border-right: 1px solid #e2e6ea !important; border-radius: 0 !important; background: #fff !important; }
  html body .app-shell .layers #styleTransformSurface :is(.style-order-grid,.align-grid) button span { display: none !important; }
  html body .app-shell .layers #styleTransformSurface :is(.style-order-grid,.align-grid) button img { width: 15px !important; height: 15px !important; }
}

/* Source: release-760.css */
/* Release 760: compact professional Appearance inspector. */

@media (max-width: 700px) {
  html body .app-shell .layers #styleAppearanceSurface {
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel {
    margin: 0 !important;
    border: 0 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel > summary { display: none !important; }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel > .style-inspector-content {
    display: grid !important;
    grid-template-columns: 42px minmax(60px, 1fr) 36px 88px !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 0 7px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel > .style-inspector-content > label {
    display: contents !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel > .style-inspector-content > label:first-of-type > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #opacityValue {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 22px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #opacityOutput {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    text-align: right !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel > .style-inspector-content > label:nth-of-type(2) > span { display: none !important; }
  html body .app-shell .layers #styleAppearanceSurface #blendMode {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    border: 1px solid #cfd5dc !important;
    border-radius: 4px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-heading {
    display: flex !important;
    min-height: 28px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 7px !important;
    border-bottom: 1px solid #e2e6ea !important;
    background: #f6f7f8 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-list { display: grid !important; }
  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-empty { min-height: 30px !important; margin: 0 !important; padding: 8px !important; font-size: 9px !important; color: #68727d !important; }

  html body .app-shell .layers #styleAppearanceSurface .appearance-attribute-row {
    display: grid !important;
    min-height: 32px !important;
    grid-template-columns: 28px 24px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 2px 4px !important;
    border-bottom: 1px solid #e7eaed !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-attribute-row button { min-width: 0 !important; min-height: 27px !important; padding: 2px !important; border: 0 !important; background: transparent !important; font-size: 10px !important; }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    min-height: 34px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-actions button {
    display: grid !important;
    min-width: 0 !important;
    min-height: 34px !important;
    grid-template-columns: 15px auto !important;
    place-content: center !important;
    gap: 3px !important;
    padding: 2px !important;
    border: 0 !important;
    border-right: 1px solid #e2e6ea !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-actions button:last-child { border-right: 0 !important; }
  html body .app-shell .layers #styleAppearanceSurface .appearance-stack-actions img { width: 14px !important; height: 14px !important; }

  html body .app-shell .layers #styleAppearanceSurface #layerStylesPanel {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid #d8dde3 !important;
    border-bottom: 1px solid #d8dde3 !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #layerStylesPanel > summary { min-height: 34px !important; padding: 8px 2px !important; font-size: 11px !important; font-weight: 400 !important; }
  html body .app-shell .layers #styleAppearanceSurface .layer-style-content { display: grid !important; gap: 5px !important; padding: 5px 0 8px !important; }
  html body .app-shell .layers #styleAppearanceSurface .layer-style-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 5px !important; align-items: center !important; }
  html body .app-shell .layers #styleAppearanceSurface .layer-style-enabled { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 9px !important; }
  html body .app-shell .layers #styleAppearanceSurface .layer-style-fields { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; }
  html body .app-shell .layers #styleAppearanceSurface .layer-style-fields label { display: grid !important; min-width: 0 !important; gap: 2px !important; font-size: 9px !important; }
  html body .app-shell .layers #styleAppearanceSurface .layer-style-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; }
  html body .app-shell .layers #styleAppearanceSurface .layer-style-actions button { min-height: 30px !important; font-size: 9px !important; }
  html body .app-shell .layers #styleAppearanceSurface #layerStyleStatus { display: none !important; }
}

/* Source: release-761.css */
/* Release 761: professional compact Fill and Stroke inspector. */

@media (max-width: 700px) {
  html body .app-shell .layers #styleColorSurface { display: grid !important; gap: 0 !important; padding: 0 !important; }
  html body .app-shell .layers #styleColorSurface .paint-utility-row { display: flex !important; min-height: 30px !important; align-items: center !important; justify-content: flex-end !important; padding: 0 !important; border-bottom: 1px solid #d8dde3 !important; }
  html body .app-shell .layers #styleColorSurface .paint-utility-row > span { display: none !important; }
  html body .app-shell .layers #styleColorSurface .paint-utility-row .compact-icon-button { display: grid !important; width: 30px !important; min-width: 30px !important; height: 29px !important; min-height: 29px !important; place-items: center !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  html body .app-shell .layers #styleColorSurface .paint-utility-row img { width: 15px !important; height: 15px !important; }

  html body .app-shell .layers #styleColorSurface .paint-section { margin: 0 !important; border: 0 !important; border-bottom: 1px solid #d8dde3 !important; border-radius: 0 !important; }
  html body .app-shell .layers #styleColorSurface .paint-section > summary { display: flex !important; min-height: 36px !important; align-items: center !important; justify-content: space-between !important; padding: 8px 2px !important; font-size: 11px !important; font-weight: 400 !important; }
  html body .app-shell .layers #styleColorSurface .paint-summary-swatch { width: 18px !important; height: 18px !important; border: 1px solid #aeb6bf !important; border-radius: 3px !important; }
  html body .app-shell .layers #styleColorSurface .paint-section-content { display: grid !important; gap: 6px !important; padding: 5px 0 9px !important; }

  html body .app-shell .layers #styleColorSurface .paint-color-row { display: grid !important; grid-template-columns: 32px minmax(0, 1fr) 30px 30px !important; align-items: center !important; gap: 4px !important; }
  html body .app-shell .layers #styleColorSurface .paint-swatch-control { display: block !important; width: 32px !important; height: 30px !important; padding: 2px !important; border: 1px solid #cfd5dc !important; border-radius: 4px !important; }
  html body .app-shell .layers #styleColorSurface .paint-swatch-control input { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; }
  html body .app-shell .layers #styleColorSurface .paint-hex-control { min-width: 0 !important; margin: 0 !important; }
  html body .app-shell .layers #styleColorSurface .paint-hex-control input { width: 100% !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; padding: 3px 6px !important; font-size: 10px !important; }
  html body .app-shell .layers #styleColorSurface .paint-color-row .compact-icon-button { display: grid !important; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; place-items: center !important; padding: 0 !important; }
  html body .app-shell .layers #styleColorSurface .paint-color-row img { width: 15px !important; height: 15px !important; }

  html body .app-shell .layers #styleColorSurface .sr-only-select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }
  html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) { display: grid !important; width: 100% !important; height: 31px !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; overflow: hidden !important; border: 1px solid #cfd5dc !important; border-radius: 4px !important; background: #fff !important; }
  html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) button { display: grid !important; min-width: 0 !important; width: auto !important; height: 29px !important; min-height: 29px !important; place-items: center !important; padding: 0 !important; border: 0 !important; border-right: 1px solid #e2e6ea !important; border-radius: 0 !important; background: #fff !important; }
  html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) button:last-child { border-right: 0 !important; }
  html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) button.is-active { background: #e8f2ff !important; color: #1674ce !important; }

  html body .app-shell .layers #styleColorSurface .paint-mode-icon { display: block !important; width: 17px !important; height: 17px !important; border: 1px solid currentColor !important; border-radius: 2px !important; }
  html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-solid { background: #f06c4f !important; }
  html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-linear { background: linear-gradient(135deg,#f06c4f,#167c80) !important; }
  html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-radial { background: radial-gradient(circle,#fff 0 18%,#f06c4f 40%,#167c80 100%) !important; }
  html body .app-shell .layers #styleColorSurface .paint-mode-icon.is-mesh { background: conic-gradient(#f06c4f,#fff,#167c80,#f06c4f) !important; }

  html body .app-shell .layers #styleColorSurface .paint-range-field { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 40px !important; align-items: center !important; gap: 5px !important; margin: 0 !important; font-size: 9px !important; }
  html body .app-shell .layers #styleColorSurface .paint-range-field input { width: 100% !important; min-width: 0 !important; min-height: 22px !important; }
  html body .app-shell .layers #styleColorSurface .paint-range-field output { min-width: 0 !important; text-align: right !important; font-size: 9px !important; }

  html body .app-shell .layers #styleColorSurface :is(.paint-pattern-options,.stroke-options-panel) { margin: 0 !important; border: 0 !important; border-top: 1px solid #d8dde3 !important; border-radius: 0 !important; }
  html body .app-shell .layers #styleColorSurface :is(.paint-pattern-options,.stroke-options-panel) > summary { min-height: 34px !important; padding: 8px 2px !important; font-size: 10px !important; font-weight: 400 !important; }

  html body .app-shell .layers #styleColorSurface .fill-gradient-options { display: grid !important; gap: 5px !important; }
  html body .app-shell .layers #styleColorSurface .fill-gradient-colors { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; }
  html body .app-shell .layers #styleColorSurface .fill-gradient-colors label { display: grid !important; gap: 2px !important; font-size: 9px !important; }
  html body .app-shell .layers #styleColorSurface .gradient-controls-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 30px !important; gap: 4px !important; align-items: end !important; }

  html body .app-shell .layers #styleColorSurface .stroke-visual-options { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5px !important; padding: 5px 0 !important; }
  html body .app-shell .layers #styleColorSurface .stroke-choice-field { display: grid !important; min-width: 0 !important; gap: 2px !important; font-size: 9px !important; }
  html body .app-shell .layers #styleColorSurface .stroke-options-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; padding: 4px 0 !important; }
  html body .app-shell .layers #styleColorSurface .stroke-options-grid label { display: grid !important; min-width: 0 !important; gap: 2px !important; font-size: 9px !important; }
  html body .app-shell .layers #styleColorSurface .stroke-options-grid :is(input,select) { width: 100% !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; padding: 3px 5px !important; font-size: 10px !important; }
  html body .app-shell .layers #styleColorSurface #strokeSwapArrowsButton { display: grid !important; min-height: 30px !important; grid-template-columns: 15px auto !important; place-content: center !important; gap: 4px !important; font-size: 9px !important; }
}

/* Source: release-762.css */
/* Release 762: distinct preset-based Effects inspector. */

@media (max-width: 700px) {
  html body .app-shell .layers #styleAppearanceSurface #imageEffectsPanel {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #imageEffectsPanel > summary { display: none !important; }

  html body .app-shell .layers #styleAppearanceSurface .image-effects-content {
    display: grid !important;
    gap: 7px !important;
    padding: 5px 0 8px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .image-effect-presets {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .image-effect-presets button {
    display: grid !important;
    min-width: 0 !important;
    min-height: 58px !important;
    grid-template-rows: 35px 12px !important;
    place-items: center !important;
    gap: 3px !important;
    padding: 3px !important;
    overflow: hidden !important;
    border: 1px solid #cfd5dc !important;
    border-radius: 4px !important;
    background: #fff !important;
    font-size: 8px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .image-effect-presets button.is-active,
  html body .app-shell .layers #styleAppearanceSurface .image-effect-presets button[aria-pressed="true"] {
    border-color: #1674ce !important;
    background: #e8f2ff !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .image-effect-preview {
    display: block !important;
    width: 100% !important;
    height: 35px !important;
    border-radius: 2px !important;
    background: linear-gradient(135deg,#d9e1e8,#718295) !important;
  }

  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="portrait"] .image-effect-preview { filter: saturate(1.08) brightness(1.05) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="cinematic"] .image-effect-preview { filter: contrast(1.18) saturate(.82) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="vintage"] .image-effect-preview { filter: sepia(.55) contrast(.9) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="mono"] .image-effect-preview { filter: grayscale(1) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="noir"] .image-effect-preview { filter: grayscale(1) contrast(1.45) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="warm"] .image-effect-preview { background: linear-gradient(135deg,#f2c176,#a84e36) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="cool"] .image-effect-preview { background: linear-gradient(135deg,#b8ddec,#397294) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="fade"] .image-effect-preview { filter: contrast(.72) saturate(.65) brightness(1.12) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="dramatic"] .image-effect-preview { filter: contrast(1.5) saturate(1.2) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="dream"] .image-effect-preview { filter: brightness(1.15) saturate(.8) blur(.4px) !important; }
  html body .app-shell .layers #styleAppearanceSurface [data-image-effect-preset="pop"] .image-effect-preview { filter: contrast(1.2) saturate(1.55) !important; }

  html body .app-shell .layers #styleAppearanceSurface .image-effect-strength {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    border-top: 1px solid #d8dde3 !important;
    border-bottom: 1px solid #d8dde3 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .image-effect-strength input { width: 100% !important; min-width: 0 !important; min-height: 22px !important; }
  html body .app-shell .layers #styleAppearanceSurface .image-effect-strength output { min-width: 0 !important; text-align: right !important; font-size: 9px !important; }

  html body .app-shell .layers #styleAppearanceSurface .image-effect-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    gap: 5px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .image-effect-actions button { min-height: 30px !important; padding: 3px 6px !important; font-size: 9px !important; }
  html body .app-shell .layers #styleAppearanceSurface #imageEffectStatus { display: none !important; }
}

/* Source: release-763.css */
/* Release 763: compact sectioned Photo adjustment inspector. */

@media (max-width: 700px) {
  html body .app-shell .layers #stylePhotoSurface { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 5px !important; padding: 0 !important; }
  html body .app-shell .layers #stylePhotoSurface .is-photo-adjustment-hidden { display: none !important; }

  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav {
    position: sticky !important;
    top: 44px !important;
    z-index: 35 !important;
    display: grid !important;
    width: calc(100% + 16px) !important;
    height: 42px !important;
    min-height: 42px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin: 0 -8px 3px !important;
    overflow: hidden !important;
    border-bottom: 1px solid #d8dde3 !important;
    background: #fff !important;
  }

  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav button {
    display: grid !important;
    min-width: 0 !important;
    min-height: 42px !important;
    grid-template-rows: 17px 11px !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 4px 1px !important;
    border: 0 !important;
    border-right: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 8px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav button.is-active { background: #e8f2ff !important; box-shadow: inset 0 -2px #1674ce !important; }
  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav img { width: 16px !important; height: 16px !important; }

  html body .app-shell .layers #stylePhotoSurface > label:not(.filter-toggle) {
    display: grid !important;
    min-height: 30px !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #stylePhotoSurface > label:not(.filter-toggle) > input[type="range"] { width: 100% !important; min-width: 0 !important; min-height: 22px !important; }
  html body .app-shell .layers #stylePhotoSurface > label:not(.filter-toggle) > select { width: 100% !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; padding: 3px 5px !important; font-size: 10px !important; }

  html body .app-shell .layers #stylePhotoSurface .retouch-range {
    display: grid !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 5px !important;
  }

  html body .app-shell .layers #stylePhotoSurface .retouch-range input { width: 100% !important; min-width: 0 !important; min-height: 22px !important; }
  html body .app-shell .layers #stylePhotoSurface .retouch-range output { min-width: 0 !important; text-align: right !important; font-size: 9px !important; }

  html body .app-shell .layers #stylePhotoSurface .filter-toggle {
    display: inline-flex !important;
    min-height: 28px !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 3px 0 !important;
    font-size: 10px !important;
  }

  html body .app-shell .layers #stylePhotoSurface .filter-toggle input { width: 15px !important; height: 15px !important; min-height: 15px !important; margin: 0 !important; }
  html body .app-shell .layers #stylePhotoSurface .tone-settings { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 3px !important; padding: 3px 0 !important; }
  html body .app-shell .layers #stylePhotoSurface .tone-settings > label { display: grid !important; min-height: 28px !important; grid-template-columns: 68px minmax(0, 1fr) !important; align-items: center !important; gap: 6px !important; margin: 0 !important; font-size: 9px !important; }
  html body .app-shell .layers #stylePhotoSurface .pixel-filter-colors { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; }

  html body .app-shell .layers #stylePhotoSurface .button-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; }
  html body .app-shell .layers #stylePhotoSurface button:not(#photoAdjustmentNav button) { min-height: 30px !important; padding: 3px 6px !important; font-size: 9px !important; }
}

/* Source: release-764.css */
/* Release 764: compact artboard-aware Layers workspace. */

@media (max-width: 700px) {
  html body .app-shell .layers > [data-inspector-view="layers"] { display: block !important; min-height: 0 !important; overflow: auto !important; padding: 0 0 60px !important; }
  html body .app-shell .layers #layersWorkspacePanel { display: flex !important; min-height: 100% !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; }
  html body .app-shell .layers #layersWorkspacePanel > .panel-heading { display: none !important; }

  html body .app-shell .layers #layersWorkspacePanel .adobe-layer-header {
    display: flex !important;
    min-height: 32px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 8px !important;
    border-bottom: 1px solid #d8dde3 !important;
    background: #f6f7f8 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #layersWorkspacePanel #layerCommandToolbar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 35 !important;
    order: 20 !important;
    display: grid !important;
    width: 100% !important;
    height: 47px !important;
    min-height: 47px !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    overflow: hidden !important;
    border-top: 1px solid #cfd5dc !important;
    border-bottom: 1px solid #d8dde3 !important;
    background: #fff !important;
  }

  html body .app-shell .layers #layersWorkspacePanel #layerCommandToolbar button {
    display: grid !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 46px !important;
    grid-template-rows: 18px 11px !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 4px 1px !important;
    border: 0 !important;
    border-right: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 7px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #layersWorkspacePanel #layerCommandToolbar button:last-child { border-right: 0 !important; }
  html body .app-shell .layers #layersWorkspacePanel #layerCommandToolbar button:is(.is-active,[aria-expanded="true"],[aria-pressed="true"]) { background: #e8f2ff !important; box-shadow: inset 0 2px #1674ce !important; }
  html body .app-shell .layers #layersWorkspacePanel #layerCommandToolbar img { width: 17px !important; height: 17px !important; }

  html body .app-shell .layers #documentLayerStack {
    order: 5 !important;
    display: block !important;
    min-height: 120px !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    background: #fff !important;
  }

  html body .app-shell .layers #documentLayerStack > li {
    display: grid !important;
    min-height: 42px !important;
    grid-template-columns: 24px 32px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #e6e9ed !important;
    border-radius: 0 !important;
    font-size: 10px !important;
  }

  html body .app-shell .layers #documentLayerStack > .layer-artboard-row {
    min-height: 44px !important;
    grid-template-columns: 24px 32px minmax(0, 1fr) !important;
    padding-left: 6px !important;
    background: #eef2f6 !important;
    border-bottom-color: #cfd5dc !important;
  }

  html body .app-shell .layers #documentLayerStack > .layer-artboard-row.is-active { background: #dfeeff !important; box-shadow: inset 3px 0 #1674ce !important; }
  html body .app-shell .layers #documentLayerStack > :is(.is-artboard-child,.layer-group-row) { padding-left: 18px !important; }
  html body .app-shell .layers #documentLayerStack > .layer-group-row.is-artboard-child { padding-left: 14px !important; background: #f8f9fa !important; }

  html body .app-shell .layers #documentLayerStack .layer-name { display: grid !important; min-width: 0 !important; gap: 1px !important; }
  html body .app-shell .layers #documentLayerStack .layer-name > span:first-child { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 10px !important; }
  html body .app-shell .layers #documentLayerStack .layer-kind { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: #6b7580 !important; font-size: 8px !important; }
  html body .app-shell .layers #documentLayerStack :is(.layer-drag-handle,.layer-artboard-disclosure,.layer-toggle) { display: grid !important; width: 26px !important; min-width: 26px !important; height: 30px !important; min-height: 30px !important; place-items: center !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  html body .app-shell .layers #documentLayerStack :is(.layer-drag-handle,.layer-artboard-disclosure,.layer-toggle) img { width: 15px !important; height: 15px !important; }
  html body .app-shell .layers #documentLayerStack .layer-actions { display: grid !important; grid-auto-flow: column !important; gap: 1px !important; }

  html body .app-shell .layers #layersWorkspacePanel :is(#layerMoreMenu,#layerPropertiesPanel) { order: 10 !important; margin: 0 !important; border: 0 !important; border-top: 1px solid #cfd5dc !important; border-radius: 0 !important; }
  html body .app-shell .layers #layersWorkspacePanel #layerMoreMenu > header { min-height: 34px !important; padding: 4px 7px !important; }
}

/* Source: release-765.css */
/* Release 765: compact professional Artboard inspector. */

@media (max-width: 700px) {
  html body .app-shell .layers > [data-inspector-view="artboard"] { display: block !important; min-height: 0 !important; overflow: auto !important; padding: 0 8px 64px !important; }
  html body .app-shell .layers .artboard-inspector-panel { display: grid !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; }
  html body .app-shell .layers .artboard-inspector-panel > h2 { display: none !important; }

  html body .app-shell .layers .artboard-view-toggles {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: grid !important;
    width: calc(100% + 16px) !important;
    height: 46px !important;
    min-height: 46px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin: 0 -8px !important;
    overflow: hidden !important;
    border-bottom: 1px solid #cfd5dc !important;
    background: #fff !important;
  }

  html body .app-shell .layers :is(.artboard-view-toggles,.artboard-view-options) button {
    display: grid !important;
    min-width: 0 !important;
    width: auto !important;
    grid-template-rows: 18px 11px !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 4px 1px !important;
    border: 0 !important;
    border-right: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 8px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers .artboard-view-toggles button { min-height: 45px !important; }
  html body .app-shell .layers :is(.artboard-view-toggles,.artboard-view-options) button:last-child { border-right: 0 !important; }
  html body .app-shell .layers :is(.artboard-view-toggles,.artboard-view-options) button:is(.is-active,[aria-pressed="true"]) { background: #e8f2ff !important; box-shadow: inset 0 -2px #1674ce !important; }
  html body .app-shell .layers :is(.artboard-view-toggles,.artboard-view-options) img { width: 16px !important; height: 16px !important; }

  html body .app-shell .layers .artboard-view-options {
    position: sticky !important;
    top: 46px !important;
    z-index: 39 !important;
    display: grid !important;
    width: calc(100% + 16px) !important;
    height: 38px !important;
    min-height: 38px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    margin: 0 -8px !important;
    overflow: hidden !important;
    border-bottom: 1px solid #d8dde3 !important;
    background: #fff !important;
  }

  html body .app-shell .layers .artboard-view-options button { min-height: 37px !important; grid-template-rows: 15px 10px !important; font-size: 7px !important; }

  html body .app-shell .layers .artboard-inspector-panel > label.compact-field,
  html body .app-shell .layers .artboard-inspector-panel .artboard-resize-mode {
    display: grid !important;
    min-height: 31px !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers .artboard-inspector-panel :is(select,input[type="number"]) { width: 100% !important; min-width: 0 !important; height: 30px !important; min-height: 30px !important; padding: 3px 5px !important; font-size: 10px !important; }

  html body .app-shell .layers .artboard-size-fields,
  html body .app-shell .layers .artboard-property-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  html body .app-shell .layers .artboard-size-fields label { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; align-items: center !important; gap: 4px !important; font-size: 9px !important; }
  html body .app-shell .layers .artboard-property-row label { display: grid !important; min-width: 0 !important; gap: 2px !important; font-size: 9px !important; }

  html body .app-shell .layers .artboard-inspector-panel :is(.artboard-guide-manager,.artboard-print-boundaries,.artboard-manager) {
    margin: 0 !important;
    padding: 0 0 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #d8dde3 !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers .artboard-inspector-panel :is(.artboard-guide-manager,.artboard-print-boundaries,.artboard-manager) > header {
    display: flex !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers .artboard-inspector-panel :is(.artboard-guide-manager,.artboard-print-boundaries,.artboard-manager) h3 { margin: 0 !important; font-size: 10px !important; font-weight: 400 !important; }
  html body .app-shell .layers :is(.artboard-guide-actions,.artboard-manager-actions) { display: grid !important; grid-auto-flow: column !important; gap: 2px !important; }
  html body .app-shell .layers :is(.artboard-guide-actions,.artboard-manager-actions) button { display: grid !important; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; place-items: center !important; padding: 0 !important; }
  html body .app-shell .layers :is(.artboard-guide-actions,.artboard-manager-actions) img { width: 15px !important; height: 15px !important; }

  html body .app-shell .layers .print-boundary-fields { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; }
  html body .app-shell .layers .print-boundary-fields > label { display: grid !important; min-width: 0 !important; gap: 2px !important; font-size: 9px !important; }
  html body .app-shell .layers .artboard-inspector-panel :is(.print-boundary-toggle,.print-crop-mark-toggle,.artboard-clip-control) { display: inline-flex !important; min-height: 26px !important; align-items: center !important; gap: 5px !important; margin: 0 !important; font-size: 9px !important; }
  html body .app-shell .layers .artboard-inspector-panel :is(.print-boundary-toggle,.print-crop-mark-toggle,.artboard-clip-control) input { width: 15px !important; height: 15px !important; min-height: 15px !important; margin: 0 !important; }
  html body .app-shell .layers #printBoundaryStatus { display: none !important; }

  html body .app-shell .layers :is(.document-guide-list,.document-artboard-list) { margin: 0 !important; padding: 0 !important; }
  html body .app-shell .layers .document-artboard-list > li { min-height: 36px !important; padding: 3px 5px !important; }
  html body .app-shell .layers .document-file-import { min-height: 31px !important; margin: 0 !important; padding: 6px !important; font-size: 9px !important; }
}

/* Source: release-766.css */
/* Release 766: compact searchable Library workspace. */

@media (max-width: 700px) {
  html body .app-shell .layers > [data-inspector-view="library"] { display: block !important; min-height: 0 !important; overflow: auto !important; padding: 0 8px 64px !important; }
  html body .app-shell .layers [data-inspector-view="library"] > .panel { display: grid !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; }
  html body .app-shell .layers [data-inspector-view="library"] > .panel > h2,
  html body .app-shell .layers #libraryStatus { display: none !important; }

  html body .app-shell .layers .library-section-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: grid !important;
    width: calc(100% + 16px) !important;
    height: 46px !important;
    min-height: 46px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin: 0 -8px !important;
    overflow: hidden !important;
    border-bottom: 1px solid #cfd5dc !important;
    background: #fff !important;
  }

  html body .app-shell .layers .library-section-tabs button {
    display: grid !important;
    min-width: 0 !important;
    min-height: 45px !important;
    grid-template-rows: 18px 11px !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 4px 1px !important;
    border: 0 !important;
    border-right: 1px solid #edf0f3 !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 8px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers .library-section-tabs button:last-child { border-right: 0 !important; }
  html body .app-shell .layers .library-section-tabs button.is-active { background: #e8f2ff !important; box-shadow: inset 0 -2px #1674ce !important; }
  html body .app-shell .layers .library-section-tabs img { width: 17px !important; height: 17px !important; }

  html body .app-shell .layers .library-section { display: grid !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; }
  html body .app-shell .layers .library-section[hidden] { display: none !important; }
  html body .app-shell .layers .library-section > h3 { margin: 2px 0 0 !important; font-size: 10px !important; font-weight: 400 !important; }

  html body .app-shell .layers .library-browse-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 76px 68px !important;
    gap: 4px !important;
  }

  html body .app-shell .layers :is(.library-browse-controls,.library-catalog-tools) :is(input,select) { width: 100% !important; min-width: 0 !important; height: 31px !important; min-height: 31px !important; padding: 3px 6px !important; font-size: 9px !important; }
  html body .app-shell .layers .library-catalog-tools { display: grid !important; grid-template-columns: minmax(0, 1fr) 38px !important; align-items: center !important; gap: 4px !important; }
  html body .app-shell .layers .library-catalog-tools output { min-width: 0 !important; text-align: center !important; font-size: 9px !important; }

  html body .app-shell .layers .library-actions { display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; gap: 4px !important; }
  html body .app-shell .layers .library-actions button { display: grid !important; min-width: 0 !important; min-height: 32px !important; grid-template-columns: 16px auto !important; place-content: center !important; gap: 4px !important; padding: 3px 6px !important; font-size: 9px !important; font-weight: 400 !important; }
  html body .app-shell .layers .library-actions img { width: 15px !important; height: 15px !important; }

  html body .app-shell .layers .library-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 0 6px !important;
  }

  html body .app-shell .layers .library-grid > * { min-width: 0 !important; margin: 0 !important; }
  html body .app-shell .layers .library-grid :is(button,.library-item,.library-card) { min-width: 0 !important; min-height: 82px !important; padding: 4px !important; overflow: hidden !important; border: 1px solid #d8dde3 !important; border-radius: 4px !important; background: #fff !important; font-size: 8px !important; font-weight: 400 !important; }
  html body .app-shell .layers .library-grid :is(img,canvas,.library-thumbnail) { max-width: 100% !important; object-fit: contain !important; }
}

/* Source: release-767.css */
/* Release 767: lock the four mobile inspector workspaces to one shared shell. */

@media (max-width: 700px) {
  html body .app-shell .layers {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    padding-top: 18px !important;
    overflow: hidden !important;
  }

  html body .app-shell .layers > .inspector-title {
    z-index: 150 !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
    padding: 0 3px !important;
    border-bottom: 1px solid var(--inspector-line, #d8dde3) !important;
  }

  html body .app-shell .layers > .inspector-title p { display: none !important; }
  html body .app-shell .layers > .inspector-title h2 { font-size: 14px !important; line-height: 18px !important; }
  html body .app-shell .layers > .inspector-title :is(.sheet-select-button,.sheet-add-button,.sheet-close-button) { height: 34px !important; min-height: 34px !important; }

  html body .app-shell .layers > .inspector-view.is-active:not([hidden]) {
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html body .app-shell .layers > [data-inspector-view="properties"],
  html body .app-shell .layers > [data-inspector-view="artboard"],
  html body .app-shell .layers > [data-inspector-view="library"] {
    padding: 0 8px 64px !important;
  }

  html body .app-shell .layers :is(#styleSectionNav,.artboard-view-toggles,.library-section-tabs) {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    width: calc(100% + 16px) !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 -8px !important;
    overflow: hidden !important;
    background: var(--inspector-bg, #fff) !important;
  }

  html body .app-shell .layers :is(#styleSectionNav,.artboard-view-toggles,.library-section-tabs) > button {
    width: auto !important;
    min-width: 0 !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 3px 1px !important;
    font-size: 8px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #layersWorkspacePanel {
    display: flex !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  html body .app-shell .layers #layersWorkspacePanel #layerCommandToolbar {
    position: sticky !important;
    top: 0 !important;
    bottom: auto !important;
    z-index: 80 !important;
    order: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
  }

  html body .app-shell .layers #layersWorkspacePanel #layerCommandToolbar button {
    height: 43px !important;
    min-height: 43px !important;
  }

  html body .app-shell .layers #layersWorkspacePanel > .adobe-layer-header { order: 1 !important; }
  html body .app-shell .layers #layersWorkspacePanel > #documentLayerStack { order: 2 !important; min-height: 0 !important; flex: 1 1 auto !important; }
  html body .app-shell .layers #layersWorkspacePanel > :is(#layerPropertiesPanel,#layerMoreMenu) { order: 3 !important; max-height: min(28dvh, 190px) !important; overflow: auto !important; }

  html body .app-shell .layers .artboard-view-options { top: 44px !important; }
  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav { top: 44px !important; }
}

/* Source: release-774.css */
/* Release 774: compact the Style workspace without changing its tool hierarchy. */

@media (max-width: 700px) {
  html body .app-shell .layers [data-inspector-view="properties"] > .panel.is-panel-focus {
    gap: 4px !important;
    padding: 5px !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > .panel.is-panel-focus > h2 {
    display: none !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > .panel.is-panel-focus :is(label, fieldset) {
    margin-block: 0 !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > .panel.is-panel-focus :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select) {
    height: 27px !important;
    min-height: 27px !important;
    padding-block: 2px !important;
    font-size: 10px !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > .panel.is-panel-focus :is(button, .compact-icon-button) {
    min-height: 27px !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > .panel.is-panel-focus :is(details, .style-inspector-section, .paint-section) {
    margin-block: 0 !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > .panel.is-panel-focus :is(details, .style-inspector-section, .paint-section) > summary {
    min-height: 29px !important;
    padding: 5px 2px !important;
    font-size: 10px !important;
    line-height: 18px !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-primary-row, .type-tool-row, .type-metrics-grid),
  html body .app-shell .layers #styleColorSurface :is(.paint-section-content, .paint-settings-grid, .stroke-options-grid),
  html body .app-shell .layers #styleTransformSurface :is(.quad-grid, .button-row, .transform-actions) {
    margin-block: 0 !important;
    row-gap: 4px !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-metrics-grid, .type-flow-grid, .paragraph-layout-grid, .type-path-grid),
  html body .app-shell .layers #styleColorSurface :is(.paint-settings-grid, .stroke-options-grid),
  html body .app-shell .layers #styleTransformSurface .quad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-metrics-grid, .type-flow-grid, .paragraph-layout-grid, .type-path-grid) > label,
  html body .app-shell .layers #styleColorSurface :is(.paint-settings-grid, .stroke-options-grid) > label,
  html body .app-shell .layers #styleTransformSurface .quad-grid > label {
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 2px !important;
    padding: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-control {
    min-height: 62px !important;
    padding: 4px 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-grid {
    width: 66px !important;
    height: 54px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-color-row {
    min-height: 29px !important;
  }

  html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar, .stroke-choice-toolbar, .type-format-toolbar, .type-align-toolbar) {
    min-height: 27px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface :is(.appearance-attribute-row, .appearance-stack-actions) {
    min-height: 29px !important;
  }
}

/* Source: release-779.css */
/* Release 779: one compact, context-aware professional Style inspector. */

@media (max-width: 700px) {
  html body .app-shell .layers #styleSectionNav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    min-height: 43px !important;
    overflow: hidden !important;
  }

  html body .app-shell .layers #styleSectionNav > button {
    min-width: 0 !important;
    min-height: 43px !important;
    padding: 3px 1px 2px !important;
    gap: 1px !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleSectionNav > button img {
    width: 17px !important;
    height: 17px !important;
  }

  html body .app-shell .layers :is(#styleAppearanceSurface,#styleTypeSurface,#styleColorSurface).is-panel-focus {
    display: grid !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 0 !important;
    padding: 0 7px 7px !important;
  }

  html body .app-shell .layers :is(#styleAppearanceSurface,#styleTypeSurface,#styleColorSurface).is-panel-focus > h2 {
    display: none !important;
  }

  /* Style: Linearity-style fixed transform controls followed by disclosures. */
  html body .app-shell .layers #styleAppearanceSurface #styleTransformSurface.style-transform-block {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 5px 7px !important;
    margin: 0 !important;
    padding: 7px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line, #d8dde3) !important;
    background: transparent !important;
  }

  html body .app-shell .layers #styleTransformSurface > h2,
  html body .app-shell .layers #styleTransformSurface #modelInfo {
    display: none !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-control {
    grid-row: 1 / span 3 !important;
    display: grid !important;
    align-content: start !important;
    gap: 3px !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-grid {
    width: 54px !important;
    height: 54px !important;
    gap: 2px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-grid button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface .quad-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface :is(.quad-grid,.button-row) label {
    display: grid !important;
    grid-template-columns: 12px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleTransformSurface :is(.quad-grid,.button-row) input {
    width: 100% !important;
    height: 25px !important;
    min-width: 0 !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleTransformSurface > .button-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-option {
    grid-column: 2 !important;
    display: inline-flex !important;
    min-height: 20px !important;
    margin: 0 !important;
    gap: 4px !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-actions {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 28px) !important;
    justify-content: end !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-actions button {
    width: 28px !important;
    min-width: 28px !important;
    min-height: 27px !important;
    padding: 4px !important;
  }

  html body .app-shell .layers #styleTransformSurface > label:not(.transform-option),
  html body .app-shell .layers #styleTransformSurface > #replaceModelButton {
    grid-column: 1 / -1 !important;
    min-height: 27px !important;
    margin: 0 !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface > details {
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line, #d8dde3) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body .app-shell .layers #styleAppearanceSurface > details > summary {
    min-height: 30px !important;
    padding: 5px 1px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel .style-inspector-content {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 5px 0 7px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel .style-inspector-content > label {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleAppearanceSurface #styleAppearancePanel .style-inspector-content > label select {
    grid-column: 2 / 4 !important;
  }

  html body .app-shell .layers #styleAppearanceSurface .appearance-stack {
    grid-column: 1 / -1 !important;
  }

  /* Type: primary controls and icon commands remain above collapsed advanced groups. */
  html body .app-shell .layers #styleTypeSurface .type-primary-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px 28px !important;
    gap: 4px !important;
    padding: 7px 0 4px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-primary-row label {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-primary-row :is(select,input,button) {
    width: 100% !important;
    height: 27px !important;
    min-width: 0 !important;
    min-height: 27px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-tool-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 3px 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button {
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 5px !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 3px 0 6px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-metrics-grid label {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-metrics-grid :is(input,select) {
    width: 100% !important;
    height: 27px !important;
    min-width: 0 !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleTypeSurface > details {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line, #d8dde3) !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface > details > summary {
    min-height: 30px !important;
    padding: 5px 1px !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-flow-grid,.paragraph-layout-grid,.type-path-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 5px 0 !important;
  }

  /* Paint: Fill and Stroke are separate compact sections in one inspector. */
  html body .app-shell .layers #styleColorSurface .paint-utility-row {
    min-height: 30px !important;
    padding: 3px 0 !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleColorSurface > .paint-section {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line, #d8dde3) !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleColorSurface > .paint-section > summary {
    min-height: 31px !important;
    padding: 5px 1px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-section-content {
    display: grid !important;
    gap: 5px !important;
    padding: 5px 0 7px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-color-row {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 28px 28px !important;
    gap: 4px !important;
    min-height: 28px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-color-row > * {
    min-width: 0 !important;
    min-height: 28px !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-hex-control input {
    width: 100% !important;
    height: 28px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
  }

  html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
    min-height: 28px !important;
  }

  html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) button {
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 4px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-range-field {
    display: grid !important;
    grid-template-columns: 45px minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 8px !important;
  }

  html body .app-shell .layers #styleColorSurface .stroke-primary-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  html body .app-shell .layers #styleColorSurface :is(.paint-pattern-options,.stroke-options-panel) {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line, #d8dde3) !important;
  }

  html body .app-shell .layers #styleColorSurface :is(.paint-pattern-options,.stroke-options-panel) > summary {
    min-height: 29px !important;
    padding: 5px 1px !important;
    font-size: 9px !important;
  }
}

/* Source: release-780.css */
/* Release 780: compact Style categories with stable, grouped inspector surfaces. */

@media screen {
  html body .app-shell .ai-edit-panel {
    bottom: calc(64px + max(8px, env(safe-area-inset-bottom))) !important;
    max-height: min(360px, calc(100dvh - 132px)) !important;
  }

  html body .app-shell .layers #styleSectionNav {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    min-height: 42px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    background: var(--panel, #fff) !important;
    border-bottom: 1px solid var(--line, #d8dde3) !important;
  }

  html body .app-shell .layers #styleSectionNav::-webkit-scrollbar { display: none !important; }

  html body .app-shell .layers #styleSectionNav > button:not([hidden]) {
    display: grid !important;
    flex: 1 0 44px !important;
    min-width: 44px !important;
    max-width: 54px !important;
    min-height: 42px !important;
    grid-template-rows: 18px 14px !important;
    place-items: center !important;
    gap: 1px !important;
    padding: 4px 1px 2px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ink, #17212b) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
  }

  html body .app-shell .layers #styleSectionNav > button.is-active {
    border-bottom-color: var(--accent, #d79a2b) !important;
    background: color-mix(in srgb, var(--accent, #d79a2b) 9%, transparent) !important;
  }

  html body .app-shell .layers #styleSectionNav > button img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain !important;
  }

  html body .app-shell .layers [data-inspector-view="properties"] > [data-style-surface].is-panel-focus {
    display: grid !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 0 !important;
    padding: 0 7px 8px !important;
    overflow-x: hidden !important;
  }

  html body .app-shell .layers [data-style-surface].is-panel-focus > h2 { display: none !important; }

  /* These surfaces contain complete rows, not the older individual field grid. */
  html body .app-shell .layers [data-inspector-view="properties"] > :is(#styleTypeSurface,#styleColorSurface,#styleAppearanceSurface).is-panel-focus {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .app-shell .layers #styleTypeSurface > :is(.type-primary-row,.type-tool-row,.type-metrics-grid,.type-compact-disclosure) {
    grid-column: 1 / -1 !important;
  }

  html body .app-shell .layers [data-style-surface].is-panel-focus :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select) {
    width: 100% !important;
    height: 27px !important;
    min-width: 0 !important;
    min-height: 27px !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers [data-style-surface].is-panel-focus button {
    min-height: 27px !important;
    border-radius: 3px !important;
  }

  /* Location */
  html body .app-shell .layers #styleTransformSurface.is-panel-focus {
    display: block !important;
    padding-top: 7px !important;
  }

  html body .app-shell .layers #styleTransformSurface .style-location-controls {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 5px 7px !important;
  }

  html body .app-shell .layers #styleTransformSurface .style-location-controls[hidden] { display: none !important; }

  html body .app-shell .layers #styleTransformSurface .transform-reference-control {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    display: grid !important;
    align-content: start !important;
    gap: 4px !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-grid {
    width: 58px !important;
    height: 58px !important;
    gap: 2px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-reference-grid button {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface .quad-grid {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface :is(.quad-grid,.button-row) label {
    display: grid !important;
    grid-template-columns: 12px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleTransformSurface .style-location-controls > .button-row:not(.transform-actions) {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-option {
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 20px !important;
    margin: 0 !important;
    gap: 4px !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-actions {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 28px) !important;
    justify-content: end !important;
    gap: 3px !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleTransformSurface .transform-actions button {
    width: 28px !important;
    min-width: 28px !important;
    padding: 4px !important;
  }

  html body .app-shell .layers #styleTransformSurface .style-location-controls > label:not(.transform-option),
  html body .app-shell .layers #styleTransformSurface .style-location-controls > :is(#modelInfo,#replaceModelButton) {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  /* One panel at a time: Arrange, Appearance, Fill, Stroke, Effects. */
  html body .app-shell .layers :is(#styleArrangePanel,#styleAppearancePanel,#styleFillPanel,#styleStrokePanel,#imageEffectsPanel) {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body .app-shell .layers :is(#styleAppearancePanel,#imageEffectsPanel) > summary {
    display: none !important;
  }

  html body .app-shell .layers :is(#styleArrangePanel,#styleFillPanel,#styleStrokePanel) > summary {
    display: flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--line, #d8dde3) !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers :is(#styleArrangePanel,#styleAppearancePanel,#styleFillPanel,#styleStrokePanel,#imageEffectsPanel) > .style-inspector-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 7px 0 !important;
  }

  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) button {
    display: grid !important;
    min-width: 0 !important;
    min-height: 34px !important;
    place-items: center !important;
    padding: 4px 2px !important;
    font-size: 10px !important;
  }

  html body .app-shell .layers #styleArrangePanel :is(.style-order-grid,.align-grid) img {
    width: 16px !important;
    height: 16px !important;
  }

  html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label select { grid-column: 2 / 4 !important; }
  html body .app-shell .layers #styleAppearancePanel .appearance-stack { margin-top: 2px !important; }

  html body .app-shell .layers #styleAppearancePanel .appearance-stack-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 22px 28px !important;
    align-items: center !important;
    min-height: 29px !important;
    gap: 3px !important;
  }

  html body .app-shell .layers #styleAppearancePanel .appearance-stack-heading #appearanceClear {
    display: grid !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    place-items: center !important;
    padding: 5px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body .app-shell .layers #styleAppearancePanel .appearance-stack-actions[hidden] { display: none !important; }

  html body .app-shell .layers #styleColorSurface .paint-utility-row {
    display: none !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-color-row {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 28px 28px !important;
    gap: 4px !important;
    min-height: 28px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-color-row:has(#swapPaintButton) {
    grid-template-columns: 32px minmax(0, 1fr) 28px 28px 28px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-color-row > * {
    min-width: 0 !important;
    min-height: 28px !important;
    margin: 0 !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-color-row #swapPaintButton {
    display: grid !important;
    width: 28px !important;
    height: 28px !important;
    place-items: center !important;
    padding: 5px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-color-row :is(.paint-swatch-control, .compact-icon-button) {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-color-row .paint-swatch-control {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-mode-toolbar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  html body .app-shell .layers #styleColorSurface .stroke-dash-toolbar {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body .app-shell .layers #styleColorSurface .stroke-choice-toolbar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  html body .app-shell .layers #styleColorSurface :is(.paint-mode-toolbar,.stroke-choice-toolbar) button {
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 4px !important;
  }

  html body .app-shell .layers #styleColorSurface .paint-range-field {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleColorSurface :is(.paint-pattern-options,.stroke-options-panel) {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line, #d8dde3) !important;
  }

  html body .app-shell .layers #styleColorSurface :is(.paint-pattern-options,.stroke-options-panel) > summary {
    min-height: 29px !important;
    padding: 5px 1px !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleColorSurface.is-panel-focus,
  html body .app-shell .layers #styleColorSurface .style-inspector-section,
  html body .app-shell .layers #styleColorSurface .style-inspector-content,
  html body .app-shell .layers #styleColorSurface .stroke-options-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Type mirrors the compact competitor screenshot. */
  html body .app-shell .layers #styleTypeSurface .type-primary-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px 28px !important;
    gap: 4px !important;
    padding: 7px 0 4px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-primary-row label,
  html body .app-shell .layers #styleTypeSurface .type-metrics-grid label {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-tool-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 3px 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-format-toolbar,.type-align-toolbar) button {
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 5px !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 3px 0 6px !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.paragraph-layout-grid,.type-path-grid) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px 0 6px !important;
  }

  html body .app-shell .layers #styleTypeSurface .type-flow-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 4px 0 6px !important;
  }

  html body .app-shell .layers #styleTypeSurface :is(.type-flow-grid,.paragraph-layout-grid,.type-path-grid) > label {
    display: grid !important;
    min-width: 0 !important;
    gap: 1px !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #styleTypeSurface > details {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line, #d8dde3) !important;
    border-radius: 0 !important;
  }

  html body .app-shell .layers #styleTypeSurface > details > summary {
    min-height: 30px !important;
    padding: 5px 1px !important;
    font-size: 11px !important;
  }

  /* Photo keeps its nested sections and sliders close to the artboard. */
  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav {
    height: 38px !important;
    min-height: 38px !important;
    margin-bottom: 1px !important;
  }

  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav button {
    min-height: 38px !important;
    grid-template-rows: 15px 10px !important;
    gap: 1px !important;
    padding: 3px 1px !important;
    font-size: 10px !important;
  }

  html body .app-shell .layers #stylePhotoSurface #photoAdjustmentNav img {
    width: 15px !important;
    height: 15px !important;
  }

  html body .app-shell .layers #stylePhotoSurface > label:not(.filter-toggle),
  html body .app-shell .layers #stylePhotoSurface .tone-settings > label {
    min-height: 26px !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 1px 0 !important;
    font-size: 11px !important;
  }

  html body .app-shell .layers #stylePhotoSurface .retouch-range {
    grid-template-columns: minmax(0, 1fr) 30px !important;
    gap: 3px !important;
  }

  html body .app-shell .layers #stylePhotoSurface .filter-toggle {
    min-height: 25px !important;
    padding: 2px 0 !important;
    font-size: 11px !important;
  }
}

/* Release 781: compact BYO-AI controls and full-viewport web sizing. */
@media screen {
  html body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html body .app-shell {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  html body .app-shell .workspace,
  html body .app-shell .layers,
  html body .app-shell .canvas-wrap {
    min-width: 0 !important;
  }

  html body .app-shell .ai-edit-panel {
    width: min(344px, calc(100vw - 56px)) !important;
    max-width: calc(100vw - 56px) !important;
    padding: 9px !important;
    gap: 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body .app-shell .ai-edit-connectors,
  html body .app-shell .ai-edit-partners {
    margin: 0 !important;
    border-top: 1px solid var(--line, #d8dde3) !important;
    padding-top: 5px !important;
  }

  html body .app-shell .ai-edit-connectors > summary,
  html body .app-shell .ai-edit-partners > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 25px !important;
    color: var(--ink, #17212b) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  html body .app-shell .ai-edit-connectors > summary small,
  html body .app-shell .ai-edit-partners > summary small {
    color: var(--muted, #69717f) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
  }

  html body .app-shell .ai-edit-connector-row {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 52px 58px !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 5px !important;
  }

  html body .app-shell .ai-edit-provider-row {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 5px !important;
  }

  html body .app-shell .ai-edit-provider-row label {
    color: var(--muted, #69717f) !important;
    font-size: 10px !important;
  }

  html body .app-shell .ai-edit-provider-row select {
    min-width: 0 !important;
    width: 100% !important;
    height: 27px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  html body .app-shell .ai-edit-connector-row label {
    color: var(--muted, #69717f) !important;
    font-size: 10px !important;
  }

  html body .app-shell .ai-edit-connector-row input {
    min-width: 0 !important;
    width: 100% !important;
    height: 27px !important;
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  html body .app-shell .ai-edit-connector-row button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    min-height: 27px !important;
    padding: 3px 4px !important;
    font-size: 10px !important;
  }

  html body .app-shell .ai-edit-connector-row button img {
    width: 13px !important;
    height: 13px !important;
  }

  html body .app-shell .ai-edit-connector-note {
    display: block !important;
    margin-top: 5px !important;
    color: var(--muted, #69717f) !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
  }

  html body .app-shell .ai-edit-partners ul {
    display: grid !important;
    gap: 3px !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body .app-shell .ai-edit-partners li {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 25px !important;
    padding: 3px 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--line, #d8dde3) 70%, transparent) !important;
    font-size: 10px !important;
  }

  html body .app-shell .ai-edit-partners li small {
    color: var(--muted, #69717f) !important;
    font-size: 9px !important;
  }

  html body .app-shell .ai-edit-partners li a {
    color: var(--accent-2, #167c80) !important;
    font-size: 10px !important;
    text-decoration: underline !important;
  }
}

@media screen and (min-width: 921px) {
  html body .app-shell {
    min-height: 100dvh !important;
  }

  html body .app-shell .workspace {
    min-height: 100dvh !important;
  }

  html body .app-shell .canvas-wrap {
    min-height: calc(100dvh - 56px) !important;
    overflow: auto !important;
  }

  html body .app-shell .layers {
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body .app-shell .topbar {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

@media screen and (max-width: 920px) {
  html body .app-shell .topbar,
  html body .app-shell .workspace,
  html body .app-shell .canvas-wrap {
    max-width: 100vw !important;
  }
}

/* Release 782: keep the standalone app shell separate from the desktop website shell. */
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] {
    --phone-width: 100vw;
    --phone-left: 0px;
  }

  html[data-photostrator-surface="web"] body .app-shell {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 320px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .workspace {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: var(--ios-canvas) !important;
  }

  html[data-photostrator-surface="web"] body .topbar {
    position: relative !important;
    inset: auto !important;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 8px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ios-line) !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .topbar-back-button {
    display: none !important;
  }

  html[data-photostrator-surface="web"] body .history-actions {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 56px !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  html[data-photostrator-surface="web"] body .document-chip {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 154px !important;
    min-width: 154px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 8px !important;
    border-right: 1px solid var(--ios-line) !important;
    background: transparent !important;
  }

  html[data-photostrator-surface="web"] body .document-brand-mark {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    object-fit: contain !important;
  }

  html[data-photostrator-surface="web"] body .document-chip-text {
    display: grid !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  html[data-photostrator-surface="web"] body .document-chip span {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--ios-muted) !important;
    font-size: 10px !important;
    line-height: 12px !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .document-chip strong {
    width: 100% !important;
    color: var(--ios-text) !important;
    font-size: 13px !important;
    line-height: 16px !important;
    text-align: left !important;
  }

  html[data-photostrator-surface="web"] body #iosMenuButton {
    position: absolute !important;
    z-index: 5100 !important;
    top: 0 !important;
    right: 320px !important;
    left: auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-left: 1px solid var(--ios-line) !important;
    background: var(--ios-surface) !important;
  }

  html[data-photostrator-surface="web"] body #documentActionMenu {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 4px 0 !important;
    gap: 2px !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body #documentActionMenu button,
  html[data-photostrator-surface="web"] body #documentActionMenu #undoButton,
  html[data-photostrator-surface="web"] body #documentActionMenu #redoButton,
  html[data-photostrator-surface="web"] body #documentActionMenu #deleteButton {
    position: relative !important;
    inset: auto !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 48px !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-rows: 21px 12px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 3px 2px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--ios-text) !important;
  }

  html[data-photostrator-surface="web"] body #documentActionMenu button img,
  html[data-photostrator-surface="web"] body #documentActionMenu #undoButton img,
  html[data-photostrator-surface="web"] body #documentActionMenu #redoButton img,
  html[data-photostrator-surface="web"] body #documentActionMenu #deleteButton img {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
  }

  html[data-photostrator-surface="web"] body #documentActionMenu button span {
    position: static !important;
    width: 100% !important;
    height: 12px !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    color: var(--ios-muted) !important;
    font-size: 9px !important;
    line-height: 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .topbar .mode-switcher,
  html[data-photostrator-surface="web"] body .topbar .zoom-actions,
  html[data-photostrator-surface="web"] body .topbar .view-actions,
  html[data-photostrator-surface="web"] body .topbar .export-actions,
  html[data-photostrator-surface="web"] body .topbar .export-status {
    display: flex !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 3px !important;
    gap: 2px !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .topbar .mode-switcher {
    max-width: 260px !important;
    overflow-x: auto !important;
  }

  html[data-photostrator-surface="web"] body .topbar .mode-switcher button,
  html[data-photostrator-surface="web"] body .topbar .zoom-actions button,
  html[data-photostrator-surface="web"] body .topbar .view-actions button,
  html[data-photostrator-surface="web"] body .topbar .view-actions select,
  html[data-photostrator-surface="web"] body .topbar .export-actions button {
    position: static !important;
    width: auto !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body #addMenuButton {
    position: absolute !important;
    z-index: 4300 !important;
    top: 56px !important;
    left: 0 !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 48px !important;
    min-height: 48px !important;
    border: 0 !important;
    border-right: 1px solid var(--ios-line) !important;
    border-bottom: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
  }

  html[data-photostrator-surface="web"] body .sidebar {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    inset: auto !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 104px 7px 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-right: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .sidebar .brand,
  html[data-photostrator-surface="web"] body .sidebar .color-widget,
  html[data-photostrator-surface="web"] body .sidebar .sidebar-popout,
  html[data-photostrator-surface="web"] body .sidebar > .panel:not(:first-of-type),
  html[data-photostrator-surface="web"] body .sidebar > .panel:first-of-type > h2 {
    display: none !important;
  }

  html[data-photostrator-surface="web"] body .sidebar > .panel:first-of-type {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .sidebar .tool-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 42px !important;
    align-content: start !important;
    gap: 2px !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html[data-photostrator-surface="web"] body .sidebar .tool,
  html[data-photostrator-surface="web"] body .sidebar .rail-profile-button {
    position: relative !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .sidebar .tool img,
  html[data-photostrator-surface="web"] body .sidebar .rail-profile-button img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
  }

  html[data-photostrator-surface="web"] body .sidebar .tool > span,
  html[data-photostrator-surface="web"] body .sidebar .rail-profile-button > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .app-frame-right-nav {
    position: absolute !important;
    z-index: 4200 !important;
    top: 56px !important;
    right: 320px !important;
    bottom: 0 !important;
    left: auto !important;
    width: 48px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: 44px !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden auto !important;
    border-left: 1px solid var(--ios-line) !important;
    background: var(--ios-surface) !important;
  }

  html[data-photostrator-surface="web"] body .app-frame-right-nav button {
    width: 47px !important;
    min-width: 47px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html[data-photostrator-surface="web"] body .app-frame-right-nav button > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .app-frame-right-nav button img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
  }

  html[data-photostrator-surface="web"] body .canvas-wrap {
    position: absolute !important;
    inset: 56px 0 0 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 70px 82px 22px !important;
    overflow: auto !important;
    background: var(--ios-canvas) !important;
  }

  html[data-photostrator-surface="web"] body .layers {
    position: relative !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-left: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-panel) !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .layers::before,
  html[data-photostrator-surface="web"] body .mobile-ios-sheet {
    display: none !important;
  }

  html[data-photostrator-surface="web"] body .layers .inspector-title {
    position: sticky !important;
    top: 0 !important;
    display: grid !important;
    min-height: 48px !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    background: var(--ios-panel) !important;
  }

  html[data-photostrator-surface="web"] body .layers .inspector-title h2 {
    font-size: 17px !important;
    line-height: 22px !important;
  }

  html[data-photostrator-surface="web"] body .layers .style-section-nav {
    top: 48px !important;
  }

  html[data-photostrator-surface="web"] body .bottom-workflows {
    position: absolute !important;
    z-index: 4700 !important;
    left: 64px !important;
    right: 320px !important;
    bottom: 0 !important;
    width: auto !important;
    height: 56px !important;
    min-height: 56px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-top: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .bottom-workflows button,
  html[data-photostrator-surface="web"] body .bottom-workflows button[data-workflow] {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    grid-template-rows: 22px 13px !important;
    place-items: center !important;
    padding: 3px 4px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    font-size: 10px !important;
  }

  html[data-photostrator-surface="web"] body .bottom-workflows button img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
  }

  html[data-photostrator-surface="web"] body .bottom-workflows button span {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 13px !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    color: inherit !important;
    font-size: 10px !important;
    line-height: 13px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .ai-edit-panel {
    left: 72px !important;
    right: 336px !important;
    bottom: 72px !important;
    width: min(380px, calc(100vw - 432px)) !important;
    max-width: none !important;
  }

  html[data-photostrator-surface="web"] body .document-options-menu {
    position: absolute !important;
    top: 56px !important;
    right: 320px !important;
    left: auto !important;
    width: 300px !important;
    max-width: calc(100vw - 360px) !important;
  }
}
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="app"] body .app-shell {
    position: fixed !important;
    inset: 0 auto auto var(--phone-left) !important;
    width: var(--phone-width) !important;
    max-width: var(--phone-width) !important;
  }
}
/* Release 784: web-only header cleanup applies at every browser breakpoint. */
@media screen {
  html[data-photostrator-surface="web"] body .topbar .view-actions,
  html[data-photostrator-surface="web"] body .topbar .export-actions,
  html[data-photostrator-surface="web"] body .topbar .export-status {
    display: none !important;
  }

  html[data-photostrator-surface="web"] body .topbar {
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  html[data-photostrator-surface="web"] body .topbar .mode-switcher {
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html[data-photostrator-surface="web"] body .topbar .mode-switcher button {
    flex: 0 0 auto !important;
    min-width: 42px !important;
  }
}
/* Release 783: desktop website editor header and canvas navigation. */
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] body .topbar {
    overflow: hidden !important;
    padding-right: 52px !important;
  }

  html[data-photostrator-surface="web"] body .topbar .view-actions,
  html[data-photostrator-surface="web"] body .topbar .export-actions,
  html[data-photostrator-surface="web"] body .topbar .export-status {
    display: none !important;
  }

  html[data-photostrator-surface="web"] body .topbar .mode-switcher {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    display: flex !important;
  }

  html[data-photostrator-surface="web"] body .topbar .mode-switcher button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-inline: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-photostrator-surface="web"] body .topbar .zoom-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  html[data-photostrator-surface="web"] body .document-options-menu {
    max-height: calc(100vh - 72px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html[data-photostrator-surface="web"] body .canvas-wrap {
    cursor: default !important;
    overscroll-behavior: contain !important;
  }

  html[data-photostrator-surface="web"] body .canvas-wrap.is-hand-panning {
    cursor: grabbing !important;
    user-select: none !important;
  }
}
/* Release 785: keep dense web inspectors readable without truncation. */
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] body .layers .library-section-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }

  html[data-photostrator-surface="web"] body .layers .library-section-tabs button {
    grid-template-rows: 20px 0 !important;
    min-height: 42px !important;
    padding: 5px 2px !important;
  }

  html[data-photostrator-surface="web"] body .layers .library-section-tabs button span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html[data-photostrator-surface="web"] body .layers .library-section-tabs button img {
    width: 20px !important;
    height: 20px !important;
  }

  html[data-photostrator-surface="web"] body .artboard-media-timeline {
    min-height: 0 !important;
    max-height: min(236px, calc(100dvh - 196px)) !important;
  }

}
/* Release 786: dock web inspector navigation on the right, with a web-only toggle. */
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] body .app-shell {
    grid-template-columns: 64px minmax(0, 1fr) 320px !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed {
    grid-template-columns: 64px minmax(0, 1fr) 0px !important;
  }

  html[data-photostrator-surface="web"] body .layers {
    grid-column: 3 !important;
    margin-right: 64px !important;
  }

  html[data-photostrator-surface="web"] body .bottom-workflows {
    position: absolute !important;
    z-index: 4700 !important;
    top: 56px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 64px !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 64px !important;
    align-content: start !important;
    gap: 0 !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
    transform: none !important;
    border: 0 !important;
    border-left: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .bottom-workflows button,
  html[data-photostrator-surface="web"] body .bottom-workflows button[data-workflow] {
    width: 64px !important;
    min-width: 64px !important;
    height: 56px !important;
    min-height: 56px !important;
    grid-template-rows: 22px 14px !important;
    gap: 2px !important;
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ios-text) !important;
    font-size: 9px !important;
  }

  html[data-photostrator-surface="web"] body .bottom-workflows button img {
    width: 20px !important;
    height: 20px !important;
  }

  html[data-photostrator-surface="web"] body .bottom-workflows button span {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 14px !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    color: inherit !important;
    font-size: 9px !important;
    line-height: 14px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .bottom-workflows button.is-active {
    background: var(--ios-control-active) !important;
    color: var(--ios-accent) !important;
  }

  html[data-photostrator-surface="web"] body .topbar .view-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding: 3px !important;
    gap: 2px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="web"] body .topbar .view-actions > :not(#inspectorToggleButton) {
    display: none !important;
  }

  html[data-photostrator-surface="web"] body #inspectorToggleButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 76px !important;
    min-width: 76px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border: 1px solid var(--ios-line) !important;
    border-radius: 5px !important;
    background: var(--ios-surface) !important;
    color: var(--ios-text) !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body #inspectorToggleButton.is-active {
    background: var(--ios-control-active) !important;
    color: var(--ios-accent) !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed #iosMenuButton {
    right: 64px !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed .app-frame-right-nav {
    right: 64px !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed .layers {
    display: none !important;
  }
}
/* Release 787: widen the web inspector and reserve the header toggle. */
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] body .app-shell {
    grid-template-columns: 64px minmax(0, 1fr) 360px !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed {
    grid-template-columns: 64px minmax(0, 1fr) 0px !important;
  }

  html[data-photostrator-surface="web"] body #iosMenuButton {
    right: 360px !important;
  }

  html[data-photostrator-surface="web"] body .app-frame-right-nav {
    right: 360px !important;
  }

  html[data-photostrator-surface="web"] body .document-options-menu {
    right: 360px !important;
  }

  html[data-photostrator-surface="web"] body .ai-edit-panel {
    right: 376px !important;
  }

  html[data-photostrator-surface="web"] body .topbar .view-actions {
    position: absolute !important;
    top: 12px !important;
    right: 364px !important;
    z-index: 5200 !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed #iosMenuButton {
    right: 64px !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed .app-frame-right-nav {
    right: 64px !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed .document-options-menu {
    right: 64px !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed .ai-edit-panel {
    right: 80px !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed .topbar .view-actions {
    right: 108px !important;
  }
}
/* Release 788: keep the open-state header flow and pin only the collapsed toggle. */
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] body .app-shell:not(.inspector-collapsed) .topbar .view-actions {
    position: static !important;
    top: auto !important;
    right: auto !important;
  }

  html[data-photostrator-surface="web"] body .app-shell.inspector-collapsed .topbar .view-actions {
    position: absolute !important;
    top: 12px !important;
    right: 108px !important;
    z-index: 5200 !important;
  }
}
/* Release 789: stabilize web inspector headers across all web panels. */
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] body .layers .inspector-title {
    grid-template-columns: 48px minmax(0, 1fr) 34px 34px !important;
    grid-template-rows: 32px !important;
    align-items: center !important;
    justify-items: stretch !important;
  }

  html[data-photostrator-surface="web"] body .layers .inspector-title #sheetSelectButton {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-photostrator-surface="web"] body .layers .inspector-title h2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  html[data-photostrator-surface="web"] body .layers .inspector-title #sheetAddButton {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  html[data-photostrator-surface="web"] body .layers .inspector-title #sheetCloseButton {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  html[data-photostrator-surface="web"] body .layers .inspector-title p {
    display: none !important;
  }
}
/* Release 790: size the web inspector select control without title overlap. */
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] body .layers .inspector-title {
    grid-template-columns: 64px minmax(0, 1fr) 34px 34px !important;
  }

  html[data-photostrator-surface="web"] body .layers .inspector-title #sheetSelectButton {
    width: 64px !important;
    min-width: 64px !important;
    white-space: nowrap !important;
  }
}

/* Release 791: keep the native phone Video timeline visible and immediately usable. */
@media screen and (max-width: 700px) {
  html[data-photostrator-surface="web"] body[data-toolbar-profile="video"] .artboard-media-timeline {
    min-height: 0 !important;
    max-height: min(236px, calc(100dvh - 196px)) !important;
  }

  html[data-photostrator-surface="web"] body[data-toolbar-profile="video"] .document-artboard-pasteboard > .pasteboard-frame.is-active {
    order: -1 !important;
  }

  html:not([data-photostrator-surface="web"]) body .artboard-media-timeline:not([hidden]) {
    position: fixed !important;
    z-index: 2147482000 !important;
    left: 54px !important;
    right: 54px !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(236px, calc(100dvh - 250px)) !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 8px 0 0 0 !important;
    box-shadow: 0 -4px 18px rgba(20, 28, 36, .16) !important;
  }

  html:not([data-photostrator-surface="web"]) body .artboard-media-timeline .artboard-media-track-viewport {
    min-height: 70px !important;
  }
}
/* Release 792: native Video mode must paint above the app canvas and chrome. */
html:not([data-photostrator-surface="web"]) body[data-toolbar-profile="video"] .artboard-media-timeline:not([hidden]) {
  position: fixed !important;
  z-index: 2147483647 !important;
  left: 54px !important;
  right: 54px !important;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  max-width: none !important;
  max-height: min(236px, calc(100dvh - 250px)) !important;
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 8px 0 0 0 !important;
  box-shadow: 0 -4px 18px rgba(20, 28, 36, .16) !important;
}

/* Keep the phone-app video dock scrollable above navigation; More floats above it. */
@media screen and (max-width: 700px) {
  html:not([data-photostrator-surface="web"]) body[data-toolbar-profile="video"] .artboard-media-timeline:not([hidden]) {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    scrollbar-width: thin !important;
  }

  html:not([data-photostrator-surface="web"]) body[data-toolbar-profile="video"] .artboard-media-timeline > header {
    position: sticky !important;
    z-index: 2 !important;
    top: 0 !important;
    background: #fff !important;
  }

  html:not([data-photostrator-surface="web"]) body[data-toolbar-profile="video"] .artboard-media-more[open] .artboard-media-more-menu {
    position: fixed !important;
    z-index: 2147483647 !important;
    right: 46px !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px) + min(236px, calc(100dvh - 250px)) + 8px) !important;
    width: min(232px, calc(100vw - 96px)) !important;
    max-height: min(42dvh, 300px) !important;
  }
}

/* Release 793: keep the native 3D / Build inspector in a readable vertical flow. */
@media screen and (max-width: 700px) {
  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden auto !important;
    padding: 0 7px 12px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid var(--line, #d8dde3) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel:first-child {
    border-top: 0 !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > h2 {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > label {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 28px !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > label > :is(input, select, textarea) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    font-size: 11px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > .button-row,
  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > .print-profile-bar,
  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > .print-orientation-bar,
  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > .print-inspection-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 4px 0 6px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > :is(.button-row, .print-profile-bar, .print-orientation-bar, .print-inspection-bar) > label {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > :is(.button-row, .print-profile-bar, .print-orientation-bar, .print-inspection-bar) > label > :is(input, select) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > :is(.button-row, .print-profile-bar, .print-orientation-bar, .print-inspection-bar) > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 4px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > :is(.quad-grid, .print-bed-grid) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 4px 0 6px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > :is(.quad-grid, .print-bed-grid) > label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel > :is(.quad-grid, .print-bed-grid) > label > :is(input, select) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
  }

  html:not([data-photostrator-surface="web"]) body .layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel :is(.mini-status, .wide-button) {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 6px !important;
  }
}

/* Release 794: keep the native document menu between the fixed tool rails. */
@media screen and (max-width: 700px) {
  html:not([data-photostrator-surface="web"]) body .document-options-menu:not([hidden]) {
    position: fixed !important;
    z-index: 2147483000 !important;
    top: calc(96px + env(safe-area-inset-top, 0px)) !important;
    right: 44px !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    left: 46px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}

/* Release 795: web workspaces use compact contextual controls like professional creative suites. */
html:not([data-photostrator-surface="web"]) body .web-only-mode {
  display: none !important;
}

html[data-photostrator-surface="web"] body .layers [data-inspector-view="properties"]:has(> .workspace-context-panel.is-panel-focus) > .panel:not(.workspace-context-panel) {
  display: none !important;
}

html[data-photostrator-surface="web"] body .layers .workspace-context-panel.is-panel-focus {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-photostrator-surface="web"] body .workspace-context-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--ios-line) !important;
}

html[data-photostrator-surface="web"] body .workspace-context-heading h2 {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
}

html[data-photostrator-surface="web"] body .workspace-context-heading p {
  max-width: 220px !important;
  margin: 3px 0 0 !important;
  color: var(--ios-muted) !important;
  font-size: 11px !important;
  line-height: 15px !important;
}

html[data-photostrator-surface="web"] body .workspace-context-badge {
  flex: 0 0 auto !important;
  padding: 3px 6px !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 3px !important;
  color: var(--ios-muted) !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
}

html[data-photostrator-surface="web"] body .workspace-context-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: var(--ios-muted) !important;
  font-size: 10px !important;
}

html[data-photostrator-surface="web"] body .workspace-context-meta strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ios-text) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-photostrator-surface="web"] body .workspace-context-actions,
html[data-photostrator-surface="web"] body .workspace-context-footer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  min-width: 0 !important;
}

html[data-photostrator-surface="web"] body .workspace-context-footer {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  padding-top: 4px !important;
  border-top: 1px solid var(--ios-line) !important;
}

html[data-photostrator-surface="web"] body .workspace-context-action {
  display: grid !important;
  grid-template-rows: 17px 14px !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 4px 2px !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 4px !important;
  background: var(--ios-surface) !important;
  color: var(--ios-text) !important;
  font-size: 9px !important;
  line-height: 12px !important;
  white-space: nowrap !important;
}

html[data-photostrator-surface="web"] body .workspace-context-action:hover,
html[data-photostrator-surface="web"] body .workspace-context-action.is-active {
  border-color: var(--ios-accent) !important;
  background: var(--ios-selected) !important;
}

html[data-photostrator-surface="web"] body .workspace-context-action img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
}

html[data-photostrator-surface="web"] body .workspace-context-action span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-photostrator-surface="web"] body .workspace-context-fields,
html[data-photostrator-surface="web"] body .workspace-context-formula {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html[data-photostrator-surface="web"] body .workspace-context-formula {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

html[data-photostrator-surface="web"] body .workspace-context-fields label,
html[data-photostrator-surface="web"] body .workspace-context-formula label {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  color: var(--ios-muted) !important;
  font-size: 10px !important;
}

html[data-photostrator-surface="web"] body .workspace-context-fields select,
html[data-photostrator-surface="web"] body .workspace-context-formula input {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 5px !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 3px !important;
  background: var(--ios-surface) !important;
  color: var(--ios-text) !important;
  font-size: 11px !important;
}

html[data-photostrator-surface="web"] body .workspace-context-formula-wide {
  min-width: 0 !important;
}

@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] body .topbar .mode-switcher button {
    font-size: 9px !important;
    padding-inline: 4px !important;
  }

  html[data-photostrator-surface="web"] body .app-frame-right-nav {
    scrollbar-width: thin !important;
  }
}

/* Release 796: web interaction and chrome normalization. */
@media screen and (min-width: 921px) {
  html[data-photostrator-surface="web"] body {
    --web-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --web-font-body: 11px;
    --web-font-caption: 10px;
    --web-font-title: 16px;
    font-family: var(--web-font-family) !important;
  }

  html[data-photostrator-surface="web"] body :is(.topbar, .sidebar, .canvas-wrap, .layers, .app-frame-right-nav, .bottom-workflows, .tool-flyout, .tool-drawer) {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  html[data-photostrator-surface="web"] body :is(button, input, select, textarea) {
    box-sizing: border-box !important;
    font-family: inherit !important;
    line-height: 1.2 !important;
  }

  html[data-photostrator-surface="web"] body .topbar {
    min-height: 56px !important;
    height: 56px !important;
    line-height: 1.2 !important;
  }

  html[data-photostrator-surface="web"] body .topbar :is(button, select, .document-chip, .document-chip strong, .export-status) {
    font-family: inherit !important;
    font-size: var(--web-font-body) !important;
    line-height: 1.2 !important;
  }

  html[data-photostrator-surface="web"] body .topbar .document-chip {
    min-width: 0 !important;
    max-width: 190px !important;
    overflow: hidden !important;
  }

  html[data-photostrator-surface="web"] body .topbar .document-chip strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .topbar .mode-switcher button {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 6px !important;
    font-size: var(--web-font-caption) !important;
    line-height: 12px !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .sidebar .tool-grid {
    grid-auto-rows: 40px !important;
    gap: 2px !important;
  }

  html[data-photostrator-surface="web"] body .sidebar :is(.tool, .rail-profile-button) {
    width: 48px !important;
    min-width: 48px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  html[data-photostrator-surface="web"] body .sidebar :is(.tool, .rail-profile-button) img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }

  html[data-photostrator-surface="web"] body .app-frame-right-nav {
    width: 48px !important;
    grid-auto-rows: 40px !important;
    gap: 2px !important;
    padding: 4px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }

  html[data-photostrator-surface="web"] body .app-frame-right-nav button {
    width: 47px !important;
    min-width: 47px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  html[data-photostrator-surface="web"] body .app-frame-right-nav button img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }

  html[data-photostrator-surface="web"] body .layers {
    font-family: var(--web-font-family) !important;
    font-size: var(--web-font-body) !important;
    line-height: 1.2 !important;
    overflow-x: hidden !important;
  }

  html[data-photostrator-surface="web"] body .layers :is(h2, h3, summary, legend) {
    font-family: inherit !important;
    line-height: 1.2 !important;
  }

  html[data-photostrator-surface="web"] body .layers :is(h2, .inspector-title h2) {
    font-size: var(--web-font-title) !important;
    line-height: 20px !important;
  }

  html[data-photostrator-surface="web"] body .layers :is(h3, summary, legend, label, .panel-note, .mini-status, .stats p, .layer-kind, .inspector-title p) {
    font-size: var(--web-font-body) !important;
    line-height: 15px !important;
  }

  html[data-photostrator-surface="web"] body .layers :is(button, input, select, textarea) {
    max-width: 100% !important;
    font-size: var(--web-font-body) !important;
    line-height: 15px !important;
  }

  html[data-photostrator-surface="web"] body .layers :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 3px 6px !important;
  }

  html[data-photostrator-surface="web"] body .layers :is(.panel, section, fieldset, .button-row, .align-grid, .style-inspector-content, .workspace-context-actions, .workspace-context-footer) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-photostrator-surface="web"] body .layers :is(.button-row, .align-grid) {
    display: grid !important;
    gap: 5px !important;
  }

  html[data-photostrator-surface="web"] body .layers :is(.button-row, .align-grid) > button {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .workspace-context-panel.is-panel-focus {
    gap: 8px !important;
  }

  html[data-photostrator-surface="web"] body .workspace-context-heading {
    gap: 8px !important;
    min-width: 0 !important;
  }

  html[data-photostrator-surface="web"] body .workspace-context-heading h2 {
    font-size: 15px !important;
    line-height: 19px !important;
  }

  html[data-photostrator-surface="web"] body .workspace-context-heading p,
  html[data-photostrator-surface="web"] body .workspace-context-badge {
    font-size: var(--web-font-caption) !important;
    line-height: 13px !important;
  }

  html[data-photostrator-surface="web"] body :is(.workspace-context-actions, .workspace-context-footer) {
    gap: 5px !important;
  }

  html[data-photostrator-surface="web"] body .workspace-context-action {
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 3px 2px !important;
    font-size: var(--web-font-caption) !important;
    line-height: 12px !important;
    overflow: hidden !important;
  }

  html[data-photostrator-surface="web"] body .workspace-context-action img {
    width: 15px !important;
    height: 15px !important;
  }

  html[data-photostrator-surface="web"] body :is(.workspace-context-fields, .workspace-context-formula) {
    gap: 5px !important;
  }

  html[data-photostrator-surface="web"] body :is(.workspace-context-fields label, .workspace-context-formula label) {
    min-width: 0 !important;
    font-size: var(--web-font-caption) !important;
    line-height: 13px !important;
  }

  html[data-photostrator-surface="web"] body :is(.workspace-context-fields select, .workspace-context-formula input) {
    height: 27px !important;
    min-height: 27px !important;
    font-size: var(--web-font-body) !important;
  }

  html[data-photostrator-surface="web"] body .tool-flyout,
  html[data-photostrator-surface="web"] body .tool-drawer,
  html[data-photostrator-surface="web"] body .document-options-menu {
    box-sizing: border-box !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 76px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html[data-photostrator-surface="web"] body .tool-flyout button,
  html[data-photostrator-surface="web"] body .drawer-tool {
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 5px 7px !important;
    font-size: var(--web-font-body) !important;
    line-height: 14px !important;
  }

  html[data-photostrator-surface="web"] body .tool-flyout button > span,
  html[data-photostrator-surface="web"] body .drawer-tool > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-photostrator-surface="web"] body .tool-flyout {
    gap: 5px !important;
    border-radius: 8px !important;
  }

  html[data-photostrator-surface="web"] body .tool-drawer {
    gap: 8px !important;
    border-radius: 8px !important;
  }

  html[data-photostrator-surface="web"] body .tool-drawer section {
    gap: 5px !important;
  }

  html[data-photostrator-surface="web"] body .tool-drawer h3 {
    font-size: var(--web-font-caption) !important;
    line-height: 13px !important;
  }

  html[data-photostrator-surface="web"] body .canvas-wrap {
    cursor: grab !important;
    touch-action: none !important;
  }

  html[data-photostrator-surface="web"] body .canvas-wrap.is-hand-panning {
    cursor: grabbing !important;
  }
}
/* Release 797: keep the web interaction and type contract active at responsive widths. */
html[data-photostrator-surface="web"] body {
  --web-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --web-font-body: 11px;
  --web-font-caption: 10px;
  --web-font-title: 16px;
  font-family: var(--web-font-family) !important;
}

html[data-photostrator-surface="web"] body :is(.topbar, .sidebar, .canvas-wrap, .layers, .app-frame-right-nav, .bottom-workflows, .tool-flyout, .tool-drawer) {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

html[data-photostrator-surface="web"] body :is(.topbar, .sidebar, .canvas-wrap, .layers, .app-frame-right-nav, .bottom-workflows, .tool-flyout, .tool-drawer),
html[data-photostrator-surface="web"] body :is(.topbar, .sidebar, .layers, .app-frame-right-nav, .bottom-workflows, .tool-flyout, .tool-drawer) * {
  font-family: inherit !important;
}

html[data-photostrator-surface="web"] body .topbar :is(button, select, .document-chip, .document-chip strong, .export-status) {
  font-size: var(--web-font-body) !important;
  line-height: 1.2 !important;
}

html[data-photostrator-surface="web"] body .topbar .export-status[data-status="error"] {
  display: block !important;
  position: fixed !important;
  z-index: 15000 !important;
  left: 50% !important;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  width: max-content !important;
  max-width: min(680px, calc(100vw - 28px)) !important;
  max-height: min(40vh, 220px) !important;
  overflow: auto !important;
  padding: 12px 16px !important;
  border: 1px solid #d6aaa5 !important;
  border-left: 4px solid #b24d44 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 28px rgba(17, 24, 32, 0.2) !important;
  color: #252c32 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

html[data-photostrator-surface="web"] body .topbar :is(.document-brand-name, .document-chip-text) {
  font-size: var(--web-font-caption) !important;
  line-height: 12px !important;
}

html[data-photostrator-surface="web"] body .topbar :is(.document-title, #documentTitle) {
  font-size: 12px !important;
  line-height: 15px !important;
}

html[data-photostrator-surface="web"] body .document-action-menu > button {
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 2px 4px !important;
}

html[data-photostrator-surface="web"] body .document-action-menu > button span {
  font-size: var(--web-font-caption) !important;
  line-height: 12px !important;
}

html[data-photostrator-surface="web"] body :is(.category-tool-rail, .app-frame-right-nav) button {
  box-sizing: border-box !important;
  min-width: 40px !important;
  width: 47px !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 3px 2px !important;
  overflow: hidden !important;
}

html[data-photostrator-surface="web"] body .category-tool-rail button img,
html[data-photostrator-surface="web"] body .app-frame-right-nav button img {
  max-width: 18px !important;
  max-height: 18px !important;
}

html[data-photostrator-surface="web"] body .layers {
  font-size: var(--web-font-body) !important;
  line-height: 1.2 !important;
  overflow-x: hidden !important;
}

html[data-photostrator-surface="web"] body .layers :is(h2, .inspector-title h2) {
  font-size: var(--web-font-title) !important;
  line-height: 20px !important;
}

html[data-photostrator-surface="web"] body .layers :is(h3, summary, legend, label, .panel-note, .mini-status, .stats p, .layer-kind, .inspector-title p) {
  font-size: var(--web-font-body) !important;
  line-height: 15px !important;
}

html[data-photostrator-surface="web"] body .layers :is(button, input, select, textarea) {
  max-width: 100% !important;
  font-size: var(--web-font-body) !important;
  line-height: 15px !important;
}

html[data-photostrator-surface="web"] body .layers :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 6px !important;
}

html[data-photostrator-surface="web"] body .layers :is(.panel, section, fieldset, .button-row, .align-grid, .style-inspector-content, .workspace-context-actions, .workspace-context-footer) {
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-photostrator-surface="web"] body .layers :is(.button-row, .align-grid) {
  display: grid !important;
  gap: 5px !important;
}

html[data-photostrator-surface="web"] body .layers :is(.button-row, .align-grid) > button,
html[data-photostrator-surface="web"] body .layers .layer-command-toolbar > button {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-photostrator-surface="web"] body .layers .layer-command-toolbar > button {
  min-height: 36px !important;
  height: 36px !important;
  padding: 2px !important;
  font-size: var(--web-font-caption) !important;
  line-height: 12px !important;
}

html[data-photostrator-surface="web"] body .layers .layer-command-toolbar > button img {
  max-width: 15px !important;
  max-height: 15px !important;
}

html[data-photostrator-surface="web"] body :is(.tool-flyout, .tool-drawer, .document-options-menu) {
  box-sizing: border-box !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 76px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html[data-photostrator-surface="web"] body .canvas-wrap {
  cursor: grab !important;
  touch-action: none !important;
}

html[data-photostrator-surface="web"] body .canvas-wrap.is-hand-panning {
  cursor: grabbing !important;
  user-select: none !important;
}

html body .ai-edit-partners .ai-edit-partner-name {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 5px !important;
  font-weight: 600 !important;
}

html body .ai-edit-partners .ai-edit-partner-name img {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  object-fit: contain !important;
}

html body .ai-edit-partners .ai-edit-partner-name > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Keep the add control in its own rail row on app and web surfaces. */
html[data-photostrator-surface="app"] body .sidebar,
html[data-photostrator-surface="web"] body .sidebar {
  top: 136px !important;
}

/* Compact rail: keep Add inside the same tool stack as the category buttons. */
html[data-photostrator-surface="app"] body .sidebar,
html[data-photostrator-surface="web"] body .sidebar {
  top: 86px !important;
  padding-top: 0 !important;
}

html[data-photostrator-surface="app"] body .sidebar > #addMenuButton,
html[data-photostrator-surface="web"] body .sidebar > #addMenuButton {
  position: relative !important;
  inset: auto !important;
  z-index: 4300 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ios-line) !important;
  border-radius: 0 !important;
  background: var(--ios-surface) !important;
  box-shadow: none !important;
}

html[data-photostrator-surface="app"] body .sidebar > #addMenuButton > span,
html[data-photostrator-surface="web"] body .sidebar > #addMenuButton > span {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  line-height: 1 !important;
}
/* Photostrator surface polish: warm neutral chrome with a restrained brand accent. */
html[data-photostrator-surface="app"] body,
html[data-photostrator-surface="web"] body {
  --photo-accent: #526a7a;
  --photo-accent-soft: rgba(82, 106, 122, 0.14);
  --photo-ink: #232a33;
  --photo-muted: #68717b;
  --photo-surface: #fbfaf8;
  --photo-canvas: #e1e4e6;
  --photo-line: rgba(35, 42, 51, 0.15);
}

html[data-photostrator-surface="app"] body .app-shell,
html[data-photostrator-surface="web"] body .app-shell {
  background: var(--photo-canvas) !important;
  color: var(--photo-ink) !important;
}

html[data-photostrator-surface="app"] body .topbar,
html[data-photostrator-surface="web"] body .topbar {
  background: var(--photo-surface) !important;
  border-bottom-color: var(--photo-line) !important;
  box-shadow: 0 2px 12px rgba(35, 42, 51, 0.07) !important;
}

html[data-photostrator-surface="app"] body .sidebar,
html[data-photostrator-surface="web"] body .sidebar,
html[data-photostrator-surface="app"] body .layers,
html[data-photostrator-surface="web"] body .layers,
html[data-photostrator-surface="app"] body .bottom-workflows,
html[data-photostrator-surface="web"] body .bottom-workflows {
  background: var(--photo-surface) !important;
  border-color: var(--photo-line) !important;
  color: var(--photo-ink) !important;
}

html[data-photostrator-surface="app"] body .canvas-wrap,
html[data-photostrator-surface="web"] body .canvas-wrap {
  background-color: var(--photo-canvas) !important;
  background-image:
    linear-gradient(rgba(91, 106, 119, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 106, 119, 0.09) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}

html[data-photostrator-surface="app"] body .sidebar .tool.is-active,
html[data-photostrator-surface="web"] body .sidebar .tool.is-active,
html[data-photostrator-surface="app"] body .bottom-workflows button.is-active,
html[data-photostrator-surface="web"] body .bottom-workflows button.is-active {
  background: var(--photo-accent-soft) !important;
  color: var(--photo-ink) !important;
  box-shadow: inset 3px 0 0 var(--photo-accent) !important;
}

html[data-photostrator-surface="app"] body .sidebar > #addMenuButton,
html[data-photostrator-surface="web"] body .sidebar > #addMenuButton {
  color: var(--photo-accent) !important;
  border-bottom-color: var(--photo-line) !important;
}

html[data-photostrator-surface="app"] body .bottom-workflows button,
html[data-photostrator-surface="web"] body .bottom-workflows button {
  color: var(--photo-muted) !important;
}

html[data-photostrator-surface="app"] body .bottom-workflows button.is-active,
html[data-photostrator-surface="web"] body .bottom-workflows button.is-active {
  color: var(--photo-ink) !important;
}
/* Artboard inspector: use one sticky title and a compact branded action strip. */
html[data-photostrator-surface="app"] body .layers .artboard-inspector-panel > h2,
html[data-photostrator-surface="web"] body .layers .artboard-inspector-panel > h2 {
  display: none !important;
}

html[data-photostrator-surface="app"] body .layers .artboard-view-toggles,
html[data-photostrator-surface="web"] body .layers .artboard-view-toggles {
  background: rgba(82, 106, 122, 0.08) !important;
  border-bottom: 1px solid rgba(82, 106, 122, 0.22) !important;
}

html[data-photostrator-surface="app"] body .layers .artboard-view-toggles button:hover,
html[data-photostrator-surface="web"] body .layers .artboard-view-toggles button:hover {
  background: rgba(82, 106, 122, 0.14) !important;
}

/* Keep the Artboard panel to one visible title in both responsive shells. */
html[data-photostrator-surface='app'] body #inspectorPanel .artboard-inspector-panel > h2,
html[data-photostrator-surface='web'] body #inspectorPanel .artboard-inspector-panel > h2 {
  display: none !important;
}



/* Workspace polish: keep the real logo prominent and let the active mode carry a quiet accent. */
html[data-photostrator-surface='app'] body .document-brand-mark,
html[data-photostrator-surface='web'] body .document-brand-mark {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  object-fit: contain !important;
}

html[data-photostrator-surface='app'] body .document-brand-name,
html[data-photostrator-surface='web'] body .document-brand-name {
  color: #526a7a !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html[data-photostrator-surface='app'] body .mode-switcher button.is-active,
html[data-photostrator-surface='web'] body .mode-switcher button.is-active {
  color: var(--photo-mode-accent, #526a7a) !important;
  box-shadow: inset 0 -2px 0 var(--photo-mode-accent, #526a7a) !important;
}

html[data-photostrator-surface='app'] body[data-toolbar-profile='general'],
html[data-photostrator-surface='web'] body[data-toolbar-profile='general'] { --photo-mode-accent: #526a7a; }
html[data-photostrator-surface='app'] body[data-toolbar-profile='photo'],
html[data-photostrator-surface='web'] body[data-toolbar-profile='photo'] { --photo-mode-accent: #197f8c; }
html[data-photostrator-surface='app'] body[data-toolbar-profile='video'],
html[data-photostrator-surface='web'] body[data-toolbar-profile='video'] { --photo-mode-accent: #8b5fbf; }
html[data-photostrator-surface='app'] body[data-toolbar-profile='vector'],
html[data-photostrator-surface='web'] body[data-toolbar-profile='vector'] { --photo-mode-accent: #2878b5; }
html[data-photostrator-surface='app'] body[data-toolbar-profile='pdf'],
html[data-photostrator-surface='web'] body[data-toolbar-profile='pdf'] { --photo-mode-accent: #b45454; }
html[data-photostrator-surface='app'] body[data-toolbar-profile='build'],
html[data-photostrator-surface='web'] body[data-toolbar-profile='build'] { --photo-mode-accent: #3b7964; }
html[data-photostrator-surface='app'] body[data-toolbar-profile='presentation'],
html[data-photostrator-surface='web'] body[data-toolbar-profile='presentation'] { --photo-mode-accent: #b36a2e; }
html[data-photostrator-surface='app'] body[data-toolbar-profile='spreadsheet'],
html[data-photostrator-surface='web'] body[data-toolbar-profile='spreadsheet'] { --photo-mode-accent: #4b7e4f; }

html[data-photostrator-surface='app'] body .artboard-context-row,
html[data-photostrator-surface='web'] body .artboard-context-row {
  border-left: 3px solid var(--photo-mode-accent, #526a7a) !important;
  padding-left: 7px !important;
}

html[data-photostrator-surface='app'] body .workspace-tool-label,
html[data-photostrator-surface='web'] body .workspace-tool-label {
  color: var(--photo-mode-accent, #526a7a) !important;
  font-weight: 650 !important;
}



/* The 2D Artboard does not need a permanent grid; 3D keeps its own scene grid. */
html[data-photostrator-surface='app'] body .canvas-wrap,
html[data-photostrator-surface='web'] body .canvas-wrap {
  background-image: none !important;
}

html[data-photostrator-surface='app'] body .artboard-view-options,
html[data-photostrator-surface='web'] body .artboard-view-options {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html[data-photostrator-surface='app'] body .artboard-view-options #gridToggleButton,
html[data-photostrator-surface='web'] body .artboard-view-options #gridToggleButton,
html[data-photostrator-surface='app'] body .artboard-grid-settings,
html[data-photostrator-surface='web'] body .artboard-grid-settings {
  display: none !important;
}



/* Replace the champagne active state with a neutral slate treatment. */
html[data-photostrator-surface='app'] body,
html[data-photostrator-surface='web'] body {
  --brand-champagne: #526a7a !important;
  --brand-champagne-soft: rgba(82, 106, 122, 0.10) !important;
  --ios-accent: #526a7a !important;
  --integrated-active: #526a7a !important;
}


/* Keep every workspace in the same restrained slate tone. */
html[data-photostrator-surface='app'] body[data-toolbar-profile],
html[data-photostrator-surface='web'] body[data-toolbar-profile] {
  --photo-mode-accent: #526a7a !important;
}
/* The artboard workspace identity is also the compact workspace picker. */
html[data-photostrator-surface='app'] body .workspace-tool-label,
html[data-photostrator-surface='web'] body .workspace-tool-label {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-align: center !important;
}

html[data-photostrator-surface='app'] body .workspace-tool-label:hover,
html[data-photostrator-surface='web'] body .workspace-tool-label:hover {
  border-color: var(--photo-mode-accent, #526a7a) !important;
  background: var(--photo-accent-soft, rgba(82, 106, 122, 0.14)) !important;
}

html[data-photostrator-surface='app'] body .workspace-tool-label:focus-visible,
html[data-photostrator-surface='web'] body .workspace-tool-label:focus-visible {
  outline: 2px solid var(--photo-mode-accent, #526a7a) !important;
  outline-offset: 1px !important;
}
/* Release 781: remove narrow-surface pasteboard overflow and add restrained editor polish. */
@media screen and (max-width: 920px) {
  html[data-photostrator-surface='app'] body .canvas-wrap,
  html[data-photostrator-surface='web'] body .canvas-wrap {
    overflow-x: hidden !important;
  }

  html[data-photostrator-surface='app'] body .document-artboard-pasteboard,
  html[data-photostrator-surface='web'] body .document-artboard-pasteboard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-photostrator-surface='app'] body .document-artboard-pasteboard > .pasteboard-frame,
  html[data-photostrator-surface='web'] body .document-artboard-pasteboard > .pasteboard-frame {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

html[data-photostrator-surface='app'] body .document-artboard-pasteboard > .pasteboard-frame[data-artboard-surface],
html[data-photostrator-surface='web'] body .document-artboard-pasteboard > .pasteboard-frame[data-artboard-surface] {
  border: 1px solid rgba(82, 106, 122, 0.20) !important;
  box-shadow: 0 12px 30px rgba(27, 35, 43, 0.12), 0 1px 2px rgba(27, 35, 43, 0.10) !important;
}

html[data-photostrator-surface='app'] body .bottom-workflows button,
html[data-photostrator-surface='web'] body .bottom-workflows button {
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease !important;
}

html[data-photostrator-surface='app'] body .bottom-workflows button.is-active,
html[data-photostrator-surface='web'] body .bottom-workflows button.is-active {
  background: rgba(82, 106, 122, 0.10) !important;
  color: #526a7a !important;
  box-shadow: inset 0 2px 0 #526a7a !important;
}

html[data-photostrator-surface='app'] body .bottom-workflows button:not(.is-active):hover,
html[data-photostrator-surface='web'] body .bottom-workflows button:not(.is-active):hover {
  background: rgba(82, 106, 122, 0.06) !important;
  color: #526a7a !important;
}

html[data-photostrator-surface='app'] body .sidebar .tool.is-active,
html[data-photostrator-surface='web'] body .sidebar .tool.is-active,
html[data-photostrator-surface='app'] body .app-frame-right-nav .category-tool.is-active,
html[data-photostrator-surface='web'] body .app-frame-right-nav .category-tool.is-active {
  background: rgba(82, 106, 122, 0.10) !important;
  color: #526a7a !important;
  box-shadow: inset 2px 0 0 #526a7a !important;
}

/* Release 782: keep narrow artboards and their context controls inside the canvas. */
@media screen and (max-width: 920px) {
  html[data-photostrator-surface='app'] body .document-artboard-pasteboard > .pasteboard-frame,
  html[data-photostrator-surface='web'] body .document-artboard-pasteboard > .pasteboard-frame,
  html[data-photostrator-surface='app'] body .document-artboard-pasteboard > .pasteboard-frame .artboard-context-row,
  html[data-photostrator-surface='web'] body .document-artboard-pasteboard > .pasteboard-frame .artboard-context-row,
  html[data-photostrator-surface='app'] body .document-artboard-pasteboard > .pasteboard-frame .canvas-rulers,
  html[data-photostrator-surface='web'] body .document-artboard-pasteboard > .pasteboard-frame .canvas-rulers {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-photostrator-surface='app'] body .document-artboard-pasteboard > .pasteboard-frame #artboard,
  html[data-photostrator-surface='web'] body .document-artboard-pasteboard > .pasteboard-frame #artboard {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  html[data-photostrator-surface='app'] body .quick-3d-view-button,
  html[data-photostrator-surface='web'] body .quick-3d-view-button {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Release 783: allow the responsive canvas to shrink below the desktop artboard minimum. */
@media screen and (max-width: 920px) {
  html[data-photostrator-surface='app'] body .document-artboard-pasteboard > .pasteboard-frame #artboard,
  html[data-photostrator-surface='web'] body .document-artboard-pasteboard > .pasteboard-frame #artboard {
    min-width: 0 !important;
  }
}
/* Release 784: artboards are unframed surfaces; keep the pasteboard clean. */
html[data-photostrator-surface='app'] body .document-artboard-pasteboard > .pasteboard-frame[data-artboard-surface],
html[data-photostrator-surface='web'] body .document-artboard-pasteboard > .pasteboard-frame[data-artboard-surface] {
  border: 0 !important;
  box-shadow: none !important;
}

html[data-photostrator-surface='app'] body .document-artboard-pasteboard > .pasteboard-frame[data-artboard-surface] #artboard,
html[data-photostrator-surface='web'] body .document-artboard-pasteboard > .pasteboard-frame[data-artboard-surface] #artboard {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Release 789: compact live artboard sizing and focused artboard actions. */
html[data-photostrator-surface='app'] body .layers .artboard-size-panel,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel {
  display: grid;
  gap: 6px;
  margin: 0 0 6px;
  padding: 8px;
  border-bottom: 1px solid rgba(82, 106, 122, .18);
  background: rgba(82, 106, 122, .05);
}
html[data-photostrator-surface='app'] body .layers .artboard-size-panel > header,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html[data-photostrator-surface='app'] body .layers .artboard-size-panel h3,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel h3 {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
}
html[data-photostrator-surface='app'] body .layers .artboard-size-panel output,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel output {
  color: #64727d;
  font-size: 11px;
  white-space: nowrap;
}
html[data-photostrator-surface='app'] body .layers .artboard-size-panel .compact-field,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel .compact-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
}
html[data-photostrator-surface='app'] body .layers .artboard-size-panel .artboard-size-fields,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel .artboard-size-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
html[data-photostrator-surface='app'] body .layers .artboard-size-panel .artboard-property-row,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel .artboard-property-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
html[data-photostrator-surface='app'] body .layers .artboard-size-panel .artboard-property-row label,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel .artboard-property-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
}
html[data-photostrator-surface='app'] body .layers .artboard-size-panel input,
html[data-photostrator-surface='app'] body .layers .artboard-size-panel select,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel input,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel select {
  min-width: 0;
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
  padding: 5px 7px;
  font-size: 12px;
}
html[data-photostrator-surface='app'] body .layers .artboard-size-panel .wide-button,
html[data-photostrator-surface='web'] body .layers .artboard-size-panel .wide-button {
  display: none !important;
}
html[data-photostrator-surface='app'] body .artboard-resize-sheet,
html[data-photostrator-surface='web'] body .artboard-resize-sheet {
  z-index: 6200;
}
html[data-photostrator-surface='app'] body .artboard-resize-stage,
html[data-photostrator-surface='web'] body .artboard-resize-stage {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  background: repeating-conic-gradient(#f7f8f9 0 25%, #fff 0 50%) 0 / 16px 16px;
}
html[data-photostrator-surface='app'] body .artboard-resize-preview-box,
html[data-photostrator-surface='web'] body .artboard-resize-preview-box {
  position: relative;
  min-width: 64px;
  min-height: 48px;
  max-width: 100%;
  max-height: 100%;
  border: 2px solid #1477d4;
  background: #fff;
  box-shadow: 0 4px 14px rgba(21, 34, 45, .16);
}
html[data-photostrator-surface='app'] body #artboardResizeHandle,
html[data-photostrator-surface='web'] body #artboardResizeHandle {
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #1477d4;
  border-radius: 50%;
  background: #fff;
  cursor: nwse-resize;
  touch-action: none;
}
html[data-photostrator-surface='app'] body .artboard-resize-readouts,
html[data-photostrator-surface='web'] body .artboard-resize-readouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
html[data-photostrator-surface='app'] body .artboard-resize-readouts output,
html[data-photostrator-surface='web'] body .artboard-resize-readouts output {
  display: block;
  min-height: 38px;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid #cbd1d7;
  border-radius: 6px;
  background: #f7f8fa;
  color: #1b2026;
  font-size: 13px;
}
/* Release 795: Artboard actions stay visible while sizing remains compact. */
html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 !important;
  overscroll-behavior: contain !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  order: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
  padding: 2px 3px !important;
  box-sizing: border-box !important;
  background: var(--ios-surface, #fff) !important;
  border-bottom: 1px solid var(--ios-line, #d9dde1) !important;
  box-shadow: 0 1px 4px rgba(35, 42, 51, .08) !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button {
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 2px 1px !important;
  gap: 1px !important;
  overflow: hidden !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button img,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button img {
  width: 15px !important;
  height: 15px !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button span,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button span {
  max-width: 100% !important;
  font-size: 8px !important;
  line-height: 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel {
  order: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 4px 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border-bottom: 1px solid var(--ios-line, #d9dde1) !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field,
html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field {
  min-width: 0 !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header,
html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field,
html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields,
html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row {
  grid-column: 1 / -1 !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 14px !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields {
  gap: 6px !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields label,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields label {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  font-size: 10px !important;
  line-height: 26px !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label {
  grid-template-columns: 70px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 26px !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel input,
html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel select,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel input,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel select {
  height: 26px !important;
  min-height: 26px !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
  line-height: 18px !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-clip-control,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-clip-control {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 18px !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 14px !important;
}

html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-inspector-panel,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .artboard-inspector-panel {
  order: 2 !important;
  margin-top: 0 !important;
}

@media screen and (max-width: 920px) {
  html[data-photostrator-surface='app'] body .document-artboard-pasteboard,
  html[data-photostrator-surface='web'] body .document-artboard-pasteboard {
    padding-top: 16px !important;
    padding-bottom: 64px !important;
  }
}

@media screen and (max-width: 700px) {
  html[data-photostrator-surface='app'] body .topbar {
    height: 78px !important;
    min-height: 78px !important;
  }

  html[data-photostrator-surface='app'] body .document-action-menu {
    top: 40px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  html[data-photostrator-surface='app'] body .document-action-menu button {
    height: 38px !important;
    min-height: 38px !important;
  }

  html[data-photostrator-surface='app'] body .canvas-wrap {
    inset: 78px 44px 54px !important;
  }
}
/* Release 796: keep Artboard statistics after the editable controls. */
html[data-photostrator-surface='app'] body .layers > [data-inspector-view='artboard'].is-active > .stats,
html[data-photostrator-surface='web'] body .layers > [data-inspector-view='artboard'].is-active > .stats {
  order: 3 !important;
}
/* Release 797: align every Artboard command inside the inspector width. */
html[data-photostrator-surface='app'] body .app-shell .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles,
html[data-photostrator-surface='web'] body .app-shell .layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Release 798: make the Artboard strip margin override unambiguous. */
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles {
  width: 100% !important;
  margin: 0 !important;
}
/* Release 799: tighten the Artboard inspector to a compact property sheet. */
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles {
  height: 38px !important;
  min-height: 38px !important;
  padding: 1px 2px !important;
  gap: 1px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button {
  height: 36px !important;
  min-height: 36px !important;
  padding: 1px 0 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button img,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button img {
  width: 13px !important;
  height: 13px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button span,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button span {
  font-size: 7px !important;
  line-height: 8px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 2px 5px !important;
  padding: 3px 6px !important;
  font-size: 10px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header {
  grid-column: 1 / -1 !important;
  min-height: 17px !important;
  height: 17px !important;
  line-height: 17px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header h3,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header h3 {
  font-size: 10px !important;
  line-height: 17px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header output,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header output {
  font-size: 9px !important;
  line-height: 17px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field {
  grid-column: 1 !important;
  grid-template-columns: 43px minmax(0, 1fr) !important;
  gap: 3px !important;
  line-height: 22px !important;
  min-height: 22px !important;
  font-size: 9px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-resize-mode,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-resize-mode {
  grid-column: 2 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields {
  grid-column: 1 / -1 !important;
  gap: 4px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields label,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields label {
  grid-template-columns: 13px minmax(0, 1fr) !important;
  gap: 3px !important;
  font-size: 9px !important;
  line-height: 22px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row {
  grid-column: 1 / -1 !important;
  gap: 4px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label {
  grid-template-columns: 53px minmax(0, 1fr) !important;
  gap: 3px !important;
  line-height: 22px !important;
  font-size: 9px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel input,
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel select,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel input,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel select {
  height: 22px !important;
  min-height: 22px !important;
  padding: 2px 4px !important;
  font-size: 10px !important;
  line-height: 16px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-clip-control,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-clip-control {
  grid-column: 1 / -1 !important;
  min-height: 15px !important;
  font-size: 9px !important;
  line-height: 13px !important;
}
/* Release 800: pair preset and artwork controls so the size sheet has no dead half-row. */
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header {
  grid-row: 1 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field:not(.artboard-resize-mode),
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field:not(.artboard-resize-mode) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-resize-mode,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-resize-mode {
  grid-column: 2 !important;
  grid-row: 2 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-size-fields {
  grid-row: 3 !important;
}
/* Release 801: keep Artboard dropdowns at intrinsic content width. */
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active select,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active select {
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field {
  grid-template-columns: 43px max-content !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label {
  grid-template-columns: 53px max-content !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-category-field,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-category-field {
  grid-template-columns: 58px max-content !important;
}
/* Release 802: compact every visible inspector dropdown, not just Artboard. */
html[data-photostrator-surface='app'] body #inspectorPanel.layers select:not(.sr-only-select),
html[data-photostrator-surface='web'] body #inspectorPanel.layers select:not(.sr-only-select) {
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers .compact-field > select:not(.sr-only-select),
html[data-photostrator-surface='web'] body #inspectorPanel.layers .compact-field > select:not(.sr-only-select) {
  width: max-content !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers .style-inspector-content > label > select:not(.sr-only-select),
html[data-photostrator-surface='web'] body #inspectorPanel.layers .style-inspector-content > label > select:not(.sr-only-select) {
  width: max-content !important;
}
/* Release 803: apply intrinsic dropdown sizing to every Style surface. */
html body .app-shell .layers [data-style-surface] select:not(.sr-only-select),
html body .app-shell .layers [data-style-surface] .style-inspector-content select:not(.sr-only-select),
html body .app-shell .layers [data-style-surface] .workspace-context-fields select:not(.sr-only-select) {
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
}
html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label:nth-of-type(2) {
  grid-template-columns: 44px max-content !important;
}
html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label:nth-of-type(2) > select {
  grid-column: 2 !important;
  width: max-content !important;
}
/* Release 804: override the focused Style surface's legacy full-width select rule. */
html body .app-shell .layers [data-style-surface].is-panel-focus :is(select):not(.sr-only-select),
html body .app-shell .layers [data-style-surface].is-panel-focus .style-inspector-content select:not(.sr-only-select) {
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
}
/* Release 805: force runtime Style selects back to native intrinsic sizing. */
html body .app-shell .layers [data-style-surface].is-panel-focus select:not(.sr-only-select),
html body .app-shell .layers [data-style-surface].is-panel-focus .style-inspector-content > label > select:not(.sr-only-select) {
  width: auto !important;
  inline-size: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
}
html body .app-shell .layers #styleAppearancePanel .style-inspector-content > label:nth-of-type(2) > select#blendMode {
  width: auto !important;
  inline-size: auto !important;
  grid-column: 2 !important;
}
/* Release 806: compact dropdowns in sheets, document menus, and tool panels. */
html[data-photostrator-surface='app'] body :is(.project-setup-sheet, #documentOptionsMenu, .modal-surface) select:not(.sr-only-select),
html[data-photostrator-surface='web'] body :is(.project-setup-sheet, #documentOptionsMenu, .modal-surface) select:not(.sr-only-select),
html[data-photostrator-surface='app'] body .app-shell .layers .panel select:not(.sr-only-select),
html[data-photostrator-surface='web'] body .app-shell .layers .panel select:not(.sr-only-select) {
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
}
html[data-photostrator-surface='app'] body :is(.project-setup-sheet, #documentOptionsMenu, .modal-surface) label > select:not(.sr-only-select),
html[data-photostrator-surface='web'] body :is(.project-setup-sheet, #documentOptionsMenu, .modal-surface) label > select:not(.sr-only-select) {
  width: max-content !important;
}
/* Release 807: compact the Artboard inspector's scale, guide, and boundary selects. */
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel select:not(.sr-only-select),
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel select:not(.sr-only-select) {
  width: auto !important;
  inline-size: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel :is(#scalePreset, #scaleUnit, #gridTypeSelect, #bleedPreset, #safeAreaPreset, #artboardCategory),
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel :is(#scalePreset, #scaleUnit, #gridTypeSelect, #bleedPreset, #safeAreaPreset, #artboardCategory) {
  width: max-content !important;
  inline-size: max-content !important;
  max-width: 100% !important;
}
/* Release 808: keep Artboard calibration controls on compact label rows. */
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel > label:has(> #scalePreset),
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel > label:has(> #scalePreset),
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel > label:has(> #knownScaleDistanceControl),
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel > label:has(> #knownScaleDistanceControl),
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel > label:has(> #scaleUnit),
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel > label:has(> #scaleUnit) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 30px !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel > label:has(> #knownScaleDistanceControl) > #knownScaleDistanceControl,
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel > label:has(> #knownScaleDistanceControl) > #knownScaleDistanceControl {
  width: 104px !important;
  inline-size: 104px !important;
  flex: 0 0 104px !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel > .print-boundary-fields label,
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel > .print-boundary-fields label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
/* Release 809: combine Drawing scale rows without widening typed fields. */
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls,
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px 8px !important;
  align-items: end !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls > label,
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls > label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls > label:has(> #knownScaleDistanceControl),
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls > label:has(> #knownScaleDistanceControl) {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: max-content 104px !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 30px !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls > label > select,
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls > label > select {
  width: max-content !important;
  inline-size: max-content !important;
  max-width: 100% !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls > label > #knownScaleDistanceControl,
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls > label > #knownScaleDistanceControl {
  width: 104px !important;
  inline-size: 104px !important;
  flex: 0 0 104px !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls > #calibrateButton,
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls > #calibrateButton {
  grid-column: 1 / -1 !important;
  margin-top: 0 !important;
}
/* Release 810: place paired scale selectors before the typed measurement row. */
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls > label:has(> #scalePreset),
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls > label:has(> #scalePreset) {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls > label:has(> #scaleUnit),
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls > label:has(> #scaleUnit) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls > label:has(> #knownScaleDistanceControl),
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls > label:has(> #knownScaleDistanceControl) {
  grid-row: 2 !important;
}
html[data-photostrator-surface='app'] body .layers .artboard-inspector-panel .artboard-scale-controls > #calibrateButton,
html[data-photostrator-surface='web'] body .layers .artboard-inspector-panel .artboard-scale-controls > #calibrateButton {
  grid-row: 3 !important;
}/* Release 811: pair Clip content and Workspace in the Artboard size panel. */
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-clip-control,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-clip-control {
  grid-column: 1 !important;
  grid-row: 6 !important;
  justify-self: start !important;
  min-width: 0 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-category-field,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-category-field {
  grid-column: 2 !important;
  grid-row: 6 !important;
  display: grid !important;
  grid-template-columns: 53px max-content !important;
  align-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  font-size: 9px !important;
  line-height: 22px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-category-field > select,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-category-field > select {
  width: max-content !important;
  inline-size: max-content !important;
  max-width: 100% !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 2px 4px !important;
  font-size: 10px !important;
}/* Release 812: refine Artboard visual hierarchy without adding decorative chrome. */
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel {
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe4e8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 4px !important;
  padding: 5px 6px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header h3,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header h3 {
  color: #26333d !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header output,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header output {
  color: #74818b !important;
  font-size: 10px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel label,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel label {
  color: #5c6973 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel input,
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel select,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel input,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel select {
  background: #f4f6f7 !important;
  border: 1px solid #d5dce1 !important;
  border-radius: 5px !important;
  color: #26333d !important;
  font-size: 11px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles {
  background: #ffffff !important;
  border-top: 1px solid #e5e9ec !important;
  border-bottom: 1px solid #dfe4e8 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-view-toggles button {
  color: #65727c !important;
  font-size: 9px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-guide-manager,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-guide-manager,
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-print-boundaries,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-print-boundaries {
  background: #ffffff !important;
  border-bottom: 1px solid #dfe4e8 !important;
  padding: 6px 6px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > :is(.artboard-guide-manager, .artboard-print-boundaries) h3,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > :is(.artboard-guide-manager, .artboard-print-boundaries) h3 {
  color: #34414b !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
html[data-photostrator-surface='app'] body .bottom-workflows,
html[data-photostrator-surface='web'] body .bottom-workflows {
  background: #fbfcfd !important;
  border-top: 1px solid #dfe4e8 !important;
  box-shadow: 0 -2px 10px rgba(31, 45, 55, 0.04) !important;
}
html[data-photostrator-surface='app'] body .bottom-workflows button.is-active,
html[data-photostrator-surface='web'] body .bottom-workflows button.is-active {
  background: #eef2f4 !important;
  box-shadow: inset 0 -2px 0 #526a7a !important;
}
/* Native tablet workspace with a persistent inspector dock. */
@media screen and (min-width: 700px) {
  html[data-photostrator-surface="app"] {
    --tablet-nav-width: 60px;
    --tablet-inspector-width: clamp(280px, 31vw, 380px);
    --tablet-safe-right: env(safe-area-inset-right, 0px);
    --phone-left: env(safe-area-inset-left, 0px);
    --phone-width: calc(100vw - var(--phone-left) - var(--tablet-inspector-width) - var(--tablet-nav-width) - var(--tablet-safe-right));
    --bottom-height: 0px;
  }

  html[data-photostrator-surface="app"] body .app-shell {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="app"] body .workspace {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  html[data-photostrator-surface="app"] body .topbar {
    left: var(--phone-left) !important;
    width: var(--phone-width) !important;
    max-width: var(--phone-width) !important;
  }

  html[data-photostrator-surface="app"] body .canvas-wrap {
    inset: var(--editor-top) calc(var(--tablet-inspector-width) + var(--tablet-nav-width) + var(--rail-width) + var(--tablet-safe-right)) 0 calc(var(--phone-left) + var(--rail-width)) !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
  }

  html[data-photostrator-surface="app"] body .sidebar {
    inset: calc(var(--editor-top) + 48px) auto 0 var(--phone-left) !important;
  }

  html[data-photostrator-surface="app"] body .app-frame-right-nav {
    inset: var(--editor-top) auto 0 calc(var(--phone-left) + var(--phone-width) - var(--rail-width)) !important;
  }

  html[data-photostrator-surface="app"] body .layers {
    inset: var(--topbar-height) calc(var(--tablet-nav-width) + var(--tablet-safe-right)) 0 auto !important;
    width: var(--tablet-inspector-width) !important;
    max-width: var(--tablet-inspector-width) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 10px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-left: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="app"] body .layers::before {
    display: none !important;
  }

  html[data-photostrator-surface="app"] body .layers .inspector-title {
    top: -12px !important;
    min-height: 56px !important;
    margin-top: 0 !important;
    padding-top: 8px !important;
  }

  html[data-photostrator-surface="app"] body .bottom-workflows {
    inset: 0 var(--tablet-safe-right) 0 auto !important;
    width: var(--tablet-nav-width) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, minmax(64px, 1fr)) !important;
    align-content: start !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 3px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    border-top: 0 !important;
    border-left: 1px solid var(--ios-line) !important;
  }

  html[data-photostrator-surface="app"] body .bottom-workflows button:nth-child(n + 4) {
    display: grid !important;
  }

  html[data-photostrator-surface="app"] body .bottom-workflows button {
    height: auto !important;
    min-height: 64px !important;
    grid-template-rows: 24px 16px !important;
  }
}

/* Two-segment foldables keep the canvas and inspector on separate panels. */
@media screen and (horizontal-viewport-segments: 2) and (orientation: landscape) {
  html[data-photostrator-surface="app"] {
    --tablet-nav-width: 56px;
    --tablet-safe-right: env(safe-area-inset-right, 0px);
    --phone-left: calc(env(viewport-segment-left 0 0, 0px) + env(safe-area-inset-left, 0px));
    --phone-width: calc(env(viewport-segment-width 0 0, 50vw) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    --tablet-inspector-width: calc(env(viewport-segment-width 1 0, 50vw) - var(--tablet-nav-width) - var(--tablet-safe-right));
  }

  html[data-photostrator-surface="app"] body .app-shell {
    width: 100vw !important;
  }

  html[data-photostrator-surface="app"] body .topbar {
    left: var(--phone-left) !important;
    width: var(--phone-width) !important;
    max-width: var(--phone-width) !important;
  }

  html[data-photostrator-surface="app"] body .canvas-wrap {
    inset: var(--editor-top) auto 0 calc(var(--phone-left) + var(--rail-width)) !important;
    width: calc(var(--phone-width) - (var(--rail-width) * 2)) !important;
  }

  html[data-photostrator-surface="app"] body .sidebar {
    left: var(--phone-left) !important;
  }

  html[data-photostrator-surface="app"] body .app-frame-right-nav {
    inset: var(--editor-top) auto 0 calc(var(--phone-left) + var(--phone-width) - var(--rail-width)) !important;
  }

  html[data-photostrator-surface="app"] body .layers {
    inset: 0 calc(var(--tablet-nav-width) + var(--tablet-safe-right)) 0 auto !important;
    width: var(--tablet-inspector-width) !important;
    max-width: var(--tablet-inspector-width) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    border: 0 !important;
    border-left: 1px solid var(--ios-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="app"] body .layers::before {
    display: none !important;
  }

  html[data-photostrator-surface="app"] body .bottom-workflows {
    inset: 0 var(--tablet-safe-right) 0 auto !important;
    right: auto !important;
    left: calc(env(viewport-segment-left 1 0, 50vw) + env(viewport-segment-width 1 0, 50vw) - var(--tablet-nav-width) - var(--tablet-safe-right)) !important;
    width: var(--tablet-nav-width) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(4, minmax(64px, 1fr)) !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 3px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    border-top: 0 !important;
    border-left: 1px solid var(--ios-line) !important;
  }

  html[data-photostrator-surface="app"] body .bottom-workflows button:nth-child(n + 4) {
    display: grid !important;
  }

  html[data-photostrator-surface="app"] body .bottom-workflows button {
    height: auto !important;
    min-height: 64px !important;
    grid-template-rows: 24px 16px !important;
  }
}

@media screen and (vertical-viewport-segments: 2) and (orientation: portrait) {
  html[data-photostrator-surface="app"] {
    --phone-left: calc(env(viewport-segment-left 0 0, 0px) + env(safe-area-inset-left, 0px));
    --phone-width: calc(env(viewport-segment-width 0 0, 100vw) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    --tablet-inspector-width: var(--phone-width);
    --tablet-nav-width: 0px;
    --fold-nav-height: 64px;
    --bottom-height: 0px;
  }

  html[data-photostrator-surface="app"] body .app-shell {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="app"] body .workspace {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  html[data-photostrator-surface="app"] body .topbar {
    left: var(--phone-left) !important;
    width: var(--phone-width) !important;
    max-width: var(--phone-width) !important;
  }

  html[data-photostrator-surface="app"] body .sidebar {
    inset: calc(var(--editor-top) + 48px) auto auto var(--phone-left) !important;
    height: calc(env(viewport-segment-height 0 0, 50vh) - var(--editor-top) - 48px) !important;
  }

  html[data-photostrator-surface="app"] body .canvas-wrap {
    inset: var(--editor-top) auto auto calc(var(--phone-left) + var(--rail-width)) !important;
    width: calc(var(--phone-width) - (var(--rail-width) * 2)) !important;
    height: calc(env(viewport-segment-height 0 0, 50vh) - var(--editor-top)) !important;
  }

  html[data-photostrator-surface="app"] body .app-frame-right-nav {
    inset: var(--editor-top) auto auto calc(var(--phone-left) + var(--phone-width) - var(--rail-width)) !important;
    height: calc(env(viewport-segment-height 0 0, 50vh) - var(--editor-top)) !important;
  }

  html[data-photostrator-surface="app"] body .layers {
    inset: env(viewport-segment-top 0 1, 50vh) auto calc(100dvh - env(viewport-segment-bottom 0 1, 100vh) + var(--fold-nav-height)) var(--phone-left) !important;
    width: var(--phone-width) !important;
    max-width: var(--phone-width) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html[data-photostrator-surface="app"] body .layers::before {
    display: none !important;
  }

  html[data-photostrator-surface="app"] body .bottom-workflows {
    inset: calc(env(viewport-segment-top 0 1, 50vh) + env(viewport-segment-height 0 1, 50vh) - var(--fold-nav-height)) auto 0 var(--phone-left) !important;
    width: var(--phone-width) !important;
    height: var(--fold-nav-height) !important;
    min-height: var(--fold-nav-height) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 2px 4px max(2px, env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--ios-line) !important;
    border-left: 0 !important;
  }

  html[data-photostrator-surface="app"] body .bottom-workflows button:nth-child(n + 4) {
    display: grid !important;
  }

  html[data-photostrator-surface="app"] body .bottom-workflows button {
    height: 60px !important;
    min-height: 60px !important;
    grid-template-rows: 24px 16px !important;
  }
}

/* Android WindowManager supplies hinge bounds when WebView lacks segment env() support. */
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] {
  --tablet-nav-width: 56px;
  --tablet-safe-right: env(safe-area-inset-right, 0px);
  --phone-left: calc(var(--fold-first-start, 0px) + env(safe-area-inset-left, 0px));
  --phone-width: calc(var(--fold-first-size, 50vw) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  --tablet-inspector-width: calc(var(--fold-second-size, 50vw) - var(--tablet-nav-width) - var(--tablet-safe-right));
  --bottom-height: 0px;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .app-shell,
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .app-shell {
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .workspace,
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .workspace {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .topbar {
  left: var(--phone-left) !important;
  width: var(--phone-width) !important;
  max-width: var(--phone-width) !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .canvas-wrap {
  inset: var(--editor-top) auto 0 calc(var(--phone-left) + var(--rail-width)) !important;
  width: calc(var(--phone-width) - (var(--rail-width) * 2)) !important;
  height: auto !important;
  padding: 0 !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .sidebar {
  inset: calc(var(--editor-top) + 48px) auto 0 var(--phone-left) !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .app-frame-right-nav {
  inset: var(--editor-top) auto 0 calc(var(--phone-left) + var(--phone-width) - var(--rail-width)) !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .layers {
  inset: 0 calc(var(--tablet-nav-width) + var(--tablet-safe-right)) 0 auto !important;
  width: var(--tablet-inspector-width) !important;
  max-width: var(--tablet-inspector-width) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
  border: 0 !important;
  border-left: 1px solid var(--ios-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .layers::before {
  display: none !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .bottom-workflows {
  inset: 0 var(--tablet-safe-right) 0 auto !important;
  right: auto !important;
  left: calc(var(--fold-second-start, 50vw) + var(--fold-second-size, 50vw) - var(--tablet-nav-width) - var(--tablet-safe-right)) !important;
  width: var(--tablet-nav-width) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(4, minmax(64px, 1fr)) !important;
  padding: max(8px, env(safe-area-inset-top, 0px)) 3px max(8px, env(safe-area-inset-bottom, 0px)) !important;
  border-top: 0 !important;
  border-left: 1px solid var(--ios-line) !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .bottom-workflows button:nth-child(n + 4) {
  display: grid !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="vertical"] body .bottom-workflows button {
  height: auto !important;
  min-height: 64px !important;
  grid-template-rows: 24px 16px !important;
}

html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] {
  --phone-left: env(safe-area-inset-left, 0px);
  --phone-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  --fold-nav-height: 64px;
  --bottom-height: 0px;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .topbar {
  left: var(--phone-left) !important;
  width: var(--phone-width) !important;
  max-width: var(--phone-width) !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .sidebar {
  inset: calc(var(--editor-top) + 48px) auto auto var(--phone-left) !important;
  height: calc(var(--fold-first-size, 50vh) - var(--editor-top) - 48px) !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .canvas-wrap {
  inset: var(--editor-top) auto auto calc(var(--phone-left) + var(--rail-width)) !important;
  width: calc(var(--phone-width) - (var(--rail-width) * 2)) !important;
  height: calc(var(--fold-first-size, 50vh) - var(--editor-top)) !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .app-frame-right-nav {
  inset: var(--editor-top) auto auto calc(var(--phone-left) + var(--phone-width) - var(--rail-width)) !important;
  height: calc(var(--fold-first-size, 50vh) - var(--editor-top)) !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .layers {
  inset: calc(var(--fold-second-start, 50vh) + env(safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) calc(var(--fold-nav-height) + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 0px) !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .layers::before {
  display: none !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .bottom-workflows {
  inset: auto env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
  width: auto !important;
  height: var(--fold-nav-height) !important;
  min-height: var(--fold-nav-height) !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  padding: 2px 4px !important;
  border-top: 1px solid var(--ios-line) !important;
  border-left: 0 !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .bottom-workflows button:nth-child(n + 4) {
  display: grid !important;
}
html[data-photostrator-surface="app"][data-photostrator-native-fold="horizontal"] body .bottom-workflows button {
  height: 60px !important;
  min-height: 60px !important;
  grid-template-rows: 24px 16px !important;
}

/* Release 813: stabilize Artboard size header and prevent paired-field collisions. */
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 20px !important;
  height: 20px !important;
  overflow: visible !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header h3,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header h3 {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header output,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > header output {
  display: block !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  white-space: nowrap !important;
  line-height: 20px !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field:not(.artboard-resize-mode),
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field:not(.artboard-resize-mode) {
  grid-template-columns: 43px minmax(0, 1fr) !important;
  min-width: 0 !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field:not(.artboard-resize-mode) > #documentPreset,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .compact-field:not(.artboard-resize-mode) > #documentPreset {
  width: 100% !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}/* Release 814: unify inspector tab active states with the neutral editor accent. */
html[data-photostrator-surface='app'] body .layers .style-section-nav,
html[data-photostrator-surface='web'] body .layers .style-section-nav {
  background: #ffffff !important;
  border-bottom: 1px solid #dfe4e8 !important;
  box-shadow: none !important;
}
html[data-photostrator-surface='app'] body .layers .style-section-nav button,
html[data-photostrator-surface='web'] body .layers .style-section-nav button {
  color: #65727c !important;
  background: transparent !important;
  border: 0 !important;
}
html[data-photostrator-surface='app'] body .layers .style-section-nav button.is-active,
html[data-photostrator-surface='web'] body .layers .style-section-nav button.is-active {
  background: #eef2f4 !important;
  color: #26333d !important;
  box-shadow: inset 0 -2px 0 #526a7a !important;
  font-weight: 650 !important;
}
html[data-photostrator-surface='app'] body .layers .style-section-nav button.is-active img,
html[data-photostrator-surface='web'] body .layers .style-section-nav button.is-active img {
  opacity: 1 !important;
}/* Release 815: override the legacy warm inspector state at its full specificity. */
html body .app-shell .layers .style-section-nav button.is-active {
  background: #eef2f4 !important;
  color: #26333d !important;
  border-bottom-color: #526a7a !important;
  box-shadow: inset 0 -2px 0 #526a7a !important;
}
html body .app-shell .layers .style-section-nav button.is-active img {
  opacity: 1 !important;
}
html body .app-shell .layers .style-section-nav button:not(.is-active) {
  background: #ffffff !important;
  color: #65727c !important;
}/* Release 816: harden Style section active state against responsive overrides. */
html body .app-shell .layers #styleSectionNav button.is-active {
  background: #eef2f4 !important;
  color: #26333d !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 -2px 0 #526a7a !important;
}
html body .app-shell .layers #styleSectionNav button.is-active::after {
  content: none !important;
  display: none !important;
}
html body .app-shell .layers #styleSectionNav button:not(.is-active) {
  background: #ffffff !important;
  color: #65727c !important;
}
/* Release 817: keep compact Artboard fields inside their half-row tracks. */
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label {
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  overflow: hidden !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label > select,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-property-row label > select {
  width: 100% !important;
  inline-size: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-category-field,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-category-field {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
html[data-photostrator-surface='app'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-category-field > select,
html[data-photostrator-surface='web'] body #inspectorPanel.layers > [data-inspector-view='artboard'].is-active > .artboard-size-panel > .artboard-category-field > select {
  width: 100% !important;
  inline-size: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Keep the native phone frame from constraining the responsive web editor. */
@media screen and (max-width: 1400px) {
  html[data-photostrator-surface='web'] {
    --ios-frame-width: 100vw !important;
    --phone-width: 100vw !important;
    --phone-left: 0px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  html[data-photostrator-surface='web'] body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html[data-photostrator-surface='web'] .app-shell {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html[data-photostrator-surface='web'] .workspace {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}

.document-menu-commands button[data-document-menu-action="contact-support"]:hover,
.document-menu-commands button[data-document-menu-action="contact-support"]:focus-visible {
  background: rgba(127, 135, 145, 0.1);
  outline: 2px solid #1473e6;
  outline-offset: -2px;
}

.preview3d-mesh-face-surface {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 3px;
}

.preview3d-mesh-face-surface[hidden] {
  display: none !important;
}

.preview3d-mesh-selection-actions .preview3d-mesh-face-surface label,
.preview3d-mesh-selection-actions .preview3d-mesh-face-surface select,
.preview3d-mesh-selection-actions .preview3d-mesh-face-surface button {
  width: 100%;
  min-width: 0;
  height: 28px;
}

.preview3d-mesh-selection-actions .preview3d-mesh-face-surface select {
  padding: 0 18px 0 6px;
  overflow: hidden;
  border: 1px solid rgba(23, 33, 43, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: #37414c;
  font: 500 9px/1 system-ui, sans-serif;
  text-overflow: ellipsis;
}

.preview3d-mesh-selection-actions .preview3d-mesh-face-surface button {
  padding-inline: 5px;
  font-size: 9px;
}

html[data-theme="dark"] .preview3d-mesh-selection-actions .preview3d-mesh-face-surface select,
html[data-theme="auto"] .preview3d-mesh-selection-actions .preview3d-mesh-face-surface select {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(17, 20, 25, 0.5);
  color: #eef2f7;
}

.preview3d-mesh-face-surface {
  grid-template-columns: minmax(0, 1fr) repeat(3, auto);
}

.preview3d-mesh-selection-actions .preview3d-mesh-face-surface button {
  width: auto;
  min-width: 36px;
}

.preview3d-mesh-selection-actions #meshKnifeButton.is-active {
  border-color: #1473e6;
  background: rgba(20, 115, 230, 0.12);
  color: #0c62ca;
}

.preview3d-mesh-knife-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}

.preview3d-mesh-knife-overlay line {
  stroke: #1473e6;
  stroke-width: 2;
  stroke-dasharray: 5 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Persistent 3D dimensions stay compact in the modeling dock. */
#preview3dViewport.is-dimensioning canvas { cursor: crosshair; }
#preview3dViewport .preview3d-inference-cue {
  position: absolute;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translate(7px, -50%);
  pointer-events: none;
}
#preview3dViewport .preview3d-inference-cue[hidden] { display: none !important; }
#preview3dViewport .preview3d-inference-marker {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1385f5;
  box-shadow: 0 0 0 1px rgba(11, 74, 137, 0.8), 0 0 8px rgba(19, 133, 245, 0.7);
}
#preview3dViewport .preview3d-inference-label {
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  background: rgba(22, 35, 50, 0.9);
  color: #fff;
  font: 600 10px/14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}
body.preview3d-open .preview3d-dock-panel[data-3d-dock-panel="model"] #preview3dDimensionSection[hidden] { display: none !important; }

.preview3d-measure-label.preview3d-dimension-label {
  border-color: rgba(18, 109, 209, 0.62);
  box-shadow: 0 1px 4px rgba(15, 34, 56, 0.14);
  font-weight: 600;
}

body.preview3d-open .preview3d-dimension-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.preview3d-open .preview3d-dimension-list > li {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(120, 132, 146, 0.18);
}

body.preview3d-open .preview3d-dimension-list > li > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary, #59636f);
  font: 400 11px/16px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.preview3d-open .preview3d-dimension-list > li > span img {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.72;
}

body.preview3d-open .preview3d-dimension-list > li strong {
  color: var(--text-primary, #20252b);
  font-weight: 600;
  white-space: nowrap;
}

body.preview3d-open .preview3d-dimension-list > li button {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary, #59636f);
}

body.preview3d-open .preview3d-dimension-list > li button:hover {
  background: rgba(120, 132, 146, 0.12);
}

body.preview3d-open .preview3d-dimension-list > li button img {
  width: 14px;
  height: 14px;
}

html[data-theme="dark"] .preview3d-dimension-list > li strong { color: #e9edf2; }

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .preview3d-dimension-list > li strong { color: #e9edf2; }
}

/* Keep the mobile mesh inspector above the dock tabs with a scrollable control area. */
@media (max-width: 760px) {
  body.preview3d-open .preview3d-editor {
    height: calc(100% - 56px) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: 46px minmax(0, 1fr) !important;
    align-self: start !important;
  }

  body.preview3d-open .preview3d-editor-content {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

body.preview3d-open .preview3d-style-command-bar button[aria-pressed="true"] {
  color: #176bc1 !important;
  background: #e8f2fd !important;
  box-shadow: inset 0 -2px 0 #3185dc !important;
}

.preview3d-export-formats[hidden] {
  display: none;
}

@media (max-width: 760px) {
  body.preview3d-open .preview3d-export-panel {
    top: 96px !important;
    right: 48px !important;
    bottom: auto !important;
    left: 48px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(42vh, 320px) !important;
    overflow: auto !important;
  }
}

/* Presentation playback renders real slide artwork above the editor without changing its state. */
html body .presentation-player[hidden] {
  display: none !important;
}

html body .presentation-player {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  background: #111519;
  color: #f4f6f7;
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html body.presentation-player-open {
  overflow: hidden !important;
}

.presentation-player-header,
.presentation-player-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.presentation-player-brand {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.presentation-player-brand span {
  color: #aeb7bd;
  font-size: 10px;
  font-weight: 650;
}

.presentation-player-brand strong {
  overflow: hidden;
  max-width: min(52vw, 620px);
  color: #f4f6f7;
  font-size: 15px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presentation-player-counter,
.presentation-player-position {
  color: #bac3c8;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.presentation-player-close,
.presentation-player-controls button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border: 1px solid #3a4349;
  border-radius: 6px;
  background: #1b2227;
  color: #f4f6f7;
  cursor: pointer;
}

.presentation-player-close img,
.presentation-player-controls button img {
  width: 18px;
  height: 18px;
  filter: invert(1);
}

.presentation-player-close:hover,
.presentation-player-controls button:not(:disabled):hover {
  background: #293238;
}

.presentation-player-controls button:disabled {
  opacity: 0.38;
  cursor: default;
}

.presentation-player-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
}

.presentation-player-stage > img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(96vw, 1600px);
  max-height: calc(100dvh - 150px);
  object-fit: contain;
  box-shadow: 0 18px 64px rgba(0, 0, 0, 0.34);
}

.presentation-player-stage > img[hidden] {
  display: none !important;
}

.presentation-player-stage > p {
  max-width: min(460px, 88vw);
  color: #d5dde1;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.presentation-player-controls {
  justify-content: center;
}

.presentation-player-controls [data-presentation-player-position] {
  min-width: 92px;
  color: #d2d9dd;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 520px) {
  html body .presentation-player {
    gap: 10px;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  }

  .presentation-player-brand strong {
    max-width: 50vw;
    font-size: 13px;
  }

  .presentation-player-counter {
    font-size: 11px;
  }

  .presentation-player-stage > img {
    max-width: 100%;
    max-height: calc(100dvh - 124px);
  }

  .presentation-player-close,
  .presentation-player-controls button {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

/* Focus direct project-journey links on one board while keeping the full list in the Artboard panel. */
html[data-photostrator-surface='app'] body .document-artboard-pasteboard.is-focused-journey-stage,
html[data-photostrator-surface='web'] body .document-artboard-pasteboard.is-focused-journey-stage {
  --document-artboard-columns: 1 !important;
  grid-template-columns: max-content !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

html[data-photostrator-surface='app'] body .document-artboard-pasteboard.is-focused-journey-stage > .document-artboard-preview,
html[data-photostrator-surface='web'] body .document-artboard-pasteboard.is-focused-journey-stage > .document-artboard-preview {
  display: none !important;
}

html[data-photostrator-surface='app'] body .document-artboard-pasteboard.is-focused-journey-stage > .pasteboard-frame.is-active,
html[data-photostrator-surface='web'] body .document-artboard-pasteboard.is-focused-journey-stage > .pasteboard-frame.is-active {
  grid-column: 1;
  justify-self: center;
}

/* Source: release-781.css */
.spreadsheet-canvas-hidden {
  display: none !important;
}

.app-shell[data-workflow="spreadsheet"] .canvas-wrap {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 12px !important;
  background: #e6e9ed !important;
  background-image: none !important;
}

.app-shell[data-workflow="spreadsheet"] #documentArtboardPasteboard {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.app-shell[data-workflow="spreadsheet"] .pasteboard-frame {
  grid-template-rows: 22px minmax(0, var(--artboard-display-height, 720px)) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.app-shell[data-workflow="spreadsheet"] .canvas-rulers,
.app-shell[data-workflow="spreadsheet"] #artboard,
.app-shell[data-workflow="spreadsheet"] #artboardBoundaryOverlay {
  display: none !important;
}

.app-shell[data-workflow="spreadsheet"] #spreadsheetSurface {
  grid-row: 2 !important;
  align-self: start !important;
}

.spreadsheet-surface:not([hidden]) {
  display: grid;
}

.spreadsheet-surface[hidden] {
  display: none !important;
}

.spreadsheet-surface {
  --sheet-ink: #1e252b;
  --sheet-muted: #707982;
  --sheet-line: #dce1e5;
  --sheet-accent: #15877c;
  position: relative;
  z-index: 2;
  grid-template-rows: 50px 42px 38px minmax(220px, 1fr) 34px;
  width: min(100%, 1200px);
  min-width: 0;
  height: min(72vh, 760px);
  min-height: 440px;
  overflow: hidden;
  color: var(--sheet-ink);
  background: #fff;
  border: 1px solid #cbd2d9;
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(28, 37, 45, 0.12);
  font: 12px/1.35 Inter, "Segoe UI", sans-serif;
}

.spreadsheet-appbar,
.spreadsheet-toolbar,
.spreadsheet-formula-row,
.spreadsheet-bottom {
  display: flex;
  min-width: 0;
  align-items: center;
  border-bottom: 1px solid var(--sheet-line);
}

.spreadsheet-appbar {
  gap: 10px;
  padding: 0 12px;
}

.spreadsheet-document-mark {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #c6e2dc;
  border-radius: 5px;
  background: #edf7f4;
  color: #167f74;
  font-size: 18px;
}

.spreadsheet-document-title {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.spreadsheet-document-title strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spreadsheet-document-title span,
.spreadsheet-status {
  color: var(--sheet-muted);
  font-size: 10px;
}

.spreadsheet-save-state {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--sheet-muted);
  font-size: 10px;
  white-space: nowrap;
}

.spreadsheet-save-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2b9a76;
}

.spreadsheet-export,
.spreadsheet-toolbar button,
.spreadsheet-sheet-tab,
.spreadsheet-add-tab {
  display: inline-flex;
  min-width: 30px;
  height: 28px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--sheet-ink);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.spreadsheet-export {
  border-color: #cbded9;
  color: #126e65;
  font-size: 11px;
  font-weight: 600;
}

.spreadsheet-export:hover,
.spreadsheet-toolbar button:hover,
.spreadsheet-sheet-tab:hover,
.spreadsheet-add-tab:hover {
  background: #eef5f3;
}

.spreadsheet-toolbar {
  gap: 3px;
  padding: 0 9px;
  background: #fafbfc;
}

.spreadsheet-toolbar button {
  height: 26px;
  font-size: 11px;
}

.spreadsheet-toolbar button i {
  width: 11px;
  height: 11px;
  border: 1px solid #8bb8ae;
  border-radius: 2px;
  background: #cbe7df;
}

.spreadsheet-toolbar-divider {
  width: 1px;
  height: 19px;
  margin: 0 5px;
  background: var(--sheet-line);
}

.spreadsheet-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--sheet-muted);
  font-size: 10px;
}

.spreadsheet-filter[hidden] {
  display: none !important;
}

.spreadsheet-filter input {
  width: 128px;
  height: 25px;
  padding: 2px 6px;
  border: 1px solid var(--sheet-line);
  border-radius: 3px;
  font: inherit;
}

.spreadsheet-formula-row {
  gap: 7px;
  padding: 0 10px;
  background: #fff;
}

.spreadsheet-name-box input {
  width: 66px;
  height: 25px;
  padding: 2px 6px;
  border: 1px solid #cdd4da;
  border-radius: 3px;
  color: var(--sheet-ink);
  font: inherit;
  text-align: center;
}

.spreadsheet-fx {
  color: #6a747d;
  font: italic 600 13px Georgia, serif;
}

.spreadsheet-formula-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 25px;
  padding: 2px 7px;
  border: 1px solid #cdd4da;
  border-radius: 3px;
  font: inherit;
}

.spreadsheet-value-preview {
  min-width: 48px;
  max-width: 150px;
  overflow: hidden;
  color: var(--sheet-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spreadsheet-workarea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.spreadsheet-grid-scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.spreadsheet-grid {
  display: grid;
  width: max(100%, 760px);
  min-width: 760px;
  grid-template-columns: 36px minmax(165px, 1.8fr) repeat(7, minmax(78px, 1fr));
  align-content: start;
}

.spreadsheet-header-row,
.spreadsheet-row {
  display: contents;
}

.spreadsheet-corner,
.spreadsheet-colhead,
.spreadsheet-rowhead {
  position: sticky;
  z-index: 1;
  display: grid;
  height: 27px;
  place-items: center;
  border-right: 1px solid var(--sheet-line);
  border-bottom: 1px solid var(--sheet-line);
  background: #f2f4f6;
  color: #68727b;
  font-size: 10px;
  font-weight: 550;
}

.spreadsheet-corner,
.spreadsheet-rowhead {
  left: 0;
}

.spreadsheet-colhead,
.spreadsheet-corner {
  top: 0;
}

.spreadsheet-cell-wrap {
  min-width: 0;
  height: 29px;
  border-right: 1px solid #e6e9ec;
  border-bottom: 1px solid #e6e9ec;
  background: #fff;
}

.spreadsheet-cell-wrap[hidden] {
  display: none !important;
}

.spreadsheet-cell {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0 7px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #273139;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spreadsheet-cell-wrap.is-selected {
  position: relative;
  z-index: 2;
  outline: 2px solid #17877b;
  outline-offset: -2px;
}

.spreadsheet-grid.is-table .spreadsheet-row[data-row="3"] .spreadsheet-cell-wrap {
  background: #e9f1ef;
}

.spreadsheet-grid.is-table .spreadsheet-row[data-row="3"] .spreadsheet-cell {
  color: #34514c;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.03em;
}

.spreadsheet-grid.is-table .spreadsheet-row[data-row="10"] .spreadsheet-cell-wrap {
  border-top: 1px solid #9cc8bd;
  background: #f4f8f7;
  font-weight: 700;
}

.spreadsheet-grid.is-frozen .spreadsheet-colhead,
.spreadsheet-grid.is-frozen .spreadsheet-corner {
  position: sticky;
  top: 0;
}

.spreadsheet-chart {
  width: 215px;
  min-width: 0;
  padding: 12px 10px;
  overflow: auto;
  border-left: 1px solid var(--sheet-line);
  background: #fbfcfc;
}

.spreadsheet-chart[hidden] {
  display: none !important;
}

.spreadsheet-chart > strong {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
}

.spreadsheet-chart > div {
  display: grid;
  grid-template-columns: 70px minmax(35px, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  font-size: 9px;
}

.spreadsheet-chart > div span {
  overflow: hidden;
  color: #56626a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spreadsheet-chart > div i {
  height: 7px;
  overflow: hidden;
  border-radius: 6px;
  background: #e8eeec;
}

.spreadsheet-chart > div b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #338e80;
}

.spreadsheet-chart > div em {
  color: #56626a;
  font-style: normal;
}

.spreadsheet-bottom {
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  border-top: 1px solid var(--sheet-line);
  border-bottom: 0;
  background: #fafbfc;
}

.spreadsheet-sheet-tabs {
  display: flex;
  min-width: 0;
  height: 100%;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
}

.spreadsheet-sheet-tab {
  height: 26px;
  color: #68727b;
  font-size: 10px;
}

.spreadsheet-sheet-tab.is-active {
  border-color: #d6e8e3;
  background: #eaf4f1;
  color: #126e65;
  font-weight: 650;
}

.spreadsheet-add-tab {
  width: 26px;
  min-width: 26px;
  height: 24px;
  padding: 0;
  color: #197e73;
  font-size: 17px;
}

.spreadsheet-status {
  flex: 0 1 auto;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spreadsheet-status b {
  padding: 0 4px;
  color: #a5adb4;
}

@media (max-width: 700px) {
  .spreadsheet-surface {
    grid-template-rows: 46px 39px 36px minmax(180px, 1fr) 32px;
    height: min(64vh, 660px);
    min-height: 330px;
    border-radius: 2px;
  }

  .spreadsheet-appbar { gap: 7px; padding: 0 7px; }
  .spreadsheet-document-mark { flex-basis: 27px; width: 27px; height: 27px; }
  .spreadsheet-document-title strong { font-size: 11px; }
  .spreadsheet-document-title span { font-size: 9px; }
  .spreadsheet-save-state { font-size: 0; gap: 0; }
  .spreadsheet-save-state i { width: 8px; height: 8px; }
  .spreadsheet-export { height: 26px; padding: 0 6px; font-size: 10px; }
  .spreadsheet-toolbar { gap: 1px; padding: 0 4px; overflow-x: auto; }
  .spreadsheet-toolbar button { min-width: 27px; padding: 0 5px; font-size: 10px; }
  .spreadsheet-toolbar button span { display: none; }
  .spreadsheet-toolbar-divider { margin: 0 2px; }
  .spreadsheet-filter { gap: 3px; }
  .spreadsheet-filter > span { display: none; }
  .spreadsheet-filter input { width: 95px; }
  .spreadsheet-formula-row { gap: 5px; padding: 0 5px; }
  .spreadsheet-name-box input { width: 49px; height: 23px; padding: 1px 3px; font-size: 10px; }
  .spreadsheet-formula-input { height: 23px; padding: 1px 4px; font-size: 10px; }
  .spreadsheet-value-preview { max-width: 70px; min-width: 30px; font-size: 9px; }
  .spreadsheet-grid { width: max(100%, 708px); min-width: 708px; grid-template-columns: 28px 116px 56px 78px repeat(5, 86px); }
  .spreadsheet-colhead, .spreadsheet-corner, .spreadsheet-rowhead { height: 24px; font-size: 9px; }
  .spreadsheet-cell-wrap { height: 27px; }
  .spreadsheet-cell { padding: 0 5px; font-size: 10px; }
  .spreadsheet-chart { position: absolute; z-index: 4; right: 0; top: 0; bottom: 0; width: min(230px, 78%); border-left: 1px solid var(--sheet-line); box-shadow: -7px 0 16px rgba(20,30,35,.10); }
  .spreadsheet-chart > div { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; font-size: 11px; }
  .spreadsheet-chart > div span { white-space: normal; overflow-wrap: anywhere; }
  .spreadsheet-chart > div i { grid-column: 1 / -1; }
  .spreadsheet-status { font-size: 9px; }
}

@media print {
  .app-shell[data-workflow="spreadsheet"] .spreadsheet-surface { width: 100%; height: auto; box-shadow: none; border: 0; }
  .spreadsheet-appbar, .spreadsheet-toolbar, .spreadsheet-formula-row, .spreadsheet-bottom { display: none; }
  .spreadsheet-workarea { display: block; overflow: visible; }
  .spreadsheet-grid-scroll { overflow: visible; }
}

/* Source: release-782.css */
/* Keep mobile artboard zoom dimensions from being clamped to the viewport. */
@media screen and (max-width: 920px) {
  html[data-photostrator-surface="app"] body .document-artboard-pasteboard > .pasteboard-frame,
  html[data-photostrator-surface="web"] body .document-artboard-pasteboard > .pasteboard-frame {
    width: var(--artboard-display-width) !important;
    min-width: var(--artboard-display-width) !important;
    max-width: none !important;
  }

  html[data-photostrator-surface="app"] body .document-artboard-pasteboard > .pasteboard-frame #artboard,
  html[data-photostrator-surface="web"] body .document-artboard-pasteboard > .pasteboard-frame #artboard {
    display: block !important;
    width: var(--artboard-display-width) !important;
    min-width: var(--artboard-display-width) !important;
    max-width: none !important;
    height: var(--artboard-display-height) !important;
    max-height: none !important;
  }
}

/* Source: promo-studio.css */
.promo-studio-sheet {
  z-index: 6200;
  grid-template-rows: 58px minmax(0, 1fr) 58px;
  width: min(1040px, calc(100vw - 32px));
  height: min(840px, calc(100dvh - 32px));
  max-height: none;
}

.promo-studio-heading {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.promo-studio-heading strong {
  color: #20252a;
  font-size: 14px;
  font-weight: 650 !important;
}

.promo-studio-heading span {
  overflow: hidden;
  color: #727982;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-studio-body {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #f2f3f4;
}

.promo-studio-controls {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  border-right: 1px solid #dfe2e5;
  background: #fff;
}

.promo-studio-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #48515a;
  font-size: 11px;
  font-weight: 550;
}

.promo-studio-controls input:not([type="checkbox"]),
.promo-studio-controls select,
.promo-studio-controls textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #cfd4d9;
  border-radius: 5px;
  outline: 0;
  background: #fff;
  color: #20252a;
  font: 400 13px/1.35 Inter, "Segoe UI", sans-serif;
}

.promo-studio-controls input:not([type="checkbox"]),
.promo-studio-controls select {
  height: 36px;
  padding: 0 9px;
}

.promo-studio-controls textarea {
  min-height: 66px;
  resize: vertical;
  padding: 8px 9px;
}

.promo-studio-controls :is(input, select, textarea):focus-visible {
  border-color: #7e9dbb;
  box-shadow: 0 0 0 2px rgba(78, 125, 169, 0.17);
}

.promo-studio-controls .promo-studio-promise {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 3px;
  color: #394149;
  font-size: 11px;
  font-weight: 450;
  line-height: 1.4;
}

.promo-studio-promise input {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 0;
  accent-color: #94784f;
}

.promo-studio-status {
  min-height: 30px;
  margin: 0;
  color: #68717a;
  font-size: 11px;
  line-height: 1.4;
}

.promo-studio-preview-wrap {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 18px;
  background-color: #17191c;
  background-image: radial-gradient(ellipse at center, #303236 0, #202225 44%, #141618 100%);
}

.promo-studio-preview-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35));
}

.promo-studio-sheet > footer button#promoStudioDownload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.promo-studio-sheet > footer button#promoStudioDownload img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.promo-studio-sheet > footer button#promoStudioDownload:disabled {
  cursor: progress;
  opacity: 0.64;
}

:root[data-theme="dark"] .promo-studio-sheet {
  border-color: #3b4046;
  background: #202328;
  color: #edf0f3;
}

:root[data-theme="dark"] .promo-studio-heading strong {
  color: #edf0f3;
}

:root[data-theme="dark"] .promo-studio-heading span {
  color: #a3abb3;
}

:root[data-theme="dark"] .promo-studio-body {
  background: #191c20;
}

:root[data-theme="dark"] .promo-studio-controls {
  border-color: #343940;
  background: #22262b;
}

:root[data-theme="dark"] .promo-studio-controls label,
:root[data-theme="dark"] .promo-studio-promise {
  color: #d8dde2;
}

:root[data-theme="dark"] .promo-studio-controls :is(input:not([type="checkbox"]), select, textarea) {
  border-color: #424951;
  background: #171a1e;
  color: #edf0f3;
}

:root[data-theme="dark"] .promo-studio-status {
  color: #a5adb5;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .promo-studio-sheet {
    border-color: #3b4046;
    background: #202328;
    color: #edf0f3;
  }

  :root[data-theme="auto"] .promo-studio-heading strong { color: #edf0f3; }
  :root[data-theme="auto"] .promo-studio-heading span,
  :root[data-theme="auto"] .promo-studio-status { color: #a3abb3; }
  :root[data-theme="auto"] .promo-studio-body { background: #191c20; }
  :root[data-theme="auto"] .promo-studio-controls { border-color: #343940; background: #22262b; }
  :root[data-theme="auto"] .promo-studio-controls label,
  :root[data-theme="auto"] .promo-studio-promise { color: #d8dde2; }
  :root[data-theme="auto"] .promo-studio-controls :is(input:not([type="checkbox"]), select, textarea) {
    border-color: #424951;
    background: #171a1e;
    color: #edf0f3;
  }
}

@media (max-width: 700px) {
  .promo-studio-sheet {
    top: 4px;
    bottom: 4px;
    width: calc(100vw - 16px);
    height: auto;
    max-height: none;
    transform: translateX(-50%);
    grid-template-rows: 54px minmax(0, 1fr) 54px;
    border-radius: 8px;
  }

  .promo-studio-heading span {
    max-width: calc(100vw - 105px);
  }

  .promo-studio-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(280px, 42dvh) minmax(180px, 40dvh);
    overflow: auto;
  }

  .promo-studio-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px 12px;
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid #dfe2e5;
  }

  .promo-studio-controls > label:not(.promo-studio-promise):not(:has(textarea)) {
    grid-template-columns: minmax(94px, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .promo-studio-controls > label:not(.promo-studio-promise):not(:has(textarea)) > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .promo-studio-preview-wrap {
    min-height: 200px;
    padding: 10px;
  }

  .promo-studio-sheet > footer {
    gap: 6px;
    padding-inline: 10px;
  }

  .promo-studio-sheet > footer button {
    min-width: 76px;
    min-height: 34px;
  }
}

/* Source: photostrator-mobile-3d.css */
@media (max-width: 760px) {
  /* A broad mobile grid rule must not override the editor's hidden state. */
  body.preview3d-open #preview3dEditor[hidden] {
    display: none !important;
  }

  /* The Model dock has fewer controls than the other 3D workspaces. */
  body.preview3d-open[data-preview3d-dock="model"]:has(#preview3dEditor[hidden]) {
    --preview3d-bottom-sheet-height: clamp(220px, 24dvh, 240px) !important;
  }

  body.preview3d-open:has(#preview3dEditor:not([hidden])) {
    --preview3d-bottom-sheet-height: clamp(310px, 40dvh, 380px) !important;
  }

  html body.preview3d-open .preview3d-editor {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    overflow: hidden !important;
    grid-template-rows: 46px 54px !important;
    margin-top: 42px !important;
  }

  html body.preview3d-open .preview3d-editor-content {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.preview3d-open:has(#preview3dEditor:not([hidden])) .preview3d-build-tools {
    grid-template-rows: 8px 34px 100px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open:has(#preview3dEditor:not([hidden])) .preview3d-dock-content {
    grid-row: 4 !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.preview3d-open:has(#preview3dEditor:not([hidden])) .preview3d-bottom-tabs {
    grid-row: 5 !important;
  }

  body.preview3d-open .preview3d-camera-panel {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Source: release-783.css */
/* Release 783: keep the phone video toolbar compact without hiding commands. */
.artboard-media-more {
  position: relative;
  min-width: 0;
}

.artboard-media-more > summary {
  display: grid;
  grid-template-rows: 18px 11px;
  place-items: center;
  min-width: 43px;
  height: 42px;
  padding: 4px 1px 2px;
  border-right: 1px solid #edf0f2;
  background: #fff;
  color: #1b2026;
  cursor: pointer;
  font-size: 9px;
  list-style: none;
  text-align: center;
}

.artboard-media-more > summary::-webkit-details-marker { display: none; }
.artboard-media-more > summary img { width: 16px; height: 16px; }

.artboard-media-more-menu {
  position: absolute;
  z-index: 2147483647;
  right: 0;
  bottom: calc(100% + 6px);
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  width: min(232px, calc(100vw - 24px));
  max-height: min(42dvh, 300px);
  overflow: auto;
  border: 1px solid #cfd4da;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 28, 36, .2);
}

.artboard-media-more-menu[hidden] { display: none !important; }
.artboard-media-more-menu button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 7px;
  min-width: 0;
  min-height: 38px;
  padding: 4px 8px;
  border: 0;
  border-right: 1px solid #edf0f2;
  border-bottom: 1px solid #edf0f2;
  background: #fff;
  color: #1b2026;
  font: inherit;
  font-size: 11px;
  text-align: left;
}
.artboard-media-more-menu button:hover,
.artboard-media-more-menu button:focus-visible { background: #f1f5f9; }
.artboard-media-more-menu button:focus-visible,
.artboard-media-more > summary:focus-visible { outline: 2px solid #1477d4; outline-offset: -2px; }
.artboard-media-more-menu button img { width: 16px; height: 16px; }
.artboard-media-more-menu button:disabled { opacity: .38; }

@media (max-width: 700px) {
  .artboard-media-actions {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
  }

  .artboard-media-actions > button {
    min-width: 0;
    width: 100%;
    height: 42px;
    padding-inline: 0;
    font-size: 8px;
  }

  .artboard-media-more > summary {
    min-width: 0;
    width: 100%;
    height: 42px;
    padding-inline: 0;
    font-size: 8px;
  }

  .artboard-media-timeline { overflow: visible; }

  html[data-photostrator-surface="web"] body .artboard-media-actions {
    overflow: visible !important;
  }

  /* Phone video timeline scrolls within its dock while More escapes the scrollport. */
  html[data-photostrator-surface="web"] body .artboard-media-timeline {
    overflow-y: auto !important;
    overflow-x: visible !important;
  }

  html[data-photostrator-surface="web"] body .artboard-media-more[open] .artboard-media-more-menu {
    position: fixed !important;
    right: 46px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px) + 328px);
  }

  html[data-photostrator-surface="web"] body .artboard-media-timeline:has(.artboard-media-more[open]) {
    z-index: 2147483647 !important;
  }
}

/* Keep mobile Build sections at their content height so the inspector scrolls instead of overlapping. */
@media (max-width: 700px) {
  html[data-photostrator-surface="app"] body #inspectorPanel.layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel,
  html[data-photostrator-surface="web"] body #inspectorPanel.layers[data-active-tab="build"] > .inspector-view[data-inspector-view="build"] > .panel {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: max-content !important;
    max-height: none !important;
  }
}
@media (max-width: 600px) {
  #inspectorPanel #estimateList > * {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    column-gap: 8px !important;
    align-items: start !important;
    padding-block: 5px !important;
    border-bottom: 1px solid rgba(120, 130, 140, 0.18) !important;
    line-height: 1.45 !important;
    word-spacing: 0.08em !important;
    overflow-wrap: anywhere !important;
  }
  #inspectorPanel #estimateList > * > :last-child {
    text-align: right !important;
  }
}

/* Release 794: keep web tool rails complete, scrollable, and visually even. */
html[data-photostrator-surface="web"] body .sidebar,
html[data-photostrator-surface="web"] body .app-frame-right-nav {
  scrollbar-color: rgba(93, 105, 117, 0.62) transparent !important;
  scrollbar-width: thin !important;
}

html[data-photostrator-surface="web"] body .app-frame-right-nav {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
}

html[data-photostrator-surface="web"] body .sidebar :is(.tool, .rail-profile-button) img,
html[data-photostrator-surface="web"] body .app-frame-right-nav .category-tool img {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
  object-fit: contain !important;
}

html[data-photostrator-surface="web"] body .sidebar::-webkit-scrollbar,
html[data-photostrator-surface="web"] body .app-frame-right-nav::-webkit-scrollbar {
  width: 8px;
}

html[data-photostrator-surface="web"] body .sidebar::-webkit-scrollbar-thumb,
html[data-photostrator-surface="web"] body .app-frame-right-nav::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(93, 105, 117, 0.62);
  background-clip: padding-box;
}

html[data-photostrator-surface="web"] body .sidebar :is(.tool, .rail-profile-button) img[src$=".png"],
html[data-photostrator-surface="web"] body .app-frame-right-nav .category-tool img[src$=".png"] {
  transform: scale(1.3) !important;
  transform-origin: center !important;
}

/* Keep every camera mode visible and consistent with the four standard views. */
body.preview3d-open .preview3d-camera-modes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.preview3d-open .preview3d-camera-modes button:nth-child(4n) {
  border-right: 0;
}

@media (max-width: 520px) {
  body.preview3d-open .preview3d-camera-modes,
  body.preview3d-open .preview3d-camera-views {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  body.preview3d-open .preview3d-camera-modes button,
  body.preview3d-open .preview3d-camera-views button {
    min-width: 0;
    padding-inline: 8px;
    font-size: 11px;
  }

  body.preview3d-open .preview3d-camera-modes button:nth-child(odd),
  body.preview3d-open .preview3d-camera-views button:nth-child(odd) {
    border-right: 1px solid rgba(23, 33, 43, 0.12);
  }

  body.preview3d-open .preview3d-camera-modes button:nth-child(even),
  body.preview3d-open .preview3d-camera-views button:nth-child(even),
  body.preview3d-open .preview3d-camera-modes button:last-child,
  body.preview3d-open .preview3d-camera-views button:last-child {
    border-right: 0;
  }

  body.preview3d-open .preview3d-camera-modes button:nth-last-child(n + 3),
  body.preview3d-open .preview3d-camera-views button:nth-last-child(n + 3) {
    border-bottom: 1px solid rgba(23, 33, 43, 0.12);
  }
}

.preview3d-surface .preview3d-document-title {
  position: relative;
  padding-left: 48px;
}

.preview3d-brand-mark {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 1px solid rgba(26, 35, 46, 0.12);
  border-radius: 5px;
  object-fit: cover;
}

body.preview3d-open .preview3d-document-title {
  padding-left: 40px !important;
}

body.preview3d-open .preview3d-brand-mark {
  left: 7px;
  width: 24px;
  height: 24px;
}

/* Keep the full brand lockup visible above the editable document name. */
.topbar .history-actions .document-chip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 36px 16px !important;
  align-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  width: min(176px, 100%) !important;
  max-width: min(176px, 100%) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 2px 8px 2px 6px !important;
}

.document-brand-lockup {
  display: block !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: 100% !important;
  height: 36px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.document-brand-lockup img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.document-brand-lockup-dark { display: none !important; }

.topbar .history-actions .document-chip #documentTitle {
  display: block !important;
  grid-row: 2 !important;
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 16px !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:root[data-theme="dark"] .document-brand-lockup-light { display: none !important; }
:root[data-theme="dark"] .document-brand-lockup-dark { display: block !important; }

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  .topbar .history-actions .document-chip {
    grid-template-rows: 27px 14px !important;
    width: min(164px, calc(100vw - 110px)) !important;
    max-width: min(164px, calc(100vw - 110px)) !important;
    padding: 1px 5px !important;
  }

  .document-brand-lockup { height: 27px !important; }

  .topbar .history-actions .document-chip #documentTitle {
    min-height: 14px !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }
}

/* Release 816: keep the narrow web Video timeline readable while scrolling. */
@media screen and (max-width: 700px) {
  html[data-photostrator-surface="web"] body[data-toolbar-profile="video"] .artboard-media-timeline:not([hidden]) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
  }

  html[data-photostrator-surface="web"] body[data-toolbar-profile="video"] .artboard-media-timeline:not([hidden]) > header {
    position: sticky !important;
    z-index: 2 !important;
    top: 0 !important;
    background: #fff !important;
  }
}

/* Release 817: override the legacy mobile title grid for the current full logo lockup. */
@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  html body .topbar .history-actions .document-chip {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 27px 14px !important;
    align-content: center !important;
    justify-items: stretch !important;
    gap: 0 !important;
    width: min(164px, calc(100vw - 110px)) !important;
    max-width: min(164px, calc(100vw - 110px)) !important;
    padding: 1px 5px !important;
  }

  html body .topbar .history-actions .document-chip > .document-brand-lockup {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 27px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body .topbar .history-actions .document-chip > .document-brand-lockup img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  html body .topbar .history-actions .document-chip > #documentTitle {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 14px !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Source: release-784.css */
/* Release 784: restore optional Web artboard grid controls and normalize the 3D tool rail. */
html[data-photostrator-surface="web"] body .artboard-inspector-panel > .artboard-view-options {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  overflow: hidden !important;
  border: 1px solid #d8dde3 !important;
  border-radius: 4px !important;
  background: #fff !important;
}

html[data-photostrator-surface="web"] body .artboard-view-options #gridToggleButton {
  display: grid !important;
}

html[data-photostrator-surface="web"] body .artboard-inspector-panel > .artboard-view-options button {
  display: grid !important;
  grid-template-rows: 16px 11px !important;
  place-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 3px 1px !important;
  border: 0 !important;
  border-right: 1px solid #e5e8ec !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #526a7a !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 11px !important;
}

html[data-photostrator-surface="web"] body .artboard-inspector-panel > .artboard-view-options button:last-child {
  border-right: 0 !important;
}

html[data-photostrator-surface="web"] body .artboard-inspector-panel > .artboard-view-options button img {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
  opacity: 0.78 !important;
}

html[data-photostrator-surface="web"] body .artboard-inspector-panel > .artboard-view-options button:is(.is-active, [aria-pressed="true"]) {
  background: #eef2f5 !important;
  color: #354d5d !important;
  box-shadow: inset 0 -2px #526a7a !important;
}

html[data-photostrator-surface="web"] body .artboard-inspector-panel > .artboard-view-options button:focus-visible {
  position: relative !important;
  z-index: 1 !important;
  outline: 2px solid #526a7a !important;
  outline-offset: -2px !important;
}

html[data-photostrator-surface="web"] body .artboard-inspector-panel .artboard-grid-settings[hidden] {
  display: none !important;
}

html[data-photostrator-surface="web"] body .artboard-inspector-panel .artboard-grid-settings:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 6px 0 !important;
  padding: 8px !important;
  border: 1px solid #d8dde3 !important;
  border-radius: 4px !important;
  background: #f7f8fa !important;
}

html[data-photostrator-surface="web"] body .app-frame-right-nav[aria-label="3D workspace tools"] .category-tool img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
  transform: none !important;
}

/* Source: release-785.css */
/* Release 785: keep hidden 3D dock content out of the imported-model workspace. */
html[data-photostrator-surface="web"] body.preview3d-open #preview3dBuildTools[hidden],
html[data-photostrator-surface="web"] body.preview3d-open #preview3dEditor[hidden] {
  display: none !important;
}

html[data-photostrator-surface="web"] body.preview3d-open #preview3dBuildTools:not([hidden]) {
  display: grid !important;
}

@media (min-width: 1025px) {
  html[data-photostrator-surface="web"] body.preview3d-open .preview3d-surface:has(#preview3dBuildTools[hidden]):has(#preview3dEditor:not([hidden])) {
    grid-template-rows: 96px minmax(0, 1fr) minmax(112px, 18dvh) !important;
  }

  html[data-photostrator-surface="web"] body.preview3d-open #preview3dEditor:not([hidden]) {
    display: grid !important;
    grid-row: 3 !important;
    min-height: 112px !important;
    height: auto !important;
    max-height: 30dvh !important;
    margin: 0 !important;
    overflow: auto !important;
  }
}

@media (max-width: 1024px) {
  html[data-photostrator-surface="web"] body.preview3d-open .preview3d-surface:has(#preview3dBuildTools[hidden]):has(#preview3dEditor:not([hidden])) {
    grid-template-rows: 92px minmax(0, 1fr) clamp(112px, 18dvh, 180px) !important;
  }

  html[data-photostrator-surface="web"] body.preview3d-open #preview3dEditor:not([hidden]) {
    display: grid !important;
    grid-row: 3 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: auto !important;
  }
}

/* Source: release-786.css */
/* Release 786: make 3D viewport display styles a compact, clear segmented control. */
body.preview3d-open .preview3d-display-style {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 12px;
  padding: 10px;
  border: 1px solid rgba(34, 48, 60, 0.1);
  border-radius: 9px;
  background: rgba(246, 248, 250, 0.94);
  color: #26343f;
}

body.preview3d-open .preview3d-display-style > header {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 650;
}

body.preview3d-open .preview3d-display-style > header small {
  color: #77838d;
  font-size: 10px;
  font-weight: 450;
}

body.preview3d-open .preview3d-display-style-options {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border: 1px solid rgba(34, 48, 60, 0.08);
  border-radius: 8px;
  background: #e9edf1;
}

body.preview3d-open .preview3d-display-style-options button {
  display: flex;
  min-width: 0;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #4b5964;
  font: 550 10px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

body.preview3d-open .preview3d-display-style-options button img {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: 0.86;
}

body.preview3d-open .preview3d-display-style-options button span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.preview3d-open .preview3d-display-style-options button.is-active {
  border-color: rgba(22, 124, 128, 0.16);
  background: #fff;
  color: #11676b;
  box-shadow: 0 1px 3px rgba(25, 42, 52, 0.12);
}

body.preview3d-open .preview3d-display-style-options button:focus-visible,
body.preview3d-open .preview3d-display-edges input:focus-visible {
  outline: 2px solid #167c80;
  outline-offset: 2px;
}

body.preview3d-open .preview3d-display-edges {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-self: end;
  gap: 7px;
  color: #52616c;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

body.preview3d-open .preview3d-display-edges input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #167c80;
}

body.preview3d-open .preview3d-display-edges input:disabled {
  opacity: 0.62;
}

html[data-theme="dark"] body.preview3d-open .preview3d-display-style {
  border-color: rgba(220, 230, 240, 0.12);
  background: #202a34;
  color: #edf2f6;
}

html[data-theme="dark"] body.preview3d-open .preview3d-display-style > header small,
html[data-theme="dark"] body.preview3d-open .preview3d-display-edges {
  color: #aebbc7;
}

html[data-theme="dark"] body.preview3d-open .preview3d-display-style-options {
  border-color: rgba(220, 230, 240, 0.08);
  background: #18212a;
}

html[data-theme="dark"] body.preview3d-open .preview3d-display-style-options button {
  color: #c6d0d9;
}

html[data-theme="dark"] body.preview3d-open .preview3d-display-style-options button.is-active {
  border-color: rgba(108, 196, 191, 0.2);
  background: #2a3945;
  color: #a5e4df;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
}

@media (max-width: 360px) {
  body.preview3d-open .preview3d-display-style {
    gap: 7px 9px;
    margin-inline: 8px;
    padding: 8px;
  }

  body.preview3d-open .preview3d-display-style-options button {
    min-height: 40px;
    font-size: 9.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.preview3d-open .preview3d-display-style-options button {
    transition: none;
  }
}

/* Source: release-787.css */
/* Release 787: refine compact 3D camera controls without growing the panel. */
body.preview3d-open .preview3d-camera-panel {
  gap: 9px;
  padding: 11px;
  border-color: rgba(34, 48, 60, 0.12);
  border-radius: 9px;
  background: rgba(251, 252, 253, 0.98);
  box-shadow: 0 12px 32px rgba(25, 38, 49, 0.18);
}

body.preview3d-open .preview3d-camera-panel > header {
  min-height: 32px;
  padding-bottom: 5px;
  border-color: rgba(34, 48, 60, 0.1);
}

body.preview3d-open .preview3d-camera-panel > header strong {
  font-size: 13px;
  font-weight: 650;
}

body.preview3d-open .preview3d-camera-panel > header button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background-color 120ms ease, color 120ms ease;
}

body.preview3d-open .preview3d-camera-panel > header button:hover {
  background: rgba(34, 48, 60, 0.08);
}

body.preview3d-open .preview3d-camera-modes,
body.preview3d-open .preview3d-camera-views {
  gap: 2px;
  padding: 3px;
  border-color: rgba(34, 48, 60, 0.08);
  border-radius: 8px;
  background: #eef2f5;
}

body.preview3d-open .preview3d-camera-modes button,
body.preview3d-open .preview3d-camera-views button {
  height: 34px;
  min-height: 34px;
  gap: 4px;
  padding-inline: 3px;
  border: 0;
  border-radius: 6px;
  color: #52616c;
  font-size: 10px;
  font-weight: 550;
  transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

body.preview3d-open .preview3d-camera-modes button:last-child,
body.preview3d-open .preview3d-camera-views button:last-child {
  border-right: 0;
}

body.preview3d-open .preview3d-camera-modes button img {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

body.preview3d-open .preview3d-camera-modes button.is-active,
body.preview3d-open .preview3d-camera-views button.is-active {
  background: #fff;
  color: #11676b;
  box-shadow: 0 1px 3px rgba(25, 42, 52, 0.14);
}

body.preview3d-open .preview3d-eye-height input,
body.preview3d-open .preview3d-scene-save input {
  border-color: rgba(34, 48, 60, 0.14);
  border-radius: 6px;
}

body.preview3d-open .preview3d-position-camera,
body.preview3d-open .preview3d-scene-save button {
  min-height: 33px;
  border-color: rgba(34, 48, 60, 0.11);
  border-radius: 6px;
  background: #f1f4f6;
  transition: background-color 120ms ease, border-color 120ms ease;
}

body.preview3d-open .preview3d-position-camera:hover,
body.preview3d-open .preview3d-scene-save button:hover {
  border-color: rgba(22, 124, 128, 0.24);
  background: #eaf2f3;
}

body.preview3d-open .preview3d-walkthrough-path {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(34, 48, 60, 0.1);
  border-radius: 8px;
  background: #f7f9fa;
}

body.preview3d-open .preview3d-walkthrough-path > header {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
}

body.preview3d-open .preview3d-walkthrough-path > header strong {
  font-size: 12px;
  font-weight: 650;
}

body.preview3d-open .preview3d-walkthrough-path > header output {
  color: #64727d;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

body.preview3d-open .preview3d-walkthrough-path > p {
  margin: 0;
  color: #5f6d77;
  font-size: 10px;
  line-height: 1.4;
}

body.preview3d-open .preview3d-path-duration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px auto;
  align-items: center;
  gap: 7px;
  font-size: 10px;
}

body.preview3d-open .preview3d-path-duration input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(34, 48, 60, 0.14);
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

body.preview3d-open .preview3d-path-duration small {
  color: #64727d;
  font-size: 10px;
}

body.preview3d-open .preview3d-path-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

body.preview3d-open .preview3d-path-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 7px;
  border: 1px solid rgba(34, 48, 60, 0.12);
  border-radius: 6px;
  background: #fff;
  color: #33434e;
  font-size: 10px;
  font-weight: 600;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

body.preview3d-open .preview3d-path-actions #addWalkthroughStopButton {
  grid-column: 1 / -1;
  border-color: rgba(22, 124, 128, 0.22);
  background: rgba(22, 124, 128, 0.08);
  color: #11676b;
}

body.preview3d-open .preview3d-path-actions button img {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

body.preview3d-open .preview3d-path-actions button:not(:disabled):hover {
  border-color: rgba(22, 124, 128, 0.3);
  background: #eaf2f3;
}

body.preview3d-open .preview3d-path-actions button:disabled {
  opacity: 0.48;
}

body.preview3d-open .preview3d-walkthrough-path button:focus-visible,
body.preview3d-open .preview3d-path-duration input:focus-visible {
  outline: 2px solid #167c80;
  outline-offset: 2px;
}

body.preview3d-open .preview3d-walkthrough-stops {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.preview3d-open .preview3d-stop-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

body.preview3d-open .preview3d-stop-fields label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 5px;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(34, 48, 60,  0.09);
  border-radius: 6px;
  background: rgba(34, 48, 60, 0.035);
  color: #40505b;
  font-size: 10px;
  line-height: 1.2;
}

body.preview3d-open .preview3d-stop-fields label > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

body.preview3d-open .preview3d-stop-fields label > small {
  color: #74818b;
  font-size: 9px;
  white-space: nowrap;
}

body.preview3d-open .preview3d-stop-fields input {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  height: 28px;
  box-sizing: border-box;
  padding: 0 6px;
  border: 1px solid rgba(34, 48, 60, 0.13);
  border-radius: 4px;
  background: #fff;
  color: #26343e;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

body.preview3d-open .preview3d-camera-pad {
  grid-template-columns: repeat(3, 38px);
  grid-template-rows: 18px repeat(3, 38px);
  gap: 3px;
}

body.preview3d-open .preview3d-camera-pad button {
  width: 38px;
  height: 38px;
  border-color: rgba(34, 48, 60, 0.1);
  border-radius: 50%;
  background: #f1f4f6;
  box-shadow: 0 1px 2px rgba(25, 42, 52, 0.08);
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

body.preview3d-open .preview3d-camera-pad button:hover {
  border-color: rgba(22, 124, 128, 0.28);
  background: #eaf2f3;
}

body.preview3d-open .preview3d-camera-pad button.is-held {
  border-color: #167c80;
  background: rgba(22, 124, 128, 0.16);
  box-shadow: 0 0 0 2px rgba(22, 124, 128, 0.12);
}

body.preview3d-open .preview3d-camera-panel button:focus-visible,
body.preview3d-open .preview3d-camera-panel input:focus-visible {
  outline: 2px solid #167c80;
  outline-offset: 2px;
}

html[data-theme="dark"] body.preview3d-open .preview3d-camera-modes,
html[data-theme="dark"] body.preview3d-open .preview3d-camera-views {
  border-color: rgba(220, 230, 240, 0.1);
  background: #18212a;
}

html[data-theme="dark"] body.preview3d-open .preview3d-camera-modes button,
html[data-theme="dark"] body.preview3d-open .preview3d-camera-views button {
  color: #c6d0d9;
}

html[data-theme="dark"] body.preview3d-open .preview3d-camera-modes button.is-active,
html[data-theme="dark"] body.preview3d-open .preview3d-camera-views button.is-active {
  background: #2a3945;
  color: #a5e4df;
}

html[data-theme="dark"] body.preview3d-open .preview3d-position-camera,
html[data-theme="dark"] body.preview3d-open .preview3d-scene-save button,
html[data-theme="dark"] body.preview3d-open .preview3d-camera-pad button {
  border-color: rgba(220, 230, 240, 0.12);
  background: #27323d;
}

html[data-theme="dark"] body.preview3d-open .preview3d-walkthrough-path {
  border-color: rgba(220, 230, 240, 0.12);
  background: #1d2730;
}

html[data-theme="dark"] body.preview3d-open .preview3d-walkthrough-path > p,
html[data-theme="dark"] body.preview3d-open .preview3d-walkthrough-path > header output,
html[data-theme="dark"] body.preview3d-open .preview3d-path-duration small {
  color: #b5c0c9;
}

html[data-theme="dark"] body.preview3d-open .preview3d-path-duration input,
html[data-theme="dark"] body.preview3d-open .preview3d-path-actions button {
  border-color: rgba(220, 230, 240, 0.13);
  background: #27323d;
  color: #e5edf2;
}

html[data-theme="dark"] body.preview3d-open .preview3d-stop-fields label {
  border-color: rgba(220, 230, 240, 0.1);
  background: rgba(220, 230, 240, 0.045);
  color: #d5dee5;
}

html[data-theme="dark"] body.preview3d-open .preview3d-stop-fields label > small {
  color: #aab7c1;
}

html[data-theme="dark"] body.preview3d-open .preview3d-stop-fields input {
  border-color: rgba(220, 230, 240, 0.14);
  background: #17212a;
  color: #edf2f6;
}

html[data-theme="dark"] body.preview3d-open .preview3d-path-actions #addWalkthroughStopButton {
  border-color: rgba(108, 196, 191, 0.25);
  background: rgba(108, 196, 191, 0.12);
  color: #a5e4df;
}

html[data-theme="dark"] body.preview3d-open .preview3d-position-camera:hover,
html[data-theme="dark"] body.preview3d-open .preview3d-scene-save button:hover,
html[data-theme="dark"] body.preview3d-open .preview3d-camera-pad button:hover {
  border-color: rgba(108, 196, 191, 0.38);
  background: #303f4b;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.preview3d-open .preview3d-camera-modes,
  html[data-theme="auto"] body.preview3d-open .preview3d-camera-views {
    border-color: rgba(220, 230, 240, 0.1);
    background: #18212a;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-camera-modes button,
  html[data-theme="auto"] body.preview3d-open .preview3d-camera-views button {
    color: #c6d0d9;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-camera-modes button.is-active,
  html[data-theme="auto"] body.preview3d-open .preview3d-camera-views button.is-active {
    background: #2a3945;
    color: #a5e4df;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-position-camera,
  html[data-theme="auto"] body.preview3d-open .preview3d-scene-save button,
  html[data-theme="auto"] body.preview3d-open .preview3d-camera-pad button {
    border-color: rgba(220, 230, 240, 0.12);
    background: #27323d;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-position-camera:hover,
  html[data-theme="auto"] body.preview3d-open .preview3d-scene-save button:hover,
  html[data-theme="auto"] body.preview3d-open .preview3d-camera-pad button:hover {
    border-color: rgba(108, 196, 191, 0.38);
    background: #303f4b;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-walkthrough-path {
    border-color: rgba(220, 230, 240, 0.12);
    background: #1d2730;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-walkthrough-path > p,
  html[data-theme="auto"] body.preview3d-open .preview3d-walkthrough-path > header output,
  html[data-theme="auto"] body.preview3d-open .preview3d-path-duration small {
    color: #b5c0c9;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-path-duration input,
  html[data-theme="auto"] body.preview3d-open .preview3d-path-actions button {
    border-color: rgba(220, 230, 240, 0.13);
    background: #27323d;
    color: #e5edf2;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-path-actions #addWalkthroughStopButton {
    border-color: rgba(108, 196, 191, 0.25);
    background: rgba(108, 196, 191, 0.12);
    color: #a5e4df;
  }
}

@media (max-width: 420px) {
  body.preview3d-open .preview3d-camera-pad {
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: 18px repeat(3, 40px);
  }

  body.preview3d-open .preview3d-camera-pad button {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.preview3d-open .preview3d-camera-panel button {
    transition: none;
  }
}

/* Source: release-812.css */
/* Release 812: keep view-style, render, and camera controls reachable. */
body.preview3d-open .preview3d-render-panel {
  display: flex;
  flex-direction: column;
  top: 100px;
  right: 54px;
  bottom: auto;
  left: auto;
  width: min(360px, calc(100vw - 76px));
  max-height: calc(100dvh - 180px);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 8px;
}

body.preview3d-open .preview3d-render-panel > header { flex: 0 0 42px; }
body.preview3d-open .preview3d-render-panel > .preview3d-display-style { flex: 0 0 auto; }
body.preview3d-open .preview3d-render-panel > .preview3d-render-presets { flex: 0 0 62px; }
body.preview3d-open .preview3d-render-panel > .preview3d-render-exposure { flex: 0 0 48px; }
body.preview3d-open .preview3d-render-panel > .preview3d-render-toggles { flex: 0 0 48px; }

body.preview3d-open .preview3d-render-panel .preview3d-display-style {
  margin-block: 8px;
}

@media (max-width: 520px) {
  body.preview3d-open .preview3d-render-panel {
    top: 96px;
    right: 47px;
    bottom: auto;
    left: auto;
    width: min(360px, calc(100vw - 100px));
    max-height: calc(100dvh - 162px);
  }
  body.preview3d-open .preview3d-render-panel > header { flex-basis: 40px; }
  body.preview3d-open .preview3d-render-panel > .preview3d-render-presets { flex-basis: 60px; }
  body.preview3d-open .preview3d-render-panel > .preview3d-render-exposure { flex-basis: 46px; }
  body.preview3d-open .preview3d-render-panel > .preview3d-render-toggles { flex-basis: 46px; }
}

/* Keep segmented controls legible if another 3D surface rule collapses button height. */
body.preview3d-open .preview3d-camera-modes,
body.preview3d-open .preview3d-camera-views {
  display: grid !important;
  grid-auto-rows: minmax(36px, auto) !important;
  align-items: stretch !important;
  min-height: 42px !important;
  height: auto !important;
}

body.preview3d-open .preview3d-camera-modes button,
body.preview3d-open .preview3d-camera-views button {
  display: flex !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: none !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  line-height: 1.15 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.preview3d-open .preview3d-camera-modes button > span,
body.preview3d-open .preview3d-camera-views button > span {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 520px) {
  body.preview3d-open .preview3d-camera-modes,
  body.preview3d-open .preview3d-camera-views {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Source: release-813.css */
/* Release 813: make saved walkthrough actions read as one precise tool row. */
body.preview3d-open .preview3d-stop-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) repeat(3, 32px);
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.preview3d-open .preview3d-stop-actions button {
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #53616b;
  font-size: 10px;
  font-weight: 600;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

body.preview3d-open .preview3d-stop-actions button[data-walkthrough-stop-action="view"] {
  justify-content: flex-start;
}

body.preview3d-open .preview3d-stop-actions button[data-walkthrough-stop-action="capture"] {
  background: #e8f3f2;
  color: #126d70;
}

body.preview3d-open .preview3d-stop-actions button.preview3d-stop-action-icon {
  width: 32px;
  padding: 0;
  border-radius: 50%;
  background: #f0f3f5;
  color: #53616b;
}

body.preview3d-open .preview3d-stop-actions button:not(:disabled):hover {
  background: #e9f1f2;
  color: #126d70;
}

body.preview3d-open .preview3d-stop-actions button.preview3d-stop-action-icon:not(:disabled):hover {
  background: #e2eeef;
}

body.preview3d-open .preview3d-stop-actions button.preview3d-stop-action-remove {
  color: #8b6060;
}

body.preview3d-open .preview3d-stop-actions button.preview3d-stop-action-remove:not(:disabled):hover {
  background: #f8eaea;
  color: #a72f2f;
}

body.preview3d-open .preview3d-stop-actions button:focus-visible {
  outline: 2px solid #167c80;
  outline-offset: 1px;
}

html[data-theme="dark"] body.preview3d-open .preview3d-stop-actions button {
  color: #d2dbe1;
}

html[data-theme="dark"] body.preview3d-open .preview3d-stop-actions button[data-walkthrough-stop-action="capture"] {
  background: rgba(108, 196, 191, 0.18);
  color: #a5e4df;
}

html[data-theme="dark"] body.preview3d-open .preview3d-stop-actions button.preview3d-stop-action-icon {
  background: #2b3741;
  color: #d2dbe1;
}

html[data-theme="dark"] body.preview3d-open .preview3d-stop-actions button:not(:disabled):hover {
  background: #35454e;
  color: #a5e4df;
}

html[data-theme="dark"] body.preview3d-open .preview3d-stop-actions button.preview3d-stop-action-remove {
  color: #f0a5a5;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.preview3d-open .preview3d-stop-actions button {
    color: #d2dbe1;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-stop-actions button[data-walkthrough-stop-action="capture"] {
    background: rgba(108, 196, 191, 0.18);
    color: #a5e4df;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-stop-actions button.preview3d-stop-action-icon {
    background: #2b3741;
    color: #d2dbe1;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-stop-actions button:not(:disabled):hover {
    background: #35454e;
    color: #a5e4df;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-stop-actions button.preview3d-stop-action-remove {
    color: #f0a5a5;
  }
}

@media (max-width: 420px) {
  body.preview3d-open .preview3d-stop-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) repeat(3, 30px);
  }

  body.preview3d-open .preview3d-stop-actions button {
    height: 30px;
    min-height: 30px;
  }

  body.preview3d-open .preview3d-stop-actions button.preview3d-stop-action-icon {
    width: 30px;
  }
}

/* Source: release-814.css */
/* Release 814: keep all four render environments in a single aligned group. */
body.preview3d-open .preview3d-render-presets {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 359px) {
  body.preview3d-open .preview3d-render-panel > .preview3d-render-presets {
    flex-basis: 100px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Source: release-815.css */
/* Release 815: give render-environment controls the same crisp feedback as view styles. */
body.preview3d-open .preview3d-render-presets button {
  min-height: 42px;
  border-radius: 5px;
  color: #586570;
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

body.preview3d-open .preview3d-render-presets button:not(:disabled):hover {
  background: #eef4f5;
  color: #126d70;
}

body.preview3d-open .preview3d-render-presets button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid #167c80;
  outline-offset: -3px;
}

body.preview3d-open .preview3d-render-presets button.is-active {
  background: #e8f3f2;
  box-shadow: inset 0 -2px #168589;
  color: #126d70;
  font-weight: 600;
}

body.preview3d-open .preview3d-render-presets button.is-active img { opacity: 1; }

html[data-theme="dark"] body.preview3d-open .preview3d-render-presets button:not(:disabled):hover {
  background: #35454e;
  color: #a5e4df;
}

html[data-theme="dark"] body.preview3d-open .preview3d-render-presets button.is-active {
  background: rgba(108, 196, 191, 0.18);
  box-shadow: inset 0 -2px #6cc4bf;
  color: #a5e4df;
}

html[data-theme="dark"] body.preview3d-open .preview3d-render-presets button:focus-visible {
  outline-color: #8de1d8;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body.preview3d-open .preview3d-render-presets button:not(:disabled):hover {
    background: #35454e;
    color: #a5e4df;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-render-presets button.is-active {
    background: rgba(108, 196, 191, 0.18);
    box-shadow: inset 0 -2px #6cc4bf;
    color: #a5e4df;
  }

  html[data-theme="auto"] body.preview3d-open .preview3d-render-presets button:focus-visible {
    outline-color: #8de1d8;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.preview3d-open .preview3d-render-presets button { transition: none; }
}

/* Source: release-816.css */
/* Release 816: hidden 3D build docks must not reserve canvas space on any surface. */
body.preview3d-open #preview3dBuildTools[hidden],
body.preview3d-open #preview3dEditor[hidden] {
  display: none !important;
}

body.preview3d-open #preview3dBuildTools:not([hidden]) {
  display: grid !important;
}

body.preview3d-open .preview3d-surface:has(#preview3dBuildTools[hidden]):has(#preview3dEditor:not([hidden])) {
  grid-template-rows: 96px minmax(0, 1fr) minmax(112px, 18dvh) !important;
}

body.preview3d-open #preview3dEditor:not([hidden]) {
  grid-row: 3 !important;
  min-height: 112px !important;
  height: auto !important;
  max-height: 30dvh !important;
  margin: 0 !important;
  overflow: auto !important;
}

@media (max-width: 1024px) {
  body.preview3d-open .preview3d-surface:has(#preview3dBuildTools[hidden]):has(#preview3dEditor:not([hidden])) {
    grid-template-rows: 92px minmax(0, 1fr) clamp(112px, 18dvh, 180px) !important;
  }

  body.preview3d-open #preview3dEditor:not([hidden]) {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* Source: release-817.css */
/* Release 817: keep the imported 3D model library and edit dock available together. */
body.preview3d-open.preview3d-imported-model .preview3d-bottom-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

body.preview3d-open.preview3d-imported-model #preview3dDockPanelEdit.is-active:not([hidden]) {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.preview3d-open.preview3d-imported-model #preview3dEditor:not([hidden]) {
  display: grid !important;
  grid-row: auto !important;
  grid-column: auto !important;
  grid-template-rows: 42px minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body.preview3d-open.preview3d-imported-model #preview3dEditor .preview3d-editor-modes {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
}

body.preview3d-open.preview3d-imported-model #preview3dEditor .preview3d-editor-modes button {
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
}

body.preview3d-open.preview3d-imported-model #preview3dEditor .preview3d-editor-content {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: auto !important;
}

@media (max-width: 760px) {
  body.preview3d-open.preview3d-imported-model:has(#preview3dEditor:not([hidden])) .preview3d-build-tools {
    grid-template-rows: 8px 34px minmax(0, 1fr) 56px !important;
  }

  body.preview3d-open.preview3d-imported-model .preview3d-dock-content {
    grid-row: 3 !important;
  }

  body.preview3d-open.preview3d-imported-model .preview3d-bottom-tabs {
    grid-row: 4 !important;
  }

  html body.preview3d-open.preview3d-imported-model #preview3dEditor:not([hidden]) {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
}

/* Source: release-818.css */
/* Release 818: use the shared 2D document brand lockup in the 3D header. */
.preview3d-surface .preview3d-document-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 36px 16px !important;
  align-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 0 !important;
  padding: 2px 10px 2px 6px !important;
}

.preview3d-brand-lockup {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: min(176px, 100%) !important;
  height: 36px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.preview3d-brand-lockup img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.preview3d-document-title > #preview3dModeLabel {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.preview3d-document-title > #preview3dDocumentTitle {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 16px !important;
  overflow: hidden !important;
  padding: 0 !important;
  color: #1d2229 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.preview3d-document-title > .preview3d-artboard-picker {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  max-width: 148px !important;
}

:root[data-theme="dark"] .preview3d-brand-lockup-light { display: none !important; }
:root[data-theme="dark"] .preview3d-brand-lockup-dark { display: block !important; }

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body.preview3d-open .preview3d-document-title {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 27px 14px !important;
    padding: 1px 5px !important;
  }

  body.preview3d-open .preview3d-brand-lockup {
    width: min(164px, 100%) !important;
    height: 27px !important;
  }

  body.preview3d-open .preview3d-document-title > #preview3dDocumentTitle {
    min-height: 14px !important;
    font-size: 10px !important;
    line-height: 14px !important;
  }

  body.preview3d-open .preview3d-document-title > .preview3d-artboard-picker {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    max-width: 118px !important;
  }

  body.preview3d-open .preview3d-artboard-picker > span { display: none !important; }

  body.preview3d-open .preview3d-artboard-picker select {
    width: 118px !important;
    max-width: 118px !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .preview3d-brand-lockup-light { display: none !important; }
  :root[data-theme="auto"] .preview3d-brand-lockup-dark { display: block !important; }
}

/* Source: release-819.css */
/* Release 819: complete the shared 2D/3D document header on phones and desktop. */
.preview3d-surface .preview3d-topbar {
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  grid-template-rows: 52px 44px !important;
}

.preview3d-header-back {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 46px !important;
  height: 52px !important;
}

.preview3d-document-menu-button {
  display: grid !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 52px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid rgba(26, 35, 46, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #303840 !important;
}

.preview3d-document-menu-button img {
  width: 20px !important;
  height: 20px !important;
  opacity: 0.84 !important;
}

.preview3d-document-menu-button[aria-expanded="true"] {
  background: rgba(26, 35, 46, 0.06) !important;
}

body.preview3d-open #documentOptionsMenu:not([hidden]) {
  z-index: 2147483650 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 760px), (max-height: 430px) and (orientation: landscape) {
  body.preview3d-open .preview3d-topbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    grid-template-rows: 47px 45px !important;
  }

  body.preview3d-open .preview3d-header-back {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 47px !important;
  }

  body.preview3d-open .preview3d-document-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body.preview3d-open .preview3d-document-menu-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 47px !important;
  }

  body.preview3d-open .preview3d-header-actions button {
    grid-template-rows: 20px 11px !important;
    align-content: center !important;
    gap: 1px !important;
    min-height: 45px !important;
    padding: 4px 1px 3px !important;
  }

  body.preview3d-open .preview3d-header-actions button span {
    display: block !important;
    width: 100% !important;
    height: 11px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    line-height: 11px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.preview3d-open #documentOptionsMenu:not([hidden]) {
    top: calc(92px + env(safe-area-inset-top, 0px)) !important;
    right: 44px !important;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    left: 46px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}