:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #11110f;
  color: #f4f1ea;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #11110f;
}

button,
input,
select {
  font: inherit;
}

.sim-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  min-height: 100vh;
  background: #11110f;
}

.simulator-shell {
  --sim-left-panel-width: clamp(280px, 22vw, 340px);
  --sim-right-panel-width: clamp(340px, 25vw, 420px);
  grid-template-columns:
    var(--sim-left-panel-width)
    6px
    minmax(380px, 1fr)
    6px
    var(--sim-right-panel-width);
}

.builder-shell {
  --sim-left-panel-width: clamp(320px, 24vw, 380px);
  --sim-right-panel-width: clamp(330px, 26vw, 430px);
  grid-template-columns:
    var(--sim-left-panel-width)
    6px
    minmax(380px, 1fr)
    6px
    var(--sim-right-panel-width);
}

.viewport-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 100vh;
  background: #171713;
}

.viewport-header,
.viewport-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-color: #34312a;
  background: rgba(21, 21, 18, 0.92);
}

.viewport-header {
  border-bottom: 1px solid #34312a;
}

.viewport-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.viewport-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.live-status-chip {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 28px;
  max-width: 160px;
  padding: 5px 9px;
  border: 1px solid #4b746d;
  border-radius: 999px;
  background: rgba(31, 49, 45, 0.86);
  color: #dffaf2;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
}

.live-status-chip span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #84e6b8;
  box-shadow: 0 0 0 4px rgba(132, 230, 184, 0.12);
}

.live-status-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-status-chip[data-status="loading"] {
  border-color: #796c47;
  background: rgba(46, 40, 27, 0.9);
  color: #ffe0a3;
}

.live-status-chip[data-status="loading"] span,
.live-status-chip[data-status="unsaved"] span {
  background: #f0a24d;
  box-shadow: 0 0 0 4px rgba(240, 162, 77, 0.16);
}

.live-status-chip[data-status="running"] {
  border-color: #7a5537;
  background: rgba(55, 31, 22, 0.9);
  color: #ffd8bf;
}

.live-status-chip[data-status="running"] span {
  background: #ff6b2d;
  box-shadow: 0 0 0 4px rgba(255, 107, 45, 0.18);
}

.live-status-chip[data-status="paused"] {
  border-color: #65717a;
  background: rgba(35, 42, 46, 0.9);
  color: #d8e7ee;
}

.live-status-chip[data-status="paused"] span {
  background: #9ab7c5;
  box-shadow: 0 0 0 4px rgba(154, 183, 197, 0.14);
}

.live-status-chip[data-status="error"] {
  border-color: #9d5140;
  background: rgba(58, 31, 26, 0.94);
  color: #ffd7cc;
}

.live-status-chip[data-status="error"] span {
  background: #ff765f;
  box-shadow: 0 0 0 4px rgba(255, 118, 95, 0.18);
}

.live-status-chip[data-status="unsaved"] {
  border-color: #9f7535;
  background: rgba(50, 40, 24, 0.92);
  color: #ffe3a7;
}

.camera-preset-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 218px;
  overflow: hidden;
  border: 1px solid #403a2f;
  border-radius: 6px;
  background: rgba(31, 32, 27, 0.92);
}

.camera-preset-control button {
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid #403a2f;
  border-radius: 0;
  background: transparent;
  color: #fff8ec;
  font-size: 0.86rem;
}

.camera-preset-control button:last-child {
  border-right: 0;
}

.camera-preset-control button:hover,
.camera-preset-control button:focus-visible,
.camera-preset-control button.is-active {
  background: #2b3a38;
  color: #fffdf6;
}

.cutaway-toggle.is-active {
  border-color: #f0a24d;
  color: #fff8ec;
  box-shadow: inset 0 0 0 1px rgba(240, 162, 77, 0.3);
}

.floor-view-control {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: min(100%, 430px);
  padding: 6px;
  border: 1px solid #403a2f;
  border-radius: 6px;
  background: rgba(22, 24, 21, 0.9);
}

.floor-view-label {
  min-width: 92px;
  max-width: 150px;
  overflow: hidden;
  color: #fff8ec;
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-switch-row,
.floor-mode-control {
  display: grid;
  overflow: hidden;
  border: 1px solid #403a2f;
  border-radius: 5px;
  background: rgba(16, 17, 15, 0.76);
}

.floor-switch-row {
  grid-template-columns: auto minmax(90px, 1fr) auto;
}

.floor-mode-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 142px;
}

.floor-switch-row button,
.floor-mode-control button {
  min-width: 0;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-right: 1px solid #403a2f;
  border-radius: 0;
  background: transparent;
  color: #fff8ec;
  font-size: 0.76rem;
  font-weight: 900;
}

