:root { color-scheme: dark; font: 14px system-ui, sans-serif; color: #e4eaf1; background: #111820; }
#build-faces-dialog { position: fixed; inset: 72px 12px auto auto; margin: 0; width: min(350px, calc(100vw - 24px)); max-height: calc(100vh - 92px); padding: 10px; overflow: hidden; z-index: 10; }
#build-faces-dialog[open] { display: flex; flex-direction: column; }
#build-faces-dialog h2 { margin: 0 0 8px; }
#build-faces-form { display: flex; flex-direction: column; min-height: 0; }
#build-faces-dialog .face-panel-body { overflow: auto; min-height: 0; padding-right: 3px; }
#build-faces-dialog label { margin: 5px 0; }
#build-faces-dialog button, #build-faces-dialog select, #build-faces-dialog input { font-size: 12px; padding: 5px 6px; }
#build-faces-dialog select { margin-top: 3px; }
#build-faces-dialog details { margin: 5px 0; }
#build-faces-dialog summary { cursor: pointer; font-size: 12px; }
#build-faces-dialog p { margin: 5px 0; font-size: 11px; }
.face-target-row, .face-neighbor-tools, .face-panel-actions { display: flex; align-items: center; gap: 5px; }
.face-target-label, .face-neighbor-tools input { flex: 1; min-width: 0; }
.face-target-row button { align-self: flex-end; margin-bottom: 5px; }
.face-target-label { margin: 5px 0; }
#build-faces-target { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; margin-top: 3px; }
.icon-picker-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.icon-picker-name, .icon-picker-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-picker-detail { color: #a6b6c5; font-size: 10px; }
.icon-picker-options { position: fixed; inset: auto; margin: 0; padding: 3px; overflow: auto; background: #253342; color: inherit; border: 1px solid #77d3ea; border-radius: 6px; box-shadow: 0 4px 18px #0008; }
.icon-picker-option { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 3px; cursor: pointer; font-size: 12px; }
.icon-picker-option[aria-selected="true"] { background: #164b5a; }
.icon-picker-option.picker-active { outline: 1px solid #77d3ea; outline-offset: -1px; }
.face-neighbor-tools { margin: 6px 0; }
.model-picking { cursor: crosshair; }
.geometry-native-input { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.selection-field { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 28px; min-width: 0; margin-top: 5px; border: 1px solid #4b6175; border-radius: 5px; background: #17232e; overflow: visible; }
.selection-field:has(.model-field-pick[aria-pressed="true"]) { border-color: #79d8ee; box-shadow: 0 0 0 1px #79d8ee; }
.selection-field:has([aria-invalid="true"]) { border-color: #f2a7a7; }
.selection-field-selected { grid-column: 1; list-style: none; margin: 0; padding: 0; max-height: 150px; overflow: auto; }
.selection-field-selected[hidden] { display: none; }
.selection-field-row { display: flex; min-height: 28px; align-items: center; border-bottom: 1px solid #314354; }
.selection-field button { margin: 0 !important; border: 0; border-radius: 0; font-size: 12px; background: transparent; }
.selection-field .selection-field-name { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 7px; }
.selection-field .selection-field-remove { flex: none; width: 26px; padding: 4px; color: #a6b6c5; }
.selection-field .model-field-pick { grid-column: 1; min-width: 0; min-height: 28px; padding: 5px 7px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selection-field-multiple { min-height: 58px; }
.selection-field-multiple .model-field-pick { color: #a6b6c5; }
.selection-field-multiple:has(.selection-field-selected:empty) .model-field-pick { min-height: 58px; }
.selection-field .selection-field-dropdown { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; border-left: 1px solid #4b6175; padding: 4px; }
.selection-field button:hover, .selection-field button:focus-visible { background: #253342; }
.selection-field-unavailable { color: #f2ce8b; }
.selection-field-options { position: fixed; inset: auto; margin: 0; padding: 4px; overflow: auto; background: #253342; color: #e4eaf1; border: 1px solid #79d8ee; border-radius: 5px; box-shadow: 0 4px 18px #0008; }
.selection-field-options .selection-field-option { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 7px; text-align: left; font-size: 12px; border: 0; background: transparent; }
.selection-field-option:hover, .selection-field-option:focus-visible { background: #164b5a; }
.selection-field-check { flex: none; width: 14px; color: #79d8ee; }
.selection-field-options .hint { margin: 5px; }
dialog[data-model-pick-suspended="true"] { position: fixed; inset: 72px 12px auto auto; margin: 0; max-width: min(350px, calc(100vw - 24px)); max-height: calc(100vh - 110px); overflow: auto; z-index: 15; }
#pick-face-target[aria-pressed="true"], #pick-face-neighbor[aria-pressed="true"], #pick-relationship-participant[aria-pressed="true"] { background: #164b5a; border-color: #79d8ee; }
#model-pick-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 16px); padding: 5px 8px; border: 1px solid #79d8ee; border-radius: 5px; background: #1c2a35; z-index: 3; font-size: 12px; }
#model-pick-hint[hidden] { display: none; }
#model-pick-hint button { flex: none; padding: 3px 6px; font-size: 11px; }
.model-pick-choices { position: fixed; inset: auto; margin: 0; padding: 5px; max-width: min(350px, calc(100vw - 8px)); max-height: min(300px, calc(100vh - 8px)); overflow: auto; background: #253342; color: inherit; border: 1px solid #79d8ee; border-radius: 5px; box-shadow: 0 4px 18px #0008; }
.model-pick-choices > span { display: block; padding: 3px 5px; font-size: 11px; color: #a6b6c5; }
.model-pick-choices button { display: flex; align-items: center; gap: 6px; width: 100%; margin: 2px 0; text-align: left; font-size: 12px; padding: 5px 6px; }
.model-pick-hover { background: #164b5a; outline: 1px solid #79d8ee; outline-offset: -1px; }
.face-panel-footer { flex: none; border-top: 1px solid #344351; padding-top: 7px; margin-top: 7px; }
.face-panel-actions button { flex: 1; }
#build-faces-error:empty { display: none; }
#build-faces-candidate-status { height: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#build-faces-error { max-height: 80px; overflow: auto; }
#build-faces-next-neighbors { margin-top: 6px; }
#build-faces-next-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#build-faces-next-buttons button { display: flex; align-items: center; gap: 4px; }
#build-faces-dialog .face-candidate { border-bottom: 1px solid #344351; margin: 0; padding: 2px 0; }
#build-faces-dialog .face-candidate > summary { display: flex; align-items: center; gap: 5px; min-height: 28px; }
#build-faces-dialog .face-candidate > summary::before { content: '▸'; color: #a6b6c5; }
#build-faces-dialog .face-candidate[open] > summary::before { content: '▾'; }
#build-faces-dialog .face-candidate[open] > summary { background: #253342; }
#build-faces-dialog .face-candidate:hover > summary, #build-faces-dialog .face-candidate:focus-within > summary { background: #253342; }
#build-faces-dialog .face-candidate label { flex: 1; min-width: 0; margin: 2px 0; }
.face-candidate-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face-candidate-text { display: flex; flex-direction: column; min-width: 0; }
.face-candidate-kind { color: #a6b6c5; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.face-badge { color: #a6b6c5; font-size: 10px; white-space: nowrap; }
.face-badge.warning { color: #f2ce8b; }
.face-candidate-detail { padding: 2px 7px 4px 19px; }
#build-faces-dialog .face-region { display: flex; align-items: center; gap: 5px; margin: 2px 0; }
#build-faces-dialog .face-region label { flex: 1; }
#build-faces-dialog .face-region details { margin: 0; }
#build-faces-dialog .face-region { flex-wrap: wrap; }
#build-faces-dialog .face-region.region-inspected { background: #394634; outline: 1px solid #ffe45c; outline-offset: -1px; border-radius: 3px; }
.face-region-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.face-region-tools[hidden] { display: none; }
#face-region-count { color: #a6b6c5; font-size: 11px; }
#build-faces-dialog .face-region-list { max-height: 230px; overflow: auto; }
#build-faces-dialog .face-region details[open] { flex-basis: 100%; }
#build-faces-dialog .face-region summary { font-size: 10px; color: #a6b6c5; }
.build-face-row { padding: 10px; margin-top: 12px; border: 1px solid #4b6175; border-radius: 6px; }
.build-face-row label { margin: 5px 0; }
.build-face-row .hint { margin: 8px 0; }
.build-face-warning { color: #f2ce8b; }
#build-faces-candidates { max-height: 240px; overflow: auto; }
#build-faces-candidates .build-face-row { margin-top: 6px; }
#build-faces-dialog input[type="checkbox"] { width: auto; }
#build-faces-dialog .build-face-row { padding: 6px; margin-top: 6px; }
.build-face-candidate-heading { display: flex; align-items: center; gap: 8px; }
.build-face-candidate-heading label { flex: 1; }
.build-face-candidate-heading button { font-size: 11px; padding: 5px; }
* { box-sizing: border-box; }
#export-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
#export-fields input[type="checkbox"] { width: auto; }
body { margin: 0; height: 100vh; display: flex; flex-direction: column; }
header { min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 8px 24px; border-bottom: 1px solid #344351; }
#project-toolbar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#project-toolbar .row { display: contents; }
#project-toolbar button { font-size: 12px; white-space: nowrap; flex: none; }
#import-warning { flex: none; padding: 8px 20px; background: #3d3521; border-bottom: 1px solid #8a7447; font-size: 12px; }
.import-warning-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#dismiss-import-warning { padding: 4px 8px; font-size: 12px; }
#import-warning details { margin-top: 4px; }
#import-warning summary { cursor: pointer; }
#import-warning-list { max-height: 100px; overflow-y: auto; margin: 6px 0 0; padding-left: 20px; }
header strong { font-size: 20px; letter-spacing: .04em; } header small { color: #9aacbe; margin-left: auto; letter-spacing: .12em; }
main { display: flex; flex: 1; min-height: 0; } aside { width: 320px; flex-shrink: 0; padding: 20px; overflow: auto; border-right: 1px solid #344351; }
h1 { font-size: 23px; margin: 0 0 8px; } h2 { font-size: 14px; margin: 0 0 14px; } section { border-top: 1px solid #344351; padding-top: 18px; margin-top: 20px; }
p { line-height: 1.5; } .muted, .hint { color: #a6b6c5; } .hint { font-size: 12px; } label { display: block; margin: 12px 0; } select { display: block; width: 100%; margin-top: 7px; }
button, select { color: inherit; background: #253342; border: 1px solid #4b6175; border-radius: 6px; padding: 9px 10px; font: inherit; } button { cursor: pointer; } button:hover { background: #35495b; } button:disabled { opacity: .4; cursor: default; } :focus-visible { outline: 2px solid #77d3ea; outline-offset: 3px; }
.primary { width: 100%; background: #166579; border-color: #4894a7; font-weight: 600; }.row { display: flex; gap: 8px; }.row button { flex: 1; font-size: 12px; }
.check { display: flex; align-items: center; gap: 8px; } #status { color: #bde4ee; font-size: 13px; } #status.error { color: #ffab94; } dl { display: grid; grid-template-columns: 1fr auto; font-size: 12px; gap: 8px; } dt { color: #a6b6c5; } dd { margin: 0; font-variant-numeric: tabular-nums; }
#viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #17232e; } canvas { display: block; width: 100%; height: 100%; touch-action: none; } .viewbar { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; gap: 8px; z-index: 1; }.viewbar button { font-size: 12px; } #mesh-info { margin-left: auto; color: #a6b6c5; font-size: 12px; }.viewhint { position: absolute; bottom: 20px; left: 20px; color: #a6b6c5; font-size: 12px; pointer-events: none; }
#rectangle { position: absolute; border: 1px solid #8ce2f5; background: #8ce2f522; pointer-events: none; } footer { padding: 9px 20px; font-size: 11px; color: #a6b6c5; border-top: 1px solid #344351; } #render-stats { float: right; }
@media(max-width: 760px) { aside { width: 260px; padding: 12px; } #mesh-info { display: none; } }

.viewport-options { position: absolute; top: 60px; right: 16px; z-index: 1; display: flex; flex-direction: column; gap: 8px; max-width: min(270px, calc(100% - 32px)); max-height: calc(100% - 100px); overflow: auto; }
.navigation-options, .display-options { margin: 0; padding: 6px 10px 9px; background: #17232ee8; border: 1px solid #4b6175; border-radius: 6px; font-size: 12px; min-width: 0; }
.display-options summary { cursor: pointer; padding: 3px 0; }
.display-options label { margin: 8px 0; }
.display-options select { font-size: 12px; }
#residual-scale { margin: 8px 0 3px; color: #d6e2ec; font-variant-numeric: tabular-nums; }
.residual-scale-bar { height: 10px; border: 1px solid #6d7f8f; border-radius: 3px; background: linear-gradient(90deg, #245bea, #fff 50%, #e23636); }
.residual-scale-values { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; margin-top: 3px; }
.residual-scale-values output:last-child { text-align: right; }
.residual-peaks { margin-top: 5px; color: #a6b6c5; text-align: center; }
footer #status { margin: 0 0 6px; }
#runtime-controls { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#runtime-controls[hidden] { display: none; }
.navigation-options legend { padding: 0 4px; color: #a6b6c5; }
.navigation-options label { display: flex; align-items: center; gap: 6px; margin: 4px 0; cursor: pointer; }
.navigation-options input { accent-color: #77d3ea; }


#properties-title { margin-top: 20px; }

#brush-cursor { position: absolute; border: 2px solid #8ce2f5; border-radius: 50%; background: #8ce2f515; pointer-events: none; }
#brush-size { width: 100%; }


#action-list { --tree-row-height: 30px; --tree-guide-color: #344351; padding: 3px 0; list-style: none; }
#feature-selection-bar { position: sticky; top: -16px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 12px; margin: -8px -8px 8px; padding: 8px; background: #111a22ee; border-bottom: 1px solid #314354; }
#feature-selection-bar button { padding: 4px 9px; font-size: 12px; }
.fit-quality-control { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; color: #a6b6c5; font-size: 11px; }
#fit-quality-limit { width: 95px; min-width: 0; padding: 3px 5px; background: #253342; color: inherit; border: 1px solid #4b6175; border-radius: 4px; font: inherit; }
#fit-quality-limit[aria-invalid="true"] { border-color: #ffab94; }
.fit-quality { flex: none; font-size: 9px; font-weight: 500; white-space: nowrap; padding: 2px 4px; border-radius: 3px; color: #b9cad9; background: #253342; font-variant-numeric: tabular-nums; }
.fit-quality.quality-warning { color: #ffd18b; background: #614323; }
.fit-quality.quality-within { color: #9fe8bc; background: #1d4331; }
.fit-quality.quality-unavailable { color: #8c9bab; background: transparent; }
#feature-selection-summary-names { line-height: 1.55; }
#action-list li { position: relative; margin: 1px 0; border-radius: 4px; }
#action-list .tree-row { position: relative; display: flex; align-items: center; min-height: var(--tree-row-height); padding-left: 22px; color: #c4d3df; font-size: 12px; user-select: none; }
#action-list .tree-row-content { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; min-height: var(--tree-row-height); padding: 4px 5px; border: 1px solid transparent; border-radius: 4px; }
#action-list .tree-row-content:hover { background: #253342; }
#action-list .feature-input > .tree-row-content { background: rgb(116 189 217 / 12%); }
#action-list .feature-dependent > .tree-row-content { background: rgb(226 180 105 / 12%); }
#action-list .feature-input.feature-dependent > .tree-row-content { background: linear-gradient(90deg, rgb(116 189 217 / 12%), rgb(226 180 105 / 12%)); }
#action-list :is(.feature-input, .feature-dependent) > .tree-row-content:hover { background-color: #253342; }
#feature-relation-legend { flex-basis: 100%; display: flex; gap: 12px; color: #a6b6c5; font-size: 11px; }
#feature-relation-legend[aria-hidden="true"] { visibility: hidden; }
#feature-relation-legend span { display: inline-flex; align-items: center; gap: 5px; }
#feature-relation-legend span::before { content: ''; width: 12px; height: 9px; border-radius: 2px; }
#feature-relation-legend .relation-input::before { background: rgb(116 189 217 / 28%); }
#feature-relation-legend .relation-dependent::before { background: rgb(226 180 105 / 28%); }
#action-list .tree-item:focus { outline: none; }
#action-list .tree-item:focus-visible > .tree-row > .tree-row-content,
#action-list .tree-item:focus-visible > details > .tree-row > .tree-row-content { outline: 1px solid #77d3ea; outline-offset: -2px; }
#action-list .feature-selected > .tree-row-content { border-color: #77d3ea; background: #164b5a; }
#action-list .tree-item[aria-expanded] > details > summary::marker { content: ''; }
#action-list .tree-item[aria-expanded] > details > summary::-webkit-details-marker { display: none; }
#action-list .tree-toggle { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 22px; cursor: pointer; border-radius: 3px; }
#action-list .tree-toggle:hover { background: #3b4e60; }
#action-list .tree-toggle .feature-icon { width: 13px; height: 13px; }
#action-list .tree-item[aria-expanded="true"] > details > summary > .tree-toggle .feature-icon { transform: rotate(90deg); }
#action-list button { padding: 5px; font-size: 12px; }
#action-list .action-select { min-width: 0; text-align: left; }
.action-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.feature-icon { display: block; width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#icon-legend-dialog h2 { margin: 0 0 8px; }
#icon-legend-content { flex: 1; min-height: 0; overflow: auto; }
#icon-legend-content section { margin-bottom: 16px; }
#icon-legend-content h3 { font-size: 12px; margin: 0 0 8px; color: #a6b6c5; }
#icon-legend-content ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 8px 16px; }
#icon-legend-content li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12px; }
#icon-legend-content .feature-icon { width: 24px; height: 24px; }
#icon-legend-content small { display: block; color: #a6b6c5; font-size: 11px; }
.action-type { color: #b7cfe1; }
.action-state { width: 16px; height: 16px; }
.state-ready { color: #67dba2; }
.state-unevaluated { color: #a6b6c5; }
.state-stale { color: #f2b544; }
.state-failed { color: #ffab94; }
.state-blocked { color: #d8bb80; }
.state-running { color: #77d3ea; animation: feature-spin 1s linear infinite; }
@keyframes feature-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .state-running { animation: none; } }
#action-list .row-draggable > .tree-row-content { cursor: grab; touch-action: none; }
#action-list .row-draggable > .tree-row-content:active { cursor: grabbing; }
.nested-actions { list-style: none; margin: 0 0 0 14px; padding: 0 0 0 6px; }
/* Connect each child at its row center, stopping the spine at the last child.
   Use the item rather than the row so drag insertion markers remain separate. */
#action-list .nested-actions > .tree-item::before { content: ''; position: absolute; left: -6px; top: -1px; bottom: -1px; border-left: 1px solid var(--tree-guide-color); pointer-events: none; }
#action-list .nested-actions > .tree-item:last-child::before { bottom: auto; height: calc(var(--tree-row-height) / 2 + 1px); }
#action-list .nested-actions > .tree-item::after { content: ''; position: absolute; left: -6px; top: calc(var(--tree-row-height) / 2); width: 10px; border-top: 1px solid var(--tree-guide-color); pointer-events: none; }
#action-list .nested-actions > .tree-item:not([aria-expanded])::after { width: 26px; }
#action-list .tree-group { padding: 0; margin: 0; border: 0; background: transparent; }
.tree-group > summary { cursor: default; font-weight: 600; }
.tree-group > summary .action-state { margin-left: auto; }
.tree-group > summary.action-drop-target { position: relative; }
.tree-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managed-owner-group { color: #a6b6c5; }
.group-icon { width: 18px; height: 18px; }
.managed-badge { flex: none; padding: 2px 5px; border: 1px solid #6690a7; border-radius: 999px; color: #9fc8dc; font-size: 9px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.generated-badge { flex: none; padding: 2px 5px; border: 1px solid #526a7e; border-radius: 999px; color: #9fb5c6; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.managed-note { padding: 9px; border-left: 3px solid #77d3ea; background: #1d2b37; }
.managed-note span { display: block; margin-bottom: 7px; }
.drop-before::before, .drop-after::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #77d3ea; pointer-events: none; }
/* Center both directions on the same 1px gap between adjacent rows. */
.drop-before::before { top: -1.5px; } .drop-after::after { bottom: -1.5px; }
.drop-invalid::before, .drop-invalid::after { background: #ffab94; }
/* A clipped live announcement must not extend the page past a long feature tree. */
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
aside input:not([type="checkbox"]):not([type="range"]) { display: block; width: 100%; padding: 7px; }
aside select[multiple] { min-height: 80px; }
.editing-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
details { margin: 12px 0; }

#creation-toolbar { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: stretch; gap: 12px; padding: 7px 20px; border-bottom: 1px solid #344351; }
#creation-toolbar .toolbar-group { display: grid; gap: 3px; padding-right: 12px; border-right: 1px solid #344351; }
#creation-toolbar .toolbar-export { margin-left: auto; padding-right: 0; border-right: 0; }
#creation-toolbar .toolbar-group-label { color: #91a7b9; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
#creation-toolbar .toolbar-items { display: flex; align-items: center; gap: 6px; }
#creation-toolbar button { padding: 7px 9px; white-space: nowrap; }
#creation-toolbar .toolbar-check { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; font-size: 12px; }
#creation-toolbar .toolbar-check input { accent-color: #77d3ea; }
aside { display: grid; grid-template-rows: minmax(0, var(--tree-height, 40%)) 8px minmax(0, 1fr); overflow: hidden; padding: 0; }
#features-panel, #feature-properties-panel { overflow: auto; min-height: 0; padding: 16px; overscroll-behavior: contain; }
#features-panel { padding-top: 8px; padding-bottom: 8px; }
.feature-reordering, .feature-reordering * { cursor: grabbing !important; user-select: none; }
#feature-divider { position: relative; cursor: row-resize; touch-action: none; background: #253342; }
#feature-divider::after { content: ''; position: absolute; width: 36px; height: 2px; left: calc(50% - 18px); top: 3px; background: #91a7b9; border-radius: 2px; }
#feature-divider:hover, #feature-divider:focus-visible, .resizing-features #feature-divider { background: #166579; }
#feature-divider:focus-visible { outline-offset: -2px; }
body.resizing-features, body.resizing-features * { cursor: row-resize !important; user-select: none; }
#feature-properties-panel > section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
#feature-properties-panel #properties-title { margin-top: 0; }
dialog { width: min(420px, 90vw); max-height: 85vh; overflow: auto; background: #17232e; color: inherit; border: 1px solid #4b6175; border-radius: 8px; }
dialog::backdrop { background: #0008; }
#body-dialog { position: fixed; inset: 72px 12px auto auto; margin: 0; width: min(350px, calc(100vw - 24px)); max-height: calc(100vh - 92px); padding: 10px; z-index: 10; }
#body-dialog h2 { margin: 0 0 8px; }
#body-dialog label { margin: 5px 0; }
#body-dialog button, #body-dialog input { font-size: 12px; padding: 5px 6px; }
#body-dialog p { margin: 5px 0; font-size: 11px; }
.body-face-choices { max-height: 230px; overflow: auto; border: 1px solid #344351; border-radius: 5px; }
.body-face-choices label { display: flex; align-items: center; gap: 6px; padding: 5px 6px; margin: 0 !important; border-bottom: 1px solid #344351; font-size: 12px; }
.body-face-choices label:hover, .body-face-choices label:focus-within { background: #253342; }
.body-face-choices input[type="checkbox"] { width: auto; }
.body-face-choices .hint { margin-left: auto; font-size: 10px; }
#body-diagnostics button { display: block; width: 100%; text-align: left; padding: 6px; margin: 4px 0; font-size: 12px; }
#body-diagnostics .hint { display: block; margin-top: 3px; }
#feature-context-menu, #group-context-menu { position: fixed; inset: auto; margin: 0; padding: 4px; max-width: 280px; background: #17232e; color: inherit; border: 1px solid #4b6175; border-radius: 6px; box-shadow: 0 4px 18px #0008; }
#feature-context-menu button, #group-context-menu button { width: 100%; text-align: left; border: 0; padding: 7px 10px; }
#feature-context-group-row { display: block; margin: 4px 8px; }
#feature-context-group-row[hidden] { display: none; }
#feature-context-error { margin: 4px 8px; }
#feature-context-error:empty, #delete-features-error:empty { display: none; }
#delete-features-dialog { width: min(360px, 90vw); padding: 12px; }
#delete-features-dialog details { margin: 8px 0; }
#delete-features-dialog summary { cursor: pointer; font-size: 12px; }
#delete-features-dialog ul { max-height: 150px; overflow: auto; margin: 6px 0; padding-left: 22px; font-size: 12px; }
#delete-features-dialog .check { font-size: 12px; }
#delete-features-dialog input[type="checkbox"] { width: auto; }
#delete-features-error { color: #ffab94; font-size: 12px; }
#confirm-delete-features { background: #79372e; border-color: #b26452; }
dialog input { width: 100%; padding: 8px; }
.scale-distance-row { margin: 9px 0; padding: 9px; border: 1px solid #425668; border-radius: 6px; background: #1a2834; }
.scale-distance-row label { margin: 7px 0; }
.scale-distance-row button { padding: 6px 9px; font-size: 12px; }
#relationship-dialog { position: fixed; inset: 72px 12px auto auto; margin: 0; width: min(350px, calc(100vw - 24px)); max-height: calc(100vh - 92px); padding: 10px; overflow: hidden; z-index: 11; }
#relationship-dialog[open], #add-relationship-form { display: flex; flex-direction: column; min-height: 0; }
#relationship-dialog h2 { margin: 0 0 8px; }
.relationship-panel-body { overflow: auto; min-height: 0; padding-right: 3px; }
#relationship-dialog label { margin: 5px 0; }
#relationship-dialog button, #relationship-dialog select, #relationship-dialog input { font-size: 12px; padding: 5px 6px; }
#relationship-dialog p { margin: 5px 0; font-size: 11px; }
#relationship-dialog details { margin-top: 8px; }
.relationship-participants { max-height: 320px; overflow: auto; border: 1px solid #4b6175; border-radius: 6px; }
.relationship-participant { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-bottom: 1px solid #314354; }
.relationship-participant[hidden] { display: none; }
.relationship-participant:last-child { border-bottom: 0; }
.relationship-participant:hover, .relationship-participant:focus-within { background: #253342; }
.relationship-participant.participant-selected { background: #193c47; }
#relationship-dialog .relationship-participant label { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; margin: 0; padding: 3px 0; }
.relationship-participants input { width: auto; }
.relationship-selection-tools { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 11px; color: #a6b6c5; }
#relationship-error:empty { display: none; }

#feature-graph-view { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); margin: 0; padding: 0; border: 0; background: #17232e; }
.feature-graph-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 9px 14px; border-bottom: 1px solid #344351; background: #151f28; }
.feature-graph-toolbar label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; white-space: nowrap; }
.feature-graph-toolbar select { width: auto; min-width: 150px; margin: 0; padding: 6px 28px 6px 8px; font-size: 12px; }
.feature-graph-toolbar input { accent-color: #77d3ea; }
#feature-graph-summary { margin-left: auto; color: #a6b6c5; font-size: 12px; font-variant-numeric: tabular-nums; }
.feature-graph-legend { display: flex; flex-wrap: wrap; gap: 9px 18px; padding: 7px 15px; border-bottom: 1px solid #344351; color: #a6b6c5; font-size: 11px; }
.feature-graph-legend span::before { content: ''; display: inline-block; width: 22px; margin-right: 6px; border-top: 2px solid #91a7b9; vertical-align: middle; }
.feature-graph-legend .legend-relationship::before { border-color: #67dba2; }
.feature-graph-legend .legend-solve::before { border-color: #bd91f4; }
.feature-graph-legend .legend-ownership::before { border-color: #f2b544; border-top-style: dotted; }
#feature-graph-canvas { position: relative; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.feature-graph-svg { display: block; min-width: 100%; min-height: 100%; background-image: radial-gradient(#40505e 0.7px, transparent 0.7px); background-size: 18px 18px; }
#feature-graph-arrow path { fill: context-stroke; }
.feature-graph-edge { fill: none; stroke: #91a7b9; stroke-width: 1.5; }
.feature-graph-edge.edge-relationship { stroke: #67dba2; stroke-width: 2; }
.feature-graph-edge.edge-solve { stroke: #bd91f4; stroke-width: 2; }
.feature-graph-edge.edge-ownership { stroke: #f2b544; stroke-dasharray: 3 5; }
.feature-graph-node { cursor: pointer; }
.feature-graph-node rect { fill: #1c2a36; stroke: #526a7e; stroke-width: 1.4; }
.feature-graph-node:hover rect { fill: #253746; stroke: #8eb4ca; }
.feature-graph-node:focus { outline: none; }
.feature-graph-node:focus rect { stroke: #77d3ea; stroke-width: 2.5; }
.feature-graph-node.selected rect { fill: #164b5a; stroke: #77d3ea; stroke-width: 2.5; }
.feature-graph-node.graph-node-relationship rect { fill: #17342f; stroke: #67dba2; }
.feature-graph-node.graph-node-solve rect { fill: #302947; stroke: #bd91f4; }
.feature-graph-node.graph-node-datum rect { fill: #243442; stroke: #72b7ed; }
.feature-graph-node.graph-node-reuse rect { fill: #392f1f; stroke: #f2b544; }
.feature-graph-node.generated rect { stroke-dasharray: 4 3; }
.graph-node-label { fill: #e4eaf1; font-size: 13px; font-weight: 600; }
.graph-node-detail { fill: #9fb2c2; font-size: 10px; text-transform: capitalize; }
.graph-node-state { stroke: #17232e; stroke-width: 2; }
.graph-node-state.state-ready { fill: #67dba2; }
.graph-node-state.state-unevaluated { fill: #8395a5; }
.graph-node-state.state-stale { fill: #f2b544; }
.graph-node-state.state-running { fill: #77d3ea; }
.graph-node-state.state-failed { fill: #ffab94; }
.graph-node-state.state-blocked { fill: #d8bb80; }
.feature-graph-empty { margin: 40px auto; width: min(420px, calc(100% - 40px)); color: #a6b6c5; text-align: center; }

#overlap-banner { position: absolute; z-index: 2; left: 16px; bottom: 48px; max-width: calc(100% - 32px); padding: 10px 14px; background: #30132ff2; border: 2px solid #ff61df; border-radius: 6px; }
#overlap-banner[hidden], #overlap-details[hidden] { display: none; }
#overlap-banner strong, #overlap-banner span { display: block; margin-bottom: 6px; }
#overlap-banner span { font-size: 12px; }
#overlap-details { border-left: 3px solid #ff61df; padding: 10px; margin: 12px 0; }
#overlap-details button { padding: 4px; }

#startup-error { padding: 16px 24px; background: #38251e; border-bottom: 2px solid #ffab94; }
#startup-error p { margin: 8px 0; }
[hidden] { display: none !important; }

@media(max-width: 900px) {
  .feature-graph-toolbar { gap: 8px 12px; }
  #feature-graph-summary { width: 100%; margin-left: 0; }
}