input {
  border-color: #bfbfbf;
  border-width: 1px;
  border-style: solid;
  outline: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}
textarea:focus-visible {
  border-color: #14acff;
}
textarea::placeholder {
  color: rgba(0, 0, 0, 0.376);
}
.PrintingPreviewView {
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  position: fixed; /* Fixed position to cover the whole viewport */
  top: 0;
  left: 0;
  justify-content: center;
  z-index: 9999;
  display: flex;
  overflow: hidden;
}
ui-row > textarea {
  flex-grow: 1;
}

ui-column > textarea {
  align-self: stretch;
}

ui-column > ui-wrap {
  width: auto;
  min-width: 0;
  max-width: 100%;
}
textarea {
  border-color: #bfbfbf;
  border-width: 1px;
  border-style: solid;
  outline: none;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

.row-project-explorer {
  align-items: stretch;
}

.tinymce {
  border: 0px none;
  width: 100%;
  height: 100%;
}
input:focus-visible {
  border-color: #14acff;
}
input::placeholder {
  color: rgba(0, 0, 0, 0.376);
}
*[data-hide] {
  display: none;
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
#root {
  height: 100%;
}
ui-overlay-root {
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Stack overlay above page content so modal popups dim the full studio chrome. */
ui-overlay-root > ui-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
}

ui-row.max {
  width: 100%;
}

ui-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  flex: none;
  width: initial;
}
.ma-e {
  justify-content: end;
}
.ma-s {
  justify-content: start;
}
.ma-c {
  justify-content: center;
}
.ma-sa {
  justify-content: space-around;
}
.ma-sb {
  justify-content: space-between;
  /*width: stretch;*/
}
.ma-se {
  justify-content: space-evenly;
}
.jc-fe {
  justify-content: flex-end;
}
.cr-s {
  align-items: stretch;
}
.cr-e {
  align-items: flex-end;
}
.cr-c {
  align-items: center;
}
.cr-st {
  align-items: stretch;
}
.cr-b {
  align-items: baseline;
}
ui-column {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
  width: initial;
}
/* ui-row > .expanded {
  flex-grow: 1;
}
ui-column > .expanded {
  flex-grow: 1;
} */
ui-row > .expanded {
  flex-grow: 1;
  min-width: 0;
}
ui-row.cr-st {
  align-items: stretch;
}