.floor-switch-row button:last-child,
.floor-mode-control button:last-child {
  border-right: 0;
}

.floor-switch-row button:hover,
.floor-switch-row button:focus-visible,
.floor-mode-control button:hover,
.floor-mode-control button:focus-visible,
.floor-mode-control button.is-active {
  background: #2b3a38;
  color: #fffdf6;
}

.floor-switch-row select {
  width: 100%;
  min-width: 0;
  border: 0;
  border-right: 1px solid #403a2f;
  border-radius: 0;
  background: #11130f;
  color: #f4f1ea;
  padding: 6px 8px;
  font-size: 0.78rem;
  font-weight: 850;
}

.viewport-timer {
  display: grid;
  min-width: 92px;
  padding: 7px 10px;
  border: 1px solid #403a2f;
  border-radius: 6px;
  background: rgba(12, 13, 12, 0.68);
  color: #fff8ec;
  line-height: 1.05;
  text-align: right;
}

.viewport-timer[hidden] {
  display: none;
}

.viewport-timer span {
  color: #b8c8c2;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.viewport-timer strong {
  margin-top: 3px;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.viewport-status {
  border-top: 1px solid #34312a;
  color: #b8c8c2;
  font-size: 0.86rem;
}

.eyebrow {
  margin: 0 0 4px;
  color: #f0a24d;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  color: #fff8ec;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 12px;
  color: #f0a24d;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.viewport-stage {
  position: relative;
  min-width: 0;
  min-height: 420px;
  overflow: hidden;
  background:
    linear-gradient(rgba(17, 17, 15, 0.2), rgba(17, 17, 15, 0.2)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045) 0,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px,
      transparent 64px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 64px
    ),
    #161814;
}

.fire-scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.webgl-fallback {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  width: min(360px, calc(100% - 40px));
  padding: 18px;
  border: 1px solid #6f4130;
  border-radius: 6px;
  background: #221916;
  color: #ffd0b2;
  text-align: center;
  transform: translate(-50%, -50%);
}

.transform-overlay {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 5;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100% - 44px));
  padding: 12px 14px;
  border: 1px solid #f0a24d;
  border-radius: 6px;
  background: rgba(24, 24, 20, 0.92);
  color: #fff8ec;
  font-weight: 800;
  transform: translateX(-50%);
}

.transform-overlay[hidden],
.builder-status[hidden],
.builder-palette[hidden] {
  display: none;
}

.transform-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #34312a;
}

.transform-track span {
  display: block;
  width: 50%;
  height: 100%;
  background: #f0a24d;
}

.side-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 100vh;
  overflow: auto;
  border-left: 1px solid #34312a;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 180px),
    #1d201d;
}

.control-panel {
  border-right: 1px solid #34312a;
  border-left: 0;
}

.builder-control-panel {
  border-right: 1px solid #34312a;
  border-left: 0;
}

.analytics-panel {
  border-left: 1px solid #34312a;
}

.builder-add-panel {
  border-left: 1px solid #34312a;
}

.side-panel-resizer {
  position: relative;
  z-index: 4;
  min-width: 6px;
  cursor: col-resize;
  background:
    linear-gradient(180deg, transparent, rgba(240, 162, 77, 0.16), transparent),
    #141511;
  touch-action: none;
}

.side-panel-resizer::after {
  position: absolute;
  inset: 18px 2px;
  content: "";
  border-left: 1px solid rgba(240, 162, 77, 0.32);
  border-right: 1px solid rgba(240, 162, 77, 0.18);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.side-panel-resizer:hover::after,
.side-panel-resizer:focus-visible::after,
.side-panel-resizer.is-dragging::after {
  opacity: 1;
}

.side-panel-resizer:focus-visible {
  outline: 2px solid rgba(240, 162, 77, 0.8);
  outline-offset: -2px;
}

body.is-resizing-side-panel {
  cursor: col-resize;
  user-select: none;
}

.panel-section {
  padding: 20px 22px;
  border-bottom: 1px solid #34312a;
  background: rgba(255, 255, 255, 0.012);
}

.side-panel > .panel-section:nth-child(odd) {
  background: rgba(255, 255, 255, 0.022);
}

.side-panel > .panel-section:has(.scenario-picker),
.side-panel > .panel-section:has(.simulation-control-grid),
.side-panel > .camera-controls-panel,
.side-panel > .builder-panel {
  border-bottom-color: #453d31;
  box-shadow: inset 3px 0 0 rgba(240, 162, 77, 0.38);
}

.collapsible-panel {
  padding: 0;
}

.collapsible-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.collapsible-panel summary::-webkit-details-marker {
  display: none;
}

.collapsible-panel summary h2 {
  margin: 0;
}

.collapsible-panel summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #585246;
  border-radius: 6px;
  color: #f0a24d;
  font-weight: 900;
}

