@charset "UTF-8";

:root {
  font-family: "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  color-scheme: light;
  color: var(--text);
  background: var(--bg);
  --bg: #f6f7f4;
  --surface: #fff;
  --surface-soft: #f1f3ee;
  --field-bg: #fdfefb;
  --text: #283d36;
  --text-secondary: #687862;
  --text-muted: #85927c;
  --accent: #174e40;
  --accent-bg: #174e40;
  --accent-hover: #27634e;
  --on-accent: #fff;
  --indicator: #749e58;
  --progress: #98b969;
  --border: #e3e7df;
  --field-border: #dce2d6;
  --field-hover: #a7b89c;
  --hover-bg: #eaf0e7;
  --focus: #76916b;
  --focus-ring: #76916b15;
  --canvas-bg: #f0f2ec;
  --grid-dot: #b7c1ae70;
  --ruler-ink: #7c8c6f;
  --ruler-line: #acb89e;
  --guide-color: #008ed6;
  --guide-selected: #6f4ae5;
  --success-bg: #f0f5ec;
  --success-border: #dce6d3;
  --success-text: #5d7552;
  --warning-bg: #fff8e9;
  --warning-border: #e6c8a0;
  --warning-text: #916328;
  --error-bg: #fff3ef;
  --error-border: #e3b1a4;
  --error-text: #a0553e;
  --overlay-bg: #fffffff2;
  --toast-bg: #244a39;
  --toast-text: #fff;
  --backdrop: #19352660;
  --small-shadow: #29382010;
  --shadow: #1c352744;
  --scrollbar: #d5deca;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Shared dark palette with pdf-online-preview. */
  --bg: #17191e;
  --surface: #202329;
  --surface-soft: #2c3039;
  --field-bg: #202329;
  --text: #e5e8ef;
  --text-secondary: #969dab;
  --text-muted: #969dab;
  --accent: #a4a4ff;
  --accent-bg: #e5e8ef;
  --accent-hover: #dadde3;
  --on-accent: #202329;
  --indicator: #44a78b;
  --progress: #a4a4ff;
  --border: #33373f;
  --field-border: #33373f;
  --field-hover: #969dab;
  --hover-bg: #2c3039;
  --focus: #a4a4ff;
  --focus-ring: #a4a4ff25;
  --canvas-bg: #15171c;
  --grid-dot: #969dab26;
  --ruler-ink: #969dab;
  --ruler-line: #33373f;
  --guide-color: #008ed6;
  --guide-selected: #6f4ae5;
  --success-bg: #202329;
  --success-border: #33373f;
  --success-text: #969dab;
  --warning-bg: #332c21;
  --warning-border: #77603b;
  --warning-text: #f1cf91;
  --error-bg: #332329;
  --error-border: #67404b;
  --error-text: #ff8e9c;
  --overlay-bg: #202329f5;
  --toast-bg: #343450;
  --toast-text: #e5e8ef;
  --backdrop: #0008;
  --small-shadow: #0003;
  --shadow: #0004;
  --scrollbar: #33373f;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,input,select {
  font:inherit;
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;
}

button:disabled {
  cursor:default;
  opacity:.35;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,svg:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:3px;
}

button {
  border:0;
}

button:disabled:hover {
  background:inherit;
}

a {
  color:inherit;
}

button[hidden],[hidden] {
  display:none!important;
}

.app-header {
  height:72px;
  padding:0 32px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--surface);
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
}

.brand-logo {
  width:144px;
  height:54px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}

.brand-logo-light,
:root[data-theme="dark"] .brand-logo-dark {
  display:none;
}

:root[data-theme="dark"] .brand-logo-light {
  display:block;
}

.brand-description {
  font-size:10px;
  letter-spacing:1.75px;
  margin:4px 0 0 22px;
  color:var(--text-secondary);
  border-left:1px solid var(--border);
  padding-left:24px;
}

.header-right {
  display:flex;
  align-items:center;
  gap:24px;
}

.theme-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11px;
}

.theme-control select {
  width: 144px;
  height: 32px;
  font-size: 11px;
}

.local-badge {
  font-size:11px;
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  gap:8px;
}

