:root {
  color-scheme: light;
  /* Primitive layer */
  --neutral-0: #ffffff; --neutral-50: #f7f9fc; --neutral-100: #e8eef6; --neutral-200: #d4dfed; --neutral-500: #637389; --neutral-700: #324154; --neutral-850: #172333; --neutral-900: #111b28; --neutral-950: #0e141b;
  --blue-100: #dcecff; --blue-500: #1769d1; --blue-600: #0f56b3; --red-100: #fee4e2; --red-600: #b42318; --amber-100: #fef0c7; --amber-600: #b54708; --green-100: #dcfae6; --green-600: #067647;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --text-10: 10px; --text-11: 11px; --text-12: 12px; --text-14: 14px; --text-16: 16px; --text-18: 18px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
  --radius-1: 2px; --radius-2: 4px; --radius-3: 6px; --duration-instant: 80ms; --duration-fast: 120ms; --duration-normal: 180ms; --ease-out: cubic-bezier(.2, .8, .2, 1);
  --z-base: 0; --z-controls: 10; --z-inspector: 20; --z-dialog: 40; --z-tooltip: 60; --target-pointer: 30px; --target-coarse: 44px;
  /* Semantic layer */
  --surface-chrome: var(--neutral-100); --surface-raised: var(--neutral-50); --surface-canvas: var(--neutral-0); --surface-sunken: var(--neutral-200); --surface-overlay: var(--neutral-50);
  --text-primary: var(--neutral-850); --text-secondary: var(--neutral-500); --text-disabled: #8794a5; --text-on-accent: var(--neutral-0); --text-danger: var(--red-600);
  --border-subtle: #c8d3df; --border-default: #b8c6d6; --border-strong: #8799ad; --border-focus: var(--blue-500);
  --accent-primary: var(--blue-500); --accent-hover: var(--blue-600); --accent-selected: var(--blue-100); --accent-on: var(--neutral-0);
  --status-ready: var(--green-600); --status-modified: var(--blue-500); --status-warning: var(--amber-600); --status-error: var(--red-600);
  --elevation-overlay: 0 1px 2px rgba(20, 47, 78, .12), 0 4px 12px rgba(20, 47, 78, .08); --font-ui: "Segoe UI", system-ui, sans-serif; --font-dimension: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  /* Component layer */
  --tool-size: var(--target-pointer); --tool-active-bg: var(--accent-selected); --tool-active-border: var(--accent-primary); --tab-active-border: var(--accent-primary); --canvas-control-size: var(--target-pointer); --inspector-width: 286px; --inspector-rail-width: 42px; --snap-marker-size: 18px; --anchor-marker-size: 10px; --dialog-width: 340px;
  /* Backward-compatible role aliases */
  --chrome: var(--surface-chrome); --chrome-strong: var(--surface-sunken); --panel: var(--surface-raised); --canvas: var(--surface-canvas); --ink: var(--text-primary); --muted: var(--text-secondary); --line: var(--border-default); --accent: var(--accent-primary); --accent-soft: var(--accent-selected); --danger: var(--text-danger); --shadow: var(--elevation-overlay);
  font-family: var(--font-ui);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-chrome: #202832; --surface-raised: #17202a; --surface-canvas: #0e141b; --surface-sunken: #2d3947; --surface-overlay: #25303d;
  --text-primary: #e7eef8; --text-secondary: #aab8c8; --text-disabled: #708094; --text-on-accent: #08111c; --text-danger: #ff8f84;
  --border-subtle: #354354; --border-default: #53657a; --border-strong: #73859a; --border-focus: #68a9ff;
  --accent-primary: #68a9ff; --accent-hover: #8bbdff; --accent-selected: #1b3b62; --accent-on: #08111c;
  --status-ready: #6ce9a6; --status-modified: #68a9ff; --status-warning: #fec84b; --status-error: #ff8f84; --elevation-overlay: 0 0 0 1px rgba(255, 255, 255, .08);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--chrome); color: var(--ink); }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.app { height: 100%; display: grid; grid-template-rows: 30px 42px 30px 1fr 25px; }
.menubar, .toolbar, .tabs, .statusbar { display: flex; align-items: center; gap: 4px; padding: 0 8px; background: var(--chrome); border-bottom: 1px solid var(--line); }
.menubar { font-size: 12px; }
.menubar button, .toolbar button, .statusbar button { border: 0; background: transparent; border-radius: var(--radius-1); cursor: pointer; touch-action: manipulation; }
.menubar button { padding: 4px 8px; }
.toolbar { gap: 7px; border-bottom-color: var(--chrome-strong); overflow-x: auto; white-space: nowrap; }
.tool-group { display: flex; gap: 3px; align-items: center; padding-right: 7px; border-right: 1px solid var(--line); }
.tool-group:last-child { border-right: 0; }
.tool { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: var(--tool-size); padding: 4px 7px; border: 1px solid transparent !important; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out); }
.tool[aria-pressed="true"], .tool.active { background: var(--tool-active-bg); color: var(--accent); border-color: var(--tool-active-border) !important; font-weight: var(--weight-semibold); }
.tool:active { transform: scale(.98); }
.tool:disabled { opacity: .38; cursor: not-allowed; }
.icon { width: 17px; height: 17px; display: inline-grid; place-items: center; line-height: 1; }
.icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon svg text { fill: currentColor; stroke: none; font: 600 8px "Segoe UI", system-ui, sans-serif; }
.tool[data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: var(--z-tooltip); top: calc(100% + 5px); left: 50%; width: max-content; max-width: 220px; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--panel); color: var(--ink); box-shadow: var(--shadow); font-size: var(--text-10); font-weight: var(--weight-regular); white-space: normal; text-align: left; opacity: 0; pointer-events: none; transform: translate(-50%, -2px); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.tool[data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tool-label { font-size: 11px; }
.tabs { padding-left: 4px; gap: 2px; overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: 6px; min-width: 130px; max-width: 240px; padding: 5px 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; white-space: nowrap; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab.active { background: var(--panel); border-bottom-color: var(--accent); }
.tab-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.tab-close { color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.modified { color: var(--accent); }

.workspace { min-height: 0; display: grid; grid-template-columns: var(--inspector-width) 6px minmax(0, 1fr); background: var(--canvas); }
.inspector { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); }
.inspector-resize { width: 6px; min-width: 6px; padding: 0; border: 0; border-right: 1px solid var(--line); background: var(--chrome); cursor: col-resize; }
.inspector-resize:hover, .inspector-resize:focus-visible { background: var(--accent-soft); }
.inspector-resize span { display: block; width: 2px; height: 28px; margin: auto; border-radius: 2px; background: var(--line); }
.inspector-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.collapse { border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.inspector-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.inspector-tabs button { border: 0; border-right: 1px solid var(--line); background: transparent; padding: 7px 4px; cursor: pointer; font-size: 11px; }
.inspector-tabs button.active { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.panel-content { min-height: 0; overflow: auto; padding: 8px; }
.panel-content h2 { margin: 0 0 8px; font-size: 12px; }
.panel-content p { color: var(--muted); font-size: 11px; line-height: 1.45; }
.layer-row, .finding-row, .selection-row { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 11px; }
.selection-layer { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.layer-row input { accent-color: var(--accent); }
.swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.finding-row { grid-template-columns: 1fr auto; cursor: pointer; }
.finding-row.active { background: var(--accent-soft); outline: 1px solid var(--accent); }
.finding-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finding-meta { color: var(--muted); font-size: 10px; }
.field-label { display: block; margin: 10px 0 4px; font-size: 11px; font-weight: 600; }
.field-hint { margin: 4px 0 0 !important; font-size: 10px !important; }
.text-input { width: 100%; min-height: 30px; padding: 6px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-2); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.button-row { display: flex; gap: 5px; margin-top: 6px; }
.button-row button, .dialog-actions button { border: 1px solid var(--line); background: var(--chrome); padding: 6px 9px; border-radius: 3px; cursor: pointer; font-size: 11px; }
.button-row .primary, .dialog-actions .primary { background: var(--accent); border-color: var(--accent); color: white; }
.error { color: var(--danger) !important; }

.canvas-wrap { position: relative; min-width: 0; min-height: 0; background: var(--canvas); }
#canvas { display: block; width: 100%; height: 100%; background: var(--canvas); cursor: crosshair; touch-action: none; }
#canvas[data-tool="pan"] { cursor: grab; }
#canvas[data-tool="pan"]:active { cursor: grabbing; }
.canvas-tools { position: absolute; top: 9px; right: 9px; display: flex; gap: 4px; }
.canvas-tools button { width: var(--canvas-control-size); height: var(--canvas-control-size); border: 1px solid var(--line); border-radius: var(--radius-2); background: var(--panel); cursor: pointer; box-shadow: var(--shadow); touch-action: manipulation; }
.empty-state { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--muted); text-align: center; }
.empty-state strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 7px; }
.empty-state.hidden { display: none; }
.statusbar { justify-content: space-between; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 0; }
.status-left, .status-right { display: flex; gap: 14px; align-items: center; min-width: 0; }
.status-right, .selection-row { font-variant-numeric: tabular-nums; }
.status-message { max-width: min(70vw, 900px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-message::before { content: "●"; margin-right: 6px; color: var(--status-ready); }
:root[data-ui-state="modified"] .status-message::before { content: "◆"; color: var(--status-modified); }
:root[data-ui-state="scanning"] .status-message::before { content: "…"; color: var(--status-warning); }
:root[data-ui-state="error"] .status-message::before { content: "!"; color: var(--status-error); font-weight: var(--weight-semibold); }

dialog { color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-3); box-shadow: var(--elevation-overlay); width: min(var(--dialog-width), calc(100vw - 32px)); }
dialog::backdrop { background: rgba(3, 13, 26, .42); }
.dialog-title { margin: 0 0 10px; font-size: 15px; }
.dialog-help { color: var(--muted); font-size: 11px; line-height: 1.45; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; }
.wide { width: 100%; }
.collapsed { --inspector-width: var(--inspector-rail-width); grid-template-columns: var(--inspector-width) 6px minmax(0, 1fr); }
.collapsed .inspector-head span, .collapsed .inspector-tabs, .collapsed .panel-content { display: none; }
.collapsed .inspector-head { justify-content: center; }

dialog button { cursor: pointer; }
dialog form { margin: 0; }

@media (max-width: 1024px) {
  .workspace { --inspector-width: min(260px, 34vw); }
  .tool-label { display: none; }
  .tool { padding-inline: 7px; }
}

@media (hover: hover) and (pointer: fine) {
  .menubar button:hover, .toolbar button:hover { background: var(--chrome-strong); }
  .tool[data-tooltip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
}

@media (pointer: coarse) {
  :root { --tool-size: var(--target-coarse); --canvas-control-size: var(--target-coarse); }
  .tool, .canvas-tools button, .button-row button, .dialog-actions button, .inspector-tabs button, .collapse { min-width: 44px; min-height: 44px; }
  .text-input { min-height: 44px; font-size: var(--text-16); }
  .app { grid-template-rows: 44px 52px 30px 1fr 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}