.collapsible-panel[open] summary::after {
  content: "-";
}

.collapsible-panel summary:hover::after,
.collapsible-panel summary:focus-visible::after {
  border-color: #f0a24d;
}

.collapsible-panel summary:focus-visible {
  outline: 2px solid #f0a24d;
  outline-offset: -2px;
}

.collapsible-body {
  padding: 0 22px 20px;
}

.builder-panel-body {
  display: grid;
  gap: 14px;
}

.panel-section p {
  margin-bottom: 0;
  color: #c9c7bd;
  line-height: 1.48;
}

.status-grid {
  display: grid;
  gap: 12px;
  margin: 0;
}

.status-grid div,
.metric-stack div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.status-grid div {
  min-height: 32px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(88, 82, 70, 0.42);
}

.status-grid div:last-child {
  border-bottom: 0;
}

.status-grid dt,
.metric-stack span {
  color: #f4f1ea;
  font-weight: 700;
}

.status-grid dd,
.metric-stack strong {
  margin: 0;
  color: #b8c8c2;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.status-performance {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #34312a;
}

.status-performance h3 {
  margin: 0;
  color: #f0a24d;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.button-row,
.segmented-control {
  display: grid;
  gap: 8px;
}

.button-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.simulation-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(138px, 1.15fr);
  gap: 8px;
  align-items: stretch;
}

.speed-slider-control {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 38px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #585246;
  border-radius: 6px;
  background: #242620;
  color: #d8d4c9;
}

.speed-slider-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.speed-slider-control output {
  color: #f0a24d;
  font-variant-numeric: tabular-nums;
}

.speed-slider-control input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: #f0a24d;
}

.profile-select-control {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: #d8d4c9;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-select-control select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #585246;
  border-radius: 6px;
  background: #171915;
  color: #f4f1ea;
  padding: 7px 9px;
  cursor: pointer;
}

.profile-select-control select:focus-visible {
  border-color: #f0a24d;
  outline: 2px solid rgba(240, 162, 77, 0.45);
}

.camera-control-stack {
  display: grid;
  gap: 10px;
}

.camera-control-stack .camera-preset-control {
  min-width: 0;
  width: 100%;
}

.camera-control-stack .cutaway-toggle {
  width: 100%;
}

.camera-control-stack .floor-view-control {
  grid-template-columns: 1fr;
  min-width: 0;
  width: 100%;
}

.camera-control-stack .floor-view-label {
  max-width: none;
}

.scenario-button-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.scenario-picker {
  position: relative;
  display: grid;
  gap: 8px;
}

.scenario-picker-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  width: 100%;
  min-height: 62px;
  padding: 9px 11px;
  text-align: left;
}

.scenario-picker-trigger::after {
  grid-row: 1 / span 3;
  grid-column: 2;
  align-self: center;
  content: "v";
  color: #f0a24d;
  font-size: 0.8rem;
  font-weight: 900;
}

.scenario-picker.is-open .scenario-picker-trigger::after {
  content: "^";
}

.scenario-picker-label {
  color: #d8d4c9;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scenario-picker-trigger strong {
  overflow: hidden;
  color: #fff8ec;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-picker-trigger small {
  overflow: hidden;
  color: #b8c8c2;
  font-size: 0.74rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenario-picker-menu {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #585246;
  border-radius: 6px;
  background: #171915;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
}

.scenario-picker-menu[hidden] {
  display: none;
}

.scenario-picker-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.68fr);
  gap: 8px;
}

.scenario-picker-controls label {
  display: grid;
  gap: 5px;
  color: #d8d4c9;
  font-size: 0.76rem;
  font-weight: 900;
}

.scenario-picker-controls input,
.scenario-picker-controls select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #585246;
  border-radius: 6px;
  background: #10110f;
  color: #f4f1ea;
  padding: 7px 9px;
}