.local-badge i,.workspace-footer i {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--indicator);
}

.icon-button {
  border:1px solid transparent;
  min-width:30px;
  height:30px;
  background:transparent;
  color:var(--text-secondary);
  font-size:19px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.icon-button:hover {
  background:var(--hover-bg);
  color:var(--accent);
}

#help-button {
  border:1px solid var(--border);
  width:26px;
  min-width:26px;
  height:26px;
  border-radius:50%;
  font-size:13px;
}

.app-shell {
  display:grid;
  grid-template-columns:304px minmax(0,1fr);
  min-height:calc(100vh - 72px);
}

.settings {
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:0 23px;
}

.settings-heading {
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:650;
}

.unit-badge {
  font-size:10px;
  font-weight:500;
  color:var(--text-muted);
  background:var(--surface-soft);
  padding:3px 7px;
  border-radius:4px;
}

.setting-section {
  padding:18px 0;
  border-top:1px solid var(--border);
}

.setting-section h2 {
  font-size:12px;
  font-weight:650;
  margin:0 0 17px;
  display:flex;
  align-items:center;
  gap:10px;
}

.section-number {
  font-size:10px;
  font-weight:500;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}

.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:10px;
  color:var(--text-secondary);
  flex:1;
  min-width:0;
  line-height:1.3;
}

.field.full {
  margin-bottom:12px;
}

input,select {
  width:100%;
  height:35px;
  border:1px solid var(--field-border);
  background:var(--field-bg);
  color:var(--text);
  padding:0 10px;
  border-radius:5px;
  font-size:12px;
  outline:none;
  min-width:0;
  font-variant-numeric:tabular-nums;
}

select {
  padding-right:23px;
}

input:hover,select:hover {
  border-color:var(--field-hover);
}

input:focus,select:focus {
  border-color:var(--focus);
  box-shadow:0 0 0 2px var(--focus-ring);
}

select:disabled {
  background: var(--surface-soft);
  color: var(--text-muted);
  cursor: default;
}

input:invalid {
  border-color:var(--error-border);
}

input::-webkit-inner-spin-button {
  opacity:.35;
}

.field-row {
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.field-row+.field-row {
  margin-top:12px;
}

.field-row.equal {
  align-items:stretch;
  gap:12px;
}

.dimension-times {
  font-size:13px;
  color:var(--text-muted);
  line-height:35px;
}

.dimension-times.muted {
  color:transparent;
}

.swap-button {
  height:35px;
  width:25px;
  flex-shrink:0;
  background:none;
  color:var(--text-secondary);
  font-size:20px;
  padding:0;
}

.text-button {
  padding:0;
  background:none;
  color:var(--text-secondary);
  font-size:11px;
}

.text-button:hover {
  color:var(--accent);
}

.center-button {
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
}

.center-button span {
  font-size:15px;
}

.field-note {
  font-size:10px;
  line-height:1.65;
  color:var(--text-muted);
  margin:9px 0 13px;
}

.last .field-note {
  margin-bottom:0;
}

.orientation-field {
  margin-top:13px;
}

.settings-footer {
  border-top:1px solid var(--border);
  padding:18px 0 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:auto;
}

.primary-button,.dark-button,.secondary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 13px;
  height:36px;
  border-radius:5px;
  font-weight:550;
  font-size:11px;
  white-space:nowrap;
}

.primary-button {
  background:var(--accent-bg);
  color:var(--on-accent);
  height:39px;
}

.primary-button:hover,.dark-button:hover {
  background:var(--accent-hover);
}

.primary-button span {
  font-size:19px;
  font-weight:400;
}

.dark-button {
  background:var(--accent-bg);
  color:var(--on-accent);
}

.secondary-button {
  color:var(--text-secondary);
  background:var(--surface);
  border:1px solid var(--field-border);
}

.secondary-button:hover {
  background:var(--hover-bg);
  border-color:var(--field-hover);
}

.secondary-button>span {
  font-size:16px;
  font-weight:400;
}

.workspace {
  padding:32px 36px 0;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.workspace-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:26px;
}

