:root {
  --tf-editor-ui-scale: 0.8;
  --panel: #101c28;
  --line: #263747;
  --text: #f3f7fb;
  --muted: #94a3b4;
  --blue: #1779e8;
  --green: #22d574;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #07111a;
  color: var(--text);
  font:
    14px/1.25 Arial,
    Helvetica,
    sans-serif;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  border: 0;
}
.studio-shell {
  display: grid;
  grid-template-columns: 280px minmax(560px, 1fr) 318px;
  grid-template-rows: 66px minmax(350px, 1fr) 228px 35px;
  /*
   * Phase 10.0.2: render the editor at the same apparent size as Chrome's
   * 80% browser zoom while leaving the browser itself at 100%.
   * Chrome's layout-aware `zoom` keeps pointer coordinates, form controls,
   * canvas sizing and panel scrolling aligned, unlike a transform-only scale.
   */
  zoom: var(--tf-editor-ui-scale);
  width: 125vw;
  height: 125vh;
  min-width: 1100px;
  background: #09131e;
}
.panel {
  background: linear-gradient(180deg, #111e2a, #0d1924);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px #07101a inset;
}
.topbar {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 330px auto 1fr auto auto 54px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid #263746;
  background: linear-gradient(180deg, #111c27, #0d1721);
  box-shadow: 0 2px 14px #02070c99;
  z-index: 5;
}
.brand {
  display: flex;
  align-items: center;
  gap: 15px;
}
.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #1e6ec0;
  border-radius: 9px;
  background: #050b13;
  box-shadow: 0 0 12px #147ddd66, inset 0 0 10px #0d4e9144;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand strong {
  display: block;
  font-size: 19px;
  letter-spacing: -0.3px;
}
.brand small {
  display: block;
  color: #9aa9b8;
  margin-top: 5px;
}
.file-actions,
.mode-tabs {
  display: flex;
  gap: 5px;
}
.tool-button,
.mode,
.play-button {
  height: 40px;
  border: 1px solid #1d2c3a;
  border-radius: 5px;
  background: #162331;
  padding: 0 13px;
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}
.tool-button:hover:not(:disabled),
.mode:hover:not(:disabled),
.play-button:hover {
  background: #1b2d40;
}
.tool-button:disabled,
.mode:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chevron {
  font-size: 11px;
  color: #8fa0b0;
}
.mode-tabs {
  justify-content: center;
}
.mode {
  border-radius: 0;
  background: #111d29;
  padding: 0 17px;
}
.mode:first-child {
  border-radius: 5px 0 0 5px;
}
.mode:last-child {
  border-radius: 0 5px 5px 0;
}
.mode.active {
  background: #114884;
  border-color: #1262ad;
  color: #a9d6ff;
}
.play-button {
  justify-content: center;
  min-width: 88px;
  font-weight: bold;
}
.play-button.is-playing {
  background: #713738;
  border-color: #b44b4b;
}
.save-state {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #1d2b37;
  border-radius: 17px;
  background: #101b25;
  font-size: 10px;
  white-space: nowrap;
}
.save-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.save-state.pending i {
  background: #eda83c;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #21518c;
  border: 1px solid #2a67ab;
  font-weight: bold;
}
.world-panel {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  margin-left: 5px;
}
.panel-title {
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.tree-search {
  display: grid;
  grid-template-columns: 22px 1fr 32px 32px;
  align-items: center;
  margin: 8px 10px;
  border: 1px solid #2a3a49;
  border-radius: 4px;
  height: 33px;
  color: #8798a8;
}
.tree-search input {
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
}
.tree-search button {
  height: 31px;
  background: transparent;
  font-size: 18px;
}
.tree-root {
  padding: 7px 14px;
  color: #dbe5ee;
}
.tree-root span {
  padding: 0 7px;
}
.tree-list {
  overflow: auto;
  flex: 1;
}
.tree-row {
  width: 100%;
  height: 31px;
  display: grid;
  grid-template-columns: 17px 22px 1fr 22px;
  align-items: center;
  text-align: left;
  background: transparent;
  color: #dbe3eb;
  cursor: pointer;
}
.tree-row:hover {
  background: #172b3c;
}
.tree-row.selected {
  background: linear-gradient(90deg, #124d91, #173f70);
  color: #fff;
}
.branch {
  color: #aab7c4;
}
.node-glyph {
  color: #bdc9d4;
}
.eye {
  color: #c7d3df;
}
.panel-bottom {
  height: 36px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 20px;
  padding: 0 14px;
  align-items: center;
}
.panel-bottom button {
  background: none;
  color: #a3b2c0;
}
.viewport {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  overflow: hidden;
  border: 1px solid #2a3c4c;
  background: #183957;
  touch-action: none;
  cursor: grab;
}
.viewport:active {
  cursor: grabbing;
}
.viewport canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.viewport-toolbar {
  position: absolute;
  top: 10px;
  display: flex;
  gap: 4px;
}
.viewport-toolbar.left {
  left: 10px;
}
.viewport-toolbar.right {
  right: 10px;
}
.viewport-toolbar button {
  height: 38px;
  min-width: 39px;
  padding: 0 13px;
  border: 1px solid #2a455e;
  border-radius: 4px;
  background: #172c42dd;
  box-shadow: 0 1px 5px #0005;
}
.viewport-toolbar button:disabled {
  opacity: 0.42;
}
.gizmo {
  position: absolute;
  left: 50%;
  top: 67%;
  width: 110px;
  height: 100px;
  transform: translate(-50%, -50%);
}
.gizmo span {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 3px;
  width: 75px;
  transform-origin: 0 50%;
  box-shadow: 0 0 2px #000;
}
.gizmo span:after {
  content: "";
  position: absolute;
  right: -1px;
  top: -5px;
  border: 6px solid transparent;
  border-left: 12px solid currentColor;
}
.gizmo .g-x {
  color: #fa3942;
  background: #fa3942;
  transform: rotate(165deg);
}
.gizmo .g-z {
  color: #168cff;
  background: #168cff;
  transform: rotate(10deg);
}
.gizmo .g-y {
  color: #4dde67;
  background: #4dde67;
  width: 78px;
  transform: rotate(-90deg);
}
.gizmo i {
  position: absolute;
  left: 43px;
  top: 45px;
  width: 18px;
  height: 18px;
  background: #56718c;
  border: 1px solid #8cb7d8;
}
.axis-widget {
  position: absolute;
  left: 39px;
  bottom: 34px;
  width: 55px;
  height: 55px;
  color: #52de62;
}
.axis-widget:before,
.axis-widget:after {
  content: "";
  position: absolute;
  left: 13px;
  bottom: 10px;
  width: 39px;
  height: 2px;
  background: #e84242;
  transform: rotate(-9deg);
  transform-origin: left;
}
.axis-widget:after {
  background: #1789ef;
  transform: rotate(50deg);
}
.axis-widget b {
  position: absolute;
  top: 0;
  left: 10px;
}
.axis-x {
  position: absolute;
  right: -3px;
  bottom: 12px;
  color: #ef4b4b;
}
.axis-z {
  position: absolute;
  right: 9px;
  bottom: -7px;
  color: #2c9bff;
}
.grid-label {
  position: absolute;
  bottom: 10px;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}
.grid-label.origin {
  left: 49%;
}
.grid-label.left50 {
  left: 27%;
}
.grid-label.right50 {
  right: 27%;
}
.phase-chip {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #a9d4ff;
  background: #0d345eaa;
  border: 1px solid #2c6da8;
  padding: 5px 8px;
  border-radius: 3px;
}
.webgl-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0c1924;
  color: #f0a0a0;
  padding: 30px;
}
.webgl-error[hidden] {
  display: none;
}
.inspector {
  grid-column: 3;
  grid-row: 2/4;
  margin-right: 5px;
  overflow-y: auto;
}
.inspector-head {
  display: grid;
  grid-template-columns: 28px 1fr 22px;
  align-items: center;
  height: 47px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.cube-icon {
  font-size: 22px;
  color: #c0cede;
}
.inspector-head input {
  accent-color: #1d86ed;
  width: 18px;
  height: 18px;
}
.type-row,
.select-row {
  display: grid;
  grid-template-columns: 115px 1fr;
  align-items: center;
  padding: 8px 15px;
}
.type-row {
  border-bottom: 1px solid var(--line);
  height: 51px;
}
.type-row select,
.select-row select {
  height: 32px;
  border: 1px solid #2b3b49;
  border-radius: 4px;
  background: #13202c;
  padding: 0 10px;
}
.inspector-section {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.inspector-section h3 {
  font-size: 14px;
  margin: 0;
  padding: 7px 14px;
}
.inspector-section h3 span {
  margin-left: 8px;
}
.control-row {
  display: grid;
  grid-template-columns: 115px 64px 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 15px;
}
.number-box {
  height: 31px;
  display: flex;
  align-items: center;
  border: 1px solid #2b3c4a;
  border-radius: 4px;
  background: #111e2a;
  overflow: hidden;
}
.number-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: right;
  outline: none;
}
.number-box em {
  font-style: normal;
  color: #aab6c1;
  padding-right: 6px;
}
.range {
  appearance: none;
  height: 3px;
  background: #34495b;
  border-radius: 2px;
  accent-color: #56a9fc;
}
.range::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 13px;
  background: #9bcaff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d9edff;
}
.color-row {
  display: grid;
  grid-template-columns: 115px 62px 1fr;
  align-items: center;
  padding: 5px 15px;
}
.color-row input {
  width: 62px;
  height: 30px;
  padding: 0;
  border: 1px solid #33495b;
  background: none;
}
.color-row b {
  font-size: 10px;
  color: #91a2b2;
  padding-left: 8px;
}
.neutral-module {
  margin: 14px;
  padding: 22px 15px;
  text-align: center;
  border: 1px dashed #34495b;
  border-radius: 5px;
  background: #0c1721;
  color: #92a4b4;
}
.neutral-module[hidden] {
  display: none;
}
.neutral-module > span {
  display: block;
  font-size: 34px;
  color: #6384a0;
}
.neutral-module b {
  display: block;
  color: #d7e2ec;
  margin: 8px;
}
.neutral-module p {
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}
.asset-shelf {
  grid-column: 1/3;
  grid-row: 3;
  margin: 5px 0 5px 5px;
  padding: 0 12px;
}
.asset-head {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 16px;
}
.asset-head label {
  flex: 1;
  height: 31px;
  border: 1px solid #263b4c;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: #8698a9;
}
.asset-head input {
  width: 100%;
  background: none;
  border: 0;
  outline: none;
}
.asset-grid {
  height: 165px;
  display: grid;
  grid-template-columns: repeat(8, minmax(118px, 1fr));
  gap: 10px;
  position: relative;
}
.asset-card {
  min-width: 0;
  position: relative;
  text-align: left;
  padding: 0 9px 7px;
  border: 1px solid #293b4b;
  border-radius: 5px;
  background: #111d28;
  overflow: hidden;
}
.asset-card:hover:not(:disabled) {
  border-color: #2d86dc;
  transform: translateY(-1px);
}
.asset-card:disabled {
  cursor: not-allowed;
}
.asset-card.future {
  opacity: 0.68;
  filter: saturate(0.72);
}
.asset-art {
  height: 92px;
  margin: 0 -9px 8px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#183d62, #647a7a 70%, #26342c 71%);
}
.asset-art:after {
  content: "";
  position: absolute;
  left: 12%;
  right: 8%;
  bottom: 13%;
  height: 43%;
  background: #85909a;
  clip-path: polygon(
    0 100%,
    22% 48%,
    35% 75%,
    51% 13%,
    66% 67%,
    80% 42%,
    100% 100%
  );
  filter: drop-shadow(0 -2px 2px #ced8df);
}
.asset-art.sky:before {
  content: "";
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: white;
  left: 27px;
  top: 25px;
  box-shadow: 0 0 22px 9px #fff;
}
.asset-art.sky:after {
  background: #405d4e;
  height: 14%;
  bottom: 0;
}
.asset-art.chunks,
.asset-art.wire,
.asset-art.orb,
.asset-art.sphere,
.asset-art.blocks,
.asset-art.zone {
  background: radial-gradient(circle at 50% 50%, #6945a8, #182334 42%, #111b25);
}
.asset-art.chunks:after {
  background: linear-gradient(135deg, #426697, #53a16b);
  clip-path: polygon(
    15% 35%,
    40% 18%,
    58% 31%,
    78% 17%,
    90% 57%,
    55% 85%,
    12% 70%
  );
}
.asset-art.wire:after {
  background: none;
  border: 1px solid #aab7c3;
  clip-path: polygon(13% 72%, 32% 20%, 82% 75%);
}
.asset-art.orb:after {
  left: 36%;
  right: 36%;
  bottom: 26%;
  height: 40%;
  border-radius: 50%;
  background: #eecfff;
  box-shadow: 0 0 22px 10px #923df2;
}
.asset-art.sphere:after {
  left: 35%;
  right: 35%;
  bottom: 18%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #898989, #25292b 58%, #080b0d);
}
.asset-art.blocks:after {
  background: #7c8184;
  clip-path: polygon(
    20% 48%,
    45% 34%,
    45% 8%,
    70% 21%,
    70% 48%,
    92% 61%,
    68% 82%,
    46% 70%,
    23% 83%,
    7% 66%
  );
}
.asset-art.zone:after {
  background: transparent;
  border: 2px dashed #c0cbd3;
  clip-path: none;
  left: 31%;
  right: 31%;
  bottom: 19%;
  height: 58%;
}
.asset-card b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.asset-card p {
  font-size: 11px;
  line-height: 1.35;
  color: #b5c0ca;
  margin: 5px 0 0;
}
.phase-lock {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 4px;
  background: #0a121acc;
  border: 1px solid #5b6b78;
  border-radius: 3px;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.statusbar {
  grid-column: 1/-1;
  grid-row: 4;
  display: flex;
  align-items: center;
  gap: 42px;
  padding: 0 25px;
  border-top: 1px solid #263846;
  background: #07131d;
  font-size: 12px;
}
.statusbar b {
  color: #28d778;
  font-weight: normal;
}
.statusbar b.muted,
.statusbar em {
  color: #a9b5c1;
  font-style: normal;
}
.statusbar .selection {
  margin-left: auto;
}
.statusbar .selection b {
  color: #168bfa;
  margin-left: 5px;
}
@media (max-width: 1380px) {
  .studio-shell {
    grid-template-columns: 240px minmax(520px, 1fr) 290px;
  }
  .topbar {
    grid-template-columns: 280px auto 1fr auto 43px;
  }
  .brand strong {
    font-size: 16px;
  }
  .save-state {
    display: none;
  }
  .mode {
    padding: 0 10px;
  }
  .tool-button {
    padding: 0 8px;
  }
  .asset-grid {
    grid-template-columns: repeat(6, minmax(115px, 1fr));
  }
  .asset-card:nth-of-type(n + 7) {
    display: none;
  }
  .control-row {
    grid-template-columns: 103px 58px 1fr;
  }
  .type-row,
  .select-row {
    grid-template-columns: 103px 1fr;
  }
}
@media (max-height: 760px) {
  .studio-shell {
    grid-template-rows: 58px minmax(320px, 1fr) 190px 31px;
  }
  .topbar {
    height: 58px;
  }
  .asset-grid {
    height: 129px;
  }
  .asset-art {
    height: 62px;
  }
  .asset-card p {
    display: none;
  }
  .tree-row {
    height: 27px;
  }
  .inspector-section {
    padding: 4px 0;
  }
  .control-row {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .asset-head {
    height: 42px;
  }
}
.terrain-tools {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px;
  border: 1px solid #2e536f;
  border-radius: 6px;
  background: #0b1a27dd;
  box-shadow: 0 3px 14px #0008;
}
.terrain-tools[hidden] {
  display: none;
}
.terrain-tools > span {
  font-size: 9px;
  color: #9fb3c4;
  letter-spacing: 0.04em;
}
.brush-modes {
  display: flex;
  gap: 4px;
}
.brush-modes button,
.terrain-actions button {
  border: 1px solid #30485c;
  border-radius: 4px;
  background: #172839;
  padding: 6px 9px;
  color: #c8d6e2;
  cursor: pointer;
}
.brush-modes button:hover,
.terrain-actions button:hover {
  background: #1c3850;
}
.brush-modes button.active {
  background: #155594;
  border-color: #2686d6;
  color: #fff;
}
.terrain-actions {
  display: flex;
  gap: 6px;
  padding: 7px 15px;
}
.terrain-actions.stacked {
  flex-direction: column;
}
.terrain-actions.stacked button {
  width: 100%;
}
.terrain-actions small {
  color: #8fa3b5;
  text-align: center;
  padding: 3px;
}
.copyright {
  color: #8999a8;
  font-size: 11px;
  white-space: nowrap;
}
.viewport-toolbar button.active {
  background: #155594;
  border-color: #2686d6;
  color: #fff;
}
.viewport.sculpt-tool {
  cursor: crosshair;
}
.viewport:fullscreen {
  width: 100vw;
  height: 100vh;
}
.viewport:fullscreen .terrain-tools {
  bottom: 24px;
}
.large-mesh-budget {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 7px 15px;
  padding: 9px;
  border: 1px solid #2b587a;
  border-radius: 4px;
  background: #10283a;
  color: #b9d8ed;
}
.large-mesh-budget b {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #65b9f5;
}
.large-mesh-budget span {
  font-size: 11px;
}
.large-mesh-budget small {
  font-size: 9px;
  color: #8faabd;
}
.tree-section {
  padding: 9px 12px 5px;
  border-top: 1px solid #263747;
  color: #8fb9dc;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.object-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 8px;
  padding: 5px 15px;
}
.object-row input[type="text"],
.object-row select {
  min-width: 0;
  height: 31px;
  border: 1px solid #2b3c4a;
  border-radius: 4px;
  background: #111e2a;
  padding: 0 8px;
}
.object-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #1787ef;
}
.transform-editor {
  padding: 2px 15px 9px;
}
.transform-editor > b {
  display: block;
  margin: 7px 0 4px;
  color: #9eb0c0;
  font-size: 11px;
  text-transform: uppercase;
}
.transform-editor > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.transform-editor input {
  width: 100%;
  height: 30px;
  border: 1px solid #2b3c4a;
  border-radius: 4px;
  background: #111e2a;
  text-align: center;
}
.transform-editor > div:before {
  content: "X   Y   Z";
  display: none;
}
.object-meta {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 6px;
  margin: 5px 15px 10px;
  font-size: 12px;
}
.object-meta dt {
  color: #91a3b3;
}
.object-meta dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.object-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 15px;
}
.object-actions button,
.instantiate-button {
  min-height: 31px;
  border: 1px solid #30485c;
  border-radius: 4px;
  background: #172839;
  padding: 5px;
  color: #cbd8e3;
  cursor: pointer;
}
.object-actions button:hover,
.instantiate-button:hover {
  background: #1d3b52;
}
.object-actions .danger {
  grid-column: 1/-1;
  border-color: #633b42;
  color: #f2aeb4;
  background: #321d24;
}
.instantiate-button {
  width: calc(100% - 30px);
  margin: 0 15px 9px;
}
.tool-button[data-action="import-3d"] {
  border-color: #275175;
  background: #15324b;
}
.proxy-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 15px 9px;
  padding: 9px;
  border: 1px solid #2d526f;
  border-radius: 4px;
  background: #102334;
}
.proxy-summary b {
  font-size: 11px;
  color: #69bfff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.proxy-summary span {
  font-size: 11px;
  line-height: 1.4;
  color: #a9bac8;
}
.proxy-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 15px;
}
.proxy-actions button {
  min-height: 32px;
  border: 1px solid #30485c;
  border-radius: 4px;
  background: #172839;
  padding: 5px 7px;
  color: #cbd8e3;
  cursor: pointer;
}
.proxy-actions button:hover {
  background: #1d3b52;
  border-color: #347bb1;
}
.proxy-actions button[hidden] {
  display: none;
}
.proxy-note {
  display: block;
  padding: 2px 15px 10px;
  color: #8fa5b8;
  line-height: 1.45;
}
.tree-row[data-node="player"] .node-glyph {
  color: #42c8ff;
}
.tree-row[data-node="planet"] .node-glyph {
  color: #6da8ff;
}
.material-library-head {
  background: linear-gradient(180deg, #10283a, #0d1d2a);
}
.fx-library-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 15px 7px;
  padding: 10px;
  border: 1px solid #29658e;
  border-radius: 5px;
  background: #0b2232;
  box-shadow: inset 0 0 18px #1592df12;
}
.fx-library-card > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fx-library-card b {
  font-size: 11px;
  color: #86d4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-library-card span {
  font-size: 9px;
  color: #91a9ba;
}
.fx-library-card i {
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #8ef2bd;
  border: 1px solid #24784f;
  border-radius: 3px;
  padding: 4px 5px;
  background: #0d3525;
  white-space: nowrap;
}
.material-capability {
  display: block;
  padding: 0 15px 10px;
  color: #829bae;
  line-height: 1.45;
}
.material-empty {
  margin: 14px;
  padding: 28px 16px;
  text-align: center;
  border: 1px dashed #315b78;
  border-radius: 5px;
  background: #0c1b27;
}
.material-empty[hidden],
#material-editor[hidden] {
  display: none;
}
.material-empty span {
  display: block;
  font-size: 36px;
  color: #4fb4f7;
}
.material-empty b {
  display: block;
  margin: 8px;
  color: #dcecf7;
}
.material-empty p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #91a7b8;
}
.material-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 15px 9px;
}
.material-actions button {
  min-height: 31px;
  border: 1px solid #31536c;
  border-radius: 4px;
  background: #173148;
  color: #d1e3f0;
  cursor: pointer;
}
.material-actions button:hover {
  background: #1b4260;
  border-color: #3489c5;
}
.material-color-row {
  display: grid;
  grid-template-columns: 88px 58px 1fr;
  gap: 7px;
  align-items: center;
  padding: 5px 15px;
}
.material-color-row input[type="color"] {
  width: 58px;
  height: 30px;
  padding: 0;
  border: 1px solid #365064;
  background: transparent;
}
.material-color-row input[type="number"] {
  min-width: 0;
  height: 30px;
  border: 1px solid #2b3c4a;
  border-radius: 4px;
  background: #111e2a;
  text-align: center;
}
.material-range-row {
  display: grid;
  grid-template-columns: 88px 1fr 42px;
  gap: 8px;
  align-items: center;
  padding: 5px 15px;
}
.material-range-row input {
  appearance: none;
  height: 3px;
  background: #34495b;
  border-radius: 2px;
  accent-color: #56a9fc;
}
.material-range-row input::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 13px;
  background: #9bcaff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d9edff;
}
.material-range-row b {
  font-size: 10px;
  text-align: right;
  color: #9fc5dd;
}
.material-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 15px 9px;
}
.material-checks label,
.material-map-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #b6c7d4;
}
.material-checks input,
.material-map-grid input {
  accent-color: #188cf2;
}
.material-map-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 5px 15px 10px;
}
.material-map-grid label {
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid #293f50;
  border-radius: 4px;
  background: #101f2b;
}
.material-map-grid label i {
  margin-left: auto;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 9px;
  color: #7593a9;
}
.material-map-grid input:disabled + * {
  opacity: 0.55;
}
.material-hint {
  display: block;
  padding: 0 15px 11px;
  color: #809aad;
  line-height: 1.45;
}
.mode[data-mode="materials"].active {
  background: #123a56;
  color: #8ed6ff;
  box-shadow: inset 0 -2px #2ca9f5;
}
.asset-art.orb:after {
  animation: tf-pulse 1.7s ease-in-out infinite;
}
.asset-art.sphere:after {
  box-shadow:
    inset -10px -8px 16px #000b,
    0 0 18px #2ba5ff55;
}
@keyframes tf-pulse {
  50% {
    filter: brightness(1.45);
    transform: scale(1.06);
  }
}
/* Phase 5 world streaming */
.mode[data-mode="streaming"].active {
  background: #123e35;
  color: #91f2cc;
  box-shadow: inset 0 -2px #35d79d;
}
.streaming-card {
  background: linear-gradient(180deg, #102b2a, #0d1f24);
}
.stream-note {
  display: block;
  padding: 2px 15px 10px;
  color: #86a9a5;
  line-height: 1.45;
}
.stream-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 7px 15px 10px;
}
.stream-actions button {
  min-height: 32px;
  border: 1px solid #2f655d;
  border-radius: 4px;
  background: #15332f;
  color: #c9eee3;
  cursor: pointer;
}
.stream-actions button:hover {
  background: #1b4a42;
  border-color: #43a590;
}
.stream-stats {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 7px;
  margin: 7px 15px 12px;
  font-size: 11px;
}
.stream-stats dt {
  color: #87a59f;
}
.stream-stats dd {
  margin: 0;
  color: #cde8e1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.streaming-hud {
  position: absolute;
  right: 15px;
  bottom: 17px;
  width: 154px;
  padding: 8px;
  border: 1px solid #2d6b60;
  border-radius: 6px;
  background: #091b1bdd;
  box-shadow: 0 4px 18px #0009;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.streaming-hud.is-disabled {
  opacity: 0.42;
  filter: grayscale(0.7);
}
.streaming-hud-head,
.streaming-hud-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 8px;
  letter-spacing: 0.07em;
  color: #80a9a1;
}
.streaming-hud-head b {
  color: #7ee8c0;
}
.streaming-hud-head span {
  padding: 2px 4px;
  border: 1px solid #2d655b;
  border-radius: 3px;
  background: #12332e;
  color: #9ee7cf;
}
.chunk-map {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin: 7px 0;
}
.chunk-cell {
  display: block;
  aspect-ratio: 1;
  border: 1px solid #263f40;
  border-radius: 1px;
  background: #112326;
}
.chunk-cell.active {
  background: #1f6557;
  border-color: #39967e;
  box-shadow: inset 0 0 3px #7fffd433;
}
.chunk-cell.source {
  background: #67e8bd;
  border-color: #c7ffea;
  box-shadow: 0 0 7px #4ce2b5;
}
.tree-row[data-node="streaming"] .node-glyph {
  color: #5fe0b5;
}
.asset-art.chunks:before {
  content: "";
  position: absolute;
  inset: 15px;
  background: repeating-linear-gradient(0deg, #0000 0 12px, #69d6b733 12px 13px),
    repeating-linear-gradient(90deg, #0000 0 12px, #69d6b733 12px 13px);
}
.asset-art.chunks:after {
  filter: saturate(0.8) hue-rotate(55deg);
}
@media (max-height: 760px) {
  .streaming-hud {
    width: 128px;
  }
  .chunk-map {
    gap: 1px;
  }
  .stream-stats {
    gap: 4px;
    margin-top: 4px;
  }
}

/* Phase 5.0.1 terrain grid-count expansion */
.terrain-grid-card {
  background: linear-gradient(180deg, #102536, #0d1d29);
}
.grid-count-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 8px;
  padding: 5px 15px;
}
.grid-count-row input {
  width: 100%;
  height: 31px;
  border: 1px solid #31516a;
  border-radius: 4px;
  background: #101f2b;
  padding: 0 9px;
  color: #d8e9f5;
  font-variant-numeric: tabular-nums;
}
.grid-count-row input:focus {
  outline: 1px solid #2998e8;
  border-color: #2998e8;
}
.terrain-grid-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 7px 15px 3px;
  padding: 9px;
  border: 1px solid #2d5f80;
  border-radius: 4px;
  background: #0d2231;
}
.terrain-grid-summary b {
  color: #7dcbff;
  font-size: 11px;
  letter-spacing: 0.03em;
}
.terrain-grid-summary span {
  color: #b7cbd9;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.terrain-grid-summary small {
  margin-top: 3px;
  color: #819bac;
  font-size: 9px;
  line-height: 1.45;
}

/* Phase 6.0.0 lighting, atmosphere and water */
.atmosphere-card,
.water-card,
.zone-card {
  background: linear-gradient(180deg, #102435, #0c1b28);
}
.phase6-note {
  display: block;
  margin: 7px 15px 10px;
  color: #829dad;
  font-size: 9px;
  line-height: 1.45;
}
.atmosphere-actions {
  display: flex;
  gap: 6px;
  padding: 7px 15px 10px;
  flex-wrap: wrap;
}
.atmosphere-actions button {
  flex: 1 1 78px;
  min-height: 29px;
  border: 1px solid #315b75;
  border-radius: 4px;
  background: #142b3b;
  color: #bdd9e9;
  cursor: pointer;
}
.atmosphere-actions button:hover {
  border-color: #38a8e8;
  background: #173a50;
}
.atmosphere-actions button.danger {
  border-color: #75404a;
  color: #ffabb9;
}
#atmosphere-zone-editor[hidden] {
  display: none;
}
.tree-row[data-node="weather"] .node-glyph,
.tree-row[data-node="water"] .node-glyph,
.tree-row[data-node="atmosphere"] .node-glyph {
  color: #6bd8ff;
}
.asset-art.weather {
  background: radial-gradient(circle at 30% 34%, #d8f6ff 0 7%, transparent 8%),
    radial-gradient(ellipse at 56% 46%, #638da8 0 22%, transparent 23%),
    linear-gradient(160deg, #143a59, #172033 60%, #102839);
}
.asset-art.weather::before {
  content: "";
  position: absolute;
  left: 35%;
  top: 48%;
  width: 38%;
  height: 34%;
  background: repeating-linear-gradient(
    105deg,
    transparent 0 7px,
    #63cfff 8px 10px,
    transparent 11px 16px
  );
  transform: skewX(-8deg);
  opacity: 0.8;
}
.asset-art.weather::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 15%;
  bottom: 13%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #71d6ff, transparent);
  box-shadow: 0 0 10px #4ec8ff;
}


/* Phase 6.0.2 continuous spherical sun orbit */
.sun-link-row {
  display: grid;
  grid-template-columns: 1fr 22px;
  align-items: center;
  gap: 10px;
  padding: 6px 15px 3px;
  color: #d4e0e9;
}
.sun-link-row input {
  width: 18px;
  height: 18px;
  accent-color: #2998e8;
}
.sun-axis-note {
  display: block;
  margin: 4px 15px 7px;
  color: #8ea4b5;
  line-height: 1.35;
}
[data-setting="sunElevation"].time-linked,
[data-number="sunElevation"].time-linked {
  opacity: 0.62;
}


/* Phase 6.0.3 panel overflow + module-label accessibility fix */
.studio-shell > * {
  min-width: 0;
  min-height: 0;
}
.world-panel,
.inspector,
.asset-shelf,
.panel {
  min-width: 0;
}
.world-panel,
.inspector,
.asset-shelf,
.tree-list,
.asset-grid {
  overflow-x: hidden;
}
.tree-search,
.inspector-head,
.type-row,
.select-row,
.control-row,
.color-row,
.object-row,
.grid-count-row,
.material-color-row,
.material-range-row,
.stream-stats,
.asset-head,
.sun-link-row,
.tree-row,
.transform-editor > div,
.material-actions,
.material-checks,
.material-map-grid,
.object-actions,
.proxy-actions,
.stream-actions,
.atmosphere-actions,
.terrain-actions,
.brush-modes {
  min-width: 0;
}
.tree-search > *,
.inspector-head > *,
.type-row > *,
.select-row > *,
.control-row > *,
.color-row > *,
.object-row > *,
.grid-count-row > *,
.material-color-row > *,
.material-range-row > *,
.stream-stats > *,
.asset-head > *,
.sun-link-row > *,
.tree-row > *,
.transform-editor > div > *,
.material-actions > *,
.material-checks > *,
.material-map-grid > *,
.object-actions > *,
.proxy-actions > *,
.stream-actions > *,
.atmosphere-actions > *,
.terrain-actions > *,
.brush-modes > * {
  min-width: 0;
}
.tree-row span:nth-child(3) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.type-row,
.select-row,
.control-row,
.color-row,
.object-row,
.grid-count-row,
.material-color-row,
.material-range-row,
.sun-link-row {
  width: 100%;
}
.type-row > span,
.select-row > span,
.control-row > span,
.color-row > span,
.object-row > span,
.grid-count-row > span,
.material-color-row > span,
.material-range-row > span,
.sun-link-row > span,
.inspector-section h3 span,
.panel-title strong,
.asset-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.type-row select,
.select-row select,
.control-row input,
.color-row input,
.object-row input,
.object-row select,
.grid-count-row input,
.material-color-row input,
.material-range-row input,
.tree-search input,
.asset-head input,
.transform-editor input {
  min-width: 0;
  max-width: 100%;
}
.inspector-section,
.terrain-grid-summary,
.large-mesh-budget,
.proxy-summary,
.fx-library-card,
.material-empty,
.neutral-module,
.sun-axis-note,
.phase6-note,
.stream-note,
.material-hint {
  overflow-wrap: anywhere;
}
.inspector {
  scrollbar-gutter: stable both-edges;
}
.world-panel {
  scrollbar-gutter: stable;
}
.asset-shelf {
  display: flex;
  flex-direction: column;
}
.asset-head {
  flex: 0 0 auto;
}
.asset-grid {
  flex: 1 1 auto;
  align-content: start;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  overflow-y: auto;
  padding-bottom: 4px;
}
.asset-card {
  display: flex;
  flex-direction: column;
}
.asset-art {
  flex: 0 0 auto;
}
.asset-card b {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.2;
  min-height: 31px;
}
.asset-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 1380px) {
  .asset-grid {
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  }
  .asset-card:nth-of-type(n + 7) {
    display: flex;
  }
}
@media (max-height: 760px) {
  .asset-grid {
    height: auto;
  }
  .asset-card p {
    display: -webkit-box;
  }
}


/* Phase 6.0.4 guaranteed module labels + strict panel containment */
.world-panel,
.inspector {
  overflow-x: clip !important;
  contain: inline-size;
}
.world-panel > *,
.inspector > *,
.inspector section,
.inspector label,
.inspector div {
  max-inline-size: 100%;
}
.world-panel *,
.inspector * {
  min-inline-size: 0;
}
.tree-list {
  overflow-x: clip !important;
}
.tree-row {
  max-width: 100%;
}
.inspector select,
.inspector input:not([type="checkbox"]):not([type="color"]),
.inspector .range,
.inspector button {
  max-width: 100%;
}
.inspector select,
.inspector .range {
  width: 100%;
}
.type-row,
.select-row {
  grid-template-columns: minmax(82px, 0.9fr) minmax(0, 1.1fr);
}
.control-row {
  grid-template-columns: minmax(78px, 1fr) minmax(54px, 64px) minmax(70px, 1fr);
}
.color-row {
  grid-template-columns: minmax(78px, 1fr) minmax(52px, 62px) minmax(0, 1fr);
}
.number-box {
  min-width: 0;
  width: 100%;
}
.number-box input {
  width: 100%;
}
.range {
  min-width: 0;
}
.inspector-section h3,
.type-row,
.select-row,
.control-row,
.color-row,
.object-row,
.grid-count-row,
.material-color-row,
.material-range-row,
.sun-link-row {
  padding-left: 12px;
  padding-right: 12px;
}
.asset-grid {
  overflow-x: hidden !important;
}
.asset-card {
  position: relative;
  min-height: 52px;
  padding: 0;
  isolation: isolate;
}
.asset-card .asset-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
}
.asset-card b {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 7px;
  margin: 0;
  color: #f2f7fb;
  background: linear-gradient(180deg, #07101922, #071019ee 38%, #071019 100%);
  border-top: 1px solid #31485a;
  font-size: 11px;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px #000;
}
.asset-card p {
  display: none !important;
}
.asset-card .phase-lock {
  z-index: 4;
}
@media (max-width: 1380px), (max-height: 760px) {
  .asset-card {
    min-height: 54px;
  }
  .asset-card .asset-art {
    height: 100%;
  }
  .asset-card b {
    min-height: 25px;
    padding: 4px 6px;
    font-size: 10px;
  }
}


/* Phase 7.0.0 gameplay framework */
.mode[data-mode="gameplay"].active {
  background: #4b3414;
  color: #ffd99b;
  box-shadow: inset 0 -2px #f0a33a;
}
.tree-row[data-node="gameplay"] .node-glyph,
.tree-row[data-node="triggers"] .node-glyph,
.tree-row[data-node="events"] .node-glyph,
.gameplay-tree-section { color: #f1b65d; }
.gameplay-card, .zone-card { background: linear-gradient(180deg, #2a2114, #161b22); }
.gameplay-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 7px 12px 10px;
}
.gameplay-actions button, .input-map-grid button {
  min-width: 0;
  min-height: 30px;
  border: 1px solid #665033;
  border-radius: 4px;
  background: #302719;
  color: #f0dfc4;
  padding: 5px 7px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.gameplay-actions button:hover, .input-map-grid button:hover { border-color: #d3933f; background: #47331c; }
.gameplay-actions button.danger { border-color: #75404a; background: #321d24; color: #ffabb9; }
.gameplay-note {
  display: block;
  margin: 2px 12px 10px;
  color: #a99c89;
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.input-map-grid {
  display: grid;
  grid-template-columns: minmax(62px, 0.8fr) minmax(72px, 1.2fr);
  gap: 5px 7px;
  align-items: center;
  padding: 6px 12px;
}
.input-map-grid span { min-width: 0; color: #b7aa96; overflow-wrap: anywhere; }
.input-map-grid button.waiting { border-color: #56b6ff; background: #173a50; color: #bde7ff; }
.subhead { border-top: 1px solid #3d3326; margin-top: 7px !important; }
#trigger-zone-editor[hidden] { display: none; }
.event-log {
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 5px 12px;
  border: 1px solid #3c4650;
  border-radius: 4px;
  background: #0a141d;
}
.event-log > span { display: block; padding: 12px; color: #8293a1; text-align: center; }
.event-log > div {
  display: grid;
  grid-template-columns: 58px minmax(84px, 0.8fr) minmax(0, 1fr);
  gap: 6px;
  padding: 6px 7px;
  border-bottom: 1px solid #24333f;
  font-size: 10px;
}
.event-log time { color: #758795; }
.event-log b { color: #f0b459; overflow-wrap: anywhere; }
.event-log span { color: #b8c5ce; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gameplay-hud {
  position: absolute;
  left: 14px;
  bottom: 18px;
  width: min(360px, calc(100% - 190px));
  padding: 9px;
  border: 1px solid #8c6330;
  border-radius: 6px;
  background: #15130fdd;
  box-shadow: 0 4px 18px #0009;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.gameplay-hud[hidden], .gameplay-message[hidden] { display: none; }
.gameplay-hud-head { display: flex; justify-content: space-between; gap: 10px; color: #d3a45f; font-size: 9px; letter-spacing: 0.08em; }
.gameplay-hud-head span { color: #8ee7bd; }
.gameplay-hud-stats { display: grid; grid-template-columns: 54px minmax(0, 1fr) 48px 54px; gap: 6px; margin: 6px 0; color: #8d9aa4; font-size: 10px; }
.gameplay-hud-stats b { color: #e8eef2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gameplay-hud small { color: #a8b3bc; line-height: 1.35; }
.gameplay-message {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  max-width: min(520px, 78%);
  padding: 9px 15px;
  border: 1px solid #d3933f;
  border-radius: 5px;
  background: #1e1810ee;
  color: #fff1d7;
  box-shadow: 0 3px 18px #000a;
  text-align: center;
  pointer-events: none;
}
.asset-art.gameplay { background: radial-gradient(circle at 50% 38%, #57c8ff 0 8%, transparent 9%), linear-gradient(150deg, #17344d, #171c24 65%, #20180f); }
.asset-art.gameplay::before { content: ""; position: absolute; left: 42%; top: 32%; width: 16%; height: 42%; border-radius: 50% 50% 35% 35%; background: #73d7ff; box-shadow: 0 0 16px #2faeea; }
.asset-art.gameplay::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: 15%; height: 2px; background: #f0a33a; box-shadow: 0 0 9px #f0a33a; clip-path: none; }
@media (max-width: 1380px) {
  .gameplay-actions { grid-template-columns: 1fr; }
  .gameplay-hud { width: min(310px, calc(100% - 160px)); }
}

/* Phase 8.0.0 project persistence */
.tree-row[data-node="project"] .node-glyph,
.persistence-card h3 span {
  color: #9fe7ff;
}
.persistence-card {
  background: linear-gradient(180deg, #102638, #0c1b27);
}
.persistence-stats {
  display: grid;
  grid-template-columns: minmax(88px, 0.85fr) minmax(0, 1.15fr);
  gap: 7px 9px;
  margin: 7px 12px 10px;
  font-size: 10px;
}
.persistence-stats dt {
  min-width: 0;
  color: #8199aa;
  overflow-wrap: anywhere;
}
.persistence-stats dd {
  min-width: 0;
  margin: 0;
  color: #cfe5f2;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.persistence-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 7px 12px 10px;
}
.persistence-actions button {
  min-width: 0;
  min-height: 31px;
  border: 1px solid #315d75;
  border-radius: 4px;
  background: #142d3c;
  color: #cbe7f4;
  padding: 5px 7px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.persistence-actions button:hover:not(:disabled) {
  border-color: #48afe5;
  background: #193f54;
}
.persistence-actions button:disabled,
.viewport-toolbar button[data-action="undo"]:disabled,
.viewport-toolbar button[data-action="redo"]:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.persistence-actions .muted-action {
  color: #9babb6;
  border-color: #42515d;
  background: #17212a;
}
.persistence-note {
  display: block;
  margin: 1px 12px 10px;
  color: #8199aa;
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.portable-reference-list,
.migration-log {
  max-height: 210px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 5px 12px 10px;
  border: 1px solid #2b4353;
  border-radius: 4px;
  background: #091620;
}
.portable-reference-list > span,
.migration-log > span {
  display: block;
  padding: 12px;
  color: #7f93a2;
  text-align: center;
  font-size: 10px;
}
.portable-reference {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 8px 72px 8px 8px;
  border-bottom: 1px solid #233543;
}
.portable-reference:last-child {
  border-bottom: 0;
}
.portable-reference b,
.portable-reference span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portable-reference b {
  color: #d7e8f2;
  font-size: 10px;
}
.portable-reference span {
  color: #718999;
  font-size: 8px;
}
.portable-reference i {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 4px;
  border: 1px solid #2b7653;
  border-radius: 3px;
  color: #8de5b9;
  background: #0d3022;
  font-style: normal;
  font-size: 7px;
  letter-spacing: 0.05em;
}
.portable-reference.unresolved i {
  border-color: #7d5631;
  color: #ffd39d;
  background: #352313;
}
.migration-log > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-bottom: 1px solid #233543;
  font-size: 9px;
}
.migration-log > div:last-child {
  border-bottom: 0;
}
.migration-log b {
  color: #8fdcff;
}
.migration-log span {
  min-width: 0;
  color: #8095a4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-art.project {
  background: radial-gradient(circle at 50% 45%, #3f9fd3 0 8%, transparent 9%),
    linear-gradient(145deg, #12344a, #151d28 65%, #0b1118);
}
.asset-art.project::before {
  content: "";
  position: absolute;
  left: 28%;
  top: 17%;
  width: 44%;
  height: 54%;
  border: 2px solid #89dcff;
  border-radius: 3px;
  background: repeating-linear-gradient(180deg, transparent 0 9px, #89dcff55 10px 11px);
  box-shadow: 0 0 15px #36a8df66;
}
.asset-art.project::after {
  content: "";
  position: absolute;
  left: 37%;
  right: 37%;
  bottom: 17%;
  height: 8%;
  background: #8de5b9;
  box-shadow: 0 0 9px #55d79e;
  clip-path: none;
}
@media (max-width: 1380px) {
  .persistence-actions {
    grid-template-columns: 1fr;
  }
}

/* Phase 9.0.0 standalone website export */
.mode[data-mode="export"].active {
  background: #4b2d63;
  color: #e4c7ff;
  box-shadow: inset 0 -2px #b36cff;
}
.tree-row[data-node="export"] .node-glyph,
.export-card h3 span {
  color: #d09cff;
}
.export-tool {
  border-color: #604078;
  background: #2e2040;
}
.export-tool:hover:not(:disabled) {
  border-color: #b36cff;
  background: #43285d;
}
.export-card {
  background: linear-gradient(180deg, #2a1c37, #111923);
}
.export-stats {
  display: grid;
  grid-template-columns: minmax(92px, 0.9fr) minmax(0, 1.1fr);
  gap: 7px 9px;
  margin: 7px 12px 10px;
  font-size: 10px;
}
.export-stats dt {
  min-width: 0;
  color: #a38eb1;
  overflow-wrap: anywhere;
}
.export-stats dd {
  min-width: 0;
  margin: 0;
  color: #eadcf4;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.export-stats dd.warning {
  color: #ffc27d;
}
.export-progress {
  margin: 7px 12px 9px;
  padding: 9px;
  border: 1px solid #5a3d70;
  border-radius: 5px;
  background: #171020;
}
.export-progress > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #b9a6c6;
  font-size: 9px;
}
.export-progress > div span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.export-progress > div b {
  color: #e4c7ff;
  font-variant-numeric: tabular-nums;
}
.export-progress > i {
  display: block;
  height: 7px;
  margin-top: 7px;
  border: 1px solid #4c365b;
  border-radius: 6px;
  background: #0c0a10;
  overflow: hidden;
}
.export-progress > i span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #7d3bb2, #d094ff);
  transition: width 0.12s linear;
}
.export-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 6px;
  padding: 7px 12px 10px;
}
.export-actions button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid #65477a;
  border-radius: 4px;
  background: #2a1c37;
  color: #e8d7f4;
  padding: 5px 7px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.export-actions button:hover:not(:disabled) {
  border-color: #bd75f0;
  background: #43285d;
}
.export-actions button.primary {
  border-color: #9f58d2;
  background: #5b2c7d;
  color: #fff;
}
.export-actions button:disabled,
.export-tool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.export-note {
  display: block;
  margin: 1px 12px 10px;
  color: #9d8aaa;
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.export-contract {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 6px 12px 11px;
  padding: 9px;
  border: 1px solid #3d3448;
  border-radius: 4px;
  background: #0d141c;
}
.export-contract span {
  min-width: 0;
  color: #a8b1ba;
  font-size: 9px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.export-contract b {
  color: #d09cff;
}
.asset-art.export {
  background: radial-gradient(circle at 50% 40%, #b36cff 0 8%, transparent 9%),
    linear-gradient(150deg, #38204b, #171c25 65%, #0a1118);
}
.asset-art.export::before {
  content: "";
  position: absolute;
  left: 44%;
  top: 20%;
  width: 12%;
  height: 42%;
  background: #d7a9ff;
  box-shadow: 0 0 14px #a84cff;
}
.asset-art.export::after {
  content: "";
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: 22%;
  height: 28%;
  border: 2px solid #d7a9ff;
  border-top: 0;
  background: transparent;
  box-shadow: 0 0 10px #a84cff55;
  clip-path: none;
}
@media (max-width: 1380px) {
  .export-actions {
    grid-template-columns: 1fr;
  }
}

/* Phase 10.0.0 profiling and release hardening */
.mode[data-mode="profiler"].active {
  background: #493418;
  color: #ffe2a5;
  box-shadow: inset 0 -2px #f0ad45;
}
.tree-row[data-node="profiler"] .node-glyph,
.profiler-card h3 span {
  color: #f0bd68;
}
.profiler-card,
.stress-card {
  background: linear-gradient(180deg, #2a2216, #111a22);
}
.profiler-note {
  display: block;
  margin: 3px 12px 10px;
  color: #a89c87;
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.profiler-stats {
  display: grid;
  grid-template-columns: minmax(98px, 1fr) minmax(0, 1.15fr);
  gap: 7px 9px;
  margin: 7px 12px 10px;
  font-size: 10px;
}
.profiler-stats dt {
  min-width: 0;
  color: #9e927d;
  overflow-wrap: anywhere;
}
.profiler-stats dd {
  min-width: 0;
  margin: 0;
  color: #f2e5c9;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.profiler-stats dd.pass,
#profile-status.pass {
  color: #74e0ad;
}
.profiler-stats dd.warn,
#profile-status.warn {
  color: #ffc46f;
}
.profiler-stats dd.fail,
#profile-status.fail {
  color: #ff8e98;
}
.profiler-violations,
.release-audit,
.profile-event-log {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 7px 12px 10px;
  padding: 8px;
  border: 1px solid #3c3a31;
  border-radius: 4px;
  background: #0d151c;
  color: #9da8af;
  font-size: 9px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.profile-violation,
.audit-row,
.profile-event {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid #273039;
}
.profile-violation:last-child,
.audit-row:last-child,
.profile-event:last-child {
  border-bottom: 0;
}
.profile-violation b,
.audit-row b,
.profile-event b {
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.profile-violation.warn b,
.audit-row.warn b,
.profile-event.warning b {
  color: #ffc46f;
}
.profile-violation.fail b,
.audit-row.fail b,
.profile-event.error b {
  color: #ff8e98;
}
.profile-violation.pass b,
.audit-row.pass b,
.profile-event.info b {
  color: #74e0ad;
}
.profile-violation span,
.audit-row span,
.profile-event span {
  min-width: 0;
  color: #aeb8bf;
}
.stress-progress {
  margin: 7px 12px 9px;
  padding: 9px;
  border: 1px solid #5b4930;
  border-radius: 5px;
  background: #17130d;
}
.stress-progress > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #b9a98d;
  font-size: 9px;
}
.stress-progress > div span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stress-progress > div b {
  color: #ffe2a5;
  font-variant-numeric: tabular-nums;
}
.stress-progress > i {
  display: block;
  height: 7px;
  margin-top: 7px;
  border: 1px solid #4d402d;
  border-radius: 6px;
  background: #0a0907;
  overflow: hidden;
}
.stress-progress > i span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #a86724, #ffd078);
  transition: width 0.12s linear;
}
.profiler-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 7px 12px 10px;
}
.profiler-actions button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid #605137;
  border-radius: 4px;
  background: #2c2418;
  color: #eadbbd;
  padding: 5px 7px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.profiler-actions button:hover:not(:disabled) {
  border-color: #d59a45;
  background: #493417;
}
.profiler-actions button.primary {
  border-color: #d0953f;
  background: #744819;
  color: #fff4dc;
}
.profiler-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.asset-art.profiler {
  background: radial-gradient(circle at 50% 42%, #e4a64c 0 7%, transparent 8%),
    linear-gradient(150deg, #443018, #171e25 65%, #0a1118);
}
.asset-art.profiler::before {
  content: "";
  position: absolute;
  left: 19%;
  right: 19%;
  bottom: 24%;
  height: 34%;
  border-left: 2px solid #ffd182;
  border-bottom: 2px solid #ffd182;
  background: linear-gradient(150deg, transparent 0 16%, #e2a142 17% 23%, transparent 24% 42%, #f3ca77 43% 50%, transparent 51% 67%, #b9752c 68% 75%, transparent 76%);
  filter: drop-shadow(0 0 7px #e6a64988);
}
.asset-art.profiler::after {
  content: "";
  position: absolute;
  left: 31%;
  right: 31%;
  top: 18%;
  height: 54%;
  border: 1px solid #ffd18288;
  border-radius: 50%;
  background: transparent;
  clip-path: none;
}
.statusbar {
  gap: clamp(10px, 1.65vw, 30px);
}
@media (max-width: 1700px) {
  .topbar {
    grid-template-columns: 300px auto 1fr auto 43px;
  }
  .save-state {
    display: none;
  }
  .mode {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 1380px) {
  .profiler-actions {
    grid-template-columns: 1fr;
  }
  .profiler-stats {
    grid-template-columns: minmax(88px, 1fr) minmax(0, 1fr);
  }
}

/* Phase 10.0.1 site identity */
.brand > div:last-child { min-width: 0; }
.brand strong, .brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-height: 760px) {
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; border-radius: 8px; }
}


/* Phase 10.0.2 default 80% effective editor scale. */
@supports not (zoom: 1) {
  .studio-shell {
    zoom: 1;
    width: 125vw;
    height: 125vh;
    transform: scale(var(--tf-editor-ui-scale));
    transform-origin: 0 0;
  }
}