@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

:root {
  color-scheme: light;
  --ink: #0f172a;
  --secondary: #475569;
  --muted: #64748b;
  --border: #e2e8f0;
  --paper: #ffffff;
  --canvas: #f8fafc;
  --surface-subtle: #ffffff;
  --accent: #4f46e5;
  --accent-pale: #f3f4f6;
  --accent-soft: var(--accent-pale);
  --accent-ink: #4338ca;
  --on-accent: #ffffff;
  --grid-small: #edf1f6;
  --grid-large: #dce4ee;
  --ink-dark: #0f172a; --inverse: #ffffff;
  --green: #3b7a57; --green-pale: #e8f0ec; --red: #b91c1c;
  --success-bg: #edf7f1; --success-ink: #286443; --success-border: #cce4d5;
  --warning-bg: #fff7ed; --warning-ink: #9a3412; --warning-border: #fed7aa;
  --font: 'DM Sans', 'Segoe UI', Arial, sans-serif;
  --heading: 'Manrope', 'Segoe UI', Arial, sans-serif;
  font-family: var(--font); color: var(--ink); background: var(--canvas);
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
:root[data-theme="slate"] {
  color-scheme: light;
  --ink: #0f172a;
  --secondary: #475569;
  --muted: #64748b;
  --border: #e2e8f0;
  --paper: #ffffff;
  --canvas: #f8fafc;
  --surface-subtle: #ffffff;
  --accent: #4f46e5;
  --accent-pale: #f3f4f6;
  --accent-ink: #4338ca;
  --on-accent: #ffffff;
  --grid-small: #edf1f6;
  --grid-large: #dce4ee;
  --ink-dark: #0f172a; --inverse: #ffffff;
}
:root[data-theme="sage"] {
  color-scheme: light;
  --ink: #1e293b;
  --secondary: #475569;
  --muted: #62726b;
  --border: #dfe7e2;
  --paper: #ffffff;
  --canvas: #f9f9fb;
  --surface-subtle: #ffffff;
  --accent: #3b7a57;
  --accent-pale: #f3f4f6;
  --accent-ink: #2d6245;
  --on-accent: #ffffff;
  --grid-small: #edf0ee;
  --grid-large: #dce4df;
  --ink-dark: #1e293b; --inverse: #ffffff;
}
:root[data-theme="steel"] {
  color-scheme: light;
  --ink: #111827;
  --secondary: #475569;
  --muted: #5c6c82;
  --border: #dce4eb;
  --paper: #ffffff;
  --canvas: #f4f6f8;
  --surface-subtle: #ffffff;
  --accent: #0284c7;
  --accent-pale: #f3f4f6;
  --accent-ink: #0369a1;
  --on-accent: #07111f;
  --grid-small: #e9eef3;
  --grid-large: #d5dfe8;
  --ink-dark: #111827; --inverse: #ffffff;
}
:root[data-theme="sand"] {
  color-scheme: light;
  --ink: #18181b;
  --secondary: #52525b;
  --muted: #71717a;
  --border: #e4e4e7;
  --paper: #ffffff;
  --canvas: #fafafa;
  --surface-subtle: #ffffff;
  --accent: #d97706;
  --accent-pale: #f3f4f6;
  --accent-ink: #92400e;
  --on-accent: #18181b;
  --grid-small: #f0f0f1;
  --grid-large: #e1e1e5;
  --ink-dark: #18181b; --inverse: #ffffff;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f8fafc;
  --secondary: #cbd5e1;
  --muted: #94a3b8;
  --border: #334155;
  --paper: #1e293b;
  --canvas: #0f172a;
  --surface-subtle: #253247;
  --accent: #38bdf8;
  --accent-pale: #12384f;
  --accent-ink: #7dd3fc;
  --on-accent: #0f172a;
  --grid-small: #182438;
  --grid-large: #26364d;
  --ink-dark: #f8fafc; --inverse: #1e293b;
  --success-bg: #16372e; --success-ink: #a7dfbf; --success-border: #315b49;
  --warning-bg: #392d20; --warning-ink: #fed7aa; --warning-border: #745236; --red: #fca5a5;
}

* { box-sizing: border-box; user-select: none; -webkit-user-select: none; }
*::before, *::after { user-select: none; -webkit-user-select: none; }
html, body { margin: 0; width: 100%; height: 100%; }
body { overflow: hidden; font-size: 13px; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, input, select { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible, svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button { border: 0; background: transparent; }
button:disabled { opacity: .3; cursor: default; }
button svg { flex-shrink: 0; }
input { color: var(--ink); }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent-pale); color: var(--accent-ink); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #dce2e7; border-radius: 5px; }

#app { height: 100dvh; min-height: 610px; display: flex; flex-direction: column; }
.skip-link { position: fixed; top: -50px; left: 20px; z-index: 50; padding: 12px 20px; background: var(--ink); color: #fff; border-radius: 6px; }
.skip-link:focus { top: 10px; }
.boot-screen { height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--muted); }
.boot-mark { font-family: var(--heading); font-size: 72px; font-weight: 800; color: var(--ink-dark); letter-spacing: -7px; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); }

.app-header { display: flex; align-items: center; height: 75px; padding: 0 25px 0 23px; flex-shrink: 0; background: var(--paper); border-bottom: 1px solid var(--border); gap: 24px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--heading); font-weight: 800; font-size: 24px; letter-spacing: -1.2px; white-space: nowrap; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 35px; color: #b7873d; }
.brand-mark svg { stroke-width: 2.1; }
.brand-dot { color: #d5a14f; }
.brand-studio { margin: 4px 0 0 4px; font-family: var(--font); font-size: 9px; color: #96a0a9; font-weight: 600; letter-spacing: 1.6px; }
.header-divider { height: 23px; width: 1px; background: var(--border); }
.project-name { display: flex; align-items: center; gap: 15px; font-weight: 550; font-size: 13px; padding: 8px 0; min-width: 0; }
.project-name > span { max-width: 290px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-name svg { color: #87939d; }
.save-status { color: #8a949e; font-size: 10px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.save-status i { height: 5px; width: 5px; background: #88a890; border-radius: 50%; }
.save-status i.unsaved { background: #d7ad66; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-actions > .icon-button { margin-right: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.3; min-height: 35px; transition: background .15s, border-color .15s; white-space: nowrap; }
.button-secondary { background: white; border: 1px solid #dfe4e9; color: #536170; }
.button-secondary:hover { background: #f7f9fa; border-color: #cbd4dc; }
.button-dark { background: #2b343e; border: 1px solid #2b343e; color: white; box-shadow: 0 1px 2px #1e293b10; }
.button-dark:hover { background: #414c58; }
.button-dark svg:last-child:not(:first-child) { margin-left: 6px; }
.icon-button { width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: #87939e; transition: background .15s, color .15s; flex-shrink: 0; }
.icon-button:hover:not(:disabled) { color: var(--ink); background: #edf1f4; }
.icon-button.is-active { color: #94733c; background: #f5ecdb; }
.icon-button.is-active:hover { background: #eddfc6; }

.context-bar { height: 53px; padding: 0 23px; display: flex; align-items: center; gap: 17px; background: white; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.panel-toggles { display: flex; flex-shrink: 0; align-items: center; border-left: 1px solid var(--border); padding-left: 5px; gap: 2px; }
.workspace-tabs { display: flex; height: 100%; gap: 25px; }
.workspace-tab { display: flex; align-items: center; gap: 7px; padding: 0 2px; font-size: 11px; color: #86939e; height: 100%; position: relative; }
.workspace-tab.is-active { color: #354451; font-weight: 600; }
.workspace-tab.is-active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #c99950; }
.context-separator { height: 16px; width: 1px; background: #e8ecef; margin: 0 5px; }
.subtle-button { display: flex; align-items: center; gap: 8px; font-size: 10px; color: #81909b; padding: 7px 0; }
.subtle-button:hover { color: #3c4d59; }
.subtle-button svg:last-child { margin-left: 5px; }
.context-right { margin-left: auto; display: flex; align-items: center; gap: 15px; }
.history-controls { display: flex; align-items: center; gap: 2px; }
.history-controls .icon-button { width: 27px; height: 27px; }
.history-controls svg { height: 16px; width: 16px; }
.units-tag { font-size: 10px; color: #7d8a95; padding: 5px 10px; border: 1px solid #e9edf0; border-radius: 4px; font-weight: 500; }
.units-tag span { color: #bec6cd; margin: 0 5px; }
[data-action="toggle-inspector"] { display: inline-flex; }
[data-action="toggle-sidebar"] { display: none; }

.workspace { flex: 1; display: grid; grid-template-columns: 248px minmax(0, 1fr) 285px; min-height: 0; position: relative; }
.sidebar { background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; z-index: 4; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 19px 16px; font-weight: 650; font-size: 11px; letter-spacing: .05px; }
.small-tag { font-size: 8px; border: 1px solid #e5e9ec; border-radius: 4px; color: #a3acb4; padding: 2px 5px; letter-spacing: .5px; font-weight: 500; }
.segmented { display: flex; background: #f2f4f6; padding: 3px; border: 1px solid #eef0f3; border-radius: 6px; }
.segmented button { flex: 1; font-size: 10px; padding: 7px 4px; border-radius: 4px; color: #8e99a3; font-weight: 500; }
.segmented button.is-active { background: white; color: #4f5e6b; box-shadow: 0 1px 4px #2f435b0c; }
.segmented button span { margin-left: 4px; font-size: 9px; color: #a3adb7; }
.sidebar-tabs { margin: 0 18px 23px; }
.sidebar-scroll { overflow-y: auto; padding: 0 18px 15px; flex: 1; min-height: 160px; }
.section-label { font-size: 8px; color: #8e9aa5; letter-spacing: 1.1px; font-weight: 550; }
#palette > .section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.section-label > span { color: #bbc2c9; font-size: 6.5px; letter-spacing: .7px; font-weight: 400; }
.component-palette { display: flex; flex-direction: column; gap: 7px; }
.component-card { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 10px; border: 1px solid #e8edf0; border-radius: 6px; background: #fff; position: relative; transition: border-color .15s, background .15s, transform .15s; }
.component-card:hover { border-color: #d0c1a8; background: #fdfbf7; transform: translateX(2px); }
.component-card:active { cursor: grabbing; }
.component-symbol { width: 34px; height: 34px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: #f2f5f7; color: #8897a5; flex-shrink: 0; --icon-bg: #f2f5f7; }
.component-symbol.ground { background: #f1f3f5; color: #8c98a2; --icon-bg: #f1f3f5; }
.component-symbol.rail { background: #f1f4f8; color: #8194a7; --icon-bg: #f1f4f8; }
.component-symbol.slot { background: #edf4f0; color: #799b8b; --icon-bg: #edf4f0; }
.component-symbol.bearing { background: #f4f1ec; color: #a59177; --icon-bg: #f4f1ec; }
.component-symbol.panel { background: #fbf4e8; color: #ba955b; --icon-bg: #fbf4e8; }
.component-symbol.link { background: #f1f3f7; color: #929aaf; --icon-bg: #f1f3f7; }
.component-name { font-size: 10px; font-weight: 550; color: #5c6976; white-space: nowrap; }
.component-name small { display: block; margin-top: 4px; font-size: 8px; color: #a6afb7; font-weight: 400; }
.component-add { display: flex; color: #c2cad1; margin-left: auto; }
.component-card:hover .component-add { color: #b78f50; }
.sidebar-rule { height: 1px; background: #edf0f3; margin: 23px -1px 21px; }
.tree-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.count-pill { font-size: 8px; padding: 2px 5px; border-radius: 3px; background: #f1f4f6; color: #98a3ad; }
.tree-row { display: flex; align-items: center; height: 35px; margin: 1px -5px; padding: 0 6px; border-radius: 5px; border: 1px solid transparent; }
.tree-row.is-selected { background: #fcf5e8; border-color: #f5e7cf; }
.tree-row.is-hidden { opacity: .5; }
.tree-select { display: flex; align-items: center; gap: 9px; padding: 0; min-width: 0; flex: 1; height: 100%; text-align: left; color: #75838f; font-size: 9px; }
.tree-select > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row.is-selected .tree-select { color: #ad8447; font-weight: 500; }
.tree-symbol { display: flex; color: #8d9ba6; --icon-bg: #fff; }
.tree-row.is-selected .tree-symbol { color: #bf9a60; --icon-bg: #fcf5e8; }
.tree-symbol.slot { color: #809f90; }
.tree-eye { color: #b1bac3; width: 22px; height: 26px; padding: 4px; opacity: .7; }
.tree-eye:hover { color: #5c6d7b; opacity: 1; }
.tree-lock { color: #c3cbd2; display: flex; width: 15px; justify-content: flex-end; }
.tree-row.is-selected .tree-lock { color: #c9af86; }
.add-element-button { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 13px; padding: 9px 5px; gap: 6px; border: 1px dashed #dfe5eb; color: #9ca8b2; border-radius: 5px; font-size: 9px; }
.add-element-button:hover { color: #8b703f; border-color: #ccb78f; background: #fffdf8; }
.joint-list-item { display: flex; gap: 9px; padding: 13px 0; align-items: flex-start; border-bottom: 1px solid #edf0f3; }
.joint-number { font-size: 8px; color: #aab5be; background: #f4f6f8; padding: 4px; border-radius: 3px; }
.joint-list-item > div { min-width: 0; }
.joint-list-item strong { font-size: 9px; font-weight: 500; display: block; line-height: 1.5; color: #6a7a87; }
.joint-list-item small { font-size: 8px; color: #a1aeb8; line-height: 1.6; display: block; margin-top: 3px; }
.joint-list-item .icon-button { width: 23px; height: 23px; margin-left: auto; }
.joint-builtin { color: #bdc7ce; margin-left: auto; margin-top: 3px; }
.empty-tree { color: #a5afb7; font-size: 9px; line-height: 1.9; padding: 15px 4px; }

.center-workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.stage-header { flex-shrink: 0; min-height: 45px; border-bottom: 1px solid var(--border); display: flex; align-items: center; flex-wrap: wrap; padding: 6px 20px; justify-content: space-between; background: #fbfcfd; gap: 7px 12px; }
.stage-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 8.5px; color: #a1adb6; }
.stage-breadcrumb > svg { color: #9daab5; }
.breadcrumb-slash { color: #c8d0d6; margin: 0 1px; }
.stage-breadcrumb strong { font-weight: 400; color: #6f7e8b; }
.stage-toggles { display: flex; align-items: center; gap: 6px; }
.stage-toggles .icon-button { height: 25px; width: 25px; }
.stage-toggles .icon-button svg { width: 14px; height: 14px; }
.stage-toggles .icon-button.is-active { background: #eef2f4; color: #8396a2; }
.canvas-area { flex: 1; min-height: 230px; background: var(--canvas); position: relative; isolation: isolate; }
#mechanism-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; touch-action: none; overflow: hidden; }
#mechanism-canvas, .canvas-area .scene-heading, .canvas-area .axis-widget, .component-card, button { user-select: none; -webkit-user-select: none; }
body.canvas-dragging, body.canvas-dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing; }
[contenteditable] * { user-select: inherit; -webkit-user-select: inherit; }
[contenteditable]:not([contenteditable="false"]) { user-select: text; -webkit-user-select: text; }
[contenteditable="false"] { user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable] input, [contenteditable] textarea, input[contenteditable], textarea[contenteditable] { user-select: text; -webkit-user-select: text; }
.mode-switch { flex-shrink: 0; }
.mode-switch button { padding: 5px 8px; white-space: nowrap; font-size: 9px; }
.editable-copy { font-size: 9px; }
.joint-edit { text-align: left; padding: 0; }
.joint-edit:hover strong { text-decoration: underline; }
.editable-dimension { cursor: pointer; }
.record-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.record-row > button:first-child { flex: 1; text-align: left; font-size: 10px; overflow-wrap: anywhere; }
.geometry-points { width: 100%; min-height: 190px; padding: 10px; resize: vertical; font: 12px/1.7 Consolas, monospace; color: var(--ink); background: var(--paper); border: 1px solid var(--border); border-radius: 5px; }
.component-symbol[class*="spring-"], .component-symbol[class*="piston-"] { color: #7d87ac; background: #f1eff7; }
.force-label { font: 9px var(--font); fill: var(--secondary); pointer-events: none; }
#graph-mode { padding: 3px 4px; font-size: 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--secondary); background: var(--paper); max-width: 145px; }
.dynamics-readout { padding: 4px 15px; font-size: 8px; border-top: 1px solid var(--border); color: var(--secondary); background: var(--accent-pale); }
.reference-links { display: flex; flex-direction: column; gap: 9px; margin-top: 15px; }
.reference-links a { color: var(--secondary); }
.scene-heading { position: absolute; top: 23px; left: 25px; z-index: 1; pointer-events: none; }
.eyebrow { display: block; color: #a1adb6; font-size: 7px; font-weight: 550; letter-spacing: 1.8px; }
.scene-heading h1 { font-family: var(--heading); font-size: 17px; font-weight: 700; letter-spacing: -.45px; margin: 7px 0 5px; color: #3f4e5a; }
.scene-heading p { font-size: 8px; color: #a8b1b9; margin: 0; }
.scene-heading p span { padding: 0 6px; color: #b8c2ca; }
.estimate-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 5px 7px; background: #fff7e8; border: 1px solid #ebdaba; border-radius: 4px; color: #96713a; font-size: 8px; pointer-events: auto; }
.estimate-chip:hover { background: #faedcf; }
.scene-status { position: absolute; right: 20px; top: 28px; z-index: 1; font-size: 7.5px; background: #eff5f0eF; color: #7b9685; border: 1px solid #e0eae2; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 4px; }
.scene-status.blocked { color: #be7167; background: #fdf2ef; border-color: #f0dcd7; }
.canvas-tools { z-index: 2; position: absolute; top: 108px; left: 19px; background: #fffffff2; border: 1px solid #e2e8ed; border-radius: 7px; padding: 5px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 2px 6px #53627506; }
.canvas-tools .icon-button { width: 27px; height: 28px; color: #94a2ad; }
.canvas-tools .icon-button svg { width: 15px; height: 15px; }
.angle-snap-label { font-size: 11px; font-weight: 600; }
.snap-choices, .placement-tools, .binding-tools, .model-checks { position: absolute; z-index: 5; background: var(--paper); color: var(--ink); border: 1px solid var(--border); border-radius: 7px; padding: 10px; box-shadow: 0 3px 12px #0002; font-size: 12px; }
.snap-choices { max-width: min(320px, calc(100% - 24px)); }
.snap-choices > span { display: block; margin-bottom: 7px; }
.snap-choices div, .placement-tools, .binding-tools > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.snap-choices button, .placement-tools button, .binding-tools button { padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-subtle); color: var(--ink); font-size: 12px; }
.snap-choices button:hover, .placement-tools button[aria-pressed="true"], .binding-tools button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.snap-choices small, .placement-tools small { display: block; font-size: 10px; color: var(--secondary); margin-top: 7px; }
.placement-tools { left: 65px; top: 90px; max-width: calc(100% - 90px); }
.binding-tools { left: 65px; top: 100px; max-width: min(550px, calc(100% - 90px)); }
.binding-tools > strong { display: block; margin-bottom: 7px; }
.binding-tools div > span { font-size: 10px; color: var(--secondary); }
.model-checks { right: 16px; bottom: 58px; max-width: min(360px, calc(100% - 90px)); }
.model-checks summary { cursor: pointer; }
.model-checks details > div { max-height: 200px; overflow-y: auto; margin-top: 7px; }
.model-check { display: block; width: 100%; text-align: left; padding: 8px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--ink); background: var(--paper); }
.snap-choices[hidden], .placement-tools[hidden], .binding-tools[hidden], .model-checks[hidden] { display: none; }
.canvas-tools .icon-button.is-active { color: #927347; background: #f8edd9; }
.tool-divider { height: 1px; background: #e9edf0; margin: 3px; }
.axis-widget { position: absolute; bottom: 21px; left: 22px; z-index: 1; display: flex; align-items: flex-end; gap: 7px; pointer-events: none; }
.axis-widget > span { color: #9da9b3; font-size: 7px; padding-bottom: 2px; }
.axis-widget i { color: #c1cbd2; font-style: normal; padding: 0 2px; }
.phase-switcher { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2; display: flex; padding: 3px; border: 1px solid #e2e7ec; background: #fffffff5; border-radius: 7px; box-shadow: 0 2px 5px #52637305; }
.phase-button { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 4px; position: relative; min-width: 95px; }
.phase-button::after { content: ''; position: absolute; right: -2px; width: 1px; height: 18px; background: #e8edf0; }
.phase-button:last-child::after, .phase-button.is-active::after { display: none; }
.phase-button.is-active { background: #f8f0e2; }
.phase-number { color: #bdc5cc; font-size: 8px; font-weight: 500; align-self: flex-start; padding-top: 2px; }
.phase-button strong { font-size: 8px; font-weight: 500; display: block; color: #83929e; text-align: left; }
.phase-button small { font-size: 7px; display: block; margin-top: 3px; color: #b1bcc5; text-align: left; }
.phase-button.is-active strong { color: #9d7b42; }
.phase-button.is-active small { color: #c1a16e; }
.phase-button.is-active .phase-number { color: #c9a36a; }
.phase-button:hover { background: #f5f7f9; }
.zoom-control { position: absolute; bottom: 23px; right: 18px; z-index: 2; display: flex; align-items: center; border: 1px solid #e3e8ed; border-radius: 5px; padding: 1px 2px; background: #fff; box-shadow: 0 1px 3px #52637305; }
.zoom-control .icon-button { height: 24px; width: 23px; }
.zoom-control .icon-button svg { width: 12px; height: 12px; }
.zoom-control > span:not(.zoom-divider) { font-size: 8px; color: #8c9aa5; width: 35px; text-align: center; }
.zoom-divider { height: 14px; width: 1px; background: #e8ecef; margin: 0 3px; }
.canvas-instruction { position: absolute; top: 88px; left: 50%; transform: translateX(-50%); z-index: 3; border: 1px solid #eadfc9; color: #9b7b48; font-size: 9px; padding: 9px 13px; border-radius: 5px; background: #fffcf5f5; max-width: calc(100% - 150px); text-align: center; line-height: 1.6; box-shadow: 0 2px 7px #ac915311; pointer-events: none; }
.drop-hint { display: none; position: absolute; inset: 9px; z-index: 4; background: transparent; border: 2px dashed #d8b773; border-radius: 9px; align-items: center; justify-content: center; gap: 12px; color: #aa874a; font-size: 14px; pointer-events: none; }
.drop-active .drop-hint { display: flex; }
.mechanism-element { cursor: pointer; }
.mechanism-element.rail, .mechanism-element.panel { cursor: grab; }
.mechanism-element:active { cursor: grabbing; }
.joint-node { cursor: pointer; }
.joint-node.node-fixed { cursor: default; }
.joint-node.node-free, .joint-node.node-driven { cursor: grab; }
.joint-node.active .node-ring, .joint-node:focus-visible .node-ring { stroke: var(--accent); stroke-width: 3; }
.joint-node.hovered .node-ring { stroke: var(--accent); stroke-width: 2.8; }
.mechanism-element.hovered, .mechanism-element:focus-visible { filter: drop-shadow(0 0 2px var(--accent)); }
.canvas-joint { cursor: pointer; }
.canvas-joint .joint-marker { opacity: .35; }
.canvas-joint.active .joint-marker, .canvas-joint.hovered .joint-marker, .canvas-joint:focus-visible .joint-marker { opacity: 1; stroke: var(--accent); stroke-width: 2.5; }
.canvas-joint.active .joint-line { stroke: var(--accent); stroke-width: 2.5; }
:root { --node-free: #526f70; --node-fixed: #79766f; --node-driven: #c15f3c; }
:root { --node-free: var(--secondary); --node-fixed: var(--muted); --node-driven: var(--accent); }

.selection-summary { position: absolute; left: 18px; bottom: 58px; max-width: calc(100% - 100px); padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--paper); color: var(--secondary); font-size: 10px; pointer-events: none; }
.manipulation-tools { position: absolute; z-index: 2; left: 18px; bottom: 96px; display: flex; flex-wrap: wrap; gap: 3px; max-width: calc(100% - 36px); padding: 4px; background: var(--paper); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 8px #0001; }
.manipulation-tools button { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 4px; font-size: 10px; color: var(--secondary); }
.manipulation-tools button:hover { background: var(--surface-subtle); color: var(--ink); }
.manipulation-tools[hidden], .diagnostics-panel[hidden] { display: none; }
.edit-axes { stroke: var(--secondary); fill: var(--secondary); }
.edit-axis-x { stroke: var(--accent); stroke-width: 2; }
.edit-axis-y { stroke: var(--green); stroke-width: 2; }
.edit-rotation-ring { fill: none; stroke-width: 1; stroke-dasharray: 3 4; opacity: .65; }
.edit-handle { cursor: grab; }
.edit-handle :is(circle, rect) { fill: var(--paper); stroke: var(--secondary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.edit-handle.move-x circle { stroke: var(--accent); }
.edit-handle.move-y circle { stroke: var(--green); }
.edit-handle:focus :is(circle, rect), .edit-handle:hover :is(circle, rect) { fill: var(--accent-pale); stroke: var(--accent); stroke-width: 3; }
.canvas-joint.diagnostic-error :is(.joint-line, .joint-marker) { stroke: #b45c50; }
.diagnostic-label, .diagnostic-table .diagnostic-error { fill: #b45c50; color: #b45c50; }
.diagnostics-panel { flex-shrink: 0; max-height: min(210px, 27vh); overflow: auto; padding: 10px 15px; border-top: 1px solid var(--border); background: var(--paper); font-size: 11px; }
.diagnostics-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.diagnostics-heading span { color: var(--secondary); font-size: 10px; }
.diagnostics-heading .icon-button { margin-left: auto; }
.diagnostic-hints p { margin: 6px 0; line-height: 1.5; color: var(--secondary); }
.comparison-scroll { overflow: auto; max-height: 280px; margin: 10px 0; }
.diagnostic-table, .comparison-table { width: 100%; border-collapse: collapse; font-size: 11px; }
:is(.diagnostic-table, .comparison-table) :is(th, td) { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--border); white-space: nowrap; }
:is(.diagnostic-table, .comparison-table) th { color: var(--secondary); font-weight: 500; }
.diagnostic-table button { color: inherit; text-align: left; white-space: normal; text-decoration: underline; }
.collection-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.collection-toolbar .button { min-height: 36px; font-size: 11px; }
.collection-list { display: grid; gap: 9px; margin: 14px 0; }
.collection-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-subtle); }
.collection-card > div:first-child { flex: 1 1 170px; min-width: 0; }
.collection-card strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.collection-card small { display: block; margin-top: 5px; font-size: 10px; color: var(--secondary); overflow-wrap: anywhere; }
.collection-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.collection-actions button { min-height: 32px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--paper); color: var(--secondary); font-size: 10px; }
.collection-actions button:hover { color: var(--ink); border-color: var(--accent); }
.comparison-table td:first-child { white-space: normal; min-width: 150px; }
.canvas-context-menu { position: fixed; z-index: 25; min-width: 240px; max-width: min(310px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 6px; border: 1px solid var(--border); border-radius: 9px; background: var(--paper); color: var(--ink); box-shadow: 0 8px 30px #0002; overflow: auto; font-size: 12px; }
.canvas-context-menu button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 5px; text-align: left; line-height: 1.35; min-height: 36px; }
.canvas-context-menu button:hover:not(:disabled), .canvas-context-menu button:focus-visible { background: var(--accent-pale); color: var(--accent-ink); outline: none; }
.canvas-context-menu button:disabled { opacity: .45; }
.canvas-context-menu .context-danger { color: var(--red); }
.context-heading { padding: 7px 10px 9px; font-size: 10px; font-weight: 650; color: var(--muted); overflow-wrap: anywhere; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.context-separator { height: 1px; background: var(--border); margin: 5px 4px; }
.context-suffix { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.context-submenu { min-width: 240px; }
.connect-mode .joint-node { cursor: crosshair; }
.pan-mode .joint-node, .pan-mode .canvas-joint { cursor: grab !important; }
.pan-mode, .pan-mode .mechanism-element { cursor: grab !important; }
.pan-mode:active { cursor: grabbing !important; }
.connect-mode .mechanism-element { cursor: crosshair; }
.node-label { font-family: var(--font); fill: #6e7e8b; font-size: 9px; font-weight: 500; }
.part-label { font-family: var(--font); font-size: 8px; fill: #85939e; letter-spacing: 1.25px; font-weight: 500; }
.part-sublabel { font-family: var(--font); font-size: 8px; fill: #aab5be; }
.rail-label { font-size: 7px; fill: #a6906f; }
.slot-label { font-family: var(--font); font-size: 9px; fill: #809b90; }
.panel-label { font-family: var(--font); font-size: 7px; fill: #bc985f; letter-spacing: .9px; font-weight: 500; }
.arm-label { font-family: var(--font); font-size: 9px; fill: #6688b4; }
.angle-label { font-family: var(--font); font-size: 11px; fill: #b98943; font-weight: 500; }
.dimension-label { font-family: var(--font); font-size: 9px; }
.panel-dimension { font-family: var(--font); font-size: 9px; fill: #b59a72; }
.trace-label { font-family: var(--font); font-size: 7px; fill: #6b9c90; }
.measure-label { font-family: var(--font); font-size: 10px; fill: #7288a4; }
.labels-hidden :is(.part-label, .part-sublabel, .rail-label, .slot-label, .panel-label, .arm-label, .angle-label, .node-label, .trace-label, .force-label, .angle-annotation, .scheme-annotation, .scene-heading) { display: none; }
.control-handle { cursor: grab; }
.control-handle:hover rect { fill: #d9eee3; }
.empty-canvas-title { font-family: var(--heading); font-size: 17px; font-weight: 600; fill: #657783; }
.empty-canvas-text { font-family: var(--font); font-size: 10px; fill: #9eabb5; }

.analysis-panel { height: 144px; flex-shrink: 0; background: #fff; border-top: 1px solid #e2e7ec; display: flex; flex-direction: column; }
.playback-panel { flex-shrink: 0; }
.analysis-header { display: flex; align-items: center; justify-content: space-between; height: 43px; padding: 0 23px; flex-shrink: 0; }
.analysis-title { display: flex; align-items: center; gap: 8px; color: #82919d; }
.analysis-title h2 { font-size: 10px; font-weight: 550; color: #5b6b78; margin: 0; }
.live-tag { font-size: 5.5px; letter-spacing: .65px; border: 1px solid #e3ebe5; padding: 2px 4px; border-radius: 3px; color: #8ea092; background: #f5f8f5; margin-left: 2px; }
.graph-legend { display: flex; align-items: center; gap: 6px; font-size: 7.5px; color: #a0adb7; }
#graph-legend { display: inline-flex; align-items: center; gap: 6px; }
.arm-legend { background: #7193c0 !important; }
.legend-line { width: 13px; height: 2px; background: #c69c5d; margin-right: 2px; }
.trace-chip { display: flex; gap: 5px; align-items: center; font-size: 7px; color: #769c90; border: 1px solid #e5ede8; padding: 3px 6px; margin-left: 9px; border-radius: 4px; background: #f9fcfa; }
.trace-chip:hover { background: #edf5ef; }
.trace-chip.is-off { color: #aeb9b4; opacity: .6; }
.graph-area { flex: 1; margin: 0 24px 0 14px; min-height: 75px; position: relative; }
.graph-unit { position: absolute; top: -4px; left: 0; font-size: 6px; color: #b0bac2; }
#motion-graph { display: block; width: 100%; height: 100%; max-height: 112px; cursor: crosshair; overflow: visible; }
.graph-tick { font-family: var(--font); font-size: 8px; fill: #b0bac3; }
.graph-value { font-family: var(--font); font-size: 8px; fill: #a47d44; }
.graph-x-label { position: absolute; bottom: 6px; right: 0; color: #b4bdc4; font-size: 6px; }
.graph-tooltip { position: absolute; top: 0; background: #fff; border: 1px solid #e2e7ed; padding: 5px 8px; border-radius: 4px; font-size: 8px; color: #8c744f; pointer-events: none; transform: translateX(-50%); box-shadow: 0 2px 8px #4b607013; white-space: nowrap; }
.simulation-bar { height: 77px; padding: 0 22px; border-top: 1px solid #e9edf1; display: flex; align-items: center; gap: 16px; flex-shrink: 0; background: #fdfefe; }
.play-controls { display: flex; align-items: center; gap: 6px; }
.play-controls .icon-button { height: 25px; width: 25px; color: #9ca9b4; }
.play-controls .icon-button svg { height: 15px; width: 15px; }
.play-controls .icon-button.is-active { color: #8e9b9a; background: transparent; }
.play-button { height: 34px; width: 34px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #303b45; color: #fff; box-shadow: 0 1px 3px #25323f15; }
.play-button svg { fill: #fff; stroke-width: .7; margin-left: 2px; height: 13px; width: 13px; }
.play-button.playing svg { fill: none; stroke-width: 3; margin-left: 0; }
.play-button:hover { background: #4c5b68; }
.motion-control { flex: 1; min-width: 80px; display: flex; flex-direction: column; padding: 8px 0 3px; }
.motion-label { display: flex; align-items: center; justify-content: space-between; color: #9eacb7; font-size: 7px; }
.motion-label label { color: #657683; font-size: 8px; font-weight: 500; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: linear-gradient(to right, #d7b075 0%, #d7b075 var(--range-progress, 50%), #e6ebef var(--range-progress, 50%), #e6ebef 100%); border-radius: 5px; cursor: pointer; margin: 12px 0 8px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border: 2px solid #fff; background: #d5a25a; border-radius: 50%; box-shadow: 0 0 0 1px #d8b783, 0 1px 3px #9a835344; }
input[type="range"]::-moz-range-thumb { width: 8px; height: 8px; border: 2px solid #fff; background: #d5a25a; border-radius: 50%; box-shadow: 0 0 0 1px #d8b783; }
.range-labels { display: flex; justify-content: space-between; font-size: 6px; color: #a9b5be; }
.motion-readout { display: flex; align-items: center; gap: 3px; border: 1px solid #e1e7ec; border-radius: 5px; padding: 7px 8px; min-width: 68px; background: #fff; margin-top: 1px; }
.motion-readout input { width: 40px; border: 0; background: transparent; font-size: 10px; font-weight: 500; color: #647480; text-align: right; }
.motion-readout > span { font-size: 7px; color: #adb9c2; }
.speed-control { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 12px; border-left: 1px solid #e9edf0; margin-left: 0; }
.speed-control label { font-size: 6px; color: #a4b0ba; }
.speed-control select { padding: 2px 13px 2px 0; background: none; border: 0; font-size: 9px; color: #82919c; cursor: pointer; }
.analysis-mode .analysis-panel { height: 223px; }
.analysis-mode #motion-graph { max-height: unset; }
.analysis-dashboard { flex: 1; min-height: 0; overflow: auto; padding: 22px; background: var(--paper); color: var(--secondary); font-size: 11px; line-height: 1.7; }
.analysis-dashboard-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.analysis-dashboard h2 { font: 650 20px var(--heading); margin: 0 0 7px; color: var(--ink); }
.analysis-dashboard h3 { font-size: 12px; color: var(--ink); margin: 17px 0 8px; }
.analysis-dashboard-heading p { margin: 0; max-width: 650px; }
.analysis-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.analysis-card { padding: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-subtle); }
.analysis-card > * { display: block; }
.analysis-card > span { font-size: 10px; }
.analysis-card strong { color: var(--ink); font: 600 20px var(--heading); margin: 7px 0; }
.analysis-card small { color: var(--muted); font-size: 9px; }
.analysis-preview-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 18px; align-items: start; }
#analysis-preview { width: 100%; height: 250px; border: 1px solid var(--border); border-radius: 6px; background: var(--canvas); }
.analysis-preview-grid > section > h3:first-child { margin-top: 0; }
.analysis-warning { padding: 10px 12px; border: 1px solid var(--border); background: var(--accent-pale); color: var(--accent-ink); border-radius: 5px; }
.analysis-table-scroll { overflow-x: auto; }
.analysis-results { width: 100%; border-collapse: collapse; white-space: nowrap; text-align: left; }
.analysis-results :is(th, td) { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 10px; }
.analysis-results th { color: var(--ink); font-weight: 600; }
.analysis-results button, .analysis-critical button { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.analysis-critical { padding-left: 17px; }
.analysis-critical li { margin: 5px 0; }
.analysis-critical li span { display: block; }
@media (max-width: 1000px) {
  .analysis-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analysis-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .analysis-dashboard-heading { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .analysis-dashboard { padding: 15px; }
  .analysis-card { padding: 10px; }
  .analysis-card strong { font-size: 18px; }
}

.inspector { background: #fff; border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; overflow: hidden; z-index: 4; }
.inspector-top { height: 45px; padding: 0 20px; border-bottom: 1px solid #edf0f3; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: #6f7f8c; font-weight: 500; }
.inspector-top > div { display: flex; align-items: center; gap: 8px; }
.inspector-top svg { color: #91a0ac; }
.inspector-top > .icon-button { display: inline-flex; height: 25px; width: 25px; }
#inspector-content { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.inspector-selection { padding: 22px 20px 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.selection-icon { display: inline-flex; align-items: center; justify-content: center; height: 45px; width: 43px; background: #f8f2e8; color: #b99a6b; border: 1px solid #f0e5d3; border-radius: 7px; flex-shrink: 0; --icon-bg: #f8f2e8; }
.selection-icon.slot, .selection-icon.analysis { background: #eff5f1; color: #7d9f8f; border-color: #e0ebe3; --icon-bg: #eff5f1; }
.selection-icon.ground, .selection-icon.rail, .selection-icon.link { background: #f2f5f8; color: #8b9dad; border-color: #e7ecf0; --icon-bg: #f2f5f8; }
.inspector-selection > div { flex: 1; min-width: 0; }
.inspector-selection h2 { font-family: var(--heading); font-size: 13px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4e5c69; }
.selection-type { font-size: 6px; letter-spacing: 1px; color: #a7b1ba; text-transform: uppercase; }
.inspector-selection .icon-button { width: 20px; height: 22px; }
.inspector-tabs { display: flex; padding: 0 20px; gap: 27px; border-bottom: 1px solid #eaedf0; height: 36px; flex-shrink: 0; }
.inspector-tabs button { height: 36px; padding: 0 1px; color: #a0abb5; position: relative; font-size: 9px; }
.inspector-tabs button.is-active { color: #7b6346; font-weight: 500; }
.inspector-tabs button.is-active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #caa266; }
.inspector-tabs button > span { color: #b1bcc5; font-size: 8px; margin-left: 4px; }
.inspector-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 22px; }
.property-section { padding: 20px 0 16px; border-bottom: 1px solid #edf0f3; }
.property-section-title { font-size: 9px; color: #60707f; font-weight: 550; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; }
.property-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; min-width: 0; }
.property-field:last-child { margin-bottom: 0; }
.property-field > span { font-size: 8px; color: #9aa7b3; line-height: 1.5; }
.number-field { display: flex; align-items: center; border: 1px solid #e4e9ee; background: #fcfdfe; border-radius: 5px; height: 32px; padding: 0 10px; transition: border-color .15s; }
.number-field:focus-within { border-color: #c9a97a; background: #fffdf9; }
.number-field input { min-width: 0; flex: 1; width: 100%; padding: 5px 0; border: 0; background: transparent; font-size: 10px; color: #70808e; outline: none; font-variant-numeric: tabular-nums; }
.number-field > span { font-size: 8px; color: #b3bec8; padding-left: 5px; }
.property-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.property-two > .property-field { margin-bottom: 0; }
.property-select { border: 1px solid #e4e9ee; background: #fcfdfe; width: 100%; height: 32px; padding: 5px 7px; border-radius: 5px; font-size: 9px; color: #798996; cursor: pointer; }
.text-field { border: 1px solid #dfe5eb; background: #fcfdfe; height: 40px; border-radius: 5px; padding: 8px 11px; font-size: 12px; width: 100%; }
.section-description { font-size: 9px; line-height: 1.8; color: #9cabb6; margin: 0 0 13px; }
.trace-reference-label { font-size: 8px; color: #9aa7b3; margin-bottom: 7px; }
.trace-reference { margin-bottom: 10px; }
.trace-reference button { font-size: 8px; }
.trace-explanation { margin: 10px 0 14px; }
.estimated-note { color: #ad8a53; }
.control-point-row { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.control-point-row > span { font-size: 8px; color: #94a698; min-width: 17px; }
.control-point-row .property-field { flex: 1; margin: 0; }
.control-point-row .number-field { padding: 0 7px; }
.fixed-note { font-size: 8px; line-height: 1.7; color: #9baab4; background: #f7f9fb; padding: 10px 9px; display: flex; align-items: center; gap: 7px; border-radius: 4px; }
.fixed-note svg { flex-shrink: 0; color: #a6b3be; }
.section-live-dot { width: 4px; height: 4px; border-radius: 50%; background: #9cb3a6; box-shadow: 0 0 0 3px #f2f6f3; }
.live-properties { display: grid; gap: 10px; }
.live-properties > div { display: flex; align-items: center; justify-content: space-between; }
.live-properties span { font-size: 8px; color: #a1afba; }
.live-properties strong { font-size: 9px; font-weight: 500; color: #8b9ba7; font-variant-numeric: tabular-nums; }
.live-properties small { color: #b8c3cc; font-size: 7px; font-weight: 400; margin-left: 3px; }
.live-properties .highlight { margin: 0 -9px -2px; padding: 8px 9px; border-radius: 4px; background: #fdf8ef; }
.live-properties .highlight span { color: #af9975; }
.live-properties .highlight strong { color: #bb955c; font-size: 11px; }
.check-row { display: flex; align-items: center; gap: 7px; font-size: 8px; color: #8c9eac; margin-bottom: 13px; cursor: pointer; }
.check-row input { width: 12px; height: 12px; margin: 0; accent-color: #a8bdae; }
.inspector-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e9edf0; padding: 12px 20px; background: #fcfdfe; flex-shrink: 0; }
.inspector-footer .button { min-height: 30px; padding: 7px 10px; font-size: 8px; color: #98a5b0; }
.inspector-footer .button svg { height: 12px; width: 12px; }
.bound-tag { color: #acb8c2; font-size: 7px; display: flex; gap: 4px; align-items: center; }
.selected-joints { padding: 18px 0; }
.selected-joint { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid #edf0f3; }
.selected-joint > svg { color: #9cacb7; }
.selected-joint > div { flex: 1; }
.selected-joint strong { font-size: 9px; color: #758694; font-weight: 500; }
.selected-joint span { font-size: 8px; color: #a8b5bf; display: block; margin-top: 4px; }
.selected-joint > svg:last-child { color: #c1cbd2; }
.selected-joints > .button { margin-top: 18px; }
.inspector-note { color: #a5b2bc; font-size: 8px; display: flex; gap: 7px; padding-top: 14px; line-height: 1.8; }
.inspector-note > svg { margin-top: 2px; color: #b5c0c8; flex-shrink: 0; }
.inspector-note p { margin: 0; }
.inspector-warning { display: flex; align-items: flex-start; gap: 8px; background: #fdf2ee; color: #b47767; border: 1px solid #f0dfd9; border-radius: 5px; padding: 10px; font-size: 8px; line-height: 1.7; margin-top: 16px; }
.inspector-warning svg { flex-shrink: 0; }
.empty-inspector { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; padding: 60px 30px; color: #a4b2bd; gap: 12px; }
.empty-inspector h2 { font-family: var(--heading); font-size: 16px; font-weight: 600; color: #738491; margin: 5px 0 0; }
.empty-inspector p { margin: 0 0 12px; font-size: 10px; line-height: 1.8; }
.analysis-metric { padding: 3px 0 16px; }
.analysis-metric:last-child { padding-bottom: 0; }
.analysis-metric > span { font-size: 9px; color: #9eabb5; display: block; margin-bottom: 6px; }
.analysis-metric strong { font-size: 20px; font-weight: 500; color: #657987; font-family: var(--heading); }
.analysis-metric small { font-family: var(--font); font-size: 11px; color: #b5c0c7; font-weight: 400; }
.validation-card { background: #f4f9f5; border: 1px solid #e6eee7; padding: 13px 10px; border-radius: 5px; display: flex; align-items: flex-start; gap: 8px; color: #83a28f; }
.validation-card > svg { flex-shrink: 0; }
.validation-card strong { font-size: 9px; font-weight: 500; color: #7d9988; }
.validation-card p { font-size: 8px; line-height: 1.8; color: #a3b5a8; margin: 5px 0 0; }
.validation-card.has-warning { background: #fff5ef; border-color: #f4e1d7; color: #c3936c; }
.validation-card.has-warning strong, .validation-card.has-warning p { color: #b98f6d; }
.switch-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; gap: 12px; font-size: 9px; text-align: left; color: #8a9aa7; }
.switch-row small { display: block; margin-top: 4px; font-size: 7px; color: #b5bfc7; }
.switch { height: 15px; width: 27px; border-radius: 10px; background: #e4e9ed; display: block; position: relative; flex-shrink: 0; }
.switch::before { content: ''; height: 11px; width: 11px; background: #fff; position: absolute; top: 2px; left: 2px; border-radius: 50%; box-shadow: 0 1px 2px #4f6c7a15; transition: left .15s; }
.switch.on { background: #a1b9a8; }
.switch.on::before { left: 14px; }
.full-width { width: 100%; }
.inspector-body > .full-width { margin-top: 17px; font-size: 9px; }

.status-bar { display: flex; align-items: center; justify-content: space-between; height: 29px; background: #fff; border-top: 1px solid var(--border); flex-shrink: 0; padding: 0 20px; font-size: 7px; color: #a2afb9; }
.status-bar > div { display: flex; align-items: center; gap: 8px; }
.ready-dot { height: 4px; width: 4px; border-radius: 50%; background: #88a995; }
.ready-dot.warning { background: #d68d72; }
.status-separator { height: 8px; width: 1px; background: #e5eaf0; margin: 0 4px; }
.status-right { gap: 9px !important; }
#pointer-coordinates { font-variant-numeric: tabular-nums; min-width: 99px; }
#pointer-coordinates > span { margin-left: 9px; }
.version { color: #c2cbd2; padding-left: 6px; }

dialog { border: 1px solid #e7ecef; border-radius: 13px; padding: 27px; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; box-shadow: 0 20px 100px #20344526; color: var(--ink); background: #fff; }
dialog.modal-wide { width: min(720px, calc(100vw - 32px)); }
dialog::backdrop { background: #26354250; backdrop-filter: blur(3px); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.modal-heading .eyebrow { font-size: 7px; color: #b3a083; letter-spacing: 1.8px; }
.modal-heading h2 { font-family: var(--heading); font-size: 21px; font-weight: 650; letter-spacing: -.7px; margin: 9px 0 0; }
.modal-heading > .icon-button { margin: -8px -9px 0 0; color: #a4afb8; }
.modal-description { color: #91a0ac; font-size: 11px; line-height: 1.8; margin: 0 0 23px; }
.modal-actions { display: flex; gap: 9px; justify-content: flex-end; align-items: center; margin-top: 25px; padding-top: 18px; border-top: 1px solid #edf0f3; flex-wrap: wrap; }
.modal-actions .button { font-size: 10px; }
dialog .property-field > span { font-size: 10px; }
dialog .number-field { height: 38px; }
dialog .number-field input { font-size: 12px; }
dialog .property-select { height: 38px; font-size: 11px; }
.template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.preset-card { border: 1px solid #e5eaee; border-radius: 8px; overflow: hidden; padding: 0; text-align: left; background: #fff; transition: border-color .15s, box-shadow .15s; }
.preset-card:hover { border-color: #d2b27f; box-shadow: 0 4px 15px #8e713014; }
.preset-preview { background-color: #f8fafb; background-image: linear-gradient(#e6ecf280 1px, transparent 1px), linear-gradient(90deg, #e6ecf280 1px, transparent 1px); background-size: 14px 14px; height: 135px; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid #edf0f2; }
.preset-preview svg { width: 87%; height: 110px; }
.recommended { position: absolute; top: 9px; right: 9px; font-size: 6px; letter-spacing: .7px; color: #b08a49; background: #f9edd5; padding: 4px 6px; border-radius: 3px; }
.preset-body { padding: 16px; }
.preset-body h3 { font-family: var(--heading); font-size: 12px; font-weight: 650; letter-spacing: -.2px; margin: 0; }
.preset-body p { font-size: 9px; line-height: 1.8; color: #94a3ae; margin: 6px 0 12px; }
.preset-body > div { display: flex; align-items: center; gap: 8px; }
.preset-body > div > span { color: #a2aeb7; border: 1px solid #ebeff3; border-radius: 3px; padding: 3px 5px; font-size: 7px; }
.preset-body > div > svg { margin-left: auto; color: #b09b79; }
.projects-list { display: flex; flex-direction: column; gap: 8px; }
.saved-project { display: flex; width: 100%; align-items: center; gap: 12px; padding: 13px; border: 1px solid #e7ecf0; border-radius: 7px; text-align: left; }
.saved-project:hover { background: #fafbf9; border-color: #d0dacb; }
.saved-project-icon { display: flex; width: 39px; height: 39px; align-items: center; justify-content: center; color: #b1976f; background: #f7f1e7; border-radius: 5px; }
.saved-project > span:nth-child(2) { flex: 1; min-width: 0; }
.saved-project strong { font-size: 11px; font-weight: 500; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.saved-project small { display: block; font-size: 8px; color: #a8b4be; margin-top: 5px; }
.saved-project > svg { color: #b4c0c8; }
.empty-projects { text-align: center; padding: 25px 0; color: #9caab5; font-size: 11px; line-height: 1.9; }
.projects-section-title { font-size: 10px; font-weight: 600; color: #718391; margin: 23px 0 12px; }
.project-catalog-row { display: flex; gap: 5px; align-items: center; }
.project-catalog-row .saved-project { flex: 1; min-width: 0; }
.project-row-actions { display: flex; flex-shrink: 0; gap: 3px; }
.project-row-actions [data-action="delete-project"]:hover { color: var(--red); }
.project-estimate { display: inline-block; font-size: 7px; color: #a17e43; background: #fbf1df; padding: 4px 6px; border-radius: 3px; margin-top: 8px; }
.project-assumption-warning { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #ebd9b6; background: #fff8e9; border-radius: 6px; color: #9d7b46; }
.project-assumption-warning svg { flex-shrink: 0; margin-top: 2px; }
.project-assumption-warning p { margin: 0; font-size: 10px; line-height: 1.8; }
.project-assumption-warning strong { font-weight: 600; }
.project-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; margin-top: 20px; }
.project-info-grid h3 { font-size: 11px; font-weight: 600; color: #647685; }
.project-info-grid ul { padding-left: 17px; color: #8495a3; font-size: 10px; line-height: 1.85; }
.project-info-grid li { margin-bottom: 8px; }
.project-motion-steps { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.project-motion-steps li { background: #f6f8fa; border: 1px solid #e6ebef; padding: 12px; border-radius: 5px; font-size: 9px; color: #8b9aa7; line-height: 1.85; }
.project-motion-steps strong { display: block; color: #6c7d8b; font-weight: 600; margin-bottom: 6px; }
.project-info-note { font-size: 10px; line-height: 1.85; color: #93a1ac; }
.project-reference { margin: 20px 0 0; padding: 14px; border: 1px solid #e5ebef; border-radius: 6px; }
.project-reference img { display: block; max-width: 100%; height: auto; margin: auto; }
.project-reference figcaption { font-size: 9px; line-height: 1.7; color: #9caab5; margin-top: 11px; }
.export-options { display: flex; flex-direction: column; gap: 11px; }
.gif-fields { border: 0; margin: 0; padding: 12px 0 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.gif-fields .check-row { grid-column: 1 / -1; margin: 0 0 14px; }
.gif-estimate { margin: 13px 0; color: var(--secondary); font: 11px var(--font); line-height: 1.6; }
.gif-invalid, .gif-error { color: #b8453e; }
[data-theme="dark"] :is(.gif-invalid, .gif-error) { color: #ff9691; }
.gif-error { font-size: 11px; line-height: 1.8; }
.gif-progress { width: 100%; height: 12px; margin: 4px 0; accent-color: var(--accent); }
.export-options > button { display: flex; align-items: center; text-align: left; gap: 14px; padding: 16px 14px; border: 1px solid #e5ebef; border-radius: 7px; }
.export-options > button:hover { border-color: #c9b086; background: #fffdf8; }
.export-options > button > svg { color: #a89981; }
.export-options > button > span:nth-child(2) { flex: 1; }
.export-options strong { display: block; font-size: 12px; font-weight: 550; }
.export-options small { font-size: 9px; color: #9aa9b4; line-height: 1.8; display: block; margin-top: 5px; }
.file-tag { font-size: 8px; color: #a3b0ba; background: #f2f5f7; border-radius: 3px; padding: 4px 6px; }
.export-note { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 22px; color: #a7b4be; font-size: 8px; }
.settings-fields { padding-top: 12px; }
.settings-fields .check-row { font-size: 10px; margin-top: 19px; }
.settings-fields .check-row input { width: 13px; height: 13px; }
.help-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 21px; padding: 3px 0 20px; }
.help-steps > div { display: flex; flex-direction: column; gap: 9px; }
.help-steps > div > span { color: #c2a372; background: #f8f1e5; border: 1px solid #f0e7d4; font-size: 9px; padding: 5px 7px; border-radius: 4px; align-self: flex-start; }
.help-steps p { color: #9dabb5; font-size: 9px; line-height: 1.9; margin: 0; }
.help-steps strong { color: #5d7080; font-size: 10px; font-weight: 500; display: block; margin-bottom: 5px; }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 24px; border-top: 1px solid #edf0f3; padding-top: 21px; }
.shortcut-grid > div { display: flex; align-items: center; gap: 10px; font-size: 9px; color: #9dabb5; }
kbd { border: 1px solid #e3e9ee; border-radius: 4px; background: #f6f8fa; color: #7e909e; font-family: var(--font); font-size: 8px; min-width: 32px; padding: 5px 7px; text-align: center; box-shadow: 0 1px 0 #e7edf2; }
.help-disclaimer { font-size: 8px; line-height: 1.9; color: #afbac3; border-top: 1px solid #edf0f3; padding-top: 17px; margin-top: 22px; }
.add-component-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 19px; }
.add-component-grid > button { display: flex; align-items: center; gap: 12px; border: 1px solid #e6ecf0; border-radius: 6px; padding: 10px; font-size: 11px; color: #8294a2; }
.add-component-grid > button:hover { background: #f8fafb; border-color: #d5dfe7; }
.add-component-grid > button > svg { margin-left: auto; color: #b4c0c9; }
#toast { position: fixed; bottom: 45px; left: 50%; transform: translate(-50%, 16px); z-index: 20; display: flex; align-items: center; gap: 9px; padding: 13px 17px; background: #354650; color: #e1eae9; border: 1px solid #4a5a64; border-radius: 7px; font-size: 11px; line-height: 1.7; box-shadow: 0 5px 25px #263f5630; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; max-width: min(550px, calc(100vw - 32px)); }
#toast > svg { color: #b7ccbc; flex-shrink: 0; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.warning { background: #685446; border-color: #8a705b; color: #f5e6d8; }
#toast.warning > svg { color: #e8c697; }
.workspace.inspector-hidden { grid-template-columns: 248px minmax(0, 1fr); }
.workspace.inspector-hidden > .inspector { display: none; }

/* Interface skins use shared tokens; part colors retain their mechanical meaning. */
[data-theme] { background: var(--canvas); }
[data-theme] :is(.app-header, .context-bar, .sidebar, .inspector, .analysis-panel, .status-bar, dialog, .component-card, .preset-card, .segmented button.is-active, .canvas-tools, .phase-switcher, .zoom-control, .motion-readout, .graph-tooltip) { background: var(--paper); border-color: var(--border); }
[data-theme] :is(.stage-header, .simulation-bar, .inspector-footer, .preset-preview, .fixed-note, .project-motion-steps li, kbd, .file-tag, .count-pill, .segmented) { background-color: var(--surface-subtle); border-color: var(--border); }
[data-theme] :is(.number-field, .property-select, .text-field) { background: var(--paper); border-color: var(--border); color: var(--ink); }
[data-theme] :is(.number-field input, .motion-readout input, .speed-control select) { color: var(--ink); }
[data-theme] :is(.brand, .project-name > span, .modal-heading h2, .preset-body h3, .export-options strong, .saved-project strong, .scene-heading h1, .inspector-selection h2, .property-section-title, .analysis-title h2, .analysis-metric strong, .workspace-tab.is-active, .projects-section-title, .project-info-grid h3, .project-motion-steps strong, .empty-inspector h2) { color: var(--ink); }
[data-theme] :is(.component-name, .component-name small, .tree-select, .joint-list-item strong, .joint-list-item small, .selected-joint strong, .selected-joint span, .property-field > span, .section-description, .inspector-note, .fixed-note, .modal-description, .saved-project small, .scene-heading p, .trace-reference-label, .check-row, .switch-row, .live-properties span, .live-properties strong, .graph-legend, .graph-unit, .motion-label, .motion-label label, .inspector-top, .status-bar) { color: var(--secondary); }
[data-theme] :is(.icon-button, .project-name > svg, .subtle-button, .workspace-tab, .segmented button, .phase-button strong, .phase-button small, .phase-number, .export-options small, .preset-body p, .project-info-grid ul, .project-info-note, .analysis-metric > span, .analysis-metric small, .switch-row small, .live-properties small, .motion-readout > span, .number-field > span, .bound-tag, .graph-x-label, .speed-control label) { color: var(--secondary); }
[data-theme] .segmented button.is-active { color: var(--ink); }
[data-theme] :is(.trace-chip, .live-tag, .joint-number, .saved-project-icon) { background: var(--surface-subtle); border-color: var(--border); color: var(--secondary); }
[data-theme] :is(.phase-button:hover, .add-element-button:hover) { background: var(--surface-subtle); color: var(--ink); border-color: var(--accent); }
[data-theme] .number-field:focus-within { border-color: var(--accent); }
[data-theme] .check-row input { accent-color: var(--accent); }
[data-theme] .switch.on { background: var(--accent); }
[data-theme] .switch.on::before { background: var(--on-accent); }
[data-theme] .button-secondary { background: var(--paper); border-color: var(--border); color: var(--ink); }
[data-theme] :is(.button-dark, .play-button) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
[data-theme] .play-button svg { fill: var(--on-accent); }
[data-theme] .play-button.playing svg { fill: none; }
[data-theme] :is(.icon-button.is-active, .tree-row.is-selected, .phase-button.is-active, .live-properties .highlight, .project-estimate) { background: var(--accent-pale); color: var(--accent-ink); border-color: var(--border); }
[data-theme] :is(.tree-row.is-selected .tree-select, .phase-button.is-active strong, .phase-button.is-active small, .phase-button.is-active .phase-number, .inspector-tabs button.is-active, .brand-mark, .brand-dot) { color: var(--accent-ink); }
[data-theme] .workspace-tab.is-active::after, [data-theme] .inspector-tabs button.is-active::after { background: var(--accent); }
[data-theme] :is(.icon-button:hover:not(:disabled), .component-card:hover, .button-secondary:hover, .saved-project:hover, .add-component-grid > button:hover) { background: var(--surface-subtle); color: var(--ink); border-color: var(--accent); }
[data-theme] .export-options > button { border-color: var(--border); }
[data-theme] .export-options > button:hover { background: var(--surface-subtle); border-color: var(--accent); }
[data-theme] :is(.node-label, .part-label, .part-sublabel, .empty-canvas-title, .empty-canvas-text, .graph-tick) { fill: var(--secondary); }
[data-theme] .graph-value { fill: var(--accent-ink); }
[data-theme] input[type="range"] { background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress, 50%), var(--border) var(--range-progress, 50%), var(--border) 100%); }
[data-theme] input[type="range"]::-webkit-slider-thumb { border-color: var(--paper); background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
[data-theme] input[type="range"]::-moz-range-thumb { border-color: var(--paper); background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
[data-theme] :is(.range-labels, .units-tag, .save-status, .axis-widget, .export-note, .version) { color: var(--muted); }
[data-theme] ::selection { background: var(--accent-pale); color: var(--accent-ink); }
[data-theme="dark"] :is(.validation-card, .scene-status) { background: #35433d; border-color: #4b6154; color: #d5e5db; }
[data-theme="dark"] :is(.validation-card.has-warning, .scene-status.blocked, .inspector-warning, .project-assumption-warning, .estimate-chip) { background: #4b3e33; border-color: #6d5844; color: #f1d4b7; }
.fusion-steps { color: var(--secondary); padding-left: 19px; font-size: 11px; line-height: 1.8; }
.fusion-steps li { margin-bottom: 9px; }
#fusion-form { margin-top: 22px; }
a.button { text-decoration: none; }
a[aria-disabled="true"] { pointer-events: none; opacity: .45; }

/* The tracing wizard keeps navigation visible while compact controls scroll. */
.magic-wizard { flex: 0 0 auto; max-height: min(38dvh, 340px); overflow: auto; background: var(--paper); border-bottom: 1px solid var(--border); padding: 0 23px 13px; }
.magic-heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 14px 0 10px; background: var(--paper); }
.magic-heading > div:first-child { min-width: 0; }
.magic-heading h2 { margin: 0; font: 700 16px var(--heading); color: var(--ink); }
.magic-heading h2 span { margin-left: 9px; font: 500 10px var(--font); color: var(--muted); }
.magic-heading p { margin: 6px 0 0; max-width: 850px; font-size: 11px; line-height: 1.6; color: var(--secondary); }
.magic-navigation { display: flex; gap: 7px; flex-shrink: 0; }
.magic-steps { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0 0 11px; padding: 0; }
.magic-steps button { display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: 10px; color: var(--secondary); }
.magic-steps button > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-subtle); border: 1px solid var(--border); font-size: 9px; }
.magic-steps [aria-current="step"] { font-weight: 650; color: var(--accent-ink); }
.magic-steps [aria-current="step"] > span { background: var(--accent-pale); border-color: var(--accent); }
.magic-controls, .magic-draw-controls { display: flex; flex-direction: column; gap: 9px; }
.magic-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 15px; padding: 12px; border: 1px dashed var(--border); border-radius: 6px; background: var(--surface-subtle); }
.magic-upload span { font-size: 11px; color: var(--secondary); overflow-wrap: anywhere; min-width: 0; }
.magic-upload small { flex-basis: 100%; font-size: 10px; line-height: 1.5; color: var(--muted); }
.magic-calibration-fields { display: grid; grid-template-columns: repeat(4, minmax(75px, 1fr)) minmax(155px, 1.5fr) minmax(135px, 1.5fr); gap: 12px; }
.magic-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 360px; }
.magic-field > span { font-size: 10px; color: var(--secondary); }
.magic-field .text-field, .magic-field .property-select { width: 100%; min-width: 0; font-size: 12px; padding: 8px; }
.magic-scale-result { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; color: var(--secondary); }
.magic-scale-result strong { font-size: 11px; color: var(--accent-ink); }
.magic-known-size { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.magic-known-size > .magic-field { flex: 0 1 200px; }
.magic-known-size > output { flex: 1 1 260px; line-height: 1.6; }
.magic-pixel-details { font-size: 10px; color: var(--secondary); }
.magic-pixel-details summary { cursor: pointer; padding: 6px 0; }
.magic-pixel-details .magic-calibration-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.magic-detection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.magic-detection-review { padding: 8px; border: 1px solid var(--border); border-radius: 5px; max-height: 160px; overflow: auto; }
.magic-detection-review legend, .magic-detection-row > span { font-size: 10px; color: var(--secondary); }
.magic-detection-row { display: grid; grid-template-columns: 46px minmax(110px, 1fr) 90px; align-items: center; gap: 10px; margin-bottom: 5px; }
.magic-detection-row .check-row { margin: 0; }
.magic-detection-row .magic-detection-mounts { grid-column: 2 / -1; font-size: 10px; }
.magic-detection-row .property-select { padding: 5px 8px; font-size: 11px; }
.magic-note { margin: 6px 0 0; font-size: 10px; line-height: 1.7; color: var(--secondary); }
.magic-tool-buttons, .magic-draw-options, .magic-photo-options, .magic-review-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.magic-tool-buttons .button { font-size: 10px; min-height: 32px; padding: 7px 10px; }
.magic-tool-buttons .is-active { background: var(--accent-pale); border-color: var(--accent); color: var(--accent-ink); }
.magic-draw-options > .magic-note { flex: 1 1 250px; }
.magic-photo-options { border-top: 1px solid var(--border); padding-top: 8px; }
.magic-photo-options .check-row { margin: 0; font-size: 10px; }
.magic-opacity { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--secondary); }
.magic-opacity input { width: 130px; }
.magic-error { margin: 0; color: var(--red); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.magic-review { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.magic-review > .magic-field { flex: 1 1 220px; }
.magic-review-counts { align-self: center; font-size: 10px; color: var(--secondary); }
.magic-review-counts span { padding: 5px 7px; border: 1px solid var(--border); border-radius: 4px; }
.magic-review-hints { margin-top: 10px; color: var(--secondary); font-size: 11px; line-height: 1.7; }
.magic-review-hints summary { cursor: pointer; }
.magic-review-hints ul { margin: 5px 0; padding-left: 19px; }
.magic-hidden-submit { display: none; }
.magic-active :is(.analysis-panel, .playback-panel, .scene-heading, .scene-status, .stage-header, .phase-switcher, .workspace-tabs, .version) { display: none; }
.magic-active .magic-import-button { background: var(--accent-pale); color: var(--accent-ink); border-color: var(--accent); }
.magic-active .context-bar { height: 42px; }
.magic-active .canvas-tools { top: 12px; }
.magic-active .canvas-area { min-height: 240px; }
.magic-active :is(.part-label, .node-label, .part-sublabel) { fill: #33322f; stroke: #fff; stroke-width: 2px; paint-order: stroke; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.magic-active .magic-point-mode { cursor: crosshair; }

@media (min-width: 1650px) {
  .workspace { grid-template-columns: 270px minmax(0, 1fr) 310px; }
  .sidebar-scroll { padding-left: 23px; padding-right: 23px; }
  .sidebar-tabs { margin-left: 23px; margin-right: 23px; }
  .component-card { padding: 12px 11px; }
  .component-name { font-size: 11px; }
  .tree-select { font-size: 10px; }
  .inspector-body { padding-left: 25px; padding-right: 25px; }
  .property-field > span { font-size: 9px; }
  .analysis-panel { height: 158px; }
  .scene-heading h1 { font-size: 19px; }
  .workspace.inspector-hidden { grid-template-columns: 270px minmax(0, 1fr); }
}

@media (max-width: 1200px) {
  .workspace { grid-template-columns: 220px minmax(0, 1fr) 258px; }
  .app-header { gap: 17px; padding-left: 18px; padding-right: 18px; height: 66px; }
  .brand { font-size: 21px; }
  .brand-studio { display: none; }
  .save-status { display: none; }
  .sidebar-scroll { padding-left: 14px; padding-right: 14px; }
  .sidebar-tabs { margin-left: 14px; margin-right: 14px; }
  .sidebar-heading { padding-left: 15px; padding-right: 15px; }
  .component-card { gap: 8px; padding: 8px; }
  .component-name { font-size: 9px; }
  .component-name small { font-size: 7px; }
  .component-symbol { width: 30px; height: 30px; }
  .section-label > span { display: none; }
  .inspector-selection { padding-left: 17px; padding-right: 17px; gap: 9px; }
  .inspector-body { padding-left: 17px; padding-right: 17px; }
  .inspector-selection h2 { font-size: 12px; }
  .scene-heading { left: 20px; top: 21px; }
  .scene-heading h1 { font-size: 15px; }
  .scene-status { top: 82px; right: 14px; font-size: 7px; padding: 4px 6px; }
  .phase-button { min-width: 81px; padding: 7px; }
  .phase-number { display: none; }
  .axis-widget { bottom: 69px; left: 20px; }
  .zoom-control { bottom: 20px; right: 12px; }
  .phase-switcher { left: 18px; transform: none; }
  .simulation-bar { padding: 0 14px; gap: 11px; }
  .play-controls { gap: 3px; }
  .speed-control { padding-left: 8px; }
  .analysis-header { padding-left: 18px; padding-right: 14px; }
  .context-right { gap: 8px; }
  .workspace.inspector-hidden { grid-template-columns: 220px minmax(0, 1fr); }
  [data-action="toggle-inspector"] { display: inline-flex; }
}

@media (max-height: 790px) and (min-width: 900px) {
  .sidebar-heading { padding-top: 17px; padding-bottom: 13px; }
  .sidebar-tabs { margin-bottom: 17px; }
  .component-card { padding-top: 7px; padding-bottom: 7px; }
  .component-symbol { height: 29px; width: 29px; }
  .component-palette { gap: 6px; }
  .sidebar-rule { margin-top: 17px; margin-bottom: 15px; }
  .tree-row { height: 30px; }
  .analysis-panel { height: 127px; }
  .simulation-bar { height: 67px; }
  .analysis-header { height: 38px; }
  .property-section { padding-top: 17px; padding-bottom: 13px; }
  .inspector-selection { padding-top: 17px; padding-bottom: 17px; }
  .canvas-tools { top: 100px; }
}

@media (max-width: 899px) {
  .magic-calibration-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .magic-heading { gap: 12px; }
  .workspace { grid-template-columns: 205px minmax(0, 1fr); }
  .workspace.inspector-hidden { grid-template-columns: 205px minmax(0, 1fr); }
  .inspector { position: absolute; right: 0; top: 0; bottom: 0; width: 285px; box-shadow: -10px 0 30px #3c52681a; border-left: 1px solid var(--border); }
  .inspector-top > .icon-button { display: inline-flex; }
  [data-action="toggle-inspector"] { display: inline-flex; }
  .app-header { height: 65px; gap: 14px; }
  .context-bar { height: 53px; padding: 0 18px; gap: 12px; }
  .project-name { font-size: 11px; }
  .project-name > span { max-width: 185px; }
  .header-actions { gap: 7px; }
  .header-actions > .icon-button { margin-right: 0; }
  .brand { font-size: 20px; gap: 5px; }
  .brand-mark { width: 26px; }
  .button { padding: 9px 10px; font-size: 10px; }
  .component-card { gap: 7px; }
  .component-add { display: none; }
  .component-name { font-size: 9px; }
  .stage-header { padding-left: 17px; padding-right: 13px; }
  .scene-heading h1 { font-size: 14px; }
  .graph-legend { font-size: 7px; }
  .units-tag { display: none; }
  .analysis-mode .analysis-panel { height: 193px; }
  .scene-status { top: 27px; }
}

@media (max-width: 640px) {
  #app.magic-active { min-height: 700px; }
  .magic-wizard { padding: 0 14px 12px; max-height: min(40dvh, 340px); }
  .magic-heading { flex-direction: column; gap: 8px; padding-top: 11px; }
  .magic-heading p { font-size: 10px; }
  .magic-heading h2 { font-size: 14px; }
  .magic-navigation { align-self: flex-end; }
  .magic-steps { flex-wrap: nowrap; overflow-x: auto; gap: 13px; padding: 3px; }
  .magic-steps button { white-space: nowrap; font-size: 9px; }
  .magic-calibration-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .magic-upload { gap: 9px; }
  .magic-tool-buttons { gap: 7px; }
  .magic-tool-buttons .button { padding: 7px 8px; font-size: 9px; }
  .magic-draw-options > .magic-field { flex: 1 1 135px; }
  .magic-photo-options { justify-content: space-between; }
  .magic-opacity input { width: 100px; }
  .magic-review > .magic-field { flex-basis: 100%; }
  .magic-active .canvas-area { min-height: 300px; }
  .header-actions .magic-import-button { font-size: 9px; padding: 8px 7px; }
  body { overflow-y: auto; }
  #app { min-height: 800px; }
  .app-header { height: auto; min-height: 62px; padding: 10px 14px 8px; column-gap: 12px; row-gap: 8px; flex-wrap: wrap; }
  .brand { font-size: 20px; }
  .brand-mark { width: 25px; }
  .brand-mark svg { height: 25px; width: 25px; }
  .project-name { display: flex; order: 3; flex-basis: 100%; min-height: 34px; padding: 7px 0 0; justify-content: space-between; border-top: 1px solid var(--border); }
  .project-name > span { max-width: none; }
  .header-divider { display: none; }
  .header-actions { gap: 7px; }
  .header-actions > .icon-button { display: none; }
  .header-actions .button { min-height: 32px; padding: 8px 9px; }
  .header-actions .save-button span { display: none; }
  .header-actions .save-button svg { margin: 0; }
  .context-bar { height: 48px; padding: 0 14px; gap: 8px; }
  .workspace-tabs { gap: 18px; }
  .workspace-tab { font-size: 10px; gap: 5px; }
  .workspace-tab svg { width: 14px; height: 14px; }
  .context-separator { margin: 0 2px; }
  .subtle-button { gap: 4px; }
  .subtle-button span { display: none; }
  .subtle-button svg:last-child { display: none; }
  .history-controls { display: none; }
  .context-right { gap: 3px; }
  .context-right .icon-button { width: 27px; height: 27px; }
  .context-right .icon-button svg { width: 16px; height: 16px; }
  [data-action="toggle-sidebar"] { display: inline-flex; }
  .workspace, .workspace.inspector-hidden { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; position: absolute; top: 0; bottom: 0; width: 248px; left: 0; box-shadow: 10px 0 30px #3c526822; }
  .sidebar.mobile-open { display: flex; }
  .component-add { display: flex; }
  .component-name { font-size: 10px; }
  .inspector { width: min(285px, calc(100vw - 45px)); }
  .stage-header { min-height: 39px; padding: 6px 14px; }
  .stage-breadcrumb { font-size: 8px; gap: 5px; }
  .stage-breadcrumb > svg { height: 13px; width: 13px; }
  .stage-toggles { gap: 3px; }
  .stage-toggles .icon-button { width: 23px; height: 23px; }
  .canvas-area { min-height: 360px; }
  .scene-heading { top: 17px; left: 17px; }
  .scene-heading .eyebrow { font-size: 6px; }
  .scene-heading h1 { font-size: 13px; letter-spacing: -.2px; }
  .scene-heading p { font-size: 7px; }
  .scene-status { top: 78px; right: 13px; font-size: 6.5px; }
  .double-drawer-project .scene-status { top: 108px; }
  .double-drawer-project .canvas-tools { top: 115px; }
  .estimate-chip { font-size: 7px; padding: 4px 6px; }
  .canvas-tools { left: 13px; top: 93px; }
  .canvas-tools .icon-button { width: 25px; height: 26px; }
  .phase-switcher { left: 13px; bottom: 16px; }
  .phase-button { min-width: 68px; padding: 6px; }
  .phase-button strong { font-size: 7px; }
  .phase-button small { font-size: 6px; }
  .zoom-control { bottom: 19px; right: 12px; }
  .zoom-control .icon-button { width: 19px; height: 20px; }
  .zoom-control > span:not(.zoom-divider) { width: 29px; font-size: 7px; }
  .zoom-divider { margin: 0 2px; }
  .axis-widget { bottom: 60px; left: 17px; }
  .axis-widget svg { height: 27px; width: 27px; }
  .analysis-panel { height: 132px; }
  .analysis-header { padding: 0 15px; height: 38px; }
  .analysis-title { gap: 6px; }
  .analysis-title h2 { font-size: 9px; }
  .analysis-title > svg { width: 14px; height: 14px; }
  .analysis-title h2, .analysis-title > .live-tag { display: none; }
  #graph-mode { max-width: 128px; font-size: 8px; }
  .mode-switch button { font-size: 8px; padding: 4px 6px; }
  .stage-header { gap: 5px; }
  .graph-legend { font-size: 6px; gap: 4px; }
  .graph-legend .trace-chip { margin-left: 5px; font-size: 6px; padding: 3px 4px; }
  .graph-area { margin-left: 10px; margin-right: 15px; }
  .simulation-bar { gap: 9px; padding: 0 12px; height: 73px; }
  .play-controls { gap: 3px; }
  .play-controls .icon-button { height: 23px; width: 21px; }
  .play-button { width: 29px; height: 29px; }
  .motion-label { font-size: 6px; }
  .motion-label label { font-size: 7px; }
  .motion-readout { min-width: 54px; padding: 6px; }
  .motion-readout input { width: 30px; font-size: 9px; }
  .speed-control { display: none; }
  .status-bar { padding: 0 13px; font-size: 6px; }
  .status-bar > div { gap: 5px; }
  .status-right > .status-separator, .status-right > span:last-child, .status-right > span:nth-last-child(2) { display: none; }
  #solver-meta { font-size: 6px; }
  #pointer-coordinates { min-width: 83px; font-size: 6px; }
  .canvas-instruction { font-size: 8px; padding: 7px 9px; max-width: calc(100% - 80px); top: 92px; left: 57%; }
  .analysis-mode .analysis-panel { height: 177px; }
  dialog { padding: 21px; }
  .project-info-grid, .project-motion-steps { grid-template-columns: 1fr; gap: 8px; }
  .modal-heading h2 { font-size: 19px; }
  .template-grid { gap: 10px; }
  .preset-preview { height: 105px; }
  .preset-preview svg { height: 82px; }
  .preset-body { padding: 11px; }
  .preset-body h3 { font-size: 10px; line-height: 1.6; }
  .preset-body p { font-size: 8px; margin-top: 4px; }
  .preset-body > div { gap: 4px; flex-wrap: wrap; }
  .preset-body > div > span { font-size: 6px; }
  .recommended { font-size: 5px; padding: 3px 4px; }
  .help-steps { grid-template-columns: 1fr; gap: 12px; }
  .help-steps > div { flex-direction: row; gap: 11px; }
  .shortcut-grid { gap: 12px; }
  .shortcut-grid > div { font-size: 8px; gap: 6px; }
  kbd { font-size: 7px; padding: 4px 5px; }
  .export-options > button { padding: 12px 10px; gap: 10px; }
  .export-options strong { font-size: 11px; }
  .export-options small { font-size: 8px; }
  #toast { font-size: 10px; padding: 10px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.workflow-tools { position: absolute; z-index: 5; top: 6px; left: 65px; max-width: calc(100% - 90px); display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; }
.workflow-tools[hidden] { display: none; }
.workflow-tools button { flex: 0 0 auto; font-size: 11px; padding: 7px 10px; background: var(--paper); color: var(--ink); border: 1px solid var(--border); border-radius: 5px; }
.workflow-tools button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.magic-pose-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.magic-detection-row { display: flex; flex-wrap: wrap; align-items: center; }
.magic-detection-row > .property-select { flex: 1 1 160px; max-width: 350px; }
.magic-detection-row > span { flex: 1 1 180px; }
.magic-detection-row .button { font-size: 10px; padding: 5px 8px; }
.plan-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; border: 1px solid var(--border); padding: 12px; margin: 12px 0; }
.plan-row label { display: grid; gap: 5px; color: var(--secondary); font-size: 12px; }
.plan-row > div { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.pose-alignment-image { display: block; width: 100%; max-height: 330px; object-fit: contain; cursor: crosshair; }
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.impact-grid ul { padding-left: 20px; max-height: 180px; overflow: auto; }
.phase-switcher { max-width: calc(100% - 40px); overflow-x: auto; }
.phase-button { flex-shrink: 0; }
.phase-button strong { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Geometry handles and reviewable mechanism workflows. */
.edit-handle.length { cursor: ew-resize; }
.edit-handle.thickness { cursor: ns-resize; }
.edit-handle.rotate { cursor: crosshair; }
.edit-handle.length rect { fill: #edf5ff; stroke: #477fb2; }
.edit-handle.thickness rect { fill: #edf8f3; stroke: #16867b; transform-box: fill-box; transform-origin: center; transform: rotate(45deg); }
.edit-handle.rotate circle { fill: #fff2df; stroke: #bd812c; }
.handle-value { fill: var(--ink); stroke: var(--paper); paint-order: stroke; stroke-width: 3px; stroke-linejoin: round; }
.workflow-tools { flex-wrap: wrap; max-width: calc(100% - 180px); }
.snap-choices label { display: grid; gap: 5px; margin: 8px 0; }
.calibration-picture { position: relative; }
.reference-calibration-image { display: block; width: 100%; max-height: none; }
#reference-calibration-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.response-chart, .detection-review-preview { display: block; width: 100%; max-height: 280px; background: var(--canvas); border: 1px solid var(--border); border-radius: 5px; margin: 12px 0; }
.response-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.detection-joint-review { max-height: 220px; overflow: auto; }
.repair-button { border-color: var(--accent); }
@media (max-width: 760px) { .workflow-tools { max-width: calc(100% - 30px); gap: 4px; } .workflow-tools button { padding: 5px 7px; font-size: 11px; } }

.workflow-tools { overflow: visible; }
.workflow-position-menu { position: relative; flex: 0 0 auto; }
.workflow-position-menu summary { list-style: none; cursor: pointer; padding: 7px 10px; font-size: 11px; border: 1px solid var(--border); border-radius: 5px; background: var(--paper); }
.workflow-position-menu summary::-webkit-details-marker { display: none; }
.workflow-position-menu[open] summary { color: var(--accent); }
.workflow-position-menu > div { position: absolute; z-index: 8; top: calc(100% + 5px); left: 0; display: grid; gap: 5px; min-width: 170px; padding: 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--paper); box-shadow: 0 3px 12px #0002; }

.advanced-row, .advanced-fields { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.advanced-fields > label { flex: 1 1 100px; }
.variant-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 15px; }
#measurement-plot circle { fill: #16867b; cursor: pointer; }
#measurement-plot circle:hover { r: 6; }
.lesson-panel { position: absolute; right: 15px; top: 90px; z-index: 6; max-width: min(300px,calc(100% - 90px)); padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); font-size: 12px; box-shadow: 0 2px 8px #0002; }
.lesson-panel[hidden] { display: none; }
.lesson-panel button { padding: 6px; margin: 4px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 4px; }

#perspective-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Selection actions share one flow; picking a body never opens a floating panel. */
.selection-dock { position: absolute; z-index: 5; left: 65px; right: 16px; bottom: 64px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; pointer-events: none; }
.selection-dock > :is(.selection-summary, .model-checks, .manipulation-tools) { position: static; max-width: 100%; pointer-events: auto; margin: 0; }
.selection-dock .manipulation-tools { flex-basis: 100%; width: max-content; flex-wrap: nowrap; overflow-x: auto; }
.selection-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.selection-summary[hidden] { display: none; }
.selection-summary > span { color: var(--secondary); }
.selection-summary button { padding: 6px; border: 1px solid var(--border); border-radius: 4px; }
.selection-dock .model-checks { margin-left: auto; }
.binding-dialog > strong { display: block; margin: 12px 0; overflow-wrap: anywhere; }
.binding-dialog > div { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.binding-dialog span { margin-top: 8px; color: var(--secondary); font-size: 12px; }
.binding-dialog button { text-align: left; border: 1px solid var(--border); border-radius: 6px; padding: 10px; min-height: 44px; }
.binding-dialog button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-pale); }
.context-heading { display: flex; align-items: center; gap: 8px; position: sticky; top: -6px; background: var(--paper); z-index: 1; }
.context-heading > span { flex: 1; overflow-wrap: anywhere; }
.canvas-context-menu .context-heading button { width: auto; flex: 0 0 auto; }
.canvas-context-menu { overscroll-behavior: contain; }
@media (max-width: 640px) {
  #app { min-height: 100dvh; }
  .workspace { min-height: 480px; }
  .selection-dock { left: 60px; right: 10px; bottom: 62px; gap: 4px; }
  .selection-summary { padding: 4px; font-size: 11px; }
  .selection-summary > span { display: none; }
  .selection-dock .model-checks { padding: 6px; font-size: 11px; }
  .model-checks summary { min-height: 32px; display: flex; align-items: center; }
  .model-checks details > div { max-height: min(180px, 25dvh); }
  .manipulation-tools button, .selection-summary button { min-height: 36px; flex-shrink: 0; font-size: 11px; }
  .canvas-context-menu { width: min(330px, calc(100vw - 16px)); min-width: 0; font-size: 13px; }
  .canvas-context-menu button { min-height: 44px; }
  .canvas-tools { left: 8px; max-height: calc(100% - 110px); overflow-y: auto; }
  .canvas-tools .icon-button { width: 36px; height: 36px; }
  .phase-switcher { left: 60px; right: 144px; bottom: 10px; max-width: calc(100% - 204px); overflow-x: auto; }
  .phase-switcher button { min-height: 36px; min-width: 80px; flex-shrink: 0; }
  .phase-switcher strong { font-size: 10px; }
  .zoom-control { right: 10px; bottom: 8px; }
  .zoom-control .icon-button { width: 30px; height: 36px; }
  .axis-widget { display: none; }
  .mode-switch button { min-height: 36px; font-size: 11px; }
  .workflow-tools { flex-wrap: nowrap; overflow-x: auto; max-width: calc(100% - 75px); }
  .workflow-tools > button, .workflow-position-menu > summary { min-height: 36px; white-space: nowrap; }
  .workflow-position-menu > div { position: fixed; left: 8px; right: 8px; top: auto; max-height: 45dvh; overflow-y: auto; }
  dialog { padding: 18px; }
  .modal-heading { position: sticky; top: -18px; background: var(--paper); z-index: 2; padding: 8px 0; }
  .modal-heading > .icon-button { min-width: 40px; min-height: 40px; margin: 0; }
  .modal-heading h2 { font-size: 18px; overflow-wrap: anywhere; }

  .phase-switcher:not(:empty) ~ .zoom-control { display: flex; }
  .context-bar { flex-wrap: wrap; height: auto; min-height: 48px; }
  .context-right { overflow-x: auto; max-width: 100%; }
  .context-right .icon-button { min-width: 36px; width: 36px; height: 40px; }
  .workspace-tabs { min-height: 40px; }
  .stage-header { flex-wrap: wrap; }
  .stage-toggles .icon-button { width: 36px; height: 36px; }
  .play-controls .icon-button { width: 36px; height: 36px; }
  .play-button { width: 40px; height: 40px; }
  .workspace-tabs, .workspace-tab { height: 40px; }
}
.main-dimensions-toggle { font-size: 11px; padding: 7px; border: 1px solid var(--border); border-radius: 5px; white-space: nowrap; }
.main-dimensions-toggle[aria-pressed="true"] { background: var(--accent-pale); color: var(--accent-ink); }
.main-dimensions text { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.dimension-metrics { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 0; }
.explanation-list, .cycle-failures { display: flex; flex-direction: column; gap: 8px; }
.explanation-list button, .cycle-failures button { text-align: left; white-space: normal; line-height: 1.5; }
.cycle-failures { max-height: 50dvh; overflow-y: auto; }
.connection-preview { border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.connection-preview svg { width: 100%; height: 220px; }
.connection-type-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.connection-type-choices [aria-pressed="true"] { background: var(--accent-pale); border-color: var(--accent); }
.properties-overview details { border-bottom: 1px solid var(--border); padding: 8px 0; }
.properties-overview summary { padding: 8px 0; cursor: pointer; font-weight: 600; }
.properties-overview details > div { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.properties-overview button { border: 1px solid var(--border); border-radius: 5px; padding: 10px; }
#construction-feedback { color: var(--accent-ink); line-height: 1.6; }
@media (max-width: 640px) {
  .main-dimensions-toggle { min-height: 36px; }
  .properties-overview button { min-height: 44px; width: 100%; text-align: left; }
  .stage-toggles { flex-wrap: wrap; }
  .selection-summary button { min-height: 44px; }
}
.detection-overview { padding: 12px; border: 1px solid var(--border); border-radius: 6px; margin: 12px 0; }
.detection-overview h3 { font-size: 13px; margin: 10px 0 6px; }
.detection-overview ul { max-height: 120px; overflow-y: auto; }
.detection-overview button { margin: 3px; }
.magic-detection-row.is-uncertain { background: var(--accent-pale); border-left: 3px solid var(--accent); padding: 6px; }
.elastic-lengths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.elastic-lengths > div { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.elastic-lengths span { color: var(--secondary); }

/* A consistent surface system for every skin, including native form controls. */
:root { --shadow-soft: 0 4px 18px #2222220a; --shadow-panel: 0 12px 40px #22222214; --focus-ring: var(--accent); }
:root[data-theme="dark"] { --shadow-soft: 0 4px 18px #00000030; --shadow-panel: 0 12px 40px #00000055; }
body { color: var(--ink); background: var(--canvas); }
input, select, textarea { color-scheme: inherit; }
select option { color: var(--ink); background: var(--paper); }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--paper) inset; caret-color: var(--ink); }
[data-theme] :is(.inspector-tabs, .property-section, .inspector-selection, .modal-actions, .context-separator, .panel-toggles, .sidebar-heading, .tree-row, .analysis-header) { border-color: var(--border); }
[data-theme] :is(.workflow-position-menu > div, .canvas-context-menu, .selection-summary, .manipulation-tools, .snap-choices, .placement-tools, .model-checks, .lesson-panel) { background: var(--paper); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-soft); }
[data-theme] :is(.workflow-position-menu button, .properties-overview button, .binding-dialog button, .main-dimensions-toggle) { color: var(--ink); background: var(--paper); border-color: var(--border); }
[data-theme] :is(.workflow-position-menu button:hover, .properties-overview button:hover, .binding-dialog button:hover) { background: var(--surface-subtle); }
[data-theme] :is(.component-category, .selection-type, .eyebrow, .section-live-dot, .inspector-tabs button > span, .modal-heading > .icon-button) { color: var(--muted); }
[data-theme] :is(.canvas-tools, .phase-switcher, .zoom-control, .component-card, .selection-summary, .manipulation-tools) { border-radius: 8px; }
.component-card { transition: background-color .12s, border-color .12s; }
.component-card:hover { box-shadow: var(--shadow-soft); }
.property-select, .text-field, .number-field { border-radius: 6px; }
.property-select, .text-field { min-height: 38px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
[data-theme] .canvas-context-menu { box-shadow: var(--shadow-panel); }
.canvas-context-menu button:hover:not(:disabled) { background: var(--surface-subtle); }
::-webkit-scrollbar-thumb { background: var(--border); }
dialog { border-radius: 14px; box-shadow: var(--shadow-panel); }
dialog::backdrop { background: #10182066; backdrop-filter: blur(4px); }
.modal-heading h2 { line-height: 1.3; }
.modal-heading { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.modal-actions { gap: 8px; }
#settings-form .settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding-top: 4px; }
#settings-form .property-field { margin: 0; min-width: 0; }
#settings-form .property-field > span { font-size: 11px; line-height: 1.5; margin-bottom: 6px; }
#settings-form .check-row { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.5; gap: 9px; }
#settings-form .check-row input { width: 16px; height: 16px; flex-shrink: 0; }
#settings-form .section-description { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.6; }
#settings-form > .modal-actions { position: sticky; bottom: -27px; background: var(--paper); padding: 16px 0 4px; margin-top: 18px; }
.skin-picker { grid-column: 1 / -1; margin: 0 0 4px; padding: 0; border: 0; min-width: 0; }
.skin-picker legend { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.skin-picker > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.skin-choice { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); cursor: pointer; }
.skin-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.skin-choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.skin-choice input { position: absolute; right: 10px; top: 10px; accent-color: var(--accent); width: 15px; height: 15px; }
.skin-choice strong { font-size: 11px; font-weight: 600; line-height: 1.5; }
.skin-samples { display: flex; gap: 3px; width: 70%; height: 30px; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.skin-samples i { flex: 1; }
[data-skin="slate"] .skin-samples i:nth-child(1) { background: #ffffff; }
[data-skin="slate"] .skin-samples i:nth-child(2) { background: #f8fafc; }
[data-skin="slate"] .skin-samples i:nth-child(3) { background: #4f46e5; }
[data-skin="sage"] .skin-samples i:nth-child(1) { background: #ffffff; }
[data-skin="sage"] .skin-samples i:nth-child(2) { background: #f9f9fb; }
[data-skin="sage"] .skin-samples i:nth-child(3) { background: #3b7a57; }
[data-skin="steel"] .skin-samples i:nth-child(1) { background: #ffffff; }
[data-skin="steel"] .skin-samples i:nth-child(2) { background: #f4f6f8; }
[data-skin="steel"] .skin-samples i:nth-child(3) { background: #0284c7; }
[data-skin="sand"] .skin-samples i:nth-child(1) { background: #ffffff; }
[data-skin="sand"] .skin-samples i:nth-child(2) { background: #fafafa; }
[data-skin="sand"] .skin-samples i:nth-child(3) { background: #d97706; }
[data-skin="dark"] .skin-samples i:nth-child(1) { background: #1e293b; }
[data-skin="dark"] .skin-samples i:nth-child(2) { background: #0f172a; }
[data-skin="dark"] .skin-samples i:nth-child(3) { background: #38bdf8; }
.skin-picker p { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--secondary); }
@media (max-width: 640px) {
  #settings-form .settings-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .skin-picker > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .skin-choice { flex-direction: row; align-items: center; min-height: 56px; padding-right: 36px; }
  .skin-samples { width: 72px; flex-shrink: 0; }
  .skin-choice input { top: 19px; }
  #settings-form > .modal-actions { bottom: -18px; padding-bottom: 8px; flex-wrap: wrap; }
  #settings-form > .modal-actions .button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .component-card { transition: none; } }

/* Canvas focus must not frame the whole workspace after every pointer click. */
#mechanism-canvas:focus, #mechanism-canvas:focus-visible { outline: none; }

/* Neutral surfaces dominate; color is reserved for actions, selection and status. */
[data-theme] :is(.brand-mark, .brand-dot) { color: var(--ink); }
[data-theme] :is(.validation-card, .scene-status) { background: var(--success-bg); border-color: var(--success-border); color: var(--success-ink); }
[data-theme] :is(.validation-card.has-warning, .scene-status.blocked, .inspector-warning, .project-assumption-warning, .estimate-chip, .analysis-warning) { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-ink); }
[data-theme] #toast { background: var(--paper); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-panel); }
[data-theme] #toast > svg { color: var(--success-ink); }
[data-theme] #toast.warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-ink); }
[data-theme] #toast.warning > svg { color: var(--warning-ink); }
[data-theme] :is(.help-steps p, .shortcut-grid > div, .help-disclaimer, .add-component-grid > button, .file-tag, .export-note) { color: var(--secondary); }
[data-theme] .help-steps strong { color: var(--ink); }
[data-theme] .help-steps > div > span { color: var(--accent-ink); background: var(--accent-pale); border-color: var(--border); }
[data-theme] :is(.help-disclaimer, .shortcut-grid, .help-steps, .add-component-grid > button) { border-color: var(--border); }
[data-theme] :is(.export-options > button > svg, .add-component-grid > button > svg) { color: var(--secondary); }
[data-theme] .button-dark:hover:not(:disabled) { filter: brightness(.94); }
[data-theme] .button-dark:disabled { opacity: .5; }
.skin-picker > div { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
@media (max-width: 640px) { .skin-picker > div { grid-template-columns: minmax(0, 1fr); } }

/* White secondary UI surfaces; the active accent is carried by text and outlines. */
[data-theme] :is(.selection-summary button, .manipulation-tools button, .mobile-tools-dialog button) { background: var(--paper); color: var(--ink); border-color: var(--border); }
[data-theme] .component-name { color: var(--ink); }
[data-theme] .component-name small { color: var(--secondary); }
.mobile-menu-button, .mobile-workflow-button, .mobile-selection-button { display: none; }
.mobile-tools-dialog section { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.mobile-tools-dialog h3 { font-size: 13px; color: var(--secondary); margin: 0 0 4px; }
.mobile-tools-dialog button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px; text-align: left; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; white-space: normal; }
.mobile-tools-dialog button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
.mobile-tools-dialog .workflow-position-menu { display: block; }
.mobile-tools-dialog .workflow-position-menu > div, .mobile-tools-dialog #model-checks details > div { position: static; display: flex; flex-direction: column; gap: 8px; max-height: none; box-shadow: none; border: 0; padding: 8px 0; }
.mobile-tools-dialog .workflow-position-menu:not([open]) > div { display: none; }
.mobile-tools-dialog details > div { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.mobile-tools-dialog details:not([open]) > div { display: none; }
.mobile-tools-dialog summary { padding: 12px; min-height: 44px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
@media (max-width: 640px) {
  .app-header { padding: 10px 12px; row-gap: 6px; }
  .project-name { padding: 6px 0; min-height: 36px; }
  .header-actions .button { min-height: 44px; }
  .context-bar { flex-wrap: nowrap; min-height: 52px; padding: 0 12px; gap: 6px; }
  .workspace-tabs { gap: 12px; flex-shrink: 0; }
  .workspace-tab { font-size: 12px; min-height: 44px; }
  .context-right { margin-left: auto; overflow: visible; gap: 4px; }
  .context-right > :not([data-action="toggle-sidebar"]):not(.mobile-menu-button) { display: none; }
  .context-right [data-action="toggle-sidebar"] { width: auto; min-height: 44px; gap: 4px; padding: 6px; }
  .context-right [data-action="toggle-sidebar"]::after { content: 'Prvky'; font-size: 12px; }
  .mobile-menu-button { display: flex; align-items: center; gap: 4px; padding: 6px; min-height: 44px; font-size: 12px; }
  .stage-header { flex-wrap: nowrap; padding: 6px 12px; min-height: 52px; background: var(--paper); }
  .mode-switch { flex: 1; }
  .mode-switch button { flex: 1; min-height: 40px; font-size: 12px; }
  .stage-toggles { display: none; }
  .workflow-tools { left: 8px; right: auto; top: 8px; max-width: 110px; overflow: visible; }
  .workflow-tools > :not(.mobile-workflow-button) { display: none; }
  .workflow-tools .mobile-workflow-button { display: block; min-height: 44px; font-size: 12px; padding: 10px 12px; }
  .scene-heading, .scene-status { display: none; }
  .canvas-tools { top: auto !important; bottom: 58px; left: 8px; right: 8px; display: flex; flex-direction: row; gap: 2px; max-height: 52px; overflow-x: auto; overflow-y: hidden; padding: 3px; }
  .canvas-tools .icon-button { width: 44px; height: 44px; flex: 0 0 44px; }
  .canvas-tools .tool-divider { width: 1px; height: 32px; margin: 6px 2px; flex-shrink: 0; }
  .selection-dock { left: 122px; right: 8px; top: 8px; bottom: auto; flex-wrap: nowrap; }
  .selection-dock .manipulation-tools, .selection-dock .model-checks { display: none; }
  .selection-summary { width: 100%; border: 0; box-shadow: none !important; padding: 0; background: transparent !important; }
  .selection-summary > :not(.mobile-selection-button) { display: none; }
  .selection-summary .mobile-selection-button { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 44px; padding: 10px; font-size: 12px; }
  .phase-switcher { left: 8px; right: 144px; max-width: none; bottom: 8px; }
  .phase-switcher button { min-height: 40px; }
  .zoom-control { bottom: 8px; right: 8px; }
  .zoom-control .icon-button { width: 36px; height: 40px; }
  .mobile-tools-dialog .workflow-position-menu > div { left: auto; right: auto; top: auto; }
  [data-editor-overlay="manipulation"] > .handle-value, .edit-axes text, [data-editor-overlay="freedom"] text { display: none; }
  .canvas-instruction { top: 60px; left: 8px; right: 8px; max-width: none; font-size: 12px; }
  #toast { bottom: 112px; font-size: 12px; }
}

/* Small interface labels use readable token colours, including the inspector. */
[data-theme] :is(.brand-studio, .small-tag, .section-label, .section-label > span, .count-pill, .component-add, .add-element-button, .empty-inspector p, .empty-projects, .control-point-row > span, .inspector-footer .button, .units-tag span, .zoom-control > span:not(.zoom-divider)) { color: var(--secondary); }
[data-theme] .estimated-note { color: var(--warning-ink); }
[data-theme] :is(.segmented button span, .scene-heading p span, .axis-widget > span, .axis-widget i) { color: var(--secondary); }
[data-theme] .canvas-instruction { color: var(--ink); background: var(--paper); border-color: var(--border); }
@media (max-width: 640px) {
  .phase-switcher { right: 174px; }
  .phase-switcher button, .zoom-control .icon-button { min-height: 44px; height: 44px; }
  .phase-switcher strong, .phase-switcher small { font-size: 11px; }
  .zoom-control > span:not(.zoom-divider) { font-size: 11px; }
  .canvas-instruction { transform: none; }
  .sidebar-scroll { padding-bottom: 16px; }
  .component-name { font-size: 13px; }
  .component-name small { font-size: 11px; }
  .component-card { min-height: 60px; }
}
[data-theme] :is(.component-symbol, .selection-icon) { background: var(--paper); border-color: var(--border); --icon-bg: var(--paper); }
[data-theme] :is(.rail-label, .slot-label, .panel-label, .arm-label, .angle-label, .panel-dimension, .trace-label, .measure-label, .dimension-label) { fill: var(--secondary); paint-order: stroke; stroke: var(--paper); stroke-width: 2px; stroke-linejoin: round; }
.fusion-feedback { padding: 14px; margin: 16px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.fusion-feedback[data-state="busy"] { border-color: var(--accent); }
.fusion-feedback[data-state="ready"] { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-border); }
.fusion-feedback[data-state="error"] { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-border); }

@media (max-width: 720px) {
  #workflow-tools > [data-action="cam-spin"], #workflow-tools > [data-action="surface-contact"], #workflow-tools > [data-action="motor-spec"] { display: none; }
}

/* Illustrated manual and passive contextual help, using the active skin tokens. */
.illustrated-guide { color:var(--ink); }
.guide-search { display:grid; gap:8px; margin:20px 0; font-size:13px; color:var(--secondary); }
.guide-section h3 { margin:24px 0 12px; font-size:15px; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.guide-topic { border:1px solid var(--border); border-radius:12px; background:var(--paper); overflow:hidden; }
.guide-topic[hidden],.guide-section[hidden] { display:none; }
.guide-topic summary { display:flex; align-items:center; gap:12px; padding:12px; cursor:pointer; font-size:14px; font-weight:650; list-style:none; }
.guide-topic summary::-webkit-details-marker { display:none; }
.guide-topic summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.guide-topic svg { width:88px; height:58px; flex-shrink:0; color:var(--accent-ink); background:var(--canvas); border-radius:8px; }
.guide-expand { margin-left:auto; font-size:20px; color:var(--secondary); }
.guide-topic[open] .guide-expand { transform:rotate(45deg); }
.guide-body { padding:0 16px 16px; border-top:1px solid var(--border); font-size:13px; line-height:1.65; }
.guide-body p { margin:12px 0; }
.guide-body ol { padding-left:20px; margin:0; }
.guide-body li+li { margin-top:8px; }
.kinmo-hover-help { position:fixed; z-index:80; display:flex; gap:12px; width:360px; max-width:calc(100vw - 16px); padding:14px; box-sizing:border-box; pointer-events:none; border:1px solid var(--border); border-radius:12px; background:var(--paper); color:var(--ink); box-shadow:0 8px 28px #0f172a26; font-size:13px; line-height:1.5; }
.kinmo-hover-help svg { width:70px; height:54px; flex-shrink:0; color:var(--accent-ink); }
.kinmo-hover-help strong { font-size:13px; }
.kinmo-hover-help p { margin:5px 0 8px; }
.kinmo-hover-help small { color:var(--secondary); font-size:11px; }
@media(max-width:600px) { .guide-grid { grid-template-columns:minmax(0,1fr); } .guide-topic summary { min-height:64px; } .guide-topic svg { width:76px; } }
.guide-detail-diagram { margin:12px 0; padding:10px; background:var(--canvas); border-radius:8px; text-align:center; }
.guide-detail-diagram svg { width:100%; height:140px; }
.illustrated-guide .shortcut-grid { border-color:var(--border); }
.illustrated-guide .shortcut-grid > div { font-size:12px; color:var(--secondary); }
.illustrated-guide .shortcut-grid kbd { font-size:11px; color:var(--ink); }
.kinmo-hover-help { max-height:calc(100vh - 16px); overflow:hidden; }
@media(max-width:600px) { .illustrated-guide .shortcut-grid { grid-template-columns:1fr; } .illustrated-guide .shortcut-grid > div { font-size:13px; } }