.eyebrow {
  color:var(--text-muted);
  font-size:9px;
  font-weight:650;
  letter-spacing:1.9px;
  margin-bottom:9px;
}

h1 {
  margin:0;
  letter-spacing:-1.2px;
  font-size:29px;
  line-height:1.2;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:12px;
}

.version {
  font-size:10px;
  color:var(--text-secondary);
  border:1px solid var(--border);
  border-radius:4px;
  letter-spacing:0;
  padding:4px 6px;
  font-weight:500;
}

.document-actions {
  display:flex;
  gap:8px;
}

.summary {
  display:grid;
  grid-template-columns:.85fr 1.25fr 1.1fr 1fr;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  margin-bottom:22px;
  min-height:99px;
}

.summary>div {
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}

.summary>div+div:before {
  content:"";
  height:41px;
  position:absolute;
  top:28px;
  left:0;
  border-left:1px solid var(--border);
}

.stat-label {
  font-size:8px;
  letter-spacing:1px;
  color:var(--text-secondary);
  font-weight:600;
  display:block;
  margin-bottom:8px;
  white-space:nowrap;
}

.summary strong {
  font-size:26px;
  font-weight:650;
  line-height:1;
  letter-spacing:-.8px;
}

.summary-primary strong {
  color:var(--accent);
  font-size:32px;
}

.stat-unit {
  font-size:11px;
  color:var(--text-muted);
  margin-left:7px;
}

.summary .small-stat {
  font-size:14px;
  letter-spacing:-.3px;
  line-height:27px;
}

.utilization-stat {
  display:flex;
  align-items:center;
  gap:16px;
}

.utilization-track {
  width:65px;
  height:5px;
  background:var(--surface-soft);
  border-radius:4px;
  overflow:hidden;
}

.utilization-track i {
  display:block;
  height:100%;
  background:var(--progress);
  border-radius:4px;
}

.canvas-panel {
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:430px;
}

.canvas-toolbar {
  height:56px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
}

.side-control {
  display:flex;
  gap:2px;
  background:var(--surface-soft);
  border:1px solid var(--border);
  border-radius:5px;
  padding:3px;
}

.side-control button {
  background:none;
  border-radius:3px;
  padding:6px 14px;
  color:var(--text-secondary);
  font-size:11px;
}

.side-control button.active {
  color:var(--accent);
  background:var(--surface);
  box-shadow:0 1px 4px var(--small-shadow);
}

.canvas-caption {
  color:var(--text-muted);
  font-size:10px;
  letter-spacing:.3px;
  margin-right:auto;
  margin-left:5px;
}

.view-actions {
  display:flex;
  align-items:center;
  gap:2px;
}

.toolbar-divider {
  height:17px;
  border-left:1px solid var(--border);
  margin:0 7px;
}

.zoom-label {
  font-size:10px;
  min-width:75px;
  background:none;
  color:var(--text-secondary);
}

.canvas-view {
  position:relative;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  grid-template-rows:24px minmax(0,1fr);
  flex:1;
  min-height:0;
  min-width:0;
  overflow:hidden;
}

.ruler-corner {
  grid-column:1;
  grid-row:1;
  display:grid;
  place-items:center;
  font-size:8px;
  color:var(--text-muted);
  background:var(--surface-soft);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  user-select:none;
}

.viewport-ruler {
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--surface-soft);
  user-select:none;
  touch-action:none;
  font-family:"Segoe UI",Arial,sans-serif;
}

.horizontal-ruler {
  grid-column:2;
  grid-row:1;
  border-bottom:1px solid var(--border);
  cursor:row-resize;
}

.vertical-ruler {
  grid-column:1;
  grid-row:2;
  border-right:1px solid var(--border);
  cursor:col-resize;
}

.viewport-ruler text {
  fill:var(--ruler-ink);
  font-size:9px;
  pointer-events:none;
}

.viewport-ruler line {
  stroke:var(--ruler-ink);
  stroke-width:1;
  shape-rendering:crispEdges;
  pointer-events:none;
}

.canvas-view .canvas-scroll {
  grid-column:2;
  grid-row:2;
  min-width:0;
  min-height:0;
}