.scenario-picker-list {
  display: grid;
  gap: 7px;
  max-height: min(360px, 50vh);
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.scenario-picker-option {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 64px;
  height: auto;
  overflow: visible;
  padding: 8px 9px;
  text-align: left;
}

.scenario-picker-option strong,
.scenario-picker-option small {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.scenario-picker-option small {
  display: block;
  color: #b8c8c2;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
}

.scenario-picker-option strong {
  display: block;
  line-height: 1.18;
}

.scenario-picker-empty {
  margin: 0;
  padding: 9px;
  color: #b8c8c2;
  font-size: 0.84rem;
}

.segmented-control {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.flame-mode-control {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.builder-mode-control {
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  margin-bottom: 12px;
}

.builder-tool-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.builder-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid #585246;
  border-radius: 6px;
  background: #2b2d28;
  color: #f4f1ea;
  cursor: pointer;
  font-weight: 700;
}

.builder-toggle input {
  width: 15px;
  height: 15px;
  accent-color: #f0a24d;
}

.builder-floor-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.builder-floor-panel label {
  display: grid;
  gap: 6px;
  color: #d8d4c9;
  font-size: 0.84rem;
  font-weight: 800;
}

.builder-floor-panel select {
  min-height: 36px;
  border: 1px solid #585246;
  border-radius: 6px;
  background: #171915;
  color: #f4f1ea;
  padding: 7px 9px;
}

.builder-floor-summary {
  margin: 8px 0 0;
  color: #b8c8c2;
  font-size: 0.82rem;
  font-weight: 800;
}

button {
  min-height: 38px;
  border: 1px solid #585246;
  border-radius: 6px;
  background: #2b2d28;
  color: #f4f1ea;
  cursor: pointer;
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled),
button.is-active {
  border-color: #f0a24d;
  background: #36362f;
}

button:disabled {
  color: #81847d;
  cursor: not-allowed;
}

.secondary-button {
  min-width: 106px;
  background: #263a36;
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid #585246;
  border-radius: 6px;
  color: #f4f1ea;
  font-weight: 700;
  padding: 0 12px;
  text-align: center;
  text-decoration: none;
}

.link-button:hover,
.link-button:focus-visible {
  border-color: #f0a24d;
  background: #36362f;
  outline: none;
}

.toggle-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.overlay-control-list {
  display: grid;
  gap: 8px;
}

.overlays-flame-body {
  display: grid;
  gap: 14px;
}

.flame-rendering-block {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #34312a;
}

.flame-rendering-block h3 {
  margin: 0;
  color: #d8d4c9;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overlay-toggle {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #4b463c;
  border-radius: 6px;
  background: #242620;
  color: #d8d4c9;
  cursor: pointer;
  font-weight: 800;
}

.overlay-toggle:hover,
.overlay-toggle:focus-within {
  border-color: #f0a24d;
}

.overlay-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #f0a24d;
}

.overlay-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 3px;
}

.overlay-swatch.heat {
  background: #ff6b1a;
}

.overlay-swatch.smoke {
  background: #77818e;
}

.overlay-swatch.oxygen {
  background: #5ee7ff;
}

.overlay-swatch.object-state {
  background: #ff8a3d;
}

.overlay-swatch.visibility {
  background: #b8c8c2;
}

.overlay-swatch.detector {
  background: #62d8ff;
}

.overlay-swatch.suppression {
  background: #9feaff;
}

.overlay-swatch.spread-path {
  background: #ff9a3d;
}

.overlay-swatch.smoke-flow {
  background: #aeb8bf;
}

.overlay-swatch.detector-active {
  background: #ff4b24;
}

.toggle-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #d8d4c9;
  font-weight: 700;
}

.toggle-list input {
  width: 16px;
  height: 16px;
  accent-color: #f0a24d;
}

.opening-control-list {
  display: grid;
  gap: 14px;
}

.opening-control {
  display: grid;
  gap: 8px;
}

.opening-control.hvac-control {
  padding-top: 8px;
  border-top: 1px solid rgba(184, 200, 194, 0.16);
}

.opening-control header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #d8d4c9;
  font-size: 0.9rem;
  font-weight: 700;
}

.opening-control output {
  color: #b8c8c2;
  font-variant-numeric: tabular-nums;
}

.opening-spread-status {
  color: #8f988e;
  font-size: 0.74rem;
  line-height: 1.25;
}

.opening-spread-status[data-level="active"] {
  color: #b8c8c2;
}

.opening-spread-status[data-level="warning"] {
  color: #f0a24d;
}

.opening-control input[type="range"] {
  width: 100%;
  accent-color: #f0a24d;
}

.performance-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #4b463c;
  border-radius: 6px;
  background: #242620;
}

.performance-panel.is-caution {
  border-color: #a97b35;
  background: #2b261d;
}

.performance-panel.is-heavy {
  border-color: #a54835;
  background: #2d1f1b;
}

.performance-panel p {
  margin: 0;
  color: #d8d4c9;
  font-size: 0.86rem;
}

.performance-grid {
  display: grid;
  gap: 8px;
  margin: 0;
}

.performance-grid div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.performance-grid dt {
  color: #f4f1ea;
  font-size: 0.78rem;
  font-weight: 900;
}

.performance-grid dd {
  margin: 0;
  color: #b8c8c2;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: right;
}

.profiling-details {
  border-top: 1px solid rgba(88, 82, 70, 0.72);
  padding-top: 8px;
}

.profiling-details summary {
  cursor: pointer;
  color: #f0a24d;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  list-style-position: outside;
  text-transform: uppercase;
}

.profiling-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: #d8d4c9;
  font-size: 0.82rem;
  font-weight: 800;
}

.profiling-toggle input {
  accent-color: #f0a24d;
}

.profiling-grid {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
}

.profiling-grid div {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 8px;
  align-items: baseline;
}

.profiling-grid dt {
  color: #f4f1ea;
  font-size: 0.72rem;
  font-weight: 850;
}

.profiling-grid dd {
  margin: 0;
  color: #b8c8c2;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

#profiling-summary {
  margin-top: 8px;
  color: #b8c8c2;
  font-size: 0.76rem;
}

.builder-panel {
  display: grid;
  gap: 14px;
}

.builder-status {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #4b463c;
  border-radius: 6px;
  background: #242620;
  color: #b8c8c2;
  font-size: 0.86rem;
  line-height: 1.35;
}

.builder-status.is-error {
  border-color: #a54835;
  background: #2d1f1b;
  color: #ffd3c4;
}

.builder-status.is-success {
  border-color: #53875e;
  background: #1f2c22;
  color: #c6ebcd;
}

.unsaved-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid #a97b35;
  border-radius: 6px;
  background: #2b261d;
  color: #ffd78a;
  font-size: 0.8rem;
  font-weight: 900;
}

.unsaved-indicator[hidden] {
  display: none;
}

.field-stack,
.saved-scenario-row,
.builder-editor {
  display: grid;
  gap: 10px;
}

.field-stack label,
.saved-scenario-row label,
.builder-editor label {
  display: grid;
  gap: 6px;
  color: #d8d4c9;
  font-size: 0.84rem;
  font-weight: 800;
}

.field-stack input,
.saved-scenario-row select,
.builder-editor input,
.builder-editor select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #585246;
  border-radius: 6px;
  background: #171915;
  color: #f4f1ea;
  padding: 7px 9px;
}

.builder-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.saved-scenario-row .builder-actions {
  grid-template-columns: minmax(0, 1fr);
}

.builder-list {
  display: grid;
  gap: 8px;
  max-height: 184px;
  overflow: auto;
}

.builder-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 9px;
  text-align: left;
}

.builder-list button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-list small {
  color: #b8c8c2;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.builder-editor {
  padding-top: 4px;
}

.builder-properties {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #4b463c;
  border-radius: 6px;
  background: #242620;
}

.builder-properties header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.builder-properties h3 {
  margin: 0;
  color: #fff8ec;
  font-size: 0.95rem;
}

.builder-properties button {
  min-height: 32px;
}

.builder-delete-button {
  border-color: #8a4c3e;
  background: #34211e;
  color: #ffd3c4;
}

.builder-add-button {
  width: 100%;
}

.builder-palette {
  display: grid;
  gap: 12px;
}

.builder-palette[hidden] {
  display: none;
}

.builder-palette-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.56fr);
  gap: 10px;
}

.builder-palette-tools label {
  display: grid;
  gap: 6px;
  color: #d8d4c9;
  font-size: 0.82rem;
  font-weight: 800;
}

.builder-palette-tools input,
.builder-palette-tools select {
  min-height: 34px;
  border: 1px solid #585246;
  border-radius: 6px;
  background: #171915;
  color: #f4f1ea;
  padding: 7px 9px;
}

.builder-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 330px;
  overflow: auto;
}

.palette-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 9px;
  min-height: 132px;
  padding: 10px;
  border: 1px solid #4b463c;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.08)),
    #242620;
  color: #f4f1ea;
  text-align: left;
  cursor: grab;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.palette-card:active {
  cursor: grabbing;
}

.palette-card:hover,
.palette-card:focus-visible {
  border-color: #f0a24d;
  background:
    linear-gradient(180deg, rgba(240, 162, 77, 0.08), rgba(0, 0, 0, 0.06)),
    #292a24;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(240, 162, 77, 0.18);
  outline: none;
}

.palette-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 74px;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.12), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent),
    #171915;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.palette-icon {
  position: relative;
  width: 44px;
  height: 38px;
}

.palette-thumb {
  display: block;
  width: min(100%, 104px);
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34));
  pointer-events: none;
}

.palette-icon::before,
.palette-icon::after {
  position: absolute;
  content: "";
  display: block;
}

.palette-icon.sofa::before {
  inset: 14px 3px 7px;
  border-radius: 4px;
  background: #9b4d64;
}

.palette-icon.sofa::after {
  inset: 6px 8px 17px;
  border-radius: 5px 5px 2px 2px;
  background: #b7677c;
}

.palette-icon.table::before {
  inset: 8px 3px 20px;
  border-radius: 3px;
  background: #a86b35;
}

.palette-icon.table::after {
  inset: 20px 9px 4px;
  border-left: 5px solid #7c4b25;
  border-right: 5px solid #7c4b25;
}

.palette-icon.chair::before {
  inset: 6px 10px 22px;
  border-radius: 3px;
  background: #8f6a3f;
}

.palette-icon.chair::after {
  inset: 17px 8px 5px;
  border-top: 11px solid #a97942;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.palette-icon.box::before {
  inset: 8px 7px 5px;
  background: #b98243;
  clip-path: polygon(18% 0, 100% 16%, 82% 100%, 0 82%);
}

.palette-icon.tall::before {
  inset: 4px 10px 3px;
  border-radius: 3px;
  background: #806142;
}

.palette-icon.soft::before {
  inset: 8px 4px 6px;
  border-radius: 9px 9px 4px 4px;
  background: #6f8a75;
}

.palette-icon.flat::before {
  inset: 23px 4px 7px;
  border-radius: 3px;
  background: #b24f4c;
}

.palette-icon.screen::before {
  inset: 5px 5px 12px;
  border: 3px solid #2f3f42;
  border-radius: 3px;
  background: #72b8bf;
}

.palette-icon.screen::after {
  inset: 29px 16px 4px;
  background: #2f3f42;
}

.palette-icon.cylinder::before {
  inset: 5px 10px 4px;
  border-radius: 50% / 12%;
  background: #8f9a9a;
}

.palette-icon.block::before {
  inset: 8px 7px 5px;
  background: #8f8b80;
  clip-path: polygon(18% 0, 100% 16%, 82% 100%, 0 82%);
}

.palette-icon.stairs::before {
  inset: 7px 5px 5px;
  background: repeating-linear-gradient(
    135deg,
    #c8b274 0 7px,
    #7e7047 7px 10px
  );
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 78% 0, 78% 20%, 56% 20%, 56% 40%, 34% 40%, 34% 62%, 12% 62%, 12% 82%, 0 82%);
}

.palette-icon.stairs::after {
  inset: 4px 8px auto auto;
  width: 20px;
  height: 24px;
  border-left: 2px solid rgba(255, 246, 214, 0.72);
  transform: skewY(-22deg);
}

.palette-icon.opening::before {
  inset: 5px 13px 3px;
  border: 3px solid #a56a42;
  border-radius: 3px;
  background: #33241e;
}

.palette-icon.window::before {
  inset: 9px 5px 8px;
  border: 3px solid #7ec8db;
  border-radius: 3px;
  background: rgba(126, 200, 219, 0.32);
}

.palette-icon.vent::before {
  inset: 13px 4px 11px;
  border: 3px solid #8ad2ef;
  border-radius: 999px;
  background: rgba(138, 210, 239, 0.25);
}

.palette-icon.flame::before {
  inset: 4px 14px 5px;
  border-radius: 70% 20% 55% 45%;
  background: linear-gradient(#ffe89b, #ff8a22 52%, #d9411d);
  transform: rotate(8deg);
}

.palette-icon.detector::before {
  inset: 8px 7px 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #95d7df 0 18%, transparent 20%),
    radial-gradient(circle at 50% 50%, transparent 0 52%, #596765 54% 63%, transparent 66%),
    #f1ede2;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    0 6px 10px rgba(0, 0, 0, 0.26);
}

.palette-icon.detector::after {
  inset: 18px 18px auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #62d8ff;
}

.palette-icon.sprinkler::before {
  inset: 7px 8px 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 58%, #9feaff 0 16%, transparent 18%),
    linear-gradient(180deg, #d7e8e8 0 52%, #8fb7bd 54% 100%);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    0 6px 10px rgba(0, 0, 0, 0.26);
}

.palette-icon.sprinkler::after {
  inset: 26px 7px auto;
  height: 14px;
  background: repeating-linear-gradient(
    90deg,
    rgba(159, 234, 255, 0.92) 0 2px,
    transparent 2px 7px
  );
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
}

.palette-card-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.palette-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b8c8c2;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.palette-drag-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 6px;
  border: 1px solid rgba(240, 162, 77, 0.38);
  border-radius: 999px;
  background: rgba(20, 21, 18, 0.72);
  color: #ffd99e;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
}

.palette-card:hover .palette-drag-hint,
.palette-card:focus-visible .palette-drag-hint {
  opacity: 1;
}

.builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metric-stack {
  display: grid;
  gap: 12px;
}

.metric-stack div {
  min-height: 34px;
  padding: 0 0 10px;
  border-bottom: 1px solid #34312a;
}

.metric-stack div:last-child {
  border-bottom: 0;
}

.chart-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.chart-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #4b463c;
  border-radius: 6px;
  background: #242620;
}

.chart-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #f4f1ea;
  font-size: 0.82rem;
  font-weight: 900;
}

.chart-card output {
  color: #b8c8c2;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.chart-card canvas {
  display: block;
  width: 100%;
  height: 74px;
  border: 1px solid #34312a;
  border-radius: 5px;
  background: #171915;
}

.app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 17, 15, 0.68);
}

.app-confirm-dialog {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid #a97b35;
  border-radius: 8px;
  background: #1f211e;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}

.app-confirm-dialog h2 {
  margin: 0;
}

.app-confirm-dialog p {
  margin: 0;
  color: #d8d4c9;
  line-height: 1.45;
}

.app-confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.danger-action {
  border-color: #a54835;
  background: #34211e;
  color: #ffd3c4;
}

.event-log {
  display: grid;
  gap: 10px;
  max-height: 180px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.event-log > li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  min-height: 34px;
  padding: 6px 0;
  border-bottom: 1px solid #34312a;
  color: #d8d4c9;
  line-height: 1.35;
}

.event-log > li:last-child {
  border-bottom: 0;
}

.event-log > li.is-major-event {
  color: #fff2de;
}

.event-log > li.event-log-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px 0 10px;
}

.event-group-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #fff2de;
  font-size: 0.82rem;
  font-weight: 900;
}

.event-group-heading small {
  color: #9ea59c;
  font-size: 0.74rem;
  font-weight: 800;
}

.event-group-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-group-list li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  min-height: 30px;
  color: #d8d4c9;
  line-height: 1.35;
}

.event-group-list li.is-major-event {
  color: #fff2de;
}

.event-log time {
  color: #f0a24d;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.event-message {
  min-width: 0;
}

.event-explanation-link {
  min-height: 28px;
  padding: 0 8px;
  color: #ffd0a1;
  font-size: 0.76rem;
  font-weight: 900;
}

.teaching-tools-grid {
  display: grid;
  gap: 12px;
}

.teaching-tool-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #4b463c;
  border-radius: 6px;
  background: #242620;
}

.teaching-tool-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.teaching-tool-card h3 {
  margin: 0;
  color: #f4f1ea;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.room-status-table-wrap {
  overflow: auto;
}

.room-status-table {
  width: 100%;
  border-collapse: collapse;
  color: #d8d4c9;
  font-size: 0.78rem;
}

.room-status-table th,
.room-status-table td {
  padding: 6px 5px;
  border-bottom: 1px solid rgba(88, 82, 70, 0.45);
  text-align: left;
  vertical-align: top;
}

.room-status-table th {
  color: #f0a24d;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.room-status-table td:not(:first-child) {
  white-space: nowrap;
}

.room-status-table small {
  display: block;
  color: #9ea59c;
  font-size: 0.68rem;
  font-weight: 800;
}

.condition-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid #4b463c;
  border-radius: 999px;
  background: #2b2d28;
  color: #c9c7bd;
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.condition-pill[data-level="watch"] {
  border-color: #b5793c;
  color: #f7bd7a;
}

.condition-pill[data-level="hazard"] {
  border-color: #ff6b2d;
  color: #ffd1b8;
}

.floor-status-summary,
.spread-path-summary,
.selection-explanation {
  display: grid;
  gap: 8px;
}

.floor-summary-row,
.spread-path-row,
.selection-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 28px;
  color: #d8d4c9;
  font-size: 0.82rem;
}

.floor-summary-row strong,
.spread-path-row strong,
.selection-metric-row strong {
  overflow-wrap: anywhere;
}

.floor-summary-row span,
.spread-path-row span,
.selection-metric-row span,
.selection-metric-row dd {
  color: #9ea59c;
  font-size: 0.74rem;
  font-weight: 800;
  text-align: right;
}

.selection-metric-row dt,
.selection-metric-row dd {
  margin: 0;
}

.spread-path-row {
  align-items: start;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(88, 82, 70, 0.4);
}

.spread-path-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.spread-path-row small,
.selection-explanation small {
  display: block;
  margin-top: 2px;
  color: #b8c8c2;
  font-size: 0.72rem;
  line-height: 1.28;
}

.detector-timeline {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detector-timeline li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  color: #d8d4c9;
  font-size: 0.8rem;
}

.detector-timeline time {
  color: #f0a24d;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.detector-state {
  color: #9ea59c;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.detector-state[data-state="alarm"] {
  color: #ffb294;
}

.selection-explanation h4 {
  margin: 0;
  color: #fff2de;
  font-size: 0.92rem;
}

.selection-explanation p {
  margin: 0;
  color: #c9c7bd;
  font-size: 0.82rem;
  line-height: 1.38;
}

.selection-metric-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.teaching-text-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
}

.teaching-text-button:hover,
.teaching-text-button:focus-visible {
  color: #ffd0a1;
  text-decoration-color: currentColor;
  outline: 0;
}

.object-state-list {
  display: grid;
  gap: 8px;
}

.object-state-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 30px;
  color: #d8d4c9;
  font-size: 0.9rem;
}

.state-pill {
  min-width: 84px;
  padding: 4px 8px;
  border: 1px solid #4b463c;
  border-radius: 999px;
  background: #2b2d28;
  color: #c9c7bd;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  text-transform: capitalize;
}

.state-pill.heating {
  border-color: #b5793c;
  color: #f7bd7a;
}

.state-pill.pyrolyzing {
  border-color: #e08a32;
  color: #ffcf99;
}

.state-pill.burning {
  border-color: #ff6b2d;
  color: #ffd1b8;
}

.state-pill.decaying {
  border-color: #8c7662;
  color: #c7b8a9;
}

.state-pill.controlled {
  border-color: #68d2e8;
  color: #b8f1ff;
}

.state-pill.extinguished {
  border-color: #8cb7c1;
  color: #d4eef2;
}

.state-pill.burnedOut {
  border-color: #555;
  color: #a8a29a;
}

.explanation-panel {
  display: grid;
  gap: 10px;
}

.empty-state {
  margin: 0;
  color: #9ea59c;
  font-size: 0.9rem;
}

.phenomenon-explanation {
  border: 1px solid #4b463c;
  border-radius: 6px;
  background: #242620;
}

.phenomenon-explanation[open] {
  border-color: #c7813a;
}

.phenomenon-explanation.is-focused {
  box-shadow: 0 0 0 2px rgba(240, 162, 77, 0.42);
}

.phenomenon-explanation summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  color: #fff2de;
  cursor: pointer;
  font-weight: 800;
}

.phenomenon-explanation summary::marker {
  color: #f0a24d;
}

.phenomenon-explanation time {
  color: #f0a24d;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.phenomenon-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  color: #d8d4c9;
  font-size: 0.9rem;
  line-height: 1.42;
}

.phenomenon-badge {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid #9f5d30;
  border-radius: 999px;
  background: #3a261d;
  color: #ffc796;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.phenomenon-factors {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phenomenon-factors li {
  color: #b8c8c2;
}

.safety-note {
  margin: 0;
  color: #ffd8bf;
}

@media (max-width: 1320px) {
  .simulator-shell {
    --sim-left-panel-width: clamp(270px, 25vw, 320px);
    --sim-right-panel-width: clamp(310px, 29vw, 360px);
    grid-template-columns:
      var(--sim-left-panel-width)
      6px
      minmax(340px, 1fr)
      6px
      var(--sim-right-panel-width);
  }

  .builder-shell {
    --sim-left-panel-width: clamp(300px, 27vw, 350px);
    --sim-right-panel-width: clamp(310px, 29vw, 370px);
    grid-template-columns:
      var(--sim-left-panel-width)
      6px
      minmax(340px, 1fr)
      6px
      var(--sim-right-panel-width);
  }
}

@media (max-width: 980px) {
  body {
    overflow: auto;
  }

  .sim-shell {
    grid-template-columns: 1fr;
  }

  .simulator-shell {
    grid-template-columns: 1fr;
  }

  .builder-shell {
    grid-template-columns: 1fr;
  }

  .viewport-panel {
    min-height: 62vh;
  }

  .simulator-shell .viewport-panel {
    order: 1;
  }

  .builder-shell .viewport-panel {
    order: 1;
  }

  .viewport-stage {
    min-height: 460px;
  }

  .side-panel {
    max-height: none;
    border-top: 1px solid #34312a;
    border-left: 0;
  }

  .simulator-shell .control-panel {
    order: 2;
    border-right: 0;
  }

  .simulator-shell .analytics-panel {
    order: 3;
    border-left: 0;
  }

  .builder-shell .builder-control-panel {
    order: 2;
    border-right: 0;
  }

  .builder-shell .builder-add-panel {
    order: 3;
    border-left: 0;
  }

  .side-panel-resizer {
    display: none;
  }
}

@media (max-width: 620px) {
  .viewport-header,
  .viewport-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .viewport-actions {
    width: 100%;
    justify-content: stretch;
  }

  .viewport-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .live-status-chip {
    max-width: 100%;
  }

  .camera-preset-control {
    flex: 1 1 100%;
    min-width: 0;
  }

  .camera-preset-control button {
    padding-inline: 8px;
  }

  .floor-view-control {
    flex: 1 1 100%;
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .floor-view-label {
    max-width: none;
  }

  .viewport-actions .secondary-button {
    flex: 1 1 150px;
  }

  .viewport-stage {
    min-height: 360px;
  }

  .button-row,
  .simulation-control-grid,
  .segmented-control,
  .toggle-list,
  .builder-grid,
  .builder-tool-row,
  .builder-palette-tools,
  .builder-palette-grid,
  .builder-actions,
  .saved-scenario-row .builder-actions {
    grid-template-columns: 1fr;
  }

}