.simulation-workspace { display: grid; height: 100%; min-width: 0; grid-template-rows: auto minmax(0, 1fr); gap: 0.9rem; padding-bottom: 1rem; } .simulation-workspace--scene { height: 100%; min-height: 38rem; grid-template-rows: auto minmax(0, 1fr); } .simulation-workspace__head, .simulation-workspace__scene-head, .simulation-viewport__toolbar, .simulation-viewport__notice, .simulation-catalog__summary, .simulation-catalog__state, .simulation-catalog__notice, .simulation-catalog__actions, .simulation-project-window__footer-state, .simulation-source-drop > div, .simulation-upload-progress { display: flex; align-items: center; } .simulation-workspace__head, .simulation-workspace__scene-head { justify-content: space-between; gap: 1rem; padding: 0.25rem 0.2rem; } .simulation-workspace__head h2, .simulation-workspace__head p, .simulation-workspace__scene-head h2 { margin: 0; } .simulation-workspace__head h2, .simulation-workspace__scene-head h2 { margin-top: 0.3rem; color: var(--nodedc-text-primary); font-size: 1.18rem; letter-spacing: -0.035em; } .simulation-workspace__head p { max-width: 46rem; margin-top: 0.38rem; color: var(--nodedc-text-muted); font-size: 0.66rem; line-height: 1.5; } .simulation-workspace__scene-head { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) auto; } .simulation-catalog { position: relative; display: grid; min-height: 0; align-content: start; gap: 0.55rem; min-width: 0; } .simulation-catalog__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .simulation-catalog__summary > div { display: grid; gap: 0.28rem; border-radius: 0.85rem; background: rgb(255 255 255 / 0.03); padding: 0.85rem; } .simulation-catalog__summary span { color: var(--nodedc-text-muted); font-size: 0.58rem; } .simulation-catalog__table th { color: var(--nodedc-text-muted); font-size: 0.52rem; font-weight: 680; letter-spacing: 0.075em; text-transform: uppercase; } .simulation-catalog__summary strong { color: var(--nodedc-text-primary); font-size: 1.15rem; } .simulation-catalog__table-wrap { overflow: auto; border-radius: 1rem; background: transparent; } .simulation-catalog__table { width: 100%; min-width: 52rem; border-collapse: separate; border-spacing: 0 0.34rem; } .simulation-catalog__table th, .simulation-catalog__table td { padding: 0.72rem 0.8rem; text-align: left; vertical-align: middle; } .simulation-catalog__table th { padding-top: 0.2rem; padding-bottom: 0.18rem; } .simulation-catalog__table th:first-child, .simulation-catalog__table td:first-child { padding-left: 1rem; } .simulation-catalog__table th:last-child, .simulation-catalog__table td:last-child { width: 6.4rem; min-width: 6.4rem; padding-right: 1rem; } .simulation-catalog__table tbody tr { transition: background var(--nodedc-duration-fast) var(--nodedc-ease-standard); } .simulation-catalog__table tbody td { background: rgb(255 255 255 / 0.025); transition: background var(--nodedc-duration-fast) var(--nodedc-ease-standard); } .simulation-catalog__table tbody tr:hover td { background: rgb(255 255 255 / 0.045); } .simulation-catalog__table tbody td:first-child { border-radius: 0.85rem 0 0 0.85rem; } .simulation-catalog__table tbody td:last-child { border-radius: 0 0.85rem 0.85rem 0; } .simulation-catalog__table td { color: var(--nodedc-text-secondary); font-size: 0.64rem; } .simulation-catalog__table td > small, .simulation-catalog__table td > button small { display: block; margin-top: 0.18rem; color: var(--nodedc-text-muted); font-size: 0.54rem; } .simulation-catalog__table td:first-child > button { display: flex; align-items: center; gap: 0.65rem; min-width: 11rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .simulation-catalog__table td:first-child > button > span:last-child { min-width: 0; } .simulation-catalog__table td:first-child > button strong { display: block; max-width: 20rem; overflow: clip; color: var(--nodedc-text-primary); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; } .simulation-catalog__table td:first-child > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .simulation-catalog__project-icon, .simulation-catalog__empty > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 0.62rem; background: rgb(var(--nodedc-accent-rgb) / 0.07); color: var(--nodedc-text-secondary); } .simulation-catalog__actions { display: flex; justify-content: flex-end; gap: 0.28rem; } .simulation-catalog__progress { display: grid; min-width: 0; gap: 0.26rem; } .simulation-catalog__progress-meta, .simulation-catalog__progress-stage { overflow: hidden; color: var(--nodedc-text-muted); font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; } .simulation-catalog__progress-track { position: relative; overflow: hidden; width: 100%; height: 0.3rem; border-radius: 999px; background: rgb(255 255 255 / 0.08); } .simulation-catalog__progress-track i { position: absolute; inset: 0 auto 0 0; min-width: 0; border-radius: inherit; background: rgb(var(--nodedc-accent-rgb)); transition: width var(--nodedc-duration-fast) var(--nodedc-ease-standard); } .simulation-catalog__progress[data-indeterminate="true"] .simulation-catalog__progress-track i { width: 28% !important; animation: simulation-progress-pulse 1.6s ease-in-out infinite; } .simulation-catalog__progress-stage { font-size: 0.52rem; } .simulation-catalog__state, .simulation-catalog__empty { min-height: 20rem; justify-content: center; gap: 0.75rem; color: var(--nodedc-text-muted); border-radius: 1rem; background: rgb(255 255 255 / 0.025); font-size: 0.65rem; } .simulation-catalog__notice { justify-content: flex-start; gap: 0.55rem; border-radius: 0.85rem; background: rgb(var(--nodedc-danger-rgb) / 0.08); color: var(--nodedc-danger); padding: 0.7rem 0.85rem; font-size: 0.62rem; } .simulation-catalog__drop-overlay { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.55rem; border-radius: 1rem; background: var(--nodedc-canvas); color: var(--nodedc-text-muted); text-align: center; } .simulation-catalog__drop-mark { display: grid; width: 4rem; height: 4rem; margin-bottom: 0.25rem; place-items: center; border-radius: 50%; background: var(--nodedc-glass-control-active); color: var(--nodedc-glass-control-active-text); } .simulation-catalog__drop-overlay strong { color: var(--nodedc-text-primary); font-size: 0.86rem; } .simulation-catalog__drop-overlay span { font-size: 0.64rem; } .simulation-catalog__drop-overlay small { color: var(--nodedc-text-muted); font-size: 0.56rem; } @keyframes simulation-progress-pulse { from { transform: translateX(-105%); } to { transform: translateX(360%); } } @media (prefers-reduced-motion: reduce) { .simulation-catalog__progress[data-indeterminate="true"] .simulation-catalog__progress-track i { animation: none; transform: translateX(0); } } .simulation-catalog__state > div { display: grid; gap: 0.2rem; } .simulation-catalog__state strong, .simulation-catalog__empty strong { color: var(--nodedc-text-primary); } .simulation-catalog__empty { display: flex; flex-direction: column; text-align: center; } .simulation-catalog__empty p { max-width: 30rem; margin: 0; line-height: 1.5; } .simulation-project-window { display: grid; gap: 0.9rem; } .simulation-project-window .nodedc-select-anchor, .simulation-project-window .nodedc-select { width: 100%; } .simulation-source-drop { display: grid; min-height: 12rem; place-items: center; align-content: center; gap: 0.55rem; border: 1px dashed var(--nodedc-glass-outline); border-radius: 0.85rem; background: rgb(255 255 255 / 0.018); color: var(--nodedc-text-muted); text-align: center; transition: border-color var(--nodedc-duration-fast) var(--nodedc-ease-standard), background var(--nodedc-duration-fast) var(--nodedc-ease-standard); } .simulation-source-drop[data-dragging="true"] { border-color: rgb(var(--nodedc-accent-rgb) / 0.72); background: rgb(var(--nodedc-accent-rgb) / 0.08); } .simulation-source-drop > strong { color: var(--nodedc-text-primary); font-size: 0.72rem; } .simulation-source-drop > span { max-width: 30rem; font-size: 0.58rem; } .simulation-source-drop > div { gap: 0.45rem; margin-top: 0.25rem; } .simulation-upload-progress { gap: 0.7rem; border-radius: 0.72rem; background: rgb(255 255 255 / 0.025); padding: 0.7rem; } .simulation-upload-progress > span { position: relative; overflow: hidden; min-width: 12rem; flex: 1 1 auto; height: 0.28rem; border-radius: 999px; background: rgb(255 255 255 / 0.08); } .simulation-upload-progress > span i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: rgb(var(--nodedc-accent-rgb)); } .simulation-upload-progress > div { display: grid; min-width: 9rem; max-width: 13rem; flex: 0 1 13rem; gap: 0.14rem; } .simulation-upload-progress strong { color: var(--nodedc-text-primary); font-size: 0.62rem; } .simulation-upload-progress small { overflow: hidden; color: var(--nodedc-text-muted); font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; } .simulation-project-window__footer-state { gap: 0.4rem; color: var(--nodedc-text-muted); font-size: 0.58rem; } .simulation-project-window__error { margin: 0; border-radius: 0.65rem; background: rgb(var(--nodedc-danger-rgb) / 0.08); color: var(--nodedc-danger); padding: 0.65rem 0.75rem; font-size: 0.6rem; line-height: 1.45; } .simulation-viewport { container-type: inline-size; display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 1rem; background: #07090d; } .simulation-viewport__toolbar { position: sticky; z-index: 10; top: 0; display: grid; grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr); align-items: center; gap: 0.55rem; border-bottom: 1px solid var(--station-hairline); background: var(--nodedc-glass-panel-bg-soft); padding: 0.55rem 0.65rem; } .simulation-viewport__toolbar > div:first-child { display: flex; min-width: 12rem; flex: 1; align-items: center; gap: 0.45rem; } .simulation-viewport__controls { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 0.55rem; } .simulation-viewport__settings-anchor { position: relative; display: grid; place-items: center; } .simulation-viewport__settings { position: absolute; z-index: 12; top: calc(100% + 0.65rem); right: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(21rem, calc(100cqw - 1.3rem)); max-height: min(44rem, calc(100vh - 7rem)); overflow: clip; gap: 0; padding: 0; } .simulation-viewport__settings-head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--nodedc-glass-panel-bg-strong); padding: 0.8rem; box-shadow: 0 0.55rem 1rem rgb(0 0 0 / 0.18); backdrop-filter: blur(18px); } .simulation-viewport__settings-scroll { display: grid; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 0.75rem; padding: 0.75rem 0.8rem 0.8rem; } .simulation-viewport__settings-head > div, .simulation-viewport__settings-group, .simulation-viewport__settings-switches { display: grid; gap: 0.32rem; } .simulation-viewport__settings-head strong { color: var(--nodedc-text-primary); font-size: 0.72rem; } .simulation-viewport__settings span, .simulation-viewport__settings p { color: var(--nodedc-text-muted); font-size: 0.56rem; line-height: 1.45; } .simulation-viewport__settings p { margin: 0; } .simulation-viewport__settings-group { gap: 0.55rem; border-radius: 0.72rem; background: rgb(255 255 255 / 0.035); padding: 0.65rem; } .simulation-viewport__settings-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .simulation-viewport__settings-group-head strong { color: var(--nodedc-text-secondary); font-size: 0.62rem; } .simulation-viewport__settings-switches { gap: 0.55rem; } .simulation-viewport__settings-rotations { display: grid; gap: 0.7rem; } .simulation-viewport__rotation-row { display: grid; gap: 0.4rem; } .simulation-viewport__rotation-row > strong { color: var(--nodedc-text-secondary); font-size: 0.6rem; } .simulation-viewport__rotation-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; } .simulation-viewport__rotation-field { gap: 0.22rem; } .simulation-viewport__rotation-field .nodedc-field__label-row { padding-inline: 0.15rem; } .simulation-viewport__rotation-field .nodedc-field__label { font-size: 0.54rem; } .simulation-viewport__rotation-input { min-height: 1.75rem; padding: 0.2rem 0.55rem; font-size: 0.64rem; text-align: right; } .simulation-viewport__rotation-input:disabled { cursor: not-allowed; opacity: 0.45; } .simulation-viewport__settings-error { border-radius: 0.65rem; background: rgb(var(--nodedc-danger-rgb) / 0.08); color: var(--nodedc-danger) !important; padding: 0.55rem 0.65rem; } .simulation-ugv-settings { gap: 0.7rem; } .simulation-ugv-settings__subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.65rem; margin-top: 0.1rem; padding-top: 0.55rem; border-top: 1px solid rgb(255 255 255 / 0.055); } .simulation-ugv-settings__subhead strong { color: var(--nodedc-text-secondary); font-size: 0.58rem; } .simulation-ugv-settings__save { width: 100%; margin-top: 0.15rem; } .simulation-viewport__toolbar-balance { min-width: 0; } .simulation-viewport__toolbar > div:first-child > span:last-child, .simulation-viewport__notice > span:last-child { color: var(--nodedc-text-muted); font-size: 0.55rem; } .simulation-viewport__stage { position: relative; min-width: 0; min-height: 18rem; overflow: hidden; } .simulation-viewport__stage canvas { display: block; max-width: 100%; width: 100%; height: 100%; outline: none; cursor: grab; touch-action: none; user-select: none; } .simulation-viewport__stage canvas:active { cursor: grabbing; } .simulation-viewport[data-control-mode="ugv"] .simulation-viewport__stage canvas, .simulation-viewport[data-control-mode="ugv"] .simulation-viewport__stage canvas:active { cursor: grab; } .simulation-viewport[data-control-mode="ugv"] .simulation-viewport__stage canvas.is-orbiting, .simulation-viewport[data-control-mode="ugv"] .simulation-viewport__stage canvas.is-orbiting:active { cursor: grabbing; } .simulation-viewport__stage canvas:focus-visible { box-shadow: inset 0 0 0 2px rgb(var(--nodedc-accent-rgb) / 0.7); } .simulation-viewport__state { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.55rem; background: rgb(7 9 13 / 0.84); color: var(--nodedc-text-muted); text-align: center; } .simulation-viewport__state strong { color: var(--nodedc-text-primary); font-size: 0.75rem; } .simulation-viewport__state p { max-width: 34rem; margin: 0; font-size: 0.6rem; } .simulation-viewport__notice { gap: 0.55rem; border-top: 1px solid var(--station-hairline); padding: 0.48rem 0.65rem; } @container (max-width: 68rem) { .simulation-viewport__toolbar { grid-template-columns: 1fr; } .simulation-viewport__controls { flex-wrap: wrap; justify-content: center; } .simulation-viewport__toolbar-balance { display: none; } } .simulation-workspace__processing { display: flex; min-height: 18rem; align-items: center; justify-content: center; gap: 0.8rem; } .simulation-workspace__processing-copy { display: grid; max-width: 40rem; gap: 0.25rem; } .simulation-workspace__processing-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.55rem; } .simulation-workspace__processing strong { color: var(--nodedc-text-primary); font-size: 0.75rem; } .simulation-workspace__processing p { margin: 0; color: var(--nodedc-text-muted); font-size: 0.62rem; line-height: 1.5; } @media (max-width: 900px) { .simulation-catalog__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .simulation-workspace__scene-head { grid-template-columns: 1fr auto; } .simulation-workspace__scene-head > .nodedc-button { grid-column: 1 / -1; justify-self: start; } }