.canvas-view .canvas-stage {
  position:relative;
  display:block;
  margin:0;
  padding:0;
  flex-shrink:0;
}

.canvas-view #sheet-canvas {
  position:absolute;
}

.guide {
  outline:none;
}

.guide[data-axis="x"] {
  cursor:col-resize;
}

.guide[data-axis="y"] {
  cursor:row-resize;
}

.guide-hit {
  fill:none;
  stroke:transparent;
  stroke-width:12;
  pointer-events:stroke;
}

.guide-line {
  fill:none;
  stroke:var(--guide-color);
  stroke-width:1;
  pointer-events:none;
}

.guide.selected .guide-line,.guide:focus-visible .guide-line {
  stroke:var(--guide-selected);
  stroke-width:1.5;
}

.canvas-view[data-drag="guide-x"] {
  cursor:col-resize;
}

.canvas-view[data-drag="guide-y"] {
  cursor:row-resize;
}

.canvas-view[data-drag="item"] {
  cursor:grabbing;
}

.guide-toggle {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  background:none;
  color:var(--accent);
  font-size:9px;
}

.guide-toggle[aria-pressed="false"] {
  color:var(--text-muted);
}

.canvas-legend .guide-toggle i {
  width:12px;
  height:0;
  border-top:1px solid var(--guide-color);
}

.canvas-scroll {
  position:relative;
  overflow:auto;
  scrollbar-gutter:stable both-edges;
  min-height:340px;
  flex:1;
  display:flex;
  background-color:var(--canvas-bg);
  background-image:radial-gradient(var(--grid-dot) .65px,transparent .65px);
  background-size:16px 16px;
}

.canvas-stage {
  margin:auto;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:100%;
  min-height:100%;
}

#sheet-canvas {
  display:block;
  flex-shrink:0;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  font-family:"Segoe UI",Arial,sans-serif;
}

#sheet-canvas [data-id] {
  cursor:grab;
  outline:none;
}

#sheet-canvas [data-id]:focus-visible .trim {
  stroke:#174e40;
  stroke-width:1.2;
}

.canvas-control {
  cursor:pointer;
  outline:none;
  color:#245d48;
}

.canvas-control rect,.canvas-control circle {
  fill:#fffefb;
  stroke:#a0b3a3;
  stroke-width:1;
}

.canvas-control path {
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.canvas-control text {
  fill:currentColor;
  font-size:6px;
  font-weight:700;
  pointer-events:none;
}

.rotate-control text {
  font-size:9px;
}

.rotate-control path {
  stroke-width:1.8;
}

.gap-strip-line {
  stroke:#47816c;
  stroke-width:1;
  stroke-dasharray:3 3;
  opacity:0;
  pointer-events:none;
}

.gap-strip:hover .gap-strip-line,.gap-strip:focus-within .gap-strip-line {
  opacity:.8;
}

.canvas-control:hover rect,.canvas-control:hover circle,.canvas-control:focus-visible rect,.canvas-control:focus-visible circle {
  fill:#d0e6b7;
  stroke:#245d48;
  stroke-width:2;
}

#sheet-canvas.dragging [data-id] {
  cursor:grabbing;
}

.canvas-legend {
  min-height:42px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:22px;
  padding:10px 20px;
  font-size:9px;
  color:var(--text-secondary);
  flex-wrap:wrap;
}

.canvas-legend>span {
  display:flex;
  align-items:center;
  gap:6px;
}

.canvas-legend i {
  display:inline-block;
  width:11px;
  height:9px;
}

.legend-sheet {
  border:1px solid #b7c0ab;
  background:#fff;
}

.legend-print {
  border:1px dashed #849c6c;
  background:#f6f9ef;
}

.legend-bleed {
  border:1px dashed #bca17c;
  background:#f4eee0;
}

.legend-trim {
  border:1px solid #6c9c8b;
  background:#dcece4;
}

.canvas-legend .gripper-note {
  margin-left:auto;
  color:var(--text-muted);
  font-size:8px;
}

.inspector {
  min-height:76px;
  height:76px;
  flex:0 0 76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--border);
  padding:12px 0;
}