ui-row.cr-st > .expanded,
ui-row.cr-st > ui-container {
  align-self: stretch;
  height: 100%;
  min-height: 0;
}
ui-column > .expanded {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
ui-column > .expanded > ui-list-view,
ui-column > .expanded > ui-list-view.max {
  flex: 1 1 auto;
  min-height: 0;
}
ui-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

ui-wrap {
  display: flex;
  flex-wrap: wrap;
}
.checkbox {
  background-color: #bfbfbf;
  cursor: pointer;
  width: fit-content;
}
.button {
  cursor: pointer;
}

ui-stack {
  display: grid;
  position: relative;
}

ui-stack > * {
  grid-area: 1/1/2/2;
  z-index: 1;
}

/* Flutter Stack parity: base layer fills stack width; overlay children use parent alignment */
ui-stack.Stack[class*="stack-align-"] > *:first-child:not(ui-positioned) {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

/* NewSearchComponent: centerEnd positions clear icon; input still fills the stack */
.NewSearchBarContainer ui-row > .expanded > ui-stack.xa28 {
  width: 100%;
  min-width: 0;
}

.NewSearchBarContainer ui-stack.xa28 > input.NewSearchInputField {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

ui-overlay-root > ui-page-router {
  height: 100%;
}

ui-overlay-root > ui-page-router > * {
  height: 100%;
}

ui-page-router {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

ui-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

ui-container > ui-column {
  align-self: stretch;
}
ui-column > table {
  align-self: stretch;
}
/* ui-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  min-width: 0;
} */

/* ui-column > ui-scroll {
  align-self: stretch;
} */

ui-row > ui-row {
  /* align-self: stretch; */
}

ui-column > ui-list-view {
  align-self: stretch;
}

.RootPage {
  align-self: stretch;
}

ui-layout-aware {
  display: flex;
  align-self: stretch;
  align-items: stretch;
}

ui-listener,
.canvas-pointer-surface {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

ui-transform {
  display: block;
  transform-origin: 0 0;
}

ui-mouse-region,
.mouse-region {
  display: flex;
  width: 100%;
  height: 100%;
  align-self: stretch;
}

ui-container > ui-column.max {
  height: 100%;
}

ui-page-router {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
ui-page-router > * {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

ui-popup {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  z-index: 1;
  position: fixed;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
}

ui-popup.Top {
  align-items: start;
}
ui-popup.Buttom {
  align-items: end;
}
ui-popup.Center {
  align-items: center;
}
ui-popup.Left {
  justify-content: start;
}
ui-popup.Right {
  justify-content: end;
}
ui-popup.Positioned {
  display: block;
}

ui-popup-content {
  background-color: white;
  height: fit-content;
  width: fit-content;
}

/* ui-row > ui-column.max {
  align-self: stretch;
} */
ui-container > .v {
  flex-grow: 1;
}
ui-center > .h {
  width: 100%;
}
ui-container > input {
  height: inherit;
}
ui-container > .h {
  align-self: stretch;
}
ui-row > * {
  max-height: 100%;
  max-width: 100%;
}

ui-row.BuildTreeNodeTextView > *:last-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
ui-column > * {
  max-height: 100%;
  max-width: 100%;
}
ui-container > * {
  max-width: 100%;
  max-height: 100%;
}

ui-container > ui-row {
  height: 100%;
}

ui-column.v > * {
  flex-shrink: 0;
}

ui-detector {
  display: flex;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}

.Button > ui-center {
  flex-grow: 1;
}

.RootPage {
  align-items: start;
}
label {
  display: block;
  white-space: pre-line;
}

ui-popup-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #2223;
  position: initial;
}

/* Modal backdrop — Dart Popup model (Color.fromARGB(80, 0, 0, 0)) */
ui-popup-wrapper.model {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.31);
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 10000;
}

ui-popup-wrapper.model > ui-popup {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: auto;
  justify-content: center;
  position: static;
  width: auto;
}

ui-popup-wrapper.model > ui-popup > * {
  flex-shrink: 0;
  max-height: 100%;
  max-width: 100%;
}

/* Loading Project Files dialog — Dart ProjectLoaderView parity */
ui-container.xfb1a {
  align-items: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 460px;
  justify-content: center;
  overflow: hidden;
  width: 500px;
}

ui-container.xfb1a > ui-container.ProjectLoaderView {
  align-self: stretch;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 40px;
  width: 100%;
}

ui-container.ProjectLoaderView > ui-column {
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

ui-container.ProjectLoaderView > ui-column.cr-st > * {
  align-self: stretch;
}

ui-container.ProjectLoaderView .x02cb,
ui-container.ProjectLoaderView .x02cb img {
  align-self: center;
  display: block;
  flex-shrink: 0;
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  width: auto;
}

ui-container.ProjectLoaderView label.x0c11,
ui-container.ProjectLoaderView .x0c11 {
  display: block;
  flex-shrink: 0;
  text-align: center;
  width: 100%;
}

ui-container.ProjectLoaderView label.x990d,
ui-container.ProjectLoaderView .x990d {
  display: block;
  flex-shrink: 0;
  text-align: center;
  white-space: pre-line;
  width: 100%;
}

ui-container.ProjectLoaderView .xe64f,
ui-container.ProjectLoaderView .xce81,
ui-container.ProjectLoaderView .x126d {
  flex-shrink: 0;
  width: 100%;
}

ui-container.ProjectLoaderView .ProjectLoaderGradientProgress,
ui-container.ProjectLoaderGradientProgress {
  align-self: stretch;
  box-sizing: border-box;
  display: block;
  flex-shrink: 0;
  height: 6px;
  overflow: hidden;
  width: 100%;
}

ui-container.ProjectLoaderGradientProgress
  > .ProjectLoaderGradientProgressTrack {
  background-color: #f1f5f9;
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Dart ProjectLoaderGradientProgress: #FF512F → #DD2476, continuous indeterminate */
ui-container.ProjectLoaderGradientProgress .ProjectLoaderGradientProgressBar {
  background: linear-gradient(90deg, #ff512f 0%, #dd2476 100%);
  border-radius: 3px;
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  transform-origin: left center;
  width: 50%;
  will-change: transform;
}

ui-container.ProjectLoaderGradientProgress
  .ProjectLoaderGradientProgressBar.bar1 {
  animation: project-loader-indeterminate1 1.8s cubic-bezier(0.2, 0, 0.8, 1)
    infinite;
  animation-play-state: running;
}

ui-container.ProjectLoaderGradientProgress
  .ProjectLoaderGradientProgressBar.bar2 {
  animation: project-loader-indeterminate2 1.8s cubic-bezier(0, 0, 0.65, 1)
    infinite;
  animation-delay: 0.55s;
  animation-play-state: running;
}

@keyframes project-loader-indeterminate1 {
  0% {
    transform: translateX(-100%) scaleX(0.08);
  }
  42% {
    transform: translateX(20%) scaleX(0.45);
  }
  100% {
    transform: translateX(220%) scaleX(0.08);
  }
}

@keyframes project-loader-indeterminate2 {
  0% {
    transform: translateX(-150%) scaleX(0.08);
  }
  42% {
    transform: translateX(10%) scaleX(0.35);
  }
  100% {
    transform: translateX(200%) scaleX(0.08);
  }
}
ui-popup.Center {
  position: initial;
}
ui-popup.Top {
  position: initial;
}
ui-popup.Right {
  position: initial;
}
ui-popup.Bottom {
  position: initial;
}
ui-popup.Left {
  position: initial;
}
ui-popup-wrapper.Center {
  align-items: center;
  justify-content: center;
}
ui-popup-wrapper.Top {
  align-items: center;
  justify-content: start;
}
ui-popup-wrapper.Right {
  align-items: end;
  justify-content: center;
}
ui-popup-wrapper.Button {
  align-items: center;
  justify-content: end;
}
ui-popup-wrapper.Left {
  align-items: start;
  justify-content: center;
}

ui-overlay-entry.show {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
ui-overlay-entry > * {
  pointer-events: all;
}
ui-icon {
  font-size: 24px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
label {
  word-wrap: anywhere;
  cursor: inherit;
  width: fit-content;
}
table {
  border-spacing: 0px;
  table-layout: fixed;
}

ui-row > input {
  flex-grow: 1;
}

ui-column > input {
  align-self: stretch;
}
ui-container > ui-layout-aware {
  width: 100%;
  height: 100%;
}

ui-list-view.sv {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
ui-list-view.sh {
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}
ui-list-view.sh > * {
  flex-shrink: 0;
}
ui-column.v > ui-list-view.sv {
  flex-shrink: inherit;
}
ui-row.h > ui-list-view.sh {
  flex-shrink: inherit;
}
ui-positioned {
  position: absolute;
}

/* Studio tabs: fill workspace (Dart ui.Expanded chain) */
ui-column.StudioTabsView.max,
ui-column.WindowEditor.max {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
}

ui-column.StudioTabsView.max > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-column.WindowEditor.max {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

ui-column.WindowEditor.max > .expanded {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  width: 100%;
}

/* Studio tab strip (Create New / Overview / page tabs) — never covered by tab body */
.WindowEditor > ui-row.x2f4d {
  flex: 0 0 auto;
  flex-shrink: 0;
  flex-wrap: nowrap;
  min-height: 37px;
  position: relative;
  width: 100%;
  z-index: 5;
}

/* Tab list area grows between Create New and ⋮; scroll when many pages are open */
.WindowEditor .x2f4d > .expanded,
.WindowEditor .x2f4d > ui-container.xafc4 {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.WindowEditor .xafc4 ui-list-view.sh {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
}

.WindowEditor .xb97a6,
.WindowEditor .xaa65 {
  flex-shrink: 0;
}

/* Tab body panel — full height/width */
.WindowEditor .x540e {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.StudioTabsView .x045b {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.WindowEditor .x540e > ui-stack {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* Only tab-body stack — global ui-stack > ui-positioned breaks dashboard clicks */
.WindowEditor .x540e > ui-stack > ui-positioned {
  bottom: 0;
  height: 100%;
  left: 0;
  min-height: 0;
  pointer-events: none;
  right: 0;
  top: 0;
  width: 100%;
}

/*
 * Tab pane shell — layout only. Never hit-test here: stacked Positioned layers all
 * fill the stack; Dart skips inactive widgets, React must not put pointer-events:auto
 * on this outer ui-container (codegen does not emit visibility on it).
 * Visible descendants still receive clicks (pointer-events is not inherited).
 */
.WindowEditor .x540e > ui-stack > ui-positioned > ui-container {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  min-width: 0;
  pointer-events: none;
  width: 100%;
}

/* Inactive pane shells / inner Visibility */
.WindowEditor .x540e > ui-stack > ui-positioned > ui-container[data-hide],
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container[style*="display: none"] {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}

/* Visible tab pane: re-enable hit-testing on interactive content (shell stays none) */
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([data-hide])
  > * {
  pointer-events: auto;
}

/* AI Agent tab — fill tab body (d3e width 500 is Flutter sidebar width; web uses full pane) */
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([data-hide])
  .x045b,
.StudioTabsView .x045b {
  max-width: 100%;
  width: 100% !important;
}

.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  > ui-container,
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Overview tab: ScrollView2 (.xb2ea) inside visible pane */
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  .xb2ea {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* AI Agent tab: document host inside visible pane */
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  .x045b {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* SinglePageEditor tabs (Model, Struct, OptionSet, …) — fill tab body */
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  ui-column.ModelEditorView1,
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  > ui-container
  > ui-column.ModelEditorView1,
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  .TWModelEditor.ModelEditorView1,
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  > ui-container
  .TWModelEditor.ModelEditorView1,
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  ui-column.SinglePageEditor,
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  > ui-container
  ui-column.SinglePageEditor {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Widget/Page canvas tabs — TWEditorShell + CanvasEditorView fill tab body */
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  .TWEditorShell,
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  > ui-container
  .TWEditorShell,
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  ui-stack.CanvasEditorView {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Model editor — Expanded renders div.expanded (not ui-expanded) */
ui-column.ModelEditorView1 > .expanded,
ui-column.SinglePageEditor > .expanded,
.ModelEditorView1 > .expanded,
.SinglePageEditor > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

ui-column.ModelEditorView1 > .expanded > ui-container.x2102 > .ModelEditorForm,
.TWModelEditor.ModelEditorView1 > .ModelEditorForm {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

ui-column.ModelEditorView1 > .expanded > ui-container.x2102 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

ui-column.ModelEditorView1
  > .expanded
  > ui-container.x2102
  > ui-column.SinglePageEditor,
ui-column.SinglePageEditor.TWModelEditor-single-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

ui-column.SinglePageEditor > .expanded > ui-row.x121f,
.SinglePageEditor ui-row.x121f {
  align-items: stretch;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

ui-column.SinglePageEditor ui-row.x121f > .expanded,
.SinglePageEditor ui-row.x121f > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Flattened main form scroll (model-form-flatten): Expanded > ScrollView2 directly */
ui-column.SinglePageEditor
  ui-row.x121f
  > .expanded
  > ui-scroll-view.ScrollView2.x0cbc,
.SinglePageEditor ui-row.x121f > .expanded > ui-scroll-view.ScrollView2.x0cbc {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-column.SinglePageEditor ui-row.x0ef2,
.SinglePageEditor ui-row.x0ef2 {
  align-items: stretch;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Vertical divider between section nav and main form — must not consume flex height */
ui-column.SinglePageEditor ui-row.x0ef2 > ui-container.x4d66,
.SinglePageEditor ui-row.x0ef2 > ui-container.x4d66 {
  align-self: stretch;
  flex-shrink: 0;
  height: auto !important;
  min-height: 100%;
  width: 1px;
}

ui-column.SinglePageEditor ui-row.x0ef2 > .expanded,
.SinglePageEditor ui-row.x0ef2 > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

ui-column.SinglePageEditor .x81df {
  flex-shrink: 0;
  max-width: 12.5rem;
  min-width: 12.5rem;
  width: 12.5rem;
}

ui-column.SinglePageEditor ui-container.x845a,
.SinglePageEditor ui-container.x845a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

ui-column.SinglePageEditor
  ui-container.x845a
  > ui-scroll-view.ScrollView2.x0cbc,
.SinglePageEditor ui-container.x845a > ui-scroll-view.ScrollView2.x0cbc {
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
}

ui-column.SinglePageEditor ui-container.x845a,
.SinglePageEditor ui-container.x845a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.SinglePageEditor .x0cbc,
ui-column.SinglePageEditor .x0cbc,
ui-column.SinglePageEditor ui-scroll-view.ScrollView2.x0cbc {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}

/* Section headers: TitleWithHelp + UnderlineButton + Create */
ui-column.SinglePageEditor ui-row:has(.TitleWithHelp),
.SinglePageEditor ui-row:has(.TitleWithHelp) {
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.625rem;
}

ui-column.SinglePageEditor .UnderlineButton ui-text,
.SinglePageEditor .UnderlineButton ui-text {
  color: var(--c5);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

ui-column.SinglePageEditor .UnderlineButton:hover ui-text,
.SinglePageEditor .UnderlineButton:hover ui-text {
  text-decoration: underline;
}

/* Row.max from mainAxisSize.max on SinglePageEditor layout rows */
ui-column.SinglePageEditor ui-row.Row.max.x121f,
ui-column.SinglePageEditor ui-row.max.x121f {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-column.SinglePageEditor ui-row.Row.max.x0ef2,
ui-column.SinglePageEditor ui-row.max.x0ef2 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-column.SinglePageEditor > ui-column.ProjectObjectFooterView,
.SinglePageEditor > ui-column.ProjectObjectFooterView {
  flex-shrink: 0;
}

/* Design tab (CanvasEditorView) inside WindowEditor — remeasure after tab switch */
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([style*="display: none"])
  .canvas-editor-shortcuts-focus {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* TW editor shell (CanvasEditorView and other migrated editors) — flex height through native ui-stack */
.TWEditorShell,
.TWEditorShell-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.TWEditorShell-body > ui-stack.CanvasEditorView,
.TWEditorShell-body > ui-center.CanvasEditorView,
.StudioTabsView .TWEditorShell,
.StudioTabsView .TWEditorShell-body {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-stack.CanvasEditorView {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Page/widget canvas tab: keep canvas toolbar + studio tabs visible */
ui-stack.CanvasEditorView > ui-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

ui-stack.CanvasEditorView > ui-column > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

ui-stack.CanvasEditorView > ui-column > .expanded > ui-container.x2d4 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Legacy selector kept for older wrappers that nest ui-stack inside .CanvasEditorView */
.CanvasEditorView > ui-stack > ui-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.CanvasEditorView .ResizableView ui-container.x92d7 > ui-column > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.CanvasEditorView .x2d4 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.CanvasEditorView .ResizableView ui-container.x92d7 > ui-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.CanvasEditorView .ResizableView ui-container.x92d7 > ui-column > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.CanvasEditorView .CanvasTopBar,
.CanvasEditorView .x1f5 {
  flex-shrink: 0;
  min-height: 35px;
  width: 100%;
}

.CanvasEditorView .x1e2 {
  align-items: stretch;
  align-self: stretch;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-layout-bounds > .canvas-pointer-surface {
  display: block;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-stack.xd1d.stack-expand,
ui-stack.CanvasMainStackView.stack-expand,
ui-stack.CanvasMainView.stack-expand {
  align-self: stretch;
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Design canvas viewport: LayoutBounds + stack chain must fill the expanded pane */
ui-layout-bounds {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.CanvasEditorView .x1e2 > .expanded {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.CanvasEditorView .xd1d {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.CanvasEditorView .xd1d > ui-stack.CanvasMainStackView,
.CanvasEditorView ui-stack.CanvasMainStackView {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.CanvasEditorView ui-stack.CanvasMainView {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

/* Properties panel stays fixed width on the right; canvas takes the rest */
.CanvasEditorView .xe6a0 {
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
  min-width: 300px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.CanvasEditorView .xdedd {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.ProjectExplorerView .expanded > ui-container.x9769,
.ProjectExplorerView ui-container.x9769,
.ProjectExplorerView ui-container.x9769 > ui-column.StudioTabsView {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Legacy selector (x9769 was never on .expanded itself) */
.ProjectExplorerView .expanded.x9769,
.ProjectExplorerView .expanded.x9769 > ui-column.StudioTabsView {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-column.StudioTabsView,
ui-column.StudioTabsView.max {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-column.StudioTabsView > .expanded,
ui-column.StudioTabsView.max > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

ui-column.StudioTabsView > .expanded > ui-container.x0991 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-column.WindowEditor,
ui-column.WindowEditor.max {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.StudioTabsView .xb2ea {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* Studio tab bar — Dart WindowEditor parity */
.WindowEditor ui-container.studio-tab-bar {
  flex-shrink: 0;
}

.WindowEditor .xb97a6 {
  align-self: stretch;
  display: flex;
  height: 100%;
}

.WindowEditor .x9869 {
  border-radius: 0 !important;
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  min-height: 35px;
}

.WindowEditor .x9869 > .Button,
.WindowEditor .x9869 > .Button > ui-container {
  border-radius: 0 !important;
  height: 100%;
  min-height: 35px;
}

/* Create New — theme selector .ButtonWithNoBorderRadius1.Button never matches (split across parent/child) */
.StudioTabsView .ButtonWithNoBorderRadius1 .Button,
.WindowEditor .x9869 .Button,
.WindowEditor .x9869 .Button .xb41,
.WindowEditor .x9869 .Button .x18fd {
  color: var(--c15);
}

.WindowEditor .x62ba:not([data-c0]) {
  border-bottom: none !important;
  border-bottom-width: 0 !important;
}

.WindowEditor .x62ba[data-c0] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

ui-column.StudioDocumentView.max {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-column.StudioDocumentView.max > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.StudioDocumentView .xc7db {
  display: block;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.ProjectExplorerView ui-row.row-project-explorer {
  align-items: stretch;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

.ProjectExplorerView ui-container.x92d7 > ui-row {
  align-items: stretch;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

.ProjectExplorerView ui-container.x92d7 .expanded {
  align-self: stretch;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

/* ResizableView — Dart parity (project tree + panels) */
ui-stack.ResizableView,
.ResizableView {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  position: relative;
  width: 100%;
}

.ResizableView .xb1b4,
.ResizableView .xb1b4e {
  align-items: stretch;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.ResizableView ui-container.resizable-first-pane,
.ResizableView .xb1b4 > ui-container.resizable-first-pane,
.ResizableView .xb1b4 > ui-container:first-of-type,
.ResizableView .xb1b4e > ui-container:last-of-type {
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-shrink: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.ResizableView .xb1b4e > ui-container.resizable-first-pane,
.ResizableView .xb1b4e > ui-container:last-of-type {
  max-width: 100%;
}

.ResizableView .xb1b4 > .expanded,
.ResizableView .xb1b4e > .expanded,
.ResizableView ui-container.x92d7 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.ProjectExplorerView .xb8c0 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.ProjectExplorerView .xb8c0 > ui-column {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

ui-column.ProjectTree.max,
.ProjectExplorerView ui-column.ProjectTree {
  height: 100%;
  min-height: 0;
  width: 100%;
}

.ProjectExplorerView .ProjectTree .xa0a {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.ProjectExplorerView .ProjectTree .xb172 {
  flex-shrink: 0;
  width: 100%;
}

.ProjectExplorerView .ProjectTree .x5c7,
.ProjectExplorerView .ProjectTree .TreeNodeView {
  width: 100%;
}

.resizable-splitter {
  background: transparent;
}

/* Show resize line only while dragging — not after mouse release */
.ResizableView.is-resizing .resizable-splitter.resizable-splitter-active {
  background: var(--c7);
}

.ResizableView.is-resizing .resizable-drag-line {
  background-color: var(--c7);
}

/* Project tree: keep labels left-aligned next to icons (not centered in panel) */
.ProjectTree ui-list-view,
.ProjectTree ui-column {
  align-items: stretch;
}

.ProjectTree ui-list-view.sv > .ToolTipWrapper {
  flex-shrink: 0;
  width: 100%;
}

/* TW Create New + workbench hooks */
.WindowEditor-twtabs .TWTabs {
  width: 100%;
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-border, var(--c7)) 60%, transparent);
}

.TWNodeTab-hook .ObjTabView,
.NodeTabView.TWNodeTab-hook {
  border-radius: 8px;
}

.TWWorkbenchShell-hook {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.TWProjectTreePanel-hook > ui-row {
  min-height: 0;
  flex: 1 1 auto;
}

.CreateNewObjectView.flex {
  background: var(--color-surface, var(--c15));
}
.ProjectExplorerView
  ui-column.ProjectTree
  > .expanded
  > ui-list-view.ListView.sv {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Create New popup: keep object type list visible inside fixed-height popup */
.PopupWrapperViewWithScroll .x51e67,
.CreateNewObjectView.xbaf > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.CreateNewObjectView.xbaf {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.CreateNewObjectView .xb4cd {
  flex: 1 1 auto;
  min-height: 160px;
}

/* Create New popup host — flex column so scroll list gets height below search */
.xf27f3 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.xf27f3 > .CreateNewObjectView,
.xf27f3 > .DefaultPopUp.PopupWrapperViewWithScroll {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
}

/* TreeNodeView mainRef / rowRef2 — Dart MainAxisAlignment.spaceBetween (label left, status right) */
.ProjectTree ui-row.xfb30,
.ProjectTree ui-row.x5154 {
  justify-content: space-between;
  width: 100%;
}

.ProjectTree ui-row.x6ac99 {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.ProjectTree .TreeNodeView ui-container.x69c {
  min-height: 28px;
  width: 100%;
}

/* Dart: depth 1/2 category icons use EdgeInsets.zero (not 5px) */
.ProjectTree .xbecb[data-c2],
.ProjectTree .xbecb[data-c3] {
  padding: 0;
}

.ProjectTree ui-row.xfb30 .xedb8,
.ProjectTree ui-row.xfb30 .x2a3c {
  text-align: left;
}

/* Workbench — full viewport height + icon rail (Dart Id15 / Id5) */
/* Screenshot wraps Workbench in a plain div — height must chain through it */
ui-page-router > div > ui-column.x8169,
ui-column.x8169 {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

ui-column.x8169 > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

ui-row.xec55 {
  align-items: stretch;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

ui-row.xec55 > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

ui-row.xec55 > .expanded > ui-stack {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

ui-row.xec55 > .expanded > ui-stack > ui-container,
ui-row.xec55 > .expanded > ui-stack > .ProjectExplorerView,
ui-row.xec55 > .expanded > ui-stack > .ResizableView {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* Workbench main stack (xf4ca): hidden panes must not block clicks */
ui-row.xec55 > .expanded > ui-stack.xf4ca > *[data-hide] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden;
}

ui-row.xec55 > .expanded > ui-stack.xf4ca > ui-container:not([data-hide]),
ui-row.xec55 > .expanded > ui-stack.xf4ca > .ProjectExplorerView,
ui-row.xec55 > .expanded > ui-stack.xf4ca > .ResizableView {
  pointer-events: auto;
}

/* Icon rail: top nav at start, Marketplace/Build/Close pinned to bottom */
ui-row.xec55 > ui-row:first-child {
  align-items: stretch;
  align-self: stretch;
  flex-shrink: 0;
  height: 100%;
}

ui-column.x0d16 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  width: 65px !important;
}

ui-column.x0d16 > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

ui-column.x0d16 > .expanded > ui-column.x59d9 {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

/* Design canvas: left tree panel from top (CanvasSideBar / BuildTree Dart parity) */
ui-container.xc6b,
.CanvasSideBar.x0ae {
  align-items: stretch;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* Widget picker beside build tree (+ icon → InsertComponentsView) */
ui-container.xa74,
ui-container.InsertComponentsView.xf9cf {
  align-items: stretch;
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.ResizableView ui-container.resizable-first-pane > ui-row.max {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* Build tree stays 210px; widget picker (+) takes the rest of the 500px pane */
.ResizableView
  ui-container.resizable-first-pane
  > ui-row.max
  > ui-container.xc6b {
  flex: 0 0 210px;
  height: 100%;
  max-width: 210px;
  min-height: 0;
  min-width: 210px;
  width: 210px;
}

.ResizableView ui-container.resizable-first-pane > ui-row.max > .expanded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.ResizableView
  ui-container.resizable-first-pane
  > ui-row.max
  > .expanded:only-child {
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
  width: 100%;
}

ui-container.InsertComponentsView > ui-column.max {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* ListView must scroll, not shrink category rows (Flutter intrinsic height parity) */
/* InsertComponentsView: Expanded now scrolls globally; keep width stretch */
ui-container.InsertComponentsView ui-column.max > .expanded {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

ui-container.InsertComponentsView ui-list-view.sv > ui-column {
  flex-shrink: 0;
  width: 100%;
}

ui-container.InsertComponentsView ui-wrap {
  flex-shrink: 0;
  width: 100%;
}

ui-container.InsertComponentsView .InsertComponentItemView,
ui-container.InsertComponentsView ui-draggable {
  display: block;
  flex-shrink: 0;
}

ui-container.InsertComponentsView .ToolTipWrapper,
ui-container.InsertComponentsView .ToolTipWrapper > ui-container {
  max-height: none;
}

ui-column.CanvasSideBar.max,
.CanvasSideBar.x0ae {
  align-items: stretch;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.CanvasSideBar .xd50,
.CanvasSideBar .x811,
.CanvasSideBar .x916,
.CanvasSideBar .xff2 {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.BuildTree.x802 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.BuildTree.x802 > ui-column {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

.BuildTree.x802 .x6c6f {
  flex-shrink: 0;
}

.BuildTree.x802 ui-list-view.xb6c {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
}

/* Design component tree (BuildTree) — Plasmic-inspired */
.BuildTree.sleek-tree ui-list-view {
  padding: 4px 6px;
}

/* Project tree: no canvas guide overlays */
.ProjectTree .TreeNodeView canvas.canvas-board-paint {
  display: none !important;
}

.BuildTree.sleek-tree .BuildTreeNodeView {
  width: 100%;
}

.BuildTree.sleek-tree .x674e {
  min-height: 24px;
}

.BuildTree.sleek-tree .BuildTreeNodeView.x599[data-c0] {
  background-color: rgba(59, 130, 246, 0.14) !important;
  border: none !important;
  border-radius: 5px !important;
}

.BuildTree.sleek-tree .BuildTreeNodeView.x599[data-c1] {
  background-color: rgba(59, 130, 246, 0.07) !important;
  border: none !important;
  border-radius: 5px !important;
}

.BuildTree.sleek-tree .xb46 {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.BuildTree.sleek-tree .xb46[data-c0] {
  font-weight: 500 !important;
}

.BuildTree.sleek-tree .x36d {
  font-size: 12px !important;
  margin: 0 5px 0 1px !important;
  color: #60a5fa !important;
}

.BuildTree.sleek-tree .x36d[data-c1] {
  color: #2563eb !important;
}

.BuildTree.sleek-tree .x638 {
  width: 16px;
  min-width: 16px;
  flex-shrink: 0;
}

ui-row.BuildTreeNodeTextView {
  gap: 1px;
  align-items: center;
  flex-wrap: nowrap;
}

.BuildTree.sleek-tree .DownArrow,
.BuildTree.sleek-tree .LeftArrow {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
}

.BuildTree.sleek-tree .DownArrow ui-icon,
.BuildTree.sleek-tree .LeftArrow ui-icon {
  font-size: 14px !important;
}

/* Above canvas paint layer (z-index 2 in CanvasView). */
ui-positioned.canvas-floating-zoom {
  z-index: 10;
  pointer-events: none;
}

ui-positioned.canvas-floating-zoom > * {
  pointer-events: auto;
}

/* Ensure horizontal centering matches Dart `Center` in absolute overlay. */
ui-positioned.canvas-floating-zoom ui-center {
  width: 100%;
}

/* Inline canvas text edit: transparent field + lavender editing chrome. */
.canvas-pointer-surface.canvas-inline-text-edit-active {
  cursor: text;
}

.canvas-inline-text-edit-overlay {
  box-sizing: border-box;
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  box-shadow: none;
}

.canvas-inline-text-edit-overlay.is-active .canvas-inline-text-edit-chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(179, 157, 219, 0.35),
    0 0 8px 1px rgba(186, 104, 200, 0.22);
  animation: canvas-inline-edit-glow 2.2s ease-in-out infinite;
}

.canvas-inline-text-edit-overlay.is-active
  .canvas-inline-text-edit-chrome::after {
  content: "Editing";
  position: absolute;
  top: 2px;
  right: 4px;
  left: auto;
  transform: none;
  padding: 1px 6px;
  font: 600 9px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7e57c2;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(179, 157, 219, 0.45);
  border-radius: 3px;
  box-shadow: none;
  pointer-events: none;
  animation: canvas-inline-edit-badge 2.2s ease-in-out infinite;
}

@keyframes canvas-inline-edit-glow {
  0%,
  100% {
    opacity: 0.72;
    box-shadow: 0 0 0 1px rgba(179, 157, 219, 0.18),
      0 0 10px 1px rgba(186, 104, 200, 0.2),
      inset 0 0 8px rgba(179, 157, 219, 0.04);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(179, 157, 219, 0.38),
      0 0 18px 3px rgba(186, 104, 200, 0.38),
      inset 0 0 14px rgba(179, 157, 219, 0.1);
  }
}

@keyframes canvas-inline-edit-badge {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

.canvas-inline-text-edit-overlay .CanvasInlineTextViewEditorMainView-field {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  border: none !important;
  outline: none !important;
  resize: none;
  margin: 0;
  line-height: 1.4;
  overflow-x: hidden;
  overflow-y: hidden;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  caret-color: #1e88e5;
  appearance: none;
  -webkit-appearance: none;
}

.canvas-inline-text-edit-overlay
  .CanvasInlineTextViewEditorMainView-field:focus {
  caret-color: #1565c0;
}

.canvas-inline-text-edit-overlay
  .CanvasInlineTextViewEditorMainView-field::selection {
  background: var(--inline-edit-selection, rgba(30, 136, 229, 0.28));
  color: inherit;
}

/* React CanvasMainView uses a plain div overlay (not ui-positioned). */
.canvas-floating-zoom {
  position: fixed;
  /* Keep above the canvas paint surface regardless of DOM order. */
  z-index: 10000 !important;
  pointer-events: none;
}

.canvas-floating-zoom > * {
  pointer-events: auto;
}

/* Floating zoom bar: intrinsic width (Dart MainAxisSize.min parity). */
ui-container.floating-zoom-bar {
  width: fit-content;
  max-width: calc(100vw - 48px);
  align-self: center;
}

ui-container.floating-zoom-bar > ui-row.floating-zoom-toolbar {
  width: fit-content;
  flex: 0 0 auto;
  height: auto;
}

ui-row.floating-zoom-toolbar {
  flex: 0 0 auto;
  width: fit-content;
}

ui-row.floating-zoom-toolbar > ui-container.mouse-tools-shrink {
  flex: 0 0 auto;
  align-self: center;
}

/* MouseToolsView in FloatingZoomControl: intrinsic width (Dart/Flutter parity). */
ui-container.mouse-tools-shrink {
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  height: auto;
  flex: 0 0 auto;
  align-items: flex-start;
  align-self: center;
}

ui-container.mouse-tools-shrink > ui-wrap.mouse-tools-wrap,
ui-container.mouse-tools-shrink > ui-wrap {
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
  flex-wrap: nowrap;
}

ui-wrap.jd-col {
  flex-direction: column;
}

ui-loader {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

canvas {
  width: 100%;
  height: 100%;
}

/* Design canvas: pixel size must match backing store (not 100% of 50000 workspace). */
canvas.canvas-board-paint {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}
/* extra iframs which mostly need for user*/
@keyframes rotateClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotateCounterClockwise {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* DashBoardView: sidebar + main content fill viewport */
.DashBoardView {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  width: 100%;
}

/* Root is ui-stack (not ui-row) — must participate in flex height chain */
.DashBoardView > ui-stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.DashBoardView ui-row {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
}

.DashBoardView ui-row > ui-container.SidebarStyles {
  flex-shrink: 0;
}

.DashBoardView ui-row > .expanded {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
}

.DashBoardView ui-row > .expanded > ui-container.BackgroundColorColumn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* MyDashBoardView: flex height chain so ScrollView2 (.x59be) can scroll */
ui-container.BackgroundColorColumn {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

ui-container.BackgroundColorColumn > ui-column.MyDashBoardView,
ui-container.BackgroundColorColumn > ui-column.max.MyDashBoardView {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

ui-column.MyDashBoardView > .expanded,
ui-column.MyDashBoardView.max > .expanded {
  flex: 1 1 auto;
  min-height: calc(100vh - 160px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Stack uses grid by default; use flex column so ScrollView2 can fill and scroll */
ui-column.MyDashBoardView > .expanded > ui-stack.x69e4,
ui-column.MyDashBoardView.max > .expanded > ui-stack.x69e4 {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
  position: relative;
  align-self: stretch;
}

/* ScrollView2 is direct child of stack (after layout patch) */
ui-column.MyDashBoardView ui-stack.x69e4 > ui-scroll-view.ScrollView2.x59be,
ui-column.MyDashBoardView
  ui-stack.x69e4
  > ui-container
  > ui-scroll-view.ScrollView2.x59be {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto !important;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
  grid-area: unset !important;
  align-self: stretch;
}

ui-column.MyDashBoardView ui-stack.x69e4 > ui-container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

ui-column.MyDashBoardView ui-stack.x69e4 > ui-positioned {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  grid-area: unset !important;
  pointer-events: none;
}

ui-column.MyDashBoardView ui-stack.x69e4 > ui-positioned * {
  pointer-events: auto;
}

/* ProjectIntilizerView: flex height chain so initializer fills the page router viewport */
ui-container.ProjectIntilizerView {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

ui-container.ProjectIntilizerView > ui-stack {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}

ui-container.ProjectIntilizerView > ui-stack > .ProjectInitializerVisual {
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* ── Premium project tree (Explore sidebar) ── */
.ProjectExplorerView .xb8c0 {
  background: linear-gradient(
    180deg,
    color-mix(
        in srgb,
        var(--color-surface, #fff) 96%,
        var(--color-primary, #6366f1)
      )
      0%,
    var(--color-background, #f8fafc) 100%
  );
  border-right: 1px solid
    color-mix(in srgb, var(--color-border, #e2e8f0) 80%, transparent);
}

.ProjectTree.sleek-tree {
  padding: 6px 8px 10px;
  gap: 6px;
}

.ProjectTree.sleek-tree .xb172 {
  padding: 4px 2px 10px;
}

.ProjectTree.sleek-tree .NewSearchBarContainer {
  border-radius: 10px;
  border: 1px solid
    color-mix(in srgb, var(--color-border, #e2e8f0) 75%, transparent);
  background: var(--color-card, #fff);
  box-shadow: 0 1px 3px
    color-mix(in srgb, var(--color-foreground, #0f172a) 4%, transparent);
  overflow: hidden;
}

.ProjectTree.sleek-tree .NewSearchInputField {
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
}

.ProjectTree.sleek-tree .TreeNodeView ui-container.x69c {
  min-height: 30px;
  border-radius: 8px;
  margin: 1px 0;
  transition: background 0.15s ease;
}

.ProjectTree.sleek-tree .TreeNodeView ui-container.x69c[data-c1] {
  background-color: color-mix(
    in srgb,
    var(--color-primary, #6366f1) 14%,
    transparent
  ) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: inset 3px 0 0 var(--color-primary, #6366f1);
}

.ProjectTree.sleek-tree .TreeNodeView ui-container.x69c[data-c2] {
  background-color: color-mix(
    in srgb,
    var(--color-primary, #6366f1) 7%,
    transparent
  ) !important;
  border-radius: 8px !important;
}

.ProjectTree.sleek-tree .xa0a {
  padding-right: 2px;
}

/* ── Tree row layout: grid columns [chevron | icon | label] ── */
.ProjectTree.sleek-tree .ProjectTreeNodeView,
.ProjectTree.sleek-tree .ProjectTreeNodeView > ui-container {
  width: 100%;
  min-width: 0;
}

.ProjectTree.sleek-tree .ProjectTreeNodeView ui-draggable,
.ProjectTree.sleek-tree .ProjectTreeNodeView > ui-container > ui-draggable {
  display: block !important;
  width: 100% !important;
  min-width: 0;
}

.ProjectTree.sleek-tree .TreeNodeView ui-stack {
  display: block !important;
  position: relative;
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 0;
  overflow: visible;
}

.ProjectTree.sleek-tree .TreeNodeView ui-stack > * {
  grid-area: unset !important;
  position: relative !important;
  width: 100%;
  max-width: 100%;
}

.ProjectTree.sleek-tree .TreeNodeView ui-container.x69c {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.ProjectTree.sleek-tree .TreeNodeView ui-row.xfb30 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0;
  min-height: 30px;
}

.ProjectTree.sleek-tree .TreeNodeView ui-row.xfb30 > .expanded {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Primary row: chevron slot | type icon slot | label slot */
.ProjectTree.sleek-tree .TreeNodeView ui-row.x6ac99 {
  display: grid !important;
  grid-template-columns: 18px 22px minmax(0, 1fr);
  column-gap: 6px;
  align-items: center !important;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 2px 4px 2px 0;
}

.ProjectTree.sleek-tree .TreeNodeView ui-row.x6ac99 > ui-container.x283e,
.ProjectTree.sleek-tree .TreeNodeView ui-row.x6ac99 > ui-container.x6bde {
  grid-column: 1;
  grid-row: 1;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-self: center;
  align-self: center;
}

.ProjectTree.sleek-tree .TreeNodeView ui-row.x6ac99 > ui-icon.xbecb,
.ProjectTree.sleek-tree .TreeNodeView ui-row.x6ac99 > ui-icon.IconView {
  grid-column: 2;
  grid-row: 1;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center;
  align-self: center;
}

.ProjectTree.sleek-tree .TreeNodeView ui-row.x6ac99 > .expanded {
  grid-column: 3;
  grid-row: 1;
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  flex: unset !important;
}

.ProjectTree.sleek-tree .TreeNodeView ui-row.x5154 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100%;
  min-width: 0;
  min-height: 22px;
  gap: 6px;
}

.ProjectTree.sleek-tree .TreeNodeView ui-row.x5154 > .expanded {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
}

.ProjectTree.sleek-tree .TreeNodeView ui-row.x5154 > ui-container,
.ProjectTree.sleek-tree .TreeNodeView ui-row.x5154 > .IconButtonDefault {
  flex: 0 0 auto;
  align-self: center;
}

.ProjectTree.sleek-tree .TreeNodeView ui-container.x53e {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100%;
  min-width: 0;
  min-height: 22px;
}

.ProjectTree.sleek-tree .TreeNodeView ui-container.x53e ui-draggable {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  min-width: 0;
  min-height: 22px;
}

.ProjectTree.sleek-tree .TreeNodeView label.xedb8,
.ProjectTree.sleek-tree .TreeNodeView label.x2a3c,
.ProjectTree.sleek-tree .TreeNodeView .TextView.xedb8 {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  line-height: 1.25 !important;
  vertical-align: middle;
}

.ProjectTree.sleek-tree .x283e ui-icon,
.ProjectTree.sleek-tree .x283e .IconView {
  font-size: 15px !important;
  opacity: 0.55;
  width: 15px !important;
  height: 15px !important;
  line-height: 1;
}

.ProjectTree.sleek-tree .xedb8,
.ProjectTree.sleek-tree .x2a3c {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

.ProjectTree.sleek-tree .xedb8[data-c4],
.ProjectTree.sleek-tree .xedb8[data-c2] {
  font-weight: 600 !important;
  color: var(--color-primary, #6366f1) !important;
}

.ProjectTree.sleek-tree .TreeNodeView canvas.canvas-board-paint {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

.ProjectTree.sleek-tree .x5c7 {
  padding: 0 !important;
}

.ProjectTree.sleek-tree .xa0a {
  padding-right: 2px;
}

ui-container.ProjectIntilizerView > ui-stack > ui-column.x54a {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  min-height: 0;
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Project Overview tab (ProjectSpecificationView)                     */
/* Fixes theme hash collisions (e.g. .xab0c height:15px) and layout.  */
/* ------------------------------------------------------------------ */

ui-scroll-view.ProjectSpecificationView,
ui-scroll-view.ScrollView2.ProjectSpecificationView {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

ui-scroll-view.ProjectSpecificationView > ui-column,
.ProjectSpecificationView ui-column.x199d {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: auto;
  min-height: min-content;
  width: 100%;
}

.ProjectSpecificationView .x4067,
.ProjectSpecificationView .xd9d8,
.ProjectSpecificationView .xd9d8a {
  flex-shrink: 0;
  height: 24px;
  width: 100%;
}

.ProjectSpecificationView .xf066,
.ProjectSpecificationView .x06a4 {
  flex-shrink: 0;
  width: 100%;
}

.ProjectSpecificationView .x06a4 {
  background-color: var(--c15);
  border: 1px solid var(--c8);
  border-radius: 16px;
  box-sizing: border-box;
}

ui-container.ModelSpecificationView,
ui-container.overview-models-section,
.ModelSpecificationView {
  flex-shrink: 0;
  height: auto !important;
  min-height: 0;
  width: 100%;
}

ui-container.PageViewSpecification,
ui-container.overview-pages-section,
.PageViewSpecification {
  flex-shrink: 0;
  height: auto !important;
  min-height: 0;
  width: 100%;
}

.overview-models-section .xc4c0,
.overview-pages-section .xe37,
.overview-pages-wrap {
  margin-top: 16px;
  width: 100%;
}

.overview-models-section ui-wrap,
.overview-pages-section ui-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}

.overview-models-section .layout-builder-slot,
.overview-pages-section .layout-builder-slot {
  flex: 1 1 100%;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.overview-spec-card {
  box-sizing: border-box;
  height: auto !important;
  min-width: 280px;
}

.overview-pages-section .x19d2 {
  margin-top: 12px;
  overflow: hidden;
  width: 100%;
}

.overview-pages-section .x19d2 img,
.overview-pages-section .x13b {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.overview-models-section .xafc,
.overview-pages-section .x788 {
  margin-bottom: 4px;
}

/* Handwritten TW Overview tab — fill tab pane */
.WindowEditor
  .x540e
  > ui-stack
  > ui-positioned
  > ui-container:not([data-hide])
  .OverviewView-root {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100%;
}