.selection-title {
  display:flex;
  align-items:center;
  gap:11px;
}

.selection-title>span {
  width:31px;
  height:31px;
  border:1px solid var(--border);
  border-radius:6px;
  display:grid;
  place-items:center;
  color:var(--text-secondary);
  font-size:20px;
}

.selection-title strong {
  display:block;
  font-size:11px;
  font-weight:600;
  margin-bottom:5px;
}

.selection-title div>span {
  display:block;
  font-size:10px;
  color:var(--text-muted);
}

.selection-hint {
  font-size:10px;
  color:var(--text-muted);
}

.selection-fields {
  display:flex;
  align-items:center;
  gap:10px;
}

.selection-fields label {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-secondary);
  font-size:10px;
}

.selection-fields input {
  width:75px;
  height:31px;
}

.selection-fields button {
  height:31px;
  min-width:68px;
}

.selection-fields button span {
  font-size:11px;
}

.workspace-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  min-height:51px;
  font-size:9px;
  color:var(--text-muted);
}

.workspace-footer>span {
  display:flex;
  align-items:center;
  gap:7px;
}

.workspace-footer i {
  width:5px;
  height:5px;
}

.workspace-footer .text-button {
  font-size:9px;
}

.validation {
  height:64px;
  flex:0 0 64px;
  overflow-y:auto;
  scrollbar-gutter:stable;
  padding:10px 14px;
  margin:0 0 15px;
  border:1px solid var(--warning-border);
  background:var(--warning-bg);
  border-radius:5px;
  color:var(--warning-text);
  font-size:11px;
  line-height:1.7;
}

.validation.success {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}

.canvas-rulers text {
  fill: var(--ruler-ink);
}

.canvas-rulers line {
  stroke: var(--ruler-line);
}

.validation.error {
  border-color:var(--error-border);
  background:var(--error-bg);
  color:var(--error-text);
}

.empty-state {
  pointer-events:none;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:var(--overlay-bg);
  border:1px solid var(--border);
  border-radius:8px;
  text-align:center;
  padding:22px 35px;
  box-shadow:0 8px 25px var(--small-shadow);
}

.empty-state>span {
  display:block;
  font-size:29px;
  color:var(--text-secondary);
  margin-bottom:10px;
}

.empty-state strong {
  font-size:14px;
}

.empty-state p {
  color:var(--text-muted);
  font-size:11px;
  line-height:1.7;
}

.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  max-width:90vw;
  background:var(--toast-bg);
  color:var(--toast-text);
  padding:13px 20px;
  border-radius:6px;
  font-size:12px;
  box-shadow:0 6px 30px var(--shadow);
}

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

dialog {
  border:1px solid var(--border);
  border-radius:12px;
  max-width:580px;
  width:calc(100% - 32px);
  padding:28px;
  color:var(--text);
  background:var(--surface);
  box-shadow:0 20px 100px var(--shadow);
}

dialog::backdrop {
  background:var(--backdrop);
  backdrop-filter:blur(3px);
}

.dialog-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.dialog-header h2 {
  font-size:23px;
  font-weight:600;
  letter-spacing:-.6px;
  margin:0;
}

.dialog-header .icon-button {
  font-size:25px;
}

#gap-dialog {
  max-width:460px;
}

#gap-dialog .dialog-header h2 {
  font-size:21px;
}

#gap-dialog .field-note {
  line-height:1.7;
}

#gap-error {
  color:var(--error-text);
  font-size:12px;
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
}

dialog ol {
  padding-left:22px;
  font-size:12px;
  line-height:1.9;
}

dialog li {
  padding:5px 0 5px 5px;
}

.dialog-note {
  background:var(--surface-soft);
  border:1px solid var(--border);
  padding:16px;
  border-radius:6px;
  font-size:11px;
  line-height:1.7;
}

.dialog-note strong {
  font-size:12px;
}

.dialog-note p {
  margin:8px 0 0;
}

.dialog-small {
  font-size:10px;
  color:var(--text-muted);
  line-height:1.7;
  margin:16px 0 0;
}

@media(min-width:1500px) {
  .workspace {
    padding:38px 48px 0;
  }
  .canvas-scroll {
    min-height:470px;
  }
  .app-shell {
    grid-template-columns:320px minmax(0,1fr);
  }
  .settings {
    padding:0 28px;
  }
  .setting-section {
    padding:21px 0;
  }
}

@media(max-width:1180px) {
  .workspace {
    padding:25px 22px 0;
  }
  .brand-description {
    display:none;
  }
  .workspace-heading {
    align-items:flex-start;
    gap:10px;
  }
  h1 {
    font-size:25px;
  }
  .document-actions {
    gap:5px;
  }
  .document-actions button {
    padding:0 10px;
    font-size:10px;
  }
  .summary>div {
    padding:18px 15px;
  }
  .stat-label {
    font-size:7px;
    letter-spacing:.7px;
  }
  .summary .small-stat {
    font-size:12px;
  }
  .utilization-track {
    display:none;
  }
  .canvas-caption {
    display:none;
  }
  .selection-hint {
    max-width:130px;
    text-align:right;
    line-height:1.6;
  }
  .canvas-legend {
    gap:12px;
  }
  .canvas-legend .gripper-note {
    display:none;
  }
}

@media(max-width:900px) {
  .app-header {
    padding:0 20px;
  }
  .app-shell {
    grid-template-columns:260px minmax(0,1fr);
  }
  .settings {
    padding:0 17px;
  }
  .workspace {
    padding:23px 17px 0;
  }
  .workspace-heading {
    flex-direction:column;
    gap:16px;
    margin-bottom:18px;
  }
  .document-actions {
    width:100%;
  }
  .document-actions button {
    flex:1;
  }
  .summary {
    grid-template-columns:1fr 1fr;
  }
  .summary>div {
    padding:15px 18px;
  }
  .summary>div:before {
    display:none;
  }
  .summary>div:nth-child(n+3) {
    border-top:1px solid var(--border);
  }
  .summary>div:nth-child(even) {
    border-left:1px solid var(--border);
  }
  .summary strong {
    font-size:25px;
  }
  .summary .small-stat {
    font-size:12px;
  }
  .stat-label {
    font-size:7px;
  }
  .canvas-toolbar {
    padding:0 8px;
    gap:5px;
  }
  .side-control button {
    padding:5px 9px;
  }
  .view-actions .icon-button {
    min-width:24px;
    width:24px;
  }
  .toolbar-divider {
    margin:0 3px;
  }
  .zoom-label {
    min-width:60px;
    font-size:9px;
  }
  .inspector {
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    padding:17px 0;
  }
  .selection-hint {
    max-width:none;
  }
  .selection-fields {
    width:100%;
  }
  .canvas-scroll {
    min-height:320px;
  }
  .canvas-stage {
    padding:10px;
  }
  .workspace-footer {
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    padding:12px 0;
    gap:9px;
    line-height:1.6;
  }
}

@media(max-width:640px) {
  .app-header {
    height:60px;
    padding:0 16px;
  }
  .brand-logo {
    width:112px;
    height:42px;
  }
  .local-badge {
    font-size:9px;
  }
  .header-right {
    gap:12px;
  }
  .app-shell {
    display:flex;
    flex-direction:column;
  }
  .settings {
    border-right:0;
    border-bottom:1px solid var(--border);
    padding:0 18px;
  }
  .settings-heading {
    height:50px;
  }
  #settings-form {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:22px;
  }
  .setting-section {
    padding:15px 0;
  }
  .setting-section h2 {
    font-size:11px;
    gap:6px;
    margin-bottom:12px;
  }
  .section-number {
    font-size:9px;
  }
  .field {
    font-size:9px;
  }
  .field-row {
    gap:5px;
  }
  input,select {
    font-size:11px;
    padding-left:7px;
  }
  .settings-footer {
    padding:14px 0;
    flex-direction:row;
    align-items:center;
  }
  .settings-footer .primary-button {
    flex:1;
    font-size:10px;
  }
  .settings-footer .text-button {
    flex:1;
    font-size:9px;
  }
  .workspace {
    padding:23px 16px 0;
  }
  .workspace-heading {
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
  }
  .document-actions {
    margin-top:3px;
  }
  .summary {
    margin-bottom:16px;
    grid-template-columns:1fr 1fr;
  }
  .canvas-scroll {
    min-height:300px;
  }
  .canvas-legend {
    font-size:8px;
    padding:10px 12px;
    gap:14px;
  }
  .inspector {
    flex-direction:row;
    flex-wrap:wrap;
  }
  .selection-title div>span {
    font-size:9px;
  }
  .selection-hint {
    font-size:9px;
  }
  .selection-fields {
    width:auto;
  }
  .workspace-footer {
    min-height:66px;
  }
  .summary .small-stat {
    font-size:13px;
  }
  .stat-label {
    font-size:8px;
  }
  .canvas-toolbar {
    height:50px;
  }
  .view-actions .icon-button {
    width:28px;
    min-width:28px;
  }
  .zoom-label {
    min-width:64px;
  }
  .dialog-header h2 {
    font-size:20px;
  }
}

@media(min-width:641px) {
  .app-shell {
    height:calc(100dvh - 72px);
    min-height:0;
  }
  .settings {
    overflow:hidden;
  }
  .settings-heading {
    flex-shrink:0;
  }
  #settings-form {
    flex:1;
    min-height:0;
    overflow-y:auto;
    margin:0 -10px;
    padding:0 10px;
    scrollbar-width:thin;
    scrollbar-color:var(--scrollbar) transparent;
  }
  .settings-footer {
    flex-shrink:0;
  }
  .workspace {
    height:100%;
    overflow:hidden;
  }
  .canvas-panel {
    min-height:120px;
  }
  .canvas-scroll {
    min-height:0;
  }
  .field {
    font-size:11px;
  }
  input,select {
    font-size:13px;
  }
  .field-note {
    font-size:11px;
  }
  .setting-section h2 {
    font-size:13px;
  }
  .stat-label {
    font-size:9px;
    letter-spacing:.7px;
  }
  .canvas-toolbar {
    flex-shrink:0;
  }
  .canvas-legend {
    flex-shrink:0;
  }
  .inspector,.workspace-footer,.summary,.workspace-heading,.validation {
    flex-shrink:0;
  }
}

@media(min-width:641px) and (max-width:1180px) {
  .stat-label {
    font-size:8px;
  }
  .field {
    font-size:10px;
  }
  .field-note {
    font-size:10px;
  }
  .setting-section h2 {
    font-size:12px;
  }
}

@media(min-width:641px) and (max-height:860px) {
  .workspace {
    padding-top:20px;
  }
  .workspace-heading {
    margin-bottom:16px;
  }
  .summary {
    min-height:75px;
    margin-bottom:14px;
  }
  .summary>div {
    padding-top:12px;
    padding-bottom:12px;
  }
  .summary>div+div:before {
    top:18px;
  }
  .inspector {
    min-height:62px;
  }
  .workspace-footer {
    min-height:40px;
  }
  .canvas-toolbar {
    height:45px;
  }
  .canvas-legend {
    min-height:34px;
  }
  .selection-title div>span {
    font-size:9px;
  }
}

@media(max-width:900px) {
  .validation {
    height:96px;
    flex-basis:96px;
  }
  .inspector {
    height:120px;
    flex-basis:120px;
  }
}

@media(max-width:640px) {
  .header-right {
    gap:8px;
  }
  .header-right .local-badge,.theme-control>span {
    display:none;
  }
  .theme-control select {
    width:135px;
  }
  .canvas-view {
    height:340px;
    min-height:340px;
    flex:0 0 340px;
  }
}

@media(min-width:641px) and (max-width:900px) and (max-height:800px) {
  .validation {
    height:64px;
    flex-basis:64px;
  }
  .inspector {
    height:104px;
    flex-basis:104px;
    padding:12px 0;
  }
  .workspace-footer {
    padding:6px 0;
    gap:4px;
  }
}

@media(min-width:641px) and (max-height:700px) {
  .workspace {
    overflow-y:auto;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
  }
}