body {
  margin: 0;
  font-family: "Noto Sans", "Segoe UI", "Helvetica Neue", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
  overflow: hidden !important;
}

#root {
  width: 100vw;
  height: 100vh;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
.leaflet-container {
  height: 100%;
  width: 100%;
}

/* noto-sans-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(45eb0265067aa34f9199.woff2) format('woff2'), url(6cc1a97807dbf9a05c6b.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* noto-sans-cyrillic-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(96d6efd5580b41de53e6.woff2) format('woff2'), url(0b94f5844239abfaf40f.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* noto-sans-devanagari-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(ce41a26bdafdf523e257.woff2) format('woff2'), url(f05a9c61a35577626752.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* noto-sans-greek-ext-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(cc048507994039b6463f.woff2) format('woff2'), url(047e5c1819fbe26f81f9.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* noto-sans-greek-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(e3cac0c1e95c169e9ca7.woff2) format('woff2'), url(14d43341db9c476a80be.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* noto-sans-vietnamese-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(8685aabaa4ccebed7b0f.woff2) format('woff2'), url(8098e5a571d23f4bba44.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* noto-sans-latin-ext-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(c4fc9143412ec6a991b3.woff2) format('woff2'), url(cabb9a4f02da292cd625.woff) format('woff');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* noto-sans-latin-400-normal */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(c417ee867416d52e5187.woff2) format('woff2'), url(5bddddc6924b3623ddc9.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
.label {
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 6px;
  padding-bottom: 6px;
  display: grid;
  align-items: center;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  justify-content: start;
}

.label-slim {
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 6px;
  display: grid;
}

.label-toolbar-slim {
  padding-top: 0px !important;
  display: grid !important;
}

.label-iconGrid {
  grid-column: 1;
}

.label-text {
  padding-left: 6px;
  padding-right: 6px;
  grid-column: 2;
  min-width: 40px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

.label-toolbar3 {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  display: grid !important;
}

.label-toolbar {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  display: inline-block;
}

.label-dropdown {
  padding-top: 3px !important;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.label-rpad {
  padding-right: 4px;
}

.label-piece {
  padding-left: 7px;
  padding-top: 6px;
  padding-bottom: 6px;
  vertical-align: top;
  border-radius: 3px 3px 0px 0px;
  border-left: solid 1px transparent;
  border-bottom: solid 1px transparent;
  border-right: solid 1px transparent;
}

.label-arrowouter {
  padding-top: 12px;
  padding-bottom: 6px;
  vertical-align: top;
  border-radius: 3px 3px 0px 0px;
  border-left: solid 1px transparent;
  border-bottom: solid 1px transparent;
  border-right: solid 1px transparent;
}

/* Minecraft-styled tab — selected (pressed/inset stone button) */
.label-tab {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: top;
  white-space: nowrap;
  color: #ffffff;
  background-color: #52a535;
  border: 2px solid #1e4d14;
  box-shadow:
    inset -2px -2px 0 #3e8828,
    inset 2px 2px 0 #6fc24a;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  image-rendering: pixelated;
}

/* Minecraft-styled tab — unselected (raised stone button) */
.label-deseltab {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  vertical-align: top;
  white-space: nowrap;
  color: #d0d0d0;
  background-color: #3a3a3a;
  border: 2px solid #131313;
  box-shadow:
    inset -2px -2px 0 #212121,
    inset 2px 2px 0 #4e4e4e;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  image-rendering: pixelated;
  transition: filter 0.05s;
}

.label-deseltab:hover {
  background-color: #454545;
  box-shadow:
    inset -2px -2px 0 #2a2a2a,
    inset 2px 2px 0 #585858;
  color: #ffffff;
}

.icons-caption {
  padding-left: 11px;
  font-size: 12pt;
}

.label-arrow {
  padding-left: 2px;
  padding-right: 2px;
  position: relative;
  grid-column: 3;

  top: -4px;
}

.label-light {
  font-size: 1pt;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: solid 1px #303030;
  position: relative;
}

.label-yellow {
  background-color: yellow;
}

.label-green {
  background-color: green;
}

.label-button {
  padding-left: 1px;
  padding-top: 7px;
  padding-bottom: 7px;
  vertical-align: top;
  min-width: 31px;
  display: inline-block;
  background-color: #000000;
  color: #c0c0c0;
}

.label-selected {
  background-color: #202020;
  color: green;
}

/* Filter chip styling for Inspector Items view */
.filter-chip {
  user-select: none;
}

.filter-chip:hover {
  filter: brightness(1.15);
}

.filter-chip:active {
  transform: scale(0.97);
}

.filter-chip:focus-visible {
  outline: 2px solid #52a535;
  outline-offset: 2px;
}

.label-icon {
  padding: 5px;
  vertical-align: middle;
  min-width: 35px;
  min-height: 33px;
  text-align: center;
  display: inline-block;
  background-color: #000000;
  color: #c0c0c0;
}

/* Toggle icon for show/hide menu items - consistent sizing and alignment */
.label-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  border: 2px solid;
  font-size: 13px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.label-toggle-on {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.label-toggle-off {
  opacity: 0.7;
}

/* Project Property Editor - Structural/Layout Styles
   
   Theme-aware colors are applied via inline styles from the Fluent UI theme object.
   This CSS file contains only structural, layout, and non-theme-dependent styles.
   
   See FormEditorUXGuidelines.md for theming approach documentation.
*/

/* ========================================
   Base Layout
   ======================================== */

.ppe-outer {
  user-select: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  font-family: "Noto Sans", sans-serif;
}

/* Header - Consistent page header style with subtle gradient */
.ppe-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Noto Sans", sans-serif;
  font-size: 16pt;
  font-weight: 600;
  margin: 0;
  padding: 16px 24px;
  letter-spacing: 0.3px;
  /* Subtle gradient background - works in both light and dark modes */
  background: linear-gradient(135deg, rgba(82, 165, 53, 0.12) 0%, rgba(82, 165, 53, 0.06) 50%, transparent 100%);
  border-bottom: 2px solid rgba(82, 165, 53, 0.5);
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Accent line effect */
.ppe-header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, #52a535 0%, transparent 100%);
}

@media only screen and (max-width: 600px) {
  .ppe-header {
    padding: 12px 12px;
    font-size: 1rem;
    gap: 8px;
  }
}

.ppe-headerIcon {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Content area */
.ppe-content {
  padding: 20px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  box-sizing: border-box;
  max-width: 100%;
}

.ppe-content > .ppe-section,
.ppe-content > .ppe-statusArea {
  max-width: 900px;
}

@media only screen and (max-width: 600px) {
  .ppe-content {
    padding: 12px 12px;
  }
}

/* ========================================
   Sections
   ======================================== */

.ppe-section {
  border: 1px solid;
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.ppe-sectionHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 18px;
  border-bottom: 1px solid;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .ppe-sectionHeader {
    padding: 12px 12px;
    font-size: 0.8rem;
  }
}

.ppe-sectionIcon {
  font-size: 0.9rem;
  opacity: 0.9;
  /* a11y: keep the Minecraft-green accent on the icon even after we
     switched the section-header text color to high-contrast foreground1
     for WCAG 1.4.3. Icons only need 3:1 (WCAG 1.4.11) which #52a535
     meets against both light and dark section backgrounds. */
  color: #52a535;
}

@media (forced-colors: active) {
  /* In Windows High Contrast, the green is replaced with system colors;
     LinkText keeps the icon visually distinct from the surrounding text. */
  .ppe-sectionIcon {
    color: LinkText;
  }
}

.ppe-sectionContent {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 100%;
  box-sizing: border-box;
}

@media only screen and (max-width: 800px) {
  .ppe-sectionContent {
    grid-template-columns: 1fr;
    padding: 12px;
  }
}

/* ========================================
   Field Layout
   ======================================== */

.ppe-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.ppe-field-full {
  grid-column: 1 / -1;
}

.ppe-fieldLabel {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ppe-fieldInput {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Fluent UI Input wrapper override - removes wrapper styling */
.ppe-fieldInput .ui-input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

input.ppe-fieldInput,
.ppe-fieldInput input,
.ppe-fieldInput .ui-input__input {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 14px !important;
  font-size: 0.9rem !important;
  font-family: inherit !important;
  border: 1px solid var(--ppe-input-border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  background: var(--ppe-input-bg, rgba(0, 0, 0, 0.25)) !important;
  color: inherit !important;
}

input.ppe-fieldInput:hover,
.ppe-fieldInput input:hover,
.ppe-fieldInput .ui-input__input:hover {
  border-color: var(--ppe-input-border-hover, rgba(255, 255, 255, 0.25)) !important;
}

input.ppe-fieldInput:focus,
.ppe-fieldInput input:focus,
.ppe-fieldInput .ui-input__input:focus {
  border-color: #52a535 !important;
}

input.ppe-fieldInput:focus-visible,
.ppe-fieldInput input:focus-visible,
.ppe-fieldInput .ui-input__input:focus-visible {
  outline: 2px solid #52a535 !important;
  outline-offset: 2px !important;
}
input.ppe-fieldInput::placeholder,
.ppe-fieldInput input::placeholder {
  font-style: italic;
  opacity: 0.5;
}

/* ========================================
   Textarea
   ======================================== */

.ppe-fieldTextArea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.ppe-fieldTextArea .ui-textarea {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

textarea.ppe-fieldTextArea,
.ppe-fieldTextArea textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 60px !important;
  padding: 12px 14px !important;
  font-size: 0.9rem !important;
  font-family: inherit !important;
  border: 1px solid var(--ppe-input-border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  resize: vertical;
  background: var(--ppe-input-bg, rgba(0, 0, 0, 0.25)) !important;
  color: inherit !important;
}

textarea.ppe-fieldTextArea:hover,
.ppe-fieldTextArea textarea:hover {
  border-color: var(--ppe-input-border-hover, rgba(255, 255, 255, 0.25)) !important;
}

textarea.ppe-fieldTextArea:focus,
.ppe-fieldTextArea textarea:focus {
  border-color: #52a535 !important;
}

textarea.ppe-fieldTextArea:focus-visible,
.ppe-fieldTextArea textarea:focus-visible {
  outline: 2px solid #52a535 !important;
  outline-offset: 2px !important;
}
textarea.ppe-fieldTextArea::placeholder,
.ppe-fieldTextArea textarea::placeholder {
  font-style: italic;
  opacity: 0.5;
}

/* ========================================
   Dropdowns
   ======================================== */

.ppe-fieldDropdown {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Native select element styling */
select.ppe-fieldDropdown {
  padding: 10px 12px !important;
  font-size: 0.9rem !important;
  font-family: inherit !important;
  border: 1px solid var(--ppe-input-border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 4px !important;
  background: var(--ppe-input-bg, rgba(0, 0, 0, 0.25)) !important;
  color: inherit !important;
  cursor: pointer;
}

select.ppe-fieldDropdown:hover {
  border-color: var(--ppe-input-border-hover, rgba(255, 255, 255, 0.25)) !important;
}

select.ppe-fieldDropdown:focus {
  border-color: #52a535 !important;
  outline: none;
}

select.ppe-fieldDropdown option {
  background: inherit;
  color: inherit;
}

.ppe-dark select.ppe-fieldDropdown option {
  background: #3a3a3a;
}

.ppe-light select.ppe-fieldDropdown option {
  background: #f5f5f5;
}

.ppe-fieldDropdown .ui-dropdown {
  width: 100% !important;
  max-width: 100% !important;
}

.ppe-fieldDropdown .ui-dropdown__container {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid var(--ppe-input-border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

.ppe-fieldDropdown .ui-dropdown__container:hover {
  border-color: var(--ppe-input-border-hover, rgba(255, 255, 255, 0.25)) !important;
}

.ppe-fieldDropdown .ui-dropdown__selected-items {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ppe-fieldNote {
  font-size: 0.75rem;
  margin-top: 4px;
  line-height: 1.4;
}

/* ========================================
   Version Inputs
   ======================================== */

.ppe-versionInputs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ppe-versionInput {
  flex: 1;
  max-width: 80px;
}

.ppe-versionInput .ui-input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

input.ppe-versionInput,
.ppe-versionInput input {
  width: 100% !important;
  padding: 12px 10px !important;
  text-align: center !important;
  border: 1px solid var(--ppe-input-border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 4px !important;
  background: var(--ppe-input-bg, rgba(0, 0, 0, 0.25)) !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  box-sizing: border-box !important;
}

input.ppe-versionInput:hover,
.ppe-versionInput input:hover {
  border-color: var(--ppe-input-border-hover, rgba(255, 255, 255, 0.25)) !important;
}

input.ppe-versionInput:focus,
.ppe-versionInput input:focus {
  border-color: #52a535 !important;
}

.ppe-versionDot {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0 2px;
}

/* ========================================
   UUID Fields
   ======================================== */

.ppe-uuidField {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 4px;
  border: 1px solid;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.ppe-uuidRow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.ppe-uuidInput {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.ppe-uuidInput .ui-input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

input.ppe-uuidInput,
.ppe-uuidInput input {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 14px !important;
  font-family: Consolas, Monaco, monospace !important;
  font-size: 0.85rem !important;
  border: 1px solid var(--ppe-input-border, rgba(255, 255, 255, 0.15)) !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  background: var(--ppe-input-bg, rgba(0, 0, 0, 0.25)) !important;
  color: inherit !important;
}

input.ppe-uuidInput:hover,
.ppe-uuidInput input:hover {
  border-color: var(--ppe-input-border-hover, rgba(255, 255, 255, 0.25)) !important;
}

input.ppe-uuidInput:focus,
.ppe-uuidInput input:focus {
  border-color: #52a535 !important;
}

.ppe-uuidRow button {
  flex-shrink: 0;
}

/* ========================================
   Tools Content
   ======================================== */

.ppe-toolsContent {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ppe-toolsContent button {
  margin: 0 !important;
}

/* ========================================
   GitHub Section
   ======================================== */

.ppe-ghActions {
  margin-top: 12px;
}

.ppe-ghshareableUrl {
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.ppe-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  text-decoration: none;
}

.ppe-link:hover {
  text-decoration: underline;
}

.ppe-signInButton {
  padding-bottom: 8px;
}

/* ========================================
   Status Area
   ======================================== */

.ppe-statusArea {
  margin-bottom: 20px;
}

/* ========================================
   Button Styling (theme-invariant green)
   ======================================== */

.ppe-toolsContent .ui-button {
  background: #52a535 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  color: white !important;
}

.ppe-toolsContent .ui-button:hover {
  background: #5fb93e !important;
}

.ppe-uuidRow .ui-button {
  background: #52a535 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  color: white !important;
}

.ppe-uuidRow .ui-button:hover {
  background: #5fb93e !important;
}

/* ========================================
   Theme variables
   ======================================== */

.ppe-dark {
  --ppe-input-border: rgba(255, 255, 255, 0.15);
  --ppe-input-border-hover: rgba(255, 255, 255, 0.25);
  --ppe-input-bg: rgba(0, 0, 0, 0.25);
}

.ppe-light {
  --ppe-input-border: rgba(0, 0, 0, 0.2);
  --ppe-input-border-hover: rgba(0, 0, 0, 0.35);
  --ppe-input-bg: rgba(255, 255, 255, 0.7);
}

/* Scrollbar styling removed — uses global Minecraft-themed scrollbars from index.css */

.ctgh-outer {
  padding: 8px;
  padding-top: 2px;
  min-height: 400px;
}
.sl-outer {
  padding: 2px;
  padding-top: 0px;
  vertical-align: middle;
  padding-left: 10px;
  display: grid;
  grid-template-columns: 1fr 30px;
  height: 100%;
  max-width: calc(100vw);
}

.sl-placeHolderText {
  padding-left: 7px;
  grid-column: 2;
}

.sl-inputArea {
  display: grid;
  width: 100%;
  grid-template-columns: 40px 1fr;
}

.sl-messageOuter {
  grid-column: 1;
  vertical-align: top;
  cursor: pointer;
  padding-top: 2px;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: clip;
  white-space: nowrap;
  max-width: calc(100vw - 42px);
}

.sl-gridOuter {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 2;
}

.sl-grid {
  border: solid 1px;
}

.tui-grid-container {
  font-family: "Noto Sans", "Segoe UI", "Helvetica Neue", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", sans-serif !important;
}

.ge-outer {
  image-rendering: pixelated;
}

.ge-image {
  padding: 6px;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: contain;
}

.ge-float {
  position: absolute;
  margin: 8px;
  z-index: 100;
}

.ge-float BUTTON {
  padding-left: 0px;
  padding-right: 0px;
  width: 36px;
  min-width: inherit;
}

/*!
 * TOAST UI Grid
 * @version 4.21.22 | Wed Jan 10 2024
 * @author NHN Cloud. FE Development Lab
 * @license MIT
 */
/*!
 * TOAST UI Select Box
 * @version 1.0.0 | Thu Oct 24 2019
 * @author NHN FE Development Lab <dl_javascript@nhn.com>
 * @license MIT
 */
.tui-select-box {
  position: relative;
}

.tui-select-box-input,
.tui-select-box-dropdown,
.tui-select-box-item-group-label,
.tui-select-box-item {
  box-sizing: border-box;
}

.tui-select-box-input {
  border: 1px solid #ddd;
}

.tui-select-box-input.tui-select-box-open,
.tui-select-box-dropdown {
  border: 1px solid #aaa;
}

.tui-select-box-input,
.tui-select-box-dropdown {
  background: #fff;
}

.tui-select-box-input,
.tui-select-box-item-group-label,
.tui-select-box-item {
  padding: 0 8px;
  height: 29px;
  font-size: 13px;
  color: #333;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}

.tui-select-box-placeholder,
.tui-select-box-item-group-label,
.tui-select-box-item {
  line-height: 29px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tui-select-box-placeholder,
.tui-select-box-icon {
  height: 100%
}

.tui-select-box-placeholder {
  display: inline-block;
  margin: 0;
  width: 80%;
  width: calc(100% - 12px);
  vertical-align: sub;
}

.tui-select-box-icon {
  display: block;
  float: right;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAECAYAAACHtL/sAAAAAXNSR0IArs4c6QAABBFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICAgICAgICAgIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDozOTU0MDZFM0JEQjExMUU2OEQ1MkUyN0M0NDdEMkIxMTwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDozOTU0MDZFNEJEQjExMUU2OEQ1MkUyN0M0NDdEMkIxMTwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDozOTU0MDZFNkJEQjExMUU2OEQ1MkUyN0M0NDdEMkIxMTwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkluc3RhbmNlSUQ+eG1wLmlpZDozOTU0MDZFNUJEQjExMUU2OEQ1MkUyN0M0NDdEMkIxMTwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K/ZqkVgAAAERJREFUGBljNDY2/s+AA5w9e5YRXQqqXgAo9xEkB1aAzRA8mmFmgg1hgvIEYKIgmgjNIGUfQATciUBX8IMEidQM0gsGAPabHJ7Zbgx5AAAAAElFTkSuQmCC) left center no-repeat;
  width: 7px;
  overflow: hidden;
  text-indent: 100%;
}

.tui-select-box-open > .tui-select-box-icon {
  background-position: right center;
}

.tui-select-box-dropdown,
.tui-select-box-item-group {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tui-select-box-dropdown {
  position: absolute;
  border-top: none;
  /* max-height: 145px; */
  overflow: auto;
  z-index: 1;
  width: 100%;
  overflow-x: hidden;
}

.tui-select-box-item-group-label {
  display: block;
  font-weight: bold;
  cursor: default;
}

.tui-select-box-item-group > .tui-select-box-item {
  padding-left: 20px;
}

.tui-select-box-selected {
  background: #f4f4f4;
}

.tui-select-box-highlight {
  background: #e5f6ff;
  outline: none;
}

.tui-select-box-disabled {
  background: #f9f9f9;
  color: #c8c8c8;
  cursor: default;
}

.tui-select-box-hidden {
  display: none; /* for test */
}
.tui-grid-container {
  width: 100%;
  position: relative;
  border-width: 0;
  clear: both;
  font-size: 13px;
  font-family: Arial, '\B3CB\C6C0', Dotum, sans-serif;
}
.tui-grid-container ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
}
.tui-grid-container ::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  background-clip: content-box;
}
.tui-grid-container * {
  box-sizing: content-box;
}
.tui-grid-container p,
.tui-grid-container input,
.tui-grid-container textarea {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: Arial, '\B3CB\C6C0', Dotum, sans-serif;
}
.tui-grid-container fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: inline;
  white-space: nowrap;
}
.tui-grid-container input[type='text'],
.tui-grid-container input[type='password'] {
  outline: none;
  box-sizing: border-box;
  line-height: normal;
}
.tui-grid-container ul,
.tui-grid-container li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tui-grid-container strong,
.tui-grid-container em {
  font-style: normal;
}
.tui-grid-container .tui-grid-pagination {
  margin-top: 20px;
}
.tui-grid-clipboard {
  position: fixed;
  top: 0px;
  left: -9999px;
  width: 100px;
  height: 100px;
}
.tui-grid-btn-text {
  display: inline-block;
  text-decoration: none;
}
.tui-grid-btn-text span {
  display: inline-block;
  position: relative;
  font-size: 11px;
  color: #333;
  padding-left: 17px;
  letter-spacing: -1px;
  line-height: 23px;
  white-space: nowrap;
  cursor: pointer;
  margin-left: 8px;
  padding-right: 7px;
}
.tui-grid-btn-text em {
  position: absolute;
  left: 0;
  top: 5px;
  width: 17px;
  height: 12px;
  background: url(data:image/png;base64,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)
    no-repeat;
}
.tui-grid-btn-sorting {
  display: inline-block;
  overflow: hidden;
  margin-left: 6px;
  height: 16px;
  width: 11px;
  background: url(data:image/png;base64,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) -91px -10px
    no-repeat;
  vertical-align: middle;
  cursor: pointer;
}
.tui-grid-btn-sorting-down {
  background-position: -133px -8px;
}
.tui-grid-btn-sorting-up {
  background-position: -112px -8px;
}
.tui-grid-btn-close {
  display: inline-block;
  overflow: hidden;
  height: 24px;
  width: 24px;
  background: url(data:image/png;base64,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) -81px -84px
    no-repeat;
  vertical-align: middle;
  cursor: pointer;
  float: right;
}
.tui-grid-btn-filter {
  display: inline-block;
  overflow: hidden;
  height: 24px;
  width: 24px;
  background: url(data:image/png;base64,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) -13px -84px
    no-repeat;
  vertical-align: middle;
  cursor: pointer;
}
.tui-grid-btn-filter-active {
  background-position: -47px -84px;
}

.tui-grid-filter-icon {
  cursor: default;
}

.tui-grid-layer-state {
  position: absolute;
  background: #fff;
  text-align: center;
  z-index: 15;
}
.tui-grid-layer-state p {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -7px;
  font-size: 14px;
  color: #ccc;
}
.tui-grid-layer-state-content {
  padding-top: 50px;
}
.tui-grid-layer-state-loading {
  display: block;
  margin: 10px auto 0;
  background: url(data:image/gif;base64,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);
  border: 0;
  width: 150px;
  height: 13px;
}
.tui-grid-layer-editing {
  position: absolute;
  background: #fff;
  z-index: 15;
  padding: 0 4px;
  border-style: solid;
  border-width: 1px;
  white-space: nowrap;
  box-sizing: border-box;
}
.tui-grid-layer-editing textarea {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 3px 10px;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}
.tui-grid-layer-focus-border {
  position: absolute;
  overflow: hidden;
  z-index: 15;
}
.tui-grid-layer-selection {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1px;
  opacity: 0.1;
  filter: alpha(opacity=10);
}

.tui-grid-table {
  margin: 0;
  width: 1px;
  box-sizing: border-box;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px hidden transparent;
  border-bottom: none;
}
.tui-grid-lside-area .tui-grid-table {
  width: 100%;
}
.tui-grid-cell {
  border-width: 1px;
  border-style: solid;
  white-space: nowrap;
  padding: 0;
  overflow: hidden;
}
.tui-grid-cell .tui-grid-cell-content {
  padding: 12px 12px 11px;
  overflow: hidden;
  box-sizing: border-box;
  word-break: break-all;
}
.tui-grid-cell img {
  vertical-align: middle;
}
.tui-grid-cell-header {
  padding: 4px 5px;
  text-align: center;
  /* @TODO: box-sizing standardize required */
  box-sizing: border-box;
}
.tui-grid-cell-summary {
  padding: 0 12px;
}
.tui-grid-cell-disabled input[type='text'],
.tui-grid-cell-disabled input[type='password'] {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.tui-grid-cell-ellipsis .tui-grid-cell-content {
  text-overflow: ellipsis;
}
.tui-grid-cell-has-input .tui-grid-cell-content {
  padding: 4px 5px;
}
.tui-grid-cell-has-tree {
  height: inherit;
  box-sizing: border-box;
}
.tui-grid-cell-has-tree .tui-grid-cell-content {
  padding-left: 14px;
}
.tui-grid-cell-content .tui-grid-content-before {
  float: left;
  margin-right: 2px;
  line-height: 1.5;
}
.tui-grid-cell-content .tui-grid-content-after {
  float: right;
  margin-left: 2px;
  line-height: 1.5;
}
.tui-grid-cell-content .tui-grid-content-input {
  display: block;
  overflow: hidden;
  line-height: 1.5;
  *margin-left: -2px;
  *padding-left: 2px;
}
.tui-grid-cell-content input[type='text'],
.tui-grid-cell-content input[type='password'] {
  width: 100%;
  padding: 6px 7px;
  border: solid 1px #ddd;
}
.tui-grid-cell-content label + input {
  margin-left: 10px;
}
.tui-grid-cell-content select:not(.tui-time-picker-select) {
  box-sizing: border-box;
}
.tui-grid-column-resize-container {
  display: none;
  position: relative;
  width: 0;
}
.tui-grid-column-resize-handle {
  float: left;
  position: absolute;
  bottom: 1px;
  left: -99px;
  width: 7px;
  background: #000;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: col-resize;
}
.tui-grid-column-resize-handle-last {
  width: 3px;
}
.tui-grid-border-line {
  position: absolute;
  z-index: 15;
}
.tui-grid-border-line-top {
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
}
.tui-grid-border-line-left {
  top: 0;
  bottom: 17px;
  left: 0;
  width: 1px;
}
.tui-grid-border-line-right {
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
}
.tui-grid-border-line-bottom {
  bottom: 0;
  left: 0;
  right: 17px;
  height: 1px;
  z-index: 10;
}
.tui-grid-no-scroll-x .tui-grid-border-line-left {
  bottom: 0;
  right: 0;
}
.tui-grid-no-scroll-y .tui-grid-border-line-bottom {
  right: 0;
}
.tui-grid-content-area {
  position: relative;
  border-style: solid;
  border-width: 0 0 1px;
}
.tui-grid-content-area.tui-grid-no-scroll-x {
  border-bottom-width: 0;
}
.tui-grid-header-area {
  border-style: solid;
  border-width: 0 0 1px;
  position: relative;
  overflow: hidden;
}
.tui-grid-header-area .tui-grid-table {
  border-top-style: solid;
}
.tui-grid-body-area {
  border-style: solid;
  border-width: 0;
  position: relative;
  overflow: scroll;
}
.tui-grid-has-summary-top .tui-grid-body-area {
  margin-top: -17px;
  border-top-width: 1px;
}
.tui-grid-no-scroll-x.tui-grid-has-summary-top .tui-grid-body-area {
  margin-top: 0;
}
.tui-grid-summary-area {
  position: relative;
  margin-top: -18px;
  border-top: 1px solid;
  overflow-y: hidden;
  overflow-x: scroll;
}
.tui-grid-no-scroll-x .tui-grid-summary-area {
  margin-top: -1px;
  margin-bottom: 1px;
  overflow-x: hidden;
}
.tui-grid-no-scroll-x .tui-grid-summary-area-right {
  bottom: 0;
}
.tui-grid-no-scroll-x.tui-grid-has-summary-top {
  margin-top: 0;
}
.tui-grid-has-summary-top .tui-grid-summary-area {
  margin-top: 0;
  border-top-style: hidden;
  margin-bottom: 0;
}
.tui-grid-lside-area {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 5;
}
.tui-grid-lside-area .tui-grid-body-area {
  margin-right: -17px;
}
.tui-grid-lside-area .tui-grid-body-area .tui-grid-selection-layer {
  left: 1px;
}
.tui-grid-rside-area {
  display: none;
  overflow: hidden;
}
.tui-grid-rside-area .tui-grid-header-area,
.tui-grid-rside-area .tui-grid-summary-area {
  margin-right: 17px;
}
.tui-grid-rside-area .tui-grid-frozen-border-top {
  position: absolute;
  top: 0;
}
.tui-grid-rside-area .tui-grid-frozen-border-top .tui-grid-column-resize-handle {
  top: 0;
}
.tui-grid-rside-area .tui-grid-frozen-border-bottom {
  position: absolute;
  bottom: 0;
  height: 17px;
}
.tui-grid-no-scroll-y .tui-grid-rside-area .tui-grid-header-area,
.tui-grid-no-scroll-y .tui-grid-rside-area .tui-grid-summary-area {
  margin-right: 0;
}
.tui-grid-body-container {
  position: relative;
  margin-top: -1px;
}
.tui-grid-table-container {
  position: absolute;
}
.tui-grid-scrollbar-right-top {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  z-index: 10;
}
.tui-grid-scrollbar-left-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 17px;
  border-style: solid;
  border-width: 0 1px;
  z-index: 10;
}
.tui-grid-scrollbar-right-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  z-index: 10;
}
.tui-grid-no-scroll-x .tui-grid-scrollbar-right-bottom {
  height: 0;
}
.tui-grid-no-scroll-x.tui-grid-has-summary-bottom .tui-grid-scrollbar-right-bottom {
  border-bottom-width: 1px;
}
.tui-grid-no-scroll-y .tui-grid-scrollbar-right-bottom {
  width: 0;
  height: 16px;
  border-left: 0;
}
.tui-grid-scrollbar-y-inner-border {
  display: block;
  position: absolute;
  right: 17px;
  width: 1px;
  z-index: 10;
}
.tui-grid-scrollbar-y-outer-border {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  z-index: 10;
}
.tui-grid-scrollbar-frozen-border {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 17px;
  border-style: solid;
  border-width: 0 1px 0 0;
  z-index: 10;
}
.tui-grid-frozen-border {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
}
.tui-grid-height-resize-handle {
  overflow: hidden;
  background-color: #fff;
  cursor: row-resize;
  height: 17px;
  border-style: solid;
  border-width: 0 1px 1px;
  border-color: #fff;
  font-size: 0;
  text-align: center;
}
.tui-grid-height-resize-handle button {
  display: block;
  width: 100%;
  cursor: row-resize;
  padding: 0;
  margin: 0;
  outline: 0;
  border: 0;
  background: transparent;
}
.tui-grid-height-resize-handle button span {
  background: url(data:image/png;base64,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)
    no-repeat -39px -10px;
  display: inline-block;
  width: 16px;
  height: 17px;
}
.tui-grid-btn-tree {
  position: absolute;
  padding: 0;
  padding-left: 4px;
  margin-top: -8px;
  top: 50%;
  width: 15px;
  height: 15px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0;
  vertical-align: middle;
  cursor: pointer;
}
.tui-grid-tree-icon {
  position: absolute;
  margin-top: -7px;
  top: 50%;
  width: 22px;
  height: 14px;
  font-size: 0;
  vertical-align: middle;
}
.tui-grid-tree-icon i {
  display: inline-block;
  margin-left: 5px;
  width: 14px;
  height: 14px;
  background: url(data:image/png;base64,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)
    no-repeat -14px -35px;
}
.tui-grid-tree-button-collapse .tui-grid-btn-tree i {
  background-position: -43px -61px;
  width: 8px;
  height: 11px;
}
.tui-grid-tree-button-collapse .tui-grid-tree-icon i {
  margin-left: 4px;
  background-position: -39px -35px;
  width: 14px;
  height: 14px;
}
.tui-grid-tree-button-expand .tui-grid-btn-tree i {
  margin-top: 2px;
  background-position: -15px -63px;
  width: 11px;
  height: 8px;
}
.tui-grid-tree-button-expand .tui-grid-tree-icon i {
  margin-left: 4px;
  background-position: -65px -35px;
  height: 14px;
  width: 14px;
}
.tui-grid-tree-wrapper-relative {
  position: relative;
  margin: -1px 0;
}
.tui-grid-tree-wrapper-valign-center {
  vertical-align: middle;
}
.tui-grid-tree-extra-content {
  position: absolute;
  margin-left: 4px;
  top: 0;
  left: 0;
  bottom: 0;
}
.tui-grid-tree-depth {
  display: inline-block;
  position: absolute;
  width: 22px;
  top: 0;
  bottom: 0;
}
.tui-grid-tree-depth i {
  display: inline-block;
  background: url(data:image/png;base64,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)
    no-repeat;
}

.tui-grid-row-hidden .tui-grid-cell {
  display: none;
}

.tui-grid-row-header-checkbox {
  padding: 4px 5px;
}

.tui-grid-filter-container {
  width: 220px;
  padding: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  background-color: #fff;
  position: absolute;
  top: 0;
  z-index: 100;
  left: 68px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

.tui-grid-filter-container .tui-grid-btn-filter,
.tui-grid-btn-close {
  margin-bottom: 6px;
}

.tui-grid-filter-dropdown {
  box-sizing: border-box;
  margin: 2px 7px;
  height: 29px;
  width: 190px;
  border: 1px solid #ddd;
}

.tui-grid-filter-dropdown select {
  height: 100%;
  width: 100%;
  font-size: 13px;
  color: #333;
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.tui-grid-filter-dropdown select:focus {
  outline: none;
}

.tui-grid-filter-container .tui-grid-filter-input {
  margin: 2px 7px;
  padding: 8px 7px;
  font-size: 13px;
  color: #333;
  border: 1px solid #ddd;
  width: 190px;
  height: 29px;
}

.tui-grid-filter-input::placeholder {
  color: rgba(51, 51, 51, 0.3);
}

.tui-grid-filter-comparator-container {
  margin: 2px 0;
  padding: 8px;
}

.tui-grid-filter-comparator {
  display: inline-block;
  margin-right: 8px;
}

.tui-grid-filter-comparator label {
  cursor: pointer;
}

.tui-grid-filter-comparator span {
  font-size: 12px;
  color: #333;
  vertical-align: middle;
}

.tui-grid-filter-comparator label::before {
  content: ' ';
  margin-right: 4px;
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(data:image/png;base64,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)
    no-repeat -113px -35px;
  vertical-align: middle;
}

.tui-grid-filter-comparator-checked label::before {
  background: url(data:image/png;base64,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)
    no-repeat -89px -35px;
}

.tui-grid-filter-comparator input[type='radio'] {
  display: none;
}

.tui-grid-filter-list-container .tui-grid-filter-list {
  margin: 4px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  max-height: 272px;
  overflow-y: scroll;
}

.tui-grid-filter-list-container .tui-grid-filter-list-item {
  color: #333;
}

.tui-grid-filter-list-item input[type='checkbox'] {
  display: none;
}

.tui-grid-filter-list-item label {
  cursor: pointer;
  display: block;
  padding: 9px 8px;
}

.tui-grid-filter-list-item label::before {
  content: ' ';
  margin-right: 6px;
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(data:image/png;base64,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)
    no-repeat -37px -118px;
  vertical-align: middle;
}

.tui-grid-filter-list-item-checked label::before {
  background: url(data:image/png;base64,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)
    no-repeat -13px -118px;
}

.tui-grid-filter-list-item label span {
  font-size: 13px;
  max-width: 152px;
  word-break: break-all;
  word-wrap: break-word;
  vertical-align: middle;
}

.tui-grid-filter-list .tui-grid-filter-list-item-checked {
  background-color: #e5f6ff;
}

.tui-grid-filter-btn-container {
  margin: 4px 5px;
  text-align: right;
}

.tui-grid-filter-btn {
  box-sizing: border-box;
  color: #fff;
  font-size: 13px;
  height: 29px;
  width: 50px;
  border-radius: 2px;
  margin-left: 4px;
  cursor: pointer;
}

.tui-grid-filter-btn-apply {
  background-color: #00a9ff;
  border: 1px solid #00a9ff;
}

.tui-grid-filter-btn-apply:hover {
  background-color: #0088d9;
  border: 1px solid #0088d9;
}

.tui-grid-filter-btn-clear {
  background-color: #777777;
  border: 1px solid #777777;
}

.tui-grid-filter-btn-clear:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

/* input datepicker icon */
.tui-grid-datepicker-input-container {
  position: relative;
}

.tui-grid-datepicker-input-container input.tui-grid-datepicker-input {
  padding: 6px 27px 6px 7px;
}

.tui-grid-date-icon {
  position: absolute;
  width: 14px;
  height: 14px;
  background: url(data:image/png;base64,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)
    no-repeat -61px -118px;
  top: 45%;
  right: 10px;
  margin: -6px 0 0 0;
  cursor: pointer;
}

/* editor ui */
.tui-grid-layer-editing-inner {
  box-sizing: border-box;
}

.tui-grid-editor-select-box-layer {
  position: absolute;
  z-index: 100;
}

.tui-grid-editor-select-box-layer * {
  box-sizing: border-box;
}

.tui-grid-editor-select-box-layer li {
  padding: 0 8px;
}

.tui-select-box-input {
  outline: none;
}

.tui-grid-container .tui-select-box-dropdown {
  max-height: 180px;
}

.tui-grid-editor-checkbox-list-layer {
  position: absolute;
  background-color: #fff;
  border: 1px solid #aaa;
  z-index: 100;
  max-height: 180px;
  overflow: hidden auto;
}

.tui-grid-editor-checkbox-list-layer * {
  box-sizing: border-box;
}

.tui-grid-editor-checkbox-list-layer .tui-grid-editor-checkbox {
  line-height: 32px;
  height: 32px;
}

.tui-grid-editor-checkbox-list-layer .tui-grid-editor-checkbox:last-child {
  margin-bottom: 1px;
}

.tui-grid-editor-checkbox-hovered {
  background-color: #e5f6ff;
}

.tui-grid-editor-checkbox input[type='checkbox'],
.tui-grid-editor-checkbox input[type='radio'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.tui-grid-editor-checkbox label {
  display: inline-block;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0 7px;
}

.tui-grid-editor-checkbox label:before {
  content: ' ';
  margin-right: 6px;
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.tui-grid-editor-checkbox label span {
  display: inline-block;
  font-size: 12px;
  color: #333;
  vertical-align: middle;
}

.tui-grid-editor-label-icon-checkbox::before {
  background: url(data:image/png;base64,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)
    no-repeat -37px -118px;
}

.tui-grid-editor-label-icon-checkbox-checked::before {
  background: url(data:image/png;base64,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)
    no-repeat -13px -118px;
}

.tui-grid-editor-label-icon-radio::before {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACMCAYAAACeTFAfAAAAAXNSR0IArs4c6QAAC/1JREFUeAHtnV9sFMcdx2fPNiEEqGPFkFYFUkilhiMKwfghNarspC9+KK0gtkUQYLUSD6loqyoqlSoRE8m0VFUUgsoDUisCtMh24YE++KWJE4lgqcGUqDKpVEAhRlXAVZxi4ib1n+v3d7eD1+vdvf179p6/I61n9je/+c3MZ3+emZ3bvVOKgQRIgARIgARIgARIgARIgARIgARIgARIgATmPwFj/jextC3MNTQsmxgZeSmXy20FnMel9pxS1wzDOF/58MO/Md59d7S0LUpnbXQsy3Ubz2afzU1N/V7lcmss4umkYdw0MpnvVw0OvjUtZMqJAB3LpCJOpSYn/4LRyZMJMnOqouLbUZxrx44dj0xMTJysrKzcfebMmX87XZigsiRsXrp06RGM1Ccxeu/evHlzoHZmgnagHPVl+pORyu5UVR98oOSwBtHJ66KMVe433dLS8iCc6jz0myWWc79l3fSSsDk0NPSgTP9wqmaJ5dytfic5HQtUZE3lOv05UcNUmS/jlOch6+joEN6ncTxjqkl82pSbomBREjbhTJk7d+6cRpxvp8TmuW9/8a0YrLvp0sYI9N2gLQbsrUHLDA4Ovooy22zltplym9jfaRI2L1++/Cr6N6Odci5yf60qsp5wM9Ld3Y0ZIXxobW31XMdoy/v3749Uz+HDh33VM/7EE6MAt1TXq2M9DSJfi+7HmB7uIT/UdHjfSBknfIEv4/7nu0bHiv8KV4YxWW4jFobFa+Cw0c7CaaTSOmYZfcrYRoAjFoCMr19/EOusAzY29+8InRwM+1mvVF29+rK9DM8LBDhigYPsqI9/8ske33eG2CiVMkGdCNsCr6HMjx3KHenp6fmJg7yoaGBg4DWsD2fZxBrwSF1dXSibcbSTI5Z56UqxQSpbA7iL60GV1juuc9lstgV5U0W9yEEBTpXB3VqP3LXpbDjVuU2bNrUgDmUzjnbSsfTVQFyKj3TMDdE3UZ3sEfXjeA6j1X8Rhw6yeYl9pjfhXM/AmfpXrFjx3KpVqyLZjNpO7mNZLqd8TFNVU/OkrJ8gfh8X6Z4cyjCu5NdUyIvyUY5UJU6Ej3JkD6xX4qhOJTbFieBUW9HWXomjOpXYTKKdYpeBBEiABEiABEiABEiABEiABEiABEiABEiABEiABEiABEiABEiABEiABEiABAITCP3YDF5m9HzRYXh4+O3m5uamwC2yFujKOdeRUa2qxZDnmuIJP+pzrscwWtWRxvjqQWvxWPdSPIXws4qKitbJyck10gGkbyLdjScTfo0XTe5F6VTS9v22LTHHunHjhlq2bFk053JzLEMNo4NZ1WpIHD24OZaC/YcyWfXLb8VSDy76s3CiP+Cxlup169YtXr58eb7td+/eVdevX/8cz1V9CgfbCecK9Qp/0vaDgE70eazR0dHG3t7eviAN8qWbU7XQ+60v3UhKuVo1NhVLPXLRFy1adH7Lli2P1tfXL66pqVF4Hit/SFpkkic6ohu02UnbD9qeREcs3ZjQI5fbiKUNu8VtRrB+udXz0YdKDeFwC683+aoHF30pRqp/iuPg6U43a3k5ngRVFy5c+Bgj19f9TotJ2/dssEtmYiPW2rVrlT5qa2sbXeqf3+LVj+HxTBwRg6ypZPrTTvU/PIn+878r9ZU/Fw5Ji0yC6IiulClIiv+12/cqEca+lz23vFBv6bgZK0u5OJccTuF1J+FsGUarNllT6ZwDg0odtnzXiE7/6smChujeunWrFWcHdBmv2G7fS1fygtovZs8pP7ERy6myhSrDtLZaL9SFwckPZ5OwykQXZdbM1nKW2O07a01Lg9qfLuk/Rcfyz4qaAQjQsQLACquKqeqmbCnosPsxnZqOrTLRlTLTud4pu31vbaWC2i9mzymfjuVEJWYZpqpu2afSZl/JKrUfX2DzZXyVmRySFpkOoitl9Hmx2G6/mH5Q+8XsOeXTsZyoxCyTHXXZ/JStBAmLQF0W6v/6TuGQtMgkiI7oSpmCpPhfu32vEmHse9lzy6NjuZGJUS77URhVdvb393+mncvJvOSJjuj63cMSO0nbd2prMZmvDT4nI8U+K7SXwZejBq/LbePSbtx+HtcGqd2u/TxgPbI7jvXQgvhIJ/jFNuHSsQAioGMJOtklNz+EbsPItFpksviWdVLMH0InYl/ay0ACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACZUEAX2o/64eUyqJjZdiJijT1acOGDR/h50EyDQ0NF/EbMuYLU2nqwcJpa+jHZvKIzuWeUuPqPaSrPJCNI7debTPe99DxlYURK2cqXslkMu1dXV2RbfqqOCGlffv2PXD79u3frVy58gdHjx79IqFq5sRstPcKxVl6cp1qSnW4tj6jOuNwKpv9jXh26T08OdlZXV196Pjx4+O2/NCnsPlH2N5hN4BnqM7gWaoX7PIo53CqTtS1E/HHsPNSFFvzrWz0R5O/pg4pQ11x7JjIJT+BgAtShaNjZGTkr21tbU/FVcWSJUtehBMNWe3JucitsqhpOHAT2v9TsSOxnEe1OZ/KR3eszca4qlTt6JR91CjIJT/ZsHFqauoipsn1cVRz4sSJT2FnDw497Uq8x5THUYVqb2+vhqE3cOiliMRvmPJY6phrI9EdS3ogU6JMedaQzBRorSGfxmgi66wG/FrV1VmZIQWY8vpgN/+L7RLLeUhTjsXGxsaOYZRaZc2Uc5FbZWlOR1tjWXsuU94N9T38n2/MT40JTYG6SlxwGQkPYY3VGecaS9vHgvoXWPs8KrGWxRWba7VY12txtS0uO3oojsee3CVOqIuYGr+ZwIJd6btCGaXwH96OUcp5bRdPb2glAoF4pkLdgMKWQixbC9qkNZZRCsdBjFL1dCorGaYjEeDOeyR8LEwCJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACJEACaSMQ71s66L1+k6YYCLwMEXvdM+r0+zs8IX62ZEY9Pk/27t27BK+pjdnV3eR2vbSdx/uWDnovb9EUg+BHp5gNH/lF2wEbfnR8VOWtgtfn818FgH+6WqumnMtXBEi+VV4O6dgdCy9jdng5juSJTuLw2gypw8txDuJHlhJvx65dux7CO5DPoy3yU5d92rnMWN6wzkq+jFxIl00wkuqJ/BcC2MtW+yVzKmulXbkOnM5oB85L4lS6GVYngmwQ3zXxPL6G6U9Ii7PhN+1VE5YGw4jLJiTmWELI6lxz4lT6Ms10rpI6lW6CzbnkZ3wX4yhLp5I+J+pYUgGA5iROfLEulXgFvZgv0WLdqSnbt2//BkaqvyFPnOpzjFxPnz179h9OummXxb7GSjuQpNovI5Y5/eWdCvUslnNzJEuq2jmzS8cqAXrbNChrrKdRrUyDMxb0JWhKyaqgYyWMWu4KUUX+7g9xfk1lTn9N5nneucrtrrAUjvUOfvNYIM5tMNQ7+HK4krfj1KlTn+HGRe4AZyzUzbvAvHNJvtPm6dwCY+2pIOA2IpkjWir6wEaSAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmQAAmUnoARpkq8cJp/8yZoWbwO5qu+pO0HbTf1gxMI/dO9eEEgUG14FDeQftL26+rqAv1zDAwM+PqnCNTJMlYuxTPvZYyPXXMjkJhjDX+h1LHrbtVSXu4EQk+FXmDEqZrexmsp/ylovbjOS3vu8vxOb0Gnzbnr0fypOfKIJaOSOJIOVqfKfgmv2H9V5zBeSAQiOZY41Q8HCqOTOJTdqfoalap9ID04ZWTSo5M1nZ4ezJ+WRpoKZTQ6dq0w5cnUJ0GmPxmp0uZUhdbzb1wEIjmWjEbiQNb1VJqdyrrmsqbjgr2Q7ESaCgWUONdbjYVRKo1OZZ3y3NILySHi6mukEUs3YoXpXLKDmKY1lW4/4/gJxOJY0ixxrjQG65Tnlk5jv+a6zbE51lx3JEz9+g4wTFmW8SYQ2rGCfvbn3YzZuUnbt45Os2unhARIgARIgARIgARIgARIgARIgARIgARIgARIYCEQ+D9RZOqPG2fqIQAAAABJRU5ErkJggg==)
    no-repeat -113px -35px;
}

.tui-grid-editor-label-icon-radio-checked::before {
  background: url(data:image/png;base64,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)
    no-repeat -89px -35px;
}

.tui-grid-editor-datepicker-layer {
  margin-top: -4px;
  position: absolute;
  z-index: 100;
}

.tui-grid-editor-datepicker-layer * {
  box-sizing: border-box;
}

.tui-grid-container .tui-calendar-month .tui-calendar-body,
.tui-grid-container .tui-calendar-year .tui-calendar-body {
  width: 220px;
}

.tui-grid-header-draggable {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
}

.tui-grid-row-header-draggable {
  text-align: center;
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
}

.tui-grid-row-header-draggable span {
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: 1px;
  line-height: 0;
  background: #5a6268;
}

.tui-grid-floating-row {
  z-index: 15;
  background: #fff;
  border: 1px solid #ddd;
  color: #5a6268;
  min-width: 200px;
  position: absolute;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
  white-space: nowrap;
  cursor: grabbing;
}

.tui-grid-floating-column {
  z-index: 15;
  background: #fff;
  border: 1px solid #ddd;
  color: #5a6268;
  position: absolute;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
  top: 0;
  font-weight: bold;
  cursor: grabbing;
}

.tui-grid-floating-cell {
  display: inline-block;
  overflow: hidden;
  line-height: normal;
  vertical-align: middle;
  text-align: center;
}

.tui-grid-floating-cell .tui-grid-cell-content {
  padding: 0 5px;
  word-break: break-all;
  text-align: start;
}

.tui-grid-floating-tree-cell {
  padding: 0 10px;
}

.tui-grid-floating-tree-cell-content {
  margin-left: 10px;
}

.tui-grid-floating-tree-cell .tui-grid-tree-icon {
  position: relative;
  margin-top: -14px;
  display: inline-block;
}

.tui-grid-floating-line {
  position: absolute;
  height: 1px;
  background: #00a9ff;
  display: none;
  z-index: 15;
}

.tui-grid-cell.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.tui-grid-cell.parent-cell {
  background-color: rgba(0, 169, 255, 0.15);
}

.tui-grid-container .tui-grid-context-menu {
  position: absolute;
  z-index: 15;
  width: auto;
  min-width: 197px;
  color: #333;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  border: 1px solid #ccc;
  padding: 5px 0;
  background-color: #fff;
}

.tui-grid-context-menu .menu-item {
  position: relative;
  height: 32px;
  line-height: 32px;
  padding: 0 14px;
  cursor: pointer;
}

.tui-grid-context-menu .menu-item:hover {
  background-color: #d4e9f2;
}

.tui-grid-context-menu .menu-item.disabled {
  color: #ccc;
}

.tui-grid-context-menu .has-submenu::after {
  position: absolute;
  right: 10px;
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAQAAACb+P2wAAAANklEQVQI12MoWlkUWsQAggxFzkUfi2IhTIYim6L3RRkQJkORcdHroioEswSmIBOmLQ6iDW4YAA8qHUEC0QE+AAAAAElFTkSuQmCC);
}

.tui-grid-context-menu .menu-item.separator {
  height: 1px;
  background: #ccc;
  margin: 5px 0;
}

.tui-grid-context-menu span {
  display: inline-block;
}


.pil-outer {
  border-top: inset 2px;
  border-bottom: inset 2px;
}

.pil-wrap {
  border-top: outset 2px;
  border-bottom: outset 2px;
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-template-rows: 46px 1fr;
}

.pil-expandButton {
  /* Centered by the parent .pil-itemIcon (display: inline-flex,
     align-items/justify-content: center). Use box-sizing: border-box so
     this matches the validation indicator's outer box exactly. */
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pil-showMenu .ui-menu__itemicon {
  padding: 6px;
  padding-left: 1px;
  width: 30px;
}

.pil-newarea {
  grid-column: 1;
  grid-row: 1;
  padding-top: 7px;
  padding-bottom: 6px;
  padding-left: 10px;
}

.pil-previewImage {
  height: 40px;
  grid-column: 1;
}

.pil-deleteWarning {
  max-height: 200px;
  overflow-y: auto;
  padding-top: 20px;
}

.pil-inlineSource {
  /* Inline so the trailing "?" stays on the same line as the file name even
     when the name wraps across a line break inside the dialog. */
  display: inline;
}

.pil-showMenu {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
  max-width: 140px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 8px;
}

.pil-list {
  grid-column-start: 1;
  grid-column-end: 3;
  overflow: hidden; /* react-window manages scrolling internally */
}

/* Scrollbar styling removed — uses global Minecraft-themed scrollbars from index.css */
.pil-fixedLine {
  padding-left: 17px;
  font-size: 0.875rem;
  height: 32px;
  padding-top: 6px;
  width: 100%;
}

.pil-fixedLineFocus {
  padding-left: 17px;
  font-size: 0.875rem;
  height: 32px;
  padding-top: 6px;
  text-overflow: ellipsis;
  background-color: #d88800;
  text-wrap: nowrap;
}

.pil-projectResults {
  padding-left: 17px;
}

.pil-fixedLineRow {
  height: 32px;
  display: grid;
  grid-template-columns: 1fr 32px;
  padding-top: 0px;
  width: 100%;
}

.pil-list LI * {
  margin-right: 0px;
}

.pil-list UL LI {
  padding-left: 0px;
  min-height: auto;
  padding-right: 0px;
}

.pil-item {
  display: grid;
  height: 36px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  grid-template-columns: 10px 1fr 30px 30px;
  font-size: 0.875rem;
  width: 100%;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 36px;
}

.pil-itemTypeHeader {
  display: grid;
  height: 36px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  grid-template-columns: 16px 24px 1fr 38px;
  font-size: 0.875rem;
  width: 100%;
}

/*
 * Forced-colors / Windows High Contrast.
 *
 * Browsers reset inline `background-color` (set via React inline `style`)
 * to `Canvas` under forced-colors, but our inline `color` survives — that
 * combination produces a "near-white text on white" contrast failure even
 * though the rendered pixels are clearly readable in non-forced-colors mode.
 *
 * Pin both fg and bg to system tokens that are guaranteed to have AAA
 * contrast (`ButtonText` over `ButtonFace`), so the category headers stay
 * legible in High Contrast mode regardless of the type tint.
 */
@media (forced-colors: active) {
  .pil-itemTypeHeader {
    background-color: ButtonFace !important;
    color: ButtonText !important;
  }
}

/* The MenuButton wrapper span needs to span columns 3-5 so pil-headerLabel fills the space */
.pil-itemTypeHeader > span:not(.pil-headerIcon):not(.pil-itemTypeCollapsedToggle) {
  grid-column-start: 3;
  grid-column-end: 5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pil-headerIcon {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  padding-right: 4px;
}

.pil-pathHeader {
  display: grid;
  height: 36px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  grid-template-columns: 10px 20px 25px 1fr;
  font-size: 0.875rem;
  width: 100%;
}

.pil-itemTypeCollapsedToggle {
  grid-column: 1;
  padding: 8px;
  padding-left: 6px;
}

.pil-headerLabel {
  grid-template-columns: 1fr 92px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: grid;
  width: 100%;
}

.pil-storagePathCollapsedToggle {
  grid-column: 2;
  padding: 8px;
}

.pil-storagePathIcon {
  grid-column: 3;
  padding-top: 8px;
  padding-left: 6px;
}

.pil-storagePathLabel {
  grid-column: 4;
  text-overflow: ellipsis;
}

.pil-itemTypeTag {
  grid-column: 1;
  min-width: 6px;
  width: 6px;
}

.pil-itemLabelFocused {
  text-overflow: ellipsis;
  padding-left: 6px;
  display: block;
  height: 36px;
  padding-top: 1px;
  /* Subtler than the saturated orange — desaturated amber that still signals focus */
  background-color: rgba(216, 136, 0, 0.35);
}

.pil-clearFocusButton {
  align-self: center;
  justify-self: end;
  margin-right: 4px;
  min-width: 0;
  padding: 2px 8px;
  /* Match the height of the ... menu button (pil-itemIcon is 30px) */
  height: 30px;
  font-size: 11px;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  background-color: transparent !important;
  color: inherit !important;
  border-width: 1px !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.pil-clearFocusButton:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

.pil-itemLabel {
  text-overflow: ellipsis;
  padding-left: 6px;
  display: block;
  height: 36px;
  padding-top: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.pil-itemIcon {
  background-size: cover;
  /* Match the validation indicator (.pil-itemIndicator) exactly so the two
     controls line up as identical boxes when both appear on the same row. */
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  align-self: center;
  align-items: center;
  justify-content: center;
}

.pil-itemIndicator {
  /* Identical box dimensions to .pil-itemIcon so the orange badge and the
     gray "..." button render at the same height and width. */
  box-sizing: border-box;
  border: solid 0px;
  grid-column: 4;
  line-height: 1;
  /* No padding — inner .pil-itemIndicatorInterior centers the count. */
  padding: 0;
  margin: 0px 0px 0px 1px;
  align-self: center;
  box-shadow: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #d88800;
  flex-shrink: 0;
}

.pil-itemIndicatorInterior {
  text-align: center;
}

.pil-itemIndicatorRO {
  /* Same box dimensions as .pil-itemIndicator / .pil-itemIcon so all three
     line up as identical boxes on the same row. */
  box-sizing: border-box;
  border: solid 0px;
  grid-column: 4;
  line-height: 1;
  padding: 0;
  margin: 0px 0px 0px 1px;
  align-self: center;
  box-shadow: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #d88800;
  text-align: center;
  flex-shrink: 0;
}

.pil-cmbUnfocused button {
  opacity: 0;
}

.pil-stats {
  grid-column: 2;
  text-align: right;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-wrap: nowrap;
}

.pil-projectName {
  overflow-x: hidden;
  width: 100%;
  margin-right: 2px;
  text-overflow: clip;
  grid-column: 1;
  z-index: 90;
  padding-top: 6px;
  display: block;
  white-space: nowrap;
}

.pil-projectIcon {
  min-height: 32px;
  max-height: 32px;
  min-width: 32px;
  max-width: 32px;
  grid-column: 2;
  background-size: cover;
}

.pil-name {
  overflow-x: hidden;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-right: 2px;
  text-overflow: ellipsis;
  grid-column: 1;
  z-index: 90;
  display: block;
  white-space: nowrap;
}

.pil-name-gh {
  padding-left: 20px;
}

.pil-typetag {
  font-size: x-small;
  text-transform: uppercase;
  border: solid 1px gray;
  border-radius: 2px;
  white-space: nowrap;
  float: right;
  top: 9px;
  left: 186px;
  background-color: rgba(120, 120, 120);
  position: absolute;
  text-align: center;
  min-width: 66px;
  margin-right: 4px;
  padding: 3px 1px 3px 1px;
  z-index: 100;
  line-height: 1;
}

.pil-dialog {
  min-height: 90px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pil-extension {
  /* Vertically centered with the TextField via flex on .pil-dialog */
  line-height: 1;
}

/* Sticky header that shows current item type when scrolling */
.pil-stickyHeader {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--surface-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 6px;
}

.pil-stickyIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.pil-stickyTypeName {
  flex-shrink: 0;
  white-space: nowrap;
}

.pil-stickyFolder {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  opacity: 0.9;
  font-weight: 400;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pil-stickyFolderName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* MRU (Most Recently Used) mini-pane styles */
.pil-mruSection {
  position: sticky;
  top: 0;
  z-index: 150;
  background: linear-gradient(180deg, rgba(50, 50, 65, 0.98) 0%, rgba(40, 40, 55, 0.98) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 0;
  margin-bottom: 2px;
  box-shadow: var(--surface-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
}

.pil-mruSection-light {
  background: linear-gradient(180deg, rgba(240, 240, 250, 0.98) 0%, rgba(230, 230, 245, 0.98) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pil-mruHeader {
  display: flex;
  align-items: center;
  padding: 2px 8px 4px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  gap: 4px;
}

.pil-mruItem {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 8px 0 4px;
  cursor: pointer;
  gap: 4px;
  font-size: 12px;
  overflow: hidden;
  transition: background-color 0.1s ease;
  border-left: 3px solid transparent;
}

.pil-mruItem:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.pil-mruSection-light .pil-mruItem:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.pil-mruItemIcon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pil-mruItemName {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pil-mruItemActive {
  cursor: default;
  opacity: 0.85;
  font-weight: 500;
}

.pil-mruItemActive:hover {
  background-color: transparent;
}

.pil-mruSection-light .pil-mruItemActive:hover {
  background-color: transparent;
}

.pil-mruItemGutter {
  width: 10px;
  min-width: 10px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pil-mruItemDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.pil-mruItemRemove {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0;
  font-size: 12px;
  transition: opacity 0.15s ease;
}

.pil-mruItem:hover .pil-mruItemRemove {
  opacity: 0.6;
}

.pil-mruItemRemove:hover {
  opacity: 1 !important;
  color: #e06060;
  background-color: rgba(255, 255, 255, 0.1);
}

.pil-mruSection-light .pil-mruItemRemove:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

/* New Entity Type Dialog Styles */

.net-outer {
  width: 100%;
  min-height: 420px;
  box-sizing: border-box;
  overflow: hidden;
}

.net-loading {
  padding: 40px;
  text-align: center;
  opacity: 0.7;
}

/* Section container - minimal, just for grouping */
.net-section:first-child {
  margin-top: 12px; /* Extra space below the dialog title / green divider */
}

.net-section {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Section header with icon */
.net-sectionHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid;
}

.net-sectionIcon {
  font-size: 0.9rem;
  opacity: 0.85;
}

.net-sectionSubtitle {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: 12px;
  margin-top: -4px;
}

/* Input styling - simple and clean */
.net-inputWrapper {
  width: 100%;
  border-radius: 4px;
  border: none;
  box-sizing: border-box;
}

.net-inputWrapper .MuiOutlinedInput-notchedOutline {
  border-color: inherit !important;
}

.net-inputWrapper .ui-input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.net-input,
.net-inputWrapper .MuiFormControl-root {
  width: 100% !important;
  box-sizing: border-box !important;
}

.net-inputWrapper input,
.net-inputWrapper .ui-input__input {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 1rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  color: inherit !important;
  box-sizing: border-box !important;
}

.net-inputWrapper input:focus-visible,
.net-inputWrapper .ui-input__input:focus-visible {
  outline: 2px solid #52a535 !important;
  outline-offset: 2px !important;
}

.net-inputWrapper input::placeholder {
  opacity: 0.5;
  font-style: italic;
}

/* Gallery container with proper tile layout */
.net-projectGallery {
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 4px;
  padding: 4px 0 4px 4px;
  border: 1px solid;
  box-sizing: border-box;
  width: 100%;
}

/* Grid layout for gallery tiles - 3 columns to fit better */
.net-projectGallery .ig-binWrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.net-projectGallery .itbi-outer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.net-projectGallery .itbi-button {
  max-width: 100% !important;
  overflow: hidden !important;
}

.net-projectGallery .itbi-grid {
  max-width: 100% !important;
}

/* Legacy support */
.net-gallery {
  overflow-y: auto;
  min-height: 280px;
  max-height: calc(100vh - 280px);
}

.net-optionsArea {
  margin-bottom: 16px;
}

.net-galleryHeader {
  padding-top: 16px;
  padding-bottom: 8px;
  font-weight: 600;
}

@media only screen and (min-width: 800px) {
  .ig-binWrap {
    margin-bottom: 10px;
    margin-top: 0px;
    padding-bottom: 10px;
    border-left: solid 1px;
    border-right: solid 1px;
    border-bottom: solid 1px;
    border-top: solid 1px;
  }
}

@media only screen and (max-width: 800px) {
  .ig-binWrap {
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-left: solid 1px;
    border-right: solid 1px;
    border-bottom: solid 1px;
    border-top: solid 1px;
    text-align: center;
  }

  .ig-binWrap-small {
    border-top: solid 1px;
  }
}

.ig-binWrap-empty {
  padding: 4px 10px 10px 10px;
}

.ig-outer {
  padding-bottom: 0px;
}

.ig-tabArea {
  display: block;
  padding: 10px;
  padding-bottom: 0px;
}

.ig-notFound {
  padding-top: 9px;
  padding-left: 6px;
}

.ig-tabButton {
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important;
  box-shadow: none !important;
  height: 32px;
  padding: 20px !important;
}

.ig-underline {
  display: inline-block;
  height: 32px;
  width: 6px;
  border-bottom: solid 1px;
}

.ig-underlineLong {
  width: calc(100vw - 724px);
}

.ig-sectionHeader {
  width: 100%;
  flex-basis: 100%;
  grid-column: 1 / -1;
  padding: 8px 10px 4px 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

.itbi-button {
  border: none;
  width: 100%;
  max-width: 100%;
}

.itbi-outer {
  width: 100%;
  height: 56px !important;
  padding: 4px !important;
  background-color: transparent !important;
  display: block;
  box-shadow: none !important;
  box-sizing: border-box;
}

.itbi-outer-selected {
  background-color: transparent !important;
}

.itbi-outer-selected .itbi-grid {
  border-color: #52a535 !important;
  background: rgba(82, 165, 53, 0.25) !important;
}

.itbi-grid:active {
  transform: scale(0.98);
}

.itbi-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 2px solid;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.12s ease;
  box-sizing: border-box;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  overflow: hidden;
}

.itbi-grid:hover {
  opacity: 0.85;
}

.itbi-mainArea {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 0;
}

.itbi-title {
  font-weight: 600;
  font-size: 0.8rem;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.itbi-iconArea {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
}

.itbi-iconArea img {
  image-rendering: pixelated;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pab-outer {
  padding: 7px;
  padding-top: 6px;
}

.pab-commands {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  max-width: 140px;
  padding-top: 7px;
  padding-bottom: 6px;
  padding-left: 8px;
}

.pab-loading {
  padding: 8px;
}

.pab-dialog {
  min-height: 90px;
  margin-top: 20px;
  vertical-align: top;
}

.pab-extension {
  padding-left: 8px;
}

.pab-newarea .ui-button {
  padding-left: 10px;
  padding-right: 14px;
  min-width: inherit;
}

/* Content Wizard Dialog - larger size */
.pab-content-wizard-dialog.ui-dialog {
  width: calc(100vw - 40px) !important;
  max-width: 900px !important;
  max-height: calc(100vh - 60px) !important;
  margin: 30px auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* MUI Dialog overrides — let the wizard handle its own scrolling */
.pab-content-wizard-dialog .MuiDialogContent-root {
  overflow: hidden !important;
  padding: 0 !important;
}

.pab-content-wizard-dialog .MuiDialog-paper {
  max-height: calc(100vh - 60px);
  overflow: hidden;
}

/* Hide the footer since wizard has its own buttons */
.pab-content-wizard-dialog .ui-dialog__footer {
  display: none !important;
}

.pab-content-wizard-dialog .ui-dialog__content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 140px);
  padding: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Make DialogTitle a positioning context for the close button */
.pab-content-wizard-dialog .MuiDialogTitle-root {
  position: relative;
}

/* Dialog close button — accessible size (44×44 target), visible background */
.pab-dialog-close-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #666;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
  padding: 0;
  line-height: 1;
  z-index: 1;
}

.pab-dialog-close-btn:hover {
  background: rgba(255, 80, 80, 0.18);
  color: #ff6b6b;
  border-color: rgba(255, 80, 80, 0.35);
  box-shadow: 0 0 6px rgba(255, 80, 80, 0.15);
}

.pab-dialog-close-btn:active {
  background: rgba(255, 80, 80, 0.28);
  color: #ff5252;
  transform: translateY(-50%) scale(0.95);
}

.pab-dialog-close-btn:focus-visible {
  outline: 2px solid #52a535;
  outline-offset: 2px;
}

/* Ensure content starts at top when dialog opens */
.pab-content-wizard-dialog .cwiz-launcher-full {
  margin-top: 0;
  padding-right: 0; /* scrollbar flush with the right edge of the dialog */
}

/* Responsive dialog sizing */
@media (max-width: 600px) {
  .pab-content-wizard-dialog.ui-dialog {
    width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    max-height: calc(100vh - 40px) !important;
  }

  .pab-content-wizard-dialog .ui-dialog__content {
    padding: 12px !important;
    max-height: calc(100vh - 160px);
  }

  .pab-content-wizard-dialog .ui-dialog__header {
    padding: 12px 16px 8px 16px !important;
    font-size: 1rem;
  }
}

/* New Block Type Dialog Styles */

.nbt-outer {
  width: 100%;
  min-height: 420px;
  box-sizing: border-box;
  overflow: hidden;
}

.nbt-loading {
  padding: 40px;
  text-align: center;
  opacity: 0.7;
}

/* Section container - minimal, just for grouping */
.nbt-section {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Section header with icon */
.nbt-sectionHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid;
}

.nbt-sectionIcon {
  font-size: 0.9rem;
  opacity: 0.85;
}

.nbt-sectionSubtitle {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: 12px;
  margin-top: -4px;
}

/* Input styling - simple and clean */
.nbt-inputWrapper {
  width: 100%;
  border-radius: 4px;
  border: none;
  box-sizing: border-box;
}

.nbt-inputWrapper .MuiOutlinedInput-notchedOutline {
  border-color: inherit !important;
}

.nbt-inputWrapper .ui-input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.nbt-inputWrapper .MuiFormControl-root {
  width: 100% !important;
  box-sizing: border-box !important;
}

.nbt-optionsArea input,
.nbt-inputWrapper input,
.nbt-inputWrapper .ui-input__input {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 1rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  color: inherit !important;
  box-sizing: border-box !important;
}

.nbt-optionsArea input:focus-visible,
.nbt-inputWrapper input:focus-visible,
.nbt-inputWrapper .ui-input__input:focus-visible {
  outline: 2px solid #52a535 !important;
  outline-offset: 2px !important;
}

.nbt-inputWrapper input::placeholder {
  opacity: 0.5;
  font-style: italic;
}

/* Gallery container with proper tile layout */
.nbt-projectGallery {
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 4px;
  padding: 4px 0 4px 4px;
  border: 1px solid;
  box-sizing: border-box;
  width: 100%;
}

/* Grid layout for gallery tiles - 3 columns to fit better */
.nbt-projectGallery .ig-binWrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.nbt-projectGallery .itbi-outer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.nbt-projectGallery .itbi-button {
  max-width: 100% !important;
  overflow: hidden !important;
}

.nbt-projectGallery .itbi-grid {
  max-width: 100% !important;
}

/* Legacy support */
.nbt-gallery {
  overflow-y: auto;
  min-height: 280px;
  max-height: calc(100vh - 280px);
}

.nbt-optionsArea {
  margin-bottom: 16px;
}

.nbt-selectedProject {
  padding-top: 20px;
  padding-left: 30px;
}

/* New Item Type Dialog Styles */

.nitem-outer {
  width: 100%;
  min-height: 420px;
  box-sizing: border-box;
  overflow: hidden;
}

.nitem-loading {
  padding: 40px;
  text-align: center;
  opacity: 0.7;
}

/* Section container - minimal, just for grouping */
.nitem-section {
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Section header with icon */
.nitem-sectionHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid;
}

.nitem-sectionIcon {
  font-size: 0.9rem;
  opacity: 0.85;
}

.nitem-sectionSubtitle {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-bottom: 12px;
  margin-top: -4px;
}

/* Input styling - simple and clean */
.nitem-inputWrapper {
  width: 100%;
  border-radius: 4px;
  border: none;
  box-sizing: border-box;
}

.nitem-inputWrapper .MuiOutlinedInput-notchedOutline {
  border-color: inherit !important;
}

.nitem-inputWrapper .ui-input {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.nitem-inputWrapper .MuiFormControl-root {
  width: 100% !important;
  box-sizing: border-box !important;
}

.nitem-inputWrapper input,
.nitem-inputWrapper .ui-input__input {
  width: 100% !important;
  padding: 14px 16px !important;
  font-size: 1rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  color: inherit !important;
  box-sizing: border-box !important;
}

.nitem-inputWrapper input:focus-visible,
.nitem-inputWrapper .ui-input__input:focus-visible {
  outline: 2px solid #52a535 !important;
  outline-offset: 2px !important;
}

.nitem-inputWrapper input::placeholder {
  opacity: 0.5;
  font-style: italic;
}

/* Gallery container with proper tile layout */
.nitem-projectGallery {
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 4px;
  padding: 4px 0 4px 4px;
  border: 1px solid;
  box-sizing: border-box;
  width: 100%;
}

/* Grid layout for gallery tiles - 3 columns to fit better */
.nitem-projectGallery .ig-binWrap {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.nitem-projectGallery .itbi-outer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.nitem-projectGallery .itbi-button {
  max-width: 100% !important;
  overflow: hidden !important;
}

.nitem-projectGallery .itbi-grid {
  max-width: 100% !important;
}

/* Legacy support */
.nitem-optionsArea {
  display: grid;
  margin-top: 20px;
  grid-template-columns: 100px 1fr;
}

.nitem-nameLabel {
  grid-column: 1;
  padding-top: 5px;
}

.nitem-folderAreaLabel {
  padding-bottom: 2px;
}

.nitem-nameArea {
  grid-column: 2;
}

.nitem-folderArea {
  padding-top: 30px;
  max-width: 600px;
}

.setnaid-mainArea {
  padding-top: 20px;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 40px 60px;
  padding-bottom: 20px;
}

.setnaid-label {
  grid-column: 1;
  padding-top: 12px;
}

.setnaid-name {
  grid-column: 2;
  padding: 8px;
}

.setnaid-namespaceLabel {
  grid-column: 1;
  grid-row: 2;
}

.setnaid-namespace {
  grid-column: 2;
  grid-row: 2;
  padding: 8px;
}

.setnaid-namespace input {
  background-color: inherit !important;
}

.setna-mainArea {
  padding-top: 20px;
  display: grid;
  grid-template-columns: 200px 1fr;
  padding-bottom: 20px;
}

.setna-label {
  grid-column: 1;
}

.setna-name {
  grid-column: 2;
  padding: 8px;
}

.nitem-outer {
  padding: 8px;
  padding-top: 2px;
  width: 100%;
  min-height: 450px;
  height: 100%;
}

.nitem-optionsArea {
  display: grid;
  margin-top: 20px;
  grid-template-columns: 100px 1fr;
}

.nitem-nameLabel {
  grid-column: 1;
  padding-top: 5px;
}

.nitem-folderAreaLabel {
  padding-bottom: 2px;
}

.nitem-nameArea {
  grid-column: 2;
}

.nitem-folderArea {
  padding-top: 30px;
  max-width: 600px;
}

.fex-area {
  width: 100%;
  height: 100%;
  min-height: 128px;
  border: solid 1px;
  padding: 2px;
}

.fex-areaWithPreview {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: solid 1px;
  padding: 2px;
  display: grid;
  grid-template-columns: 290px 1fr;
}

.fex-areaWithPreviewCompact {
  width: 100%;
  height: 100%;
  border: solid 0px;
  padding: 2px;
  display: grid;
  grid-template-rows: 186px 186px;
}

.fex-previewAreaCompact {
  grid-row: 2;
}

.fex-folderArea {
  padding: 4px;
  min-height: 120px;
  overflow-y: auto;
}

.fex-newFolderIcon {
  padding: 6px 6px 8px 2px;
  grid-column: 1;
  vertical-align: middle;
}

.fex-newFolderArea {
  display: grid;
  margin-left: 2px;
  padding: 8px 4px 8px 4px;
  grid-template-columns: 26px 1fr 194px 100px;
}

.fex-newFolderLabel {
  grid-column: 2;
  overflow-x: hidden;
  padding-top: 6px;
}

.fex-newFolderName {
  grid-column: 3;
}

.fex-newFolderGo {
  grid-column: 4;
}

/* MRU (Most Recently Used) mini-pane styles */
.fex-mruSection {
  position: sticky;
  top: 0;
  z-index: 150;
  background: linear-gradient(180deg, rgba(50, 50, 65, 0.98) 0%, rgba(40, 40, 55, 0.98) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 0;
  margin-bottom: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.fex-mruSection-light {
  background: linear-gradient(180deg, rgba(240, 240, 250, 0.98) 0%, rgba(230, 230, 245, 0.98) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fex-mruHeader {
  display: flex;
  align-items: center;
  padding: 2px 8px 4px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  gap: 4px;
}

.fex-mruItem {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 8px 0 4px;
  cursor: pointer;
  gap: 4px;
  font-size: 12px;
  overflow: hidden;
  transition: background-color 0.1s ease;
  border-left: 3px solid transparent;
}

.fex-mruItem:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.fex-mruSection-light .fex-mruItem:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.fex-mruItemIcon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fex-mruItemName {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fex-mruItemActive {
  cursor: default;
  opacity: 0.85;
  font-weight: 500;
}

.fex-mruItemActive:hover {
  background-color: transparent;
}

.fex-mruSection-light .fex-mruItemActive:hover {
  background-color: transparent;
}

.fex-mruItemGutter {
  width: 10px;
  min-width: 10px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fex-mruItemDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.fex-mruItemRemove {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0;
  font-size: 12px;
  transition: opacity 0.15s ease;
}

.fex-mruItem:hover .fex-mruItemRemove {
  opacity: 0.6;
}

.fex-mruItemRemove:hover {
  opacity: 1 !important;
  color: #e06060;
  background-color: rgba(255, 255, 255, 0.1);
}

.fex-mruSection-light .fex-mruItemRemove:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.fexfo-area {
  width: 100%;
}

.fexfo-bin {
}

.fexfo-binIndent {
  padding-left: 23px;
}

.fexfod-area {
  width: 100%;
  white-space: nowrap;
  display: grid;
  grid-template-columns: 22px 1fr;
  padding: 2px;
  margin-top: 3px;
}

.fexfod-containsAnnotatedItems {
  color: orange;
}

.fexfod-expander {
  grid-column: 1;
  background-color: transparent;
  border: 0px;
  padding: 2px;
  line-height: 1;
  color: inherit;
}

.fexfod-summary {
  grid-column: 2;
  display: grid;
  background-color: transparent;
  border: 0px;
  padding: 2px;
  padding-left: 4px;
  line-height: 1;
  color: inherit;
  user-select: none;
  text-align: left;
  grid-template-columns: 24px 1fr;
}

.fexfod-icon {
  grid-column: 1;
}

.fexfod-label {
  grid-column: 2;
  padding-top: 1px;
}

.fexfid-area {
  width: 100%;
  white-space: nowrap;
  padding: 2px;
  margin-top: 3px;
  grid-template-columns: 22px 1fr auto;
  display: grid;
  align-items: center;
}

.fexfid-area:hover .fexfid-menuButton,
.fexfid-area:focus-within .fexfid-menuButton {
  opacity: 1;
}

/* The MenuButton wrapper around the summary */
.fexfid-summaryWrapper {
  grid-column: 2;
  display: contents;
}

.fexfid-menuButtonWrapper {
  grid-column: 3;
}

.fexfid-menuButton {
  opacity: 0;
  background-color: transparent !important;
  border: none !important;
  padding: 2px 6px !important;
  min-width: 24px !important;
  cursor: pointer;
  color: inherit !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease-in-out;
}

.fexfid-menuButton:hover {
  opacity: 1;
  background-color: rgba(128, 128, 128, 0.2) !important;
}

.fexfid-menuButton:focus {
  opacity: 1;
  outline: 1px solid currentColor;
  outline-offset: -1px;
}

.fexfid-expander {
  grid-column: 1;
  background-color: transparent;
  border: 0px;
  padding: 2px;
  padding-inline: 0px;
  line-height: 1;
  color: inherit;
}

.fexfid-summary {
  grid-column: 2;
  display: grid;
  background-color: transparent;
  border: 0px;
  padding: 2px;
  padding-left: 4px;
  line-height: 1;
  color: inherit;
  user-select: none;
  text-align: left;
  grid-template-columns: 24px 1fr;
}

/* When summary has an expander sibling, adjust columns */
.fexfid-expander + .fexfid-summary {
  grid-column: 2;
}

.fexfid-icon {
  grid-column: 1;
}

.fexfid-label {
  grid-column: 2;
  padding-top: 1px;
}

.fexfid-error {
  color: red;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT ITEM TYPE ICON STYLES
   
   Styles for ProjectItemTypeIcon.tsx component.
   ═══════════════════════════════════════════════════════════════════════════ */

.piti-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Ensure SVG renders crisply */
.piti-icon svg {
  shape-rendering: crispEdges;
}

/* Hover effect for interactive contexts */
.piti-icon-interactive:hover svg path {
  filter: brightness(1.2);
}

/* ═══ Group-specific styling (if needed for special cases) ═══ */

.piti-icon-scriptsLogic {
  /* Emerald green icons */
}

.piti-icon-entityTypes {
  /* Purple icons */
}

.piti-icon-itemTypes {
  /* Gold icons */
}

.piti-icon-blockTypes {
  /* Stone gray icons */
}

.piti-icon-worldWorldgen {
  /* Lime green icons */
}

.piti-icon-modelsAnimations {
  /* Cyan icons */
}

.piti-icon-texturesAudio {
  /* Pink icons */
}

.piti-icon-vibrantVisuals {
  /* Amethyst purple icons */
}

.piti-icon-uiUx {
  /* Orange icons */
}

.piti-icon-configDev {
  /* Slate gray icons */
}

.piti-icon-design {
  /* Blue icons */
}

.piti-icon-packaging {
  /* Red icons */
}

.piti-icon-skinPersona {
  /* Brown icons */
}

.piti-icon-meta {
  /* Book brown icons */
}

.piti-icon-unknown {
  /* Gray icons */
}

.fexcf-area {
  width: 100%;
}

.fexcf-binIndent {
  padding-left: 23px;
}

.feffp-area {
  width: 100%;
  white-space: nowrap;
  padding: 2px;
  margin-top: 3px;
  display: grid;
}

@media only screen and (min-width: 800px) {
  .feffp-textArea {
    width: 500px;
    height: 100%;
    max-width: calc(100vw - 410px);
    font-family: "Courier New", Courier, monospace;
  }
}

@media only screen and (max-width: 800px) {
  .feffp-textArea {
    min-width: calc (100vw - 100px);
    font-family: "Courier New", Courier, monospace;
  }
}

/* ContentWizard.css - Styles for Content Creation Wizards */

/* ============================================================================
 * LAUNCHER STYLES
 * ============================================================================ */

.cwiz-launcher-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 70vh;
  max-height: 70vh;
  position: relative;
}

/* Green accent border at the top of the wizard */
.cwiz-launcher-wrapper {
  border-top: 3px solid #52a535;
}

.cwiz-launcher {
  display: flex;
  flex-direction: column;
  padding: 24px;
  padding-right: 0; /* scrollbar flush with the right edge of the dialog */
  padding-bottom: 8px;
  overflow-y: scroll !important; /* force scrollbar always visible */
  flex: 1;
  min-height: 0;
}

/* Bottom fade overlay to visually hint at scrollable content */
.cwiz-launcher-wrapper::after {
  content: "";
  position: absolute;
  bottom: 56px; /* must match .cwiz-footer min-height */
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--cwiz-fade-color, rgba(40, 40, 40, 0.85)));
  pointer-events: none;
  z-index: 1;
}

/* Subtle bottom fade hint that more content is scrollable */
.cwiz-launcher-full::after {
  content: "";
  display: block;
  height: 0;
  flex-shrink: 0;
}

.cwiz-launcher-hero {
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(82, 165, 53, 0.25);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(82, 165, 53, 0.14) 0%, rgba(82, 165, 53, 0.05) 100%);
}

.cwiz-launcher-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #52a535;
  margin-bottom: 6px;
}

.cwiz-launcher-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  color: inherit;
}

.cwiz-launcher-subtitle {
  font-size: 14px;
  opacity: 0.78;
  line-height: 1.55;
}

.cwiz-launcher-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 4px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}

.cwiz-launcher-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 18px;
  border: 2px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
  background: rgba(128, 128, 128, 0.04);
}

.cwiz-launcher-option:hover {
  border-color: #52a535;
  background: rgba(82, 165, 53, 0.1);
  transform: translateY(-2px);
}

.cwiz-launcher-option-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cwiz-launcher-option-disabled:hover {
  border-color: rgba(128, 128, 128, 0.3);
  background: transparent;
  transform: none;
}

.cwiz-launcher-option-icon {
  font-size: 30px;
  margin-right: 16px;
  color: #52a535;
  flex-shrink: 0;
}

.cwiz-launcher-option-content {
  flex: 1;
  min-width: 0;
}

.cwiz-launcher-option-img {
  width: 60px;
  height: 60px;
  image-rendering: pixelated;
}

.cwiz-launcher-option-label {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: left;
  word-wrap: break-word;
}

.cwiz-launcher-option-desc {
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.78;
  text-align: left;
  word-wrap: break-word;
}

/* ============================================================================
 * WIZARD FRAME STYLES
 * ============================================================================ */

.cwiz-wizard {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 70vh;
  max-height: 70vh;
}

/* Green accent border at the top of the wizard step frame */
.cwiz-wizard {
  border-top: 3px solid #52a535;
}

.cwiz-wizard-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  flex-shrink: 0;
}

.cwiz-wizard-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.cwiz-wizard-step-indicator {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 12px;
}

.cwiz-wizard-progress {
  display: flex;
  gap: 8px;
}

.cwiz-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.3);
  transition: background 0.2s ease;
}

.cwiz-progress-dot-active {
  background: #52a535;
}

.cwiz-wizard-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  min-height: 300px;
}

.cwiz-wizard-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
  gap: 8px;
  flex-shrink: 0;
}

.cwiz-wizard-footer > *:last-child {
  margin-left: auto;
}

/* Minecraft-styled wizard buttons */
.cwiz-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 2px solid #131313;
  image-rendering: pixelated;
  transition: filter 0.05s;
  text-transform: none;
  line-height: 1.4;
}

.cwiz-btn:active {
  filter: brightness(0.85);
}

/* Stone/secondary variant — gray Minecraft stone look */
.cwiz-btn-stone {
  background-color: #3a3a3a;
  color: #ffffff;
  border-color: #131313;
  box-shadow:
    inset -2px -2px 0 #212121,
    inset 2px 2px 0 #4e4e4e;
}

.cwiz-btn-stone:hover {
  background-color: #454545;
  box-shadow:
    inset -2px -2px 0 #2a2a2a,
    inset 2px 2px 0 #585858;
}

/* Primary/green variant — Minecraft green action button */
.cwiz-btn-primary {
  background-color: #52a535;
  color: #ffffff;
  border-color: #1e4d14;
  box-shadow:
    inset -2px -2px 0 #3e8828,
    inset 2px 2px 0 #6fc24a;
}

.cwiz-btn-primary:hover {
  background-color: #5cb33e;
  box-shadow:
    inset -2px -2px 0 #4a9430,
    inset 2px 2px 0 #7dd056;
}

/* ============================================================================
 * STEP CONTENT STYLES
 * ============================================================================ */

.cwiz-step-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cwiz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cwiz-field label {
  font-size: 13px;
  font-weight: 600;
}

.cwiz-field-hint {
  font-size: 11px;
  opacity: 0.6;
}

.cwiz-field-error {
  font-size: 11px;
  color: #ff6b6b;
  margin-top: 2px;
}

.cwiz-traits-hint {
  margin-bottom: 8px;
}

/* ============================================================================
 * TRAIT SELECTION GRID
 * Minecraft-style beveled cards with category-colored icons, selection
 * checkmarks, and press-in click feedback.
 * ============================================================================ */

.cwiz-trait-section {
  margin-bottom: 20px;
}

.cwiz-trait-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.55;
  margin-bottom: 8px;
  padding-left: 2px;
  white-space: nowrap;
}

.cwiz-trait-group-icon {
  font-size: 13px;
  opacity: 0.7;
}

/* Decorative horizontal line after group label */
.cwiz-trait-group-line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  margin-left: 8px;
}

.cwiz-trait-group-label {
  font-size: 13px;
  font-weight: 600;
  color: #b0b0b0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

body.ct-light .cwiz-trait-group-label {
  color: #5a5a5a;
}

.cwiz-traits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

/* ---- Card base: Minecraft beveled stone button ---- */
/* Colors use CSS custom properties for light/dark theme support.
   Set --trait-bg, --trait-border, --trait-shadow, --trait-highlight,
   --trait-fg on a parent element via theme.mc0–mc5/mcc1. */
.cwiz-trait {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--trait-border, #131313);
  border-radius: 0;
  cursor: pointer;
  transition:
    filter 0.05s,
    background-color 0.1s;
  background-color: var(--trait-bg, #3a3a3a);
  color: var(--trait-fg, #ffffff);
  box-shadow:
    inset -2px -2px 0 var(--trait-shadow, #212121),
    inset 2px 2px 0 var(--trait-highlight, #4e4e4e);
  user-select: none;
  image-rendering: pixelated;
}

.cwiz-trait:hover {
  background-color: var(--trait-hover-bg, #454545);
  box-shadow:
    inset -2px -2px 0 var(--trait-hover-shadow, #2a2a2a),
    inset 2px 2px 0 var(--trait-hover-highlight, #585858);
  border-color: #52a535;
}

.cwiz-trait:active {
  filter: brightness(0.85);
  box-shadow:
    inset 2px 2px 0 #212121,
    inset -2px -2px 0 #4e4e4e;
}

/* ---- Selected state: green Minecraft button ---- */
.cwiz-trait-selected {
  background-color: #3e6e2f;
  border-color: #1e4d14;
  box-shadow:
    inset -2px -2px 0 #2e5522,
    inset 2px 2px 0 #52a535;
}

.cwiz-trait-selected:hover {
  background-color: #478534;
  box-shadow:
    inset -2px -2px 0 #3a6b2a,
    inset 2px 2px 0 #5cb33e;
}

.cwiz-trait-selected:active {
  filter: brightness(0.85);
  box-shadow:
    inset 2px 2px 0 #2e5522,
    inset -2px -2px 0 #52a535;
}

/* ---- Icon ---- */
.cwiz-trait-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  /* Color is set via inline style from getTraitIconColor() */
}

.cwiz-trait:hover .cwiz-trait-icon {
  opacity: 0.9;
}

.cwiz-trait-selected .cwiz-trait-icon {
  opacity: 1;
}

.cwiz-trait-icon svg {
  width: 20px;
  height: 20px;
}

/* ---- Text ---- */
.cwiz-trait-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.cwiz-trait-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 1px;
}

.cwiz-trait-desc {
  font-size: 10px;
  opacity: 0.6;
}

/* ---- Selection checkmark badge (top-right corner) ---- */
.cwiz-trait-check {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #52a535;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-left: 2px solid #1e4d14;
  border-bottom: 2px solid #1e4d14;
}

/* ============================================================================
 * BODY TYPE DROPDOWN
 * ============================================================================ */

.cwiz-bodytype-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
}

.cwiz-bodytype-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cwiz-bodytype-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  opacity: 0.85;
}

.cwiz-bodytype-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cwiz-bodytype-label {
  font-size: 13px;
  font-weight: 600;
}

.cwiz-bodytype-desc {
  font-size: 11px;
  opacity: 0.6;
}

.cwiz-bodytype-selected {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cwiz-bodytype-selected .cwiz-bodytype-icon {
  width: 24px;
  height: 24px;
}

.cwiz-bodytype-selected .cwiz-bodytype-icon svg {
  width: 20px;
  height: 20px;
}

.cwiz-bodytype-selected .cwiz-bodytype-label {
  font-size: 14px;
  font-weight: 500;
}

/* ============================================================================
 * COLOR PICKER
 * ============================================================================ */

.cwiz-field input[type="color"] {
  width: 60px;
  height: 32px;
  padding: 2px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  cursor: pointer;
}

/* ============================================================================
 * DARK THEME ADJUSTMENTS
 * ============================================================================ */

.cwiz-dark .cwiz-launcher-option:hover {
  background: rgba(82, 165, 53, 0.2);
}

.cwiz-dark .cwiz-launcher-hero {
  background: linear-gradient(135deg, rgba(82, 165, 53, 0.18) 0%, rgba(82, 165, 53, 0.08) 100%);
}

.cwiz-dark .cwiz-trait:hover {
  background-color: #454545;
}

.cwiz-dark .cwiz-trait-selected {
  background-color: #3e6e2f;
}

/* Scrollbar styling removed — uses global Minecraft-themed scrollbars from index.css */
/* Explicitly target the launcher scroll container to ensure MUI portal inherits correctly */
.cwiz-launcher::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.cwiz-launcher::-webkit-scrollbar-track {
  background: #1a1918;
  border: 2px solid #131211;
}

.cwiz-launcher::-webkit-scrollbar-thumb {
  background: #2d6b1e;
  border-top: 3px solid #4a9636;
  border-left: 3px solid #4a9636;
  border-right: 3px solid #163a0e;
  border-bottom: 3px solid #163a0e;
  min-height: 32px;
}

.cwiz-launcher::-webkit-scrollbar-thumb:hover {
  background: #3e8828;
  border-top-color: #5fb93e;
  border-left-color: #5fb93e;
  border-right-color: #1e4d14;
  border-bottom-color: #1e4d14;
}

.cwiz-launcher::-webkit-scrollbar-thumb:active {
  background: #1e4d14;
  border-top: 3px solid #163a0e;
  border-left: 3px solid #163a0e;
  border-right: 3px solid #4a9636;
  border-bottom: 3px solid #4a9636;
}

.cwiz-launcher::-webkit-scrollbar-corner {
  background: #1a1918;
}

@-moz-document url-prefix() {
  .cwiz-launcher {
    scrollbar-width: auto;
    scrollbar-color: #3e8828 #1a1918;
  }
}

/* Light theme: lighter fade color for scroll hint */
.cwiz-launcher-wrapper {
  --cwiz-fade-color: rgba(255, 255, 255, 0.9);
}

.cwiz-dark.cwiz-launcher-wrapper {
  --cwiz-fade-color: rgba(40, 40, 40, 0.9);
}

/* ============================================================================
 * FULL LAUNCHER STYLES (New Add Content Panel)
 * ============================================================================ */

.cwiz-launcher-full {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Quick Actions - Top level buttons - ALWAYS stack vertically for reliability */
.cwiz-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.cwiz-quick-action {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  width: 100%;
}

.cwiz-quick-action:hover {
  border-color: #52a535;
  background: rgba(82, 165, 53, 0.1);
}

.cwiz-quick-icon {
  font-size: 20px;
  color: #52a535;
  width: 28px;
  flex-shrink: 0;
}

.cwiz-quick-label {
  font-size: 14px;
  font-weight: 600;
}

.cwiz-quick-desc {
  font-size: 12px;
  opacity: 0.6;
  margin-left: 8px;
}

/* Main Options - Entity/Block/Item from vanilla */
.cwiz-main-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.cwiz-main-option {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-height: 96px;
  background: rgba(128, 128, 128, 0.03);
}

.cwiz-main-option:hover {
  border-color: #52a535;
  background: rgba(82, 165, 53, 0.08);
}

.cwiz-main-icon {
  font-size: 24px;
  margin-right: 16px;
  color: #52a535;
  width: 40px;
  text-align: center;
  margin-top: 2px;
}

/* When .cwiz-main-icon wraps an inline SVG via <span> */
span.cwiz-main-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

img.cwiz-main-img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.cwiz-main-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.cwiz-main-label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cwiz-main-desc {
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wizard Section - Entity/Block/Item wizards */
.cwiz-wizard-section {
  margin-bottom: 18px;
  width: 100%;
  max-width: calc(100vw - 120px);
  box-sizing: border-box;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 4px;
  padding: 16px;
  background: rgba(128, 128, 128, 0.03);
}

.cwiz-wizard-section-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  /* No opacity dampening on the section heading — opacity:0.9 dropped the
     effective contrast below 4.5:1 on the light wool background, especially
     at this small font size. Section headings should read at full body-text
     contrast. */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cwiz-section-headingRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cwiz-wizard-section-copy {
  font-size: 13px;
  line-height: 1.5;
  /* Slight de-emphasis from the heading, but still well above the 4.5:1
     contrast threshold in both themes. 0.72 was too faint in light mode. */
  opacity: 0.85;
}

.cwiz-section-emphasis {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(82, 165, 53, 0.16);
  color: #52a535;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cwiz-guided-section {
  border-color: rgba(82, 165, 53, 0.32);
  background: linear-gradient(180deg, rgba(82, 165, 53, 0.08) 0%, rgba(82, 165, 53, 0.03) 100%);
}

.cwiz-example-section {
  background: rgba(128, 128, 128, 0.04);
}

/* Advanced Section - Collapsible single files */
.cwiz-advanced-section {
  margin-bottom: 20px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 4px;
  width: 100%;
  max-width: calc(100vw - 120px);
  box-sizing: border-box;
}

.cwiz-advanced-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  gap: 8px;
  user-select: none;
}

.cwiz-advanced-header:hover {
  background: rgba(128, 128, 128, 0.05);
}

.cwiz-advanced-content {
  padding: 0 16px 16px;
}

/* Collapsible sections inside advanced */
.cwiz-section {
  margin-bottom: 8px;
}

.cwiz-section-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  border-radius: 4px;
  user-select: none;
  background: rgba(128, 128, 128, 0.04);
}

.cwiz-section-header:hover {
  background: rgba(128, 128, 128, 0.1);
}

.cwiz-section-count {
  opacity: 0.5;
  font-weight: 400;
  font-size: 12px;
}

/* Count badge shown on collapsed sections to hint at hidden content */
.cwiz-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(82, 165, 53, 0.18);
  color: #52a535;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: auto;
  min-width: 18px;
  text-align: center;
}

.cwiz-dark .cwiz-wizard-section,
.cwiz-dark .cwiz-advanced-section {
  background: rgba(255, 255, 255, 0.03);
}

.cwiz-dark .cwiz-guided-section {
  background: linear-gradient(180deg, rgba(82, 165, 53, 0.18) 0%, rgba(82, 165, 53, 0.07) 100%);
}

.cwiz-section-items {
  padding-left: 24px;
  margin-top: 4px;
}

.cwiz-section-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  gap: 8px;
  border-radius: 4px;
}

.cwiz-section-item:hover {
  background: rgba(82, 165, 53, 0.1);
}

.cwiz-section-item-icon {
  font-size: 12px;
  opacity: 0.5;
}

/* ============================================================================
 * RESPONSIVE STYLES FOR NARROW VIEWPORTS
 * ============================================================================ */

/* Medium-narrow screens - wizard cards go to 2 columns */
@media (max-width: 700px) {
  .cwiz-launcher-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .cwiz-launcher-option {
    padding: 12px 8px;
  }

  .cwiz-launcher-option-icon {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .cwiz-launcher-option-img {
    width: 32px;
    height: 32px;
  }

  .cwiz-launcher-option-label {
    font-size: 12px;
  }

  .cwiz-launcher-option-desc {
    font-size: 9px;
  }

  .cwiz-main-option {
    padding: 12px;
  }

  .cwiz-main-icon {
    font-size: 20px;
    margin-right: 12px;
    width: 40px;
  }

  img.cwiz-main-img {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 500px) {
  /* Single column for wizard cards on very narrow screens */
  .cwiz-launcher-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cwiz-launcher-option {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
  }

  .cwiz-launcher-option-icon {
    margin-bottom: 0;
    font-size: 20px;
  }

  .cwiz-launcher-option-img {
    width: 24px;
    height: 24px;
  }

  .cwiz-launcher-option-label {
    text-align: left;
  }

  .cwiz-launcher-option-desc {
    text-align: left;
    display: none; /* Hide desc on very narrow to save space */
  }

  .cwiz-advanced-content {
    padding: 0 8px 12px;
  }

  .cwiz-section-items {
    padding-left: 12px;
  }

  .cwiz-wizard-section-title {
    font-size: 11px;
  }
}

/* ============================================================================
 * FOOTER STYLES
 * ============================================================================ */

.cwiz-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 56px;
  padding: 8px 24px;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
  background: inherit;
  flex-shrink: 0;
  box-sizing: border-box;
}

/**
 * JsonEditorWithValidation - Styles for the split view editor with validation panel
 */

.jewv-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.jewv-editor {
  flex-shrink: 0;
  overflow: hidden;
}

/* Highlight decoration for navigating to lines */
.jewv-highlight-line {
  background-color: rgba(255, 213, 0, 0.2) !important;
  animation: jewv-fade-highlight 2s ease-out;
}

.jewv-highlight-glyph {
  background-color: #ffd500;
  width: 4px !important;
  margin-left: 3px;
}

@keyframes jewv-fade-highlight {
  0% {
    background-color: rgba(255, 213, 0, 0.4);
  }
  100% {
    background-color: rgba(255, 213, 0, 0);
  }
}

.jse-area {
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  width: calc(100% - 2px);
  height: 100%;
}

.jse-toolBar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}

.jse-dffEditorHeader {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 28px;
}

.jse-coreLabel {
  grid-column: 1;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
}

.jse-diffLabel {
  grid-column: 2;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
}

/* JSON Path Breadcrumb Styles */
.jpb-container {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.jpb-segments {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}

.jpb-segment {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #c0c0c0;
  transition: background-color 0.15s ease;
}

.jpb-segment:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.jpb-segment.current {
  color: #ffffff;
  font-weight: 500;
}

.jpb-segment.component {
  color: #4ec9b0;
}

.jpb-segment.array {
  color: #dcdcaa;
}

.jpb-icon {
  font-size: 11px;
  opacity: 0.8;
}

.jpb-separator {
  color: #606060;
  margin: 0 2px;
  font-size: 10px;
}

.jpb-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  color: #808080;
  font-size: 12px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.jpb-copy-btn:hover {
  opacity: 1;
  color: #c0c0c0;
}

.jpb-empty {
  color: #606060;
  font-size: 12px;
  font-style: italic;
}

/* Live Preview Split Layout */
.jse-with-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.jse-content {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.jse-editor-pane {
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.jse-editor-with-preview {
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.jse-preview-pane {
  width: 260px;
  min-width: 200px;
  max-width: 600px;
  height: 100%;
  background-color: #1e1e1e;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
}

/* Resizable divider between editor and preview */
.jse-resize-divider {
  width: 12px;
  min-width: 12px;
  cursor: col-resize;
  background: linear-gradient(to right, #1e1e1e, #3a3a3a, #3a3a3a, #1e1e1e);
  border-left: 1px solid #007acc;
  border-right: 1px solid #007acc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  z-index: 100;
  position: relative;
}

.jse-resize-divider:hover {
  background: #007acc;
  border-color: #52a535;
}

.jse-resize-handle {
  width: 4px;
  height: 40px;
  background-color: #888;
  border-radius: 2px;
}

.jse-resize-divider:hover .jse-resize-handle {
  background-color: var(--surface-bg);
}

/* Active resizing state */
.jse-resizing {
  cursor: col-resize !important;
  user-select: none;
}

/* Disable pointer events on panes during resize to prevent
   3D canvas (BabylonJS) or Monaco editor from capturing mouse events */
.jse-resizing .jse-preview-pane,
.jse-resizing .jse-editor-pane {
  pointer-events: none;
}

.jse-resizing .jse-resize-divider {
  background-color: #52a535;
}

.jse-resizing .jse-resize-handle {
  background-color: var(--surface-bg);
}

.jse-preview-header {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #c0c0c0;
  border-bottom: 1px solid #404040;
  background-color: #252526;
}

.jse-preview-content {
  flex: 1;
  overflow: auto;
  padding: 8px;
}

.jse-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #606060;
  font-size: 12px;
  font-style: italic;
  text-align: center;
  padding: 16px;
}

/* Preview error display - shown when JSON parsing fails */
.jse-preview-error {
  padding: 12px;
  background-color: rgba(200, 60, 60, 0.1);
  border: 1px solid rgba(200, 60, 60, 0.3);
  border-radius: 4px;
  margin: 8px;
}

.jse-preview-error-title {
  font-weight: bold;
  font-size: 13px;
  color: #d97f7f;
  margin-bottom: 8px;
}

.jse-preview-error-message {
  font-family: monospace;
  font-size: 11px;
  color: #c88;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.4;
}

/* Loading placeholder - shown while file content is loading */
.jse-loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #1e1e1e;
}

.jse-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(82, 165, 53, 0.3);
  border-top: 3px solid #52a535;
  border-radius: 50%;
  animation: jse-spin 1s linear infinite;
}

.jse-loading-message {
  margin-top: 12px;
  font-size: 13px;
  color: #888;
}

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

/* BlockTypeLivePreview.css - Compact live preview styles for blocks */

/* Container */
.btlp-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px;
  min-width: 200px;
}

.btlp-dark {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.btlp-light {
  background-color: var(--surface-bg);
  color: var(--surface-text);
}

/* Loading and error states */
.btlp-loading,
.btlp-error {
  padding: 16px;
  text-align: center;
  opacity: 0.7;
}

.btlp-error {
  color: #e74c3c;
}

/* Header */
.btlp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.btlp-icon {
  font-size: 20px;
}

.btlp-title {
  flex: 1;
  min-width: 0;
}

.btlp-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btlp-id {
  font-size: 10px;
  opacity: 0.6;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sections */
.btlp-section {
  margin-bottom: 8px;
}

.btlp-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}

.btlp-section-header:hover {
  opacity: 0.8;
}

.btlp-expand-icon {
  font-size: 8px;
  width: 12px;
  text-align: center;
}

.btlp-badge {
  margin-left: auto;
  background: rgba(128, 128, 128, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

/* Properties grid */
.btlp-props-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.btlp-prop {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
  border-left: 3px solid;
  min-width: 50px;
}

.btlp-prop-icon {
  font-size: 14px;
}

.btlp-prop-value {
  font-weight: 700;
  font-size: 13px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btlp-prop-label {
  font-size: 9px;
  opacity: 0.7;
  text-transform: uppercase;
}

/* State list */
.btlp-state-list {
  padding: 4px 0;
}

.btlp-state-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 8px;
  margin: 2px 0;
  background: rgba(128, 128, 128, 0.08);
  border-radius: 4px;
}

.btlp-state-name {
  font-family: monospace;
  font-size: 11px;
  cursor: pointer;
  color: #3498db;
}

.btlp-dark .btlp-state-name {
  color: #5dade2;
}

.btlp-state-name:hover {
  text-decoration: underline;
}

.btlp-state-values {
  font-size: 10px;
  opacity: 0.6;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Permutation list */
.btlp-perm-list {
  padding: 4px 0;
}

.btlp-perm-item {
  padding: 4px 8px;
  margin: 2px 0;
  background: rgba(128, 128, 128, 0.08);
  border-radius: 4px;
  cursor: pointer;
}

.btlp-perm-item:hover {
  background: rgba(128, 128, 128, 0.15);
}

.btlp-perm-condition {
  font-family: monospace;
  font-size: 10px;
  word-break: break-all;
}

.btlp-perm-more {
  font-size: 10px;
  opacity: 0.6;
  font-style: italic;
  padding: 4px 8px;
}

/* Component list */
.btlp-component-list {
  padding: 4px 0;
}

.btlp-component-group {
  margin-bottom: 6px;
}

.btlp-group-label {
  font-size: 10px;
  opacity: 0.7;
  margin-bottom: 4px;
  padding-left: 4px;
}

/* Tags (components, states, etc.) */
.btlp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
}

.btlp-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(128, 128, 128, 0.15);
}

/* Clickable items - cursor and hover indication */
.btlp-clickable {
  cursor: pointer;
}

.btlp-clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--surface-shadow-sm);
}

.btlp-dark .btlp-clickable:hover {
  background: rgba(255, 255, 255, 0.15);
}

.btlp-light .btlp-clickable:hover {
  background: rgba(0, 0, 0, 0.08);
}

.btlp-dark .btlp-tag {
  background: rgba(255, 255, 255, 0.1);
}

.btlp-tag:hover {
  transform: translateY(-1px);
  box-shadow: var(--surface-shadow-sm);
}

.btlp-tag-visual {
  background: rgba(52, 152, 219, 0.2);
  color: #2980b9;
}

.btlp-dark .btlp-tag-visual {
  background: rgba(52, 152, 219, 0.3);
  color: #5dade2;
}

.btlp-tag-physics {
  background: rgba(155, 89, 182, 0.2);
  color: #8e44ad;
}

.btlp-dark .btlp-tag-physics {
  background: rgba(155, 89, 182, 0.3);
  color: #bb77d6;
}

.btlp-tag-behavior {
  background: rgba(230, 126, 34, 0.2);
  color: #d35400;
}

.btlp-dark .btlp-tag-behavior {
  background: rgba(230, 126, 34, 0.3);
  color: #e67e22;
}

.btlp-tag-script {
  background: rgba(46, 204, 113, 0.2);
  color: #27ae60;
}

.btlp-dark .btlp-tag-script {
  background: rgba(46, 204, 113, 0.3);
  color: #2ecc71;
}

.btlp-tag-more {
  background: transparent;
  opacity: 0.6;
  font-style: italic;
  cursor: default;
}

.btlp-tag-more:hover {
  transform: none;
  box-shadow: none;
}

/* EntityTypeLivePreview.css - Compact live preview styles */

/* Container */
.etlp-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px;
  min-width: 200px;
}

.etlp-dark {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.etlp-light {
  background-color: #ffffff;
  color: #333333;
}

/* Loading and error states */
.etlp-loading,
.etlp-error {
  padding: 16px;
  text-align: center;
  opacity: 0.7;
}

.etlp-error {
  color: #e74c3c;
}

/* Header */
.etlp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.etlp-icon {
  font-size: 20px;
}

.etlp-title {
  flex: 1;
  min-width: 0;
}

.etlp-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.etlp-id {
  font-size: 10px;
  opacity: 0.6;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sections */
.etlp-section {
  margin-bottom: 8px;
}

.etlp-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}

.etlp-section-header:hover {
  opacity: 0.8;
}

.etlp-expand-icon {
  font-size: 8px;
  width: 12px;
  text-align: center;
}

.etlp-badge {
  margin-left: auto;
  background: rgba(128, 128, 128, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

/* Stats grid */
.etlp-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.etlp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
  border-left: 3px solid;
  min-width: 50px;
}

.etlp-stat-icon {
  font-size: 14px;
}

.etlp-stat-value {
  font-weight: 700;
  font-size: 14px;
}

.etlp-stat-label {
  font-size: 9px;
  opacity: 0.7;
  text-transform: uppercase;
}

/* Component list */
.etlp-component-list {
  padding: 4px 0;
}

.etlp-component-group {
  margin-bottom: 6px;
}

.etlp-group-label {
  font-size: 10px;
  opacity: 0.7;
  margin-bottom: 4px;
  padding-left: 4px;
}

/* Tags (components, events, groups) */
.etlp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
}

.etlp-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(128, 128, 128, 0.15);
}

/* Clickable items - cursor and hover indication */
.etlp-clickable {
  cursor: pointer;
}

.etlp-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.etlp-dark .etlp-clickable:hover {
  background: rgba(255, 255, 255, 0.15);
}

.etlp-light .etlp-clickable:hover {
  background: rgba(0, 0, 0, 0.08);
}

.etlp-dark .etlp-tag {
  background: rgba(255, 255, 255, 0.1);
}

.etlp-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.etlp-tag-behavior {
  background: rgba(155, 89, 182, 0.2);
  color: #9b59b6;
}

.etlp-dark .etlp-tag-behavior {
  background: rgba(155, 89, 182, 0.3);
  color: #bb77d6;
}

.etlp-tag-physical {
  background: rgba(52, 152, 219, 0.2);
  color: #2980b9;
}

.etlp-dark .etlp-tag-physical {
  background: rgba(52, 152, 219, 0.3);
  color: #5dade2;
}

.etlp-tag-event {
  background: rgba(241, 196, 15, 0.2);
  color: #d68910;
}

.etlp-dark .etlp-tag-event {
  background: rgba(241, 196, 15, 0.3);
  color: #f1c40f;
}

.etlp-tag-group {
  background: rgba(46, 204, 113, 0.2);
  color: #27ae60;
}

.etlp-dark .etlp-tag-group {
  background: rgba(46, 204, 113, 0.3);
  color: #2ecc71;
}

.etlp-tag-more {
  background: transparent;
  opacity: 0.6;
  font-style: italic;
  cursor: default;
}

.etlp-tag-more:hover {
  transform: none;
  box-shadow: none;
}

/* Event list specific styling */
.etlp-event-list {
  max-height: 150px;
  overflow-y: auto;
}

/* Scrollbar styling removed — uses global Minecraft-themed scrollbars from index.css */

/* Copyright (c) Microsoft Corporation. */
/* Licensed under the MIT License. */

/* EntityTypeResourceLivePreview - Entity resource preview styling */

.etrlp-container {
  font-family: var(--font-family-sans, "Segoe UI", sans-serif);
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
}

.etrlp-light {
  background: #f5f5f5;
  color: #333;
}

.etrlp-dark {
  background: #2d2d2d;
  color: #e0e0e0;
}

/* Loading/Error States */
.etrlp-loading,
.etrlp-error {
  padding: 16px;
  text-align: center;
  font-style: italic;
  opacity: 0.7;
}

.etrlp-error {
  color: #d9534f;
}

/* Header */
.etrlp-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.etrlp-light .etrlp-header {
  background: #e0e0e0;
}

.etrlp-dark .etrlp-header {
  background: #3a3a3a;
}

.etrlp-icon {
  font-size: 24px;
  margin-right: 10px;
}

.etrlp-title {
  flex: 1;
}

.etrlp-name {
  font-weight: 600;
  font-size: 14px;
}

.etrlp-id {
  font-size: 10px;
  opacity: 0.6;
  font-family: monospace;
}

.etrlp-spawn-egg {
  font-size: 18px;
  margin-left: 8px;
}

/* Sections */
.etrlp-section {
  margin-bottom: 8px;
}

.etrlp-section-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  gap: 6px;
}

.etrlp-light .etrlp-section-header {
  background: #e8e8e8;
}

.etrlp-light .etrlp-section-header:hover {
  background: #ddd;
}

.etrlp-dark .etrlp-section-header {
  background: #383838;
}

.etrlp-dark .etrlp-section-header:hover {
  background: #444;
}

.etrlp-expand-icon {
  font-size: 10px;
  width: 12px;
  text-align: center;
}

.etrlp-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.etrlp-light .etrlp-badge {
  background: #ccc;
  color: #333;
}

.etrlp-dark .etrlp-badge {
  background: #555;
  color: #e0e0e0;
}

/* Items */
.etrlp-items {
  padding-left: 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.etrlp-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  gap: 6px;
  font-size: 11px;
}

.etrlp-light .etrlp-item {
  background: #fafafa;
}

.etrlp-light .etrlp-item:hover {
  background: #eee;
}

.etrlp-dark .etrlp-item {
  background: #2a2a2a;
}

.etrlp-dark .etrlp-item:hover {
  background: #3a3a3a;
}

.etrlp-item-key {
  font-weight: 500;
  min-width: 60px;
}

.etrlp-item-arrow {
  opacity: 0.5;
}

.etrlp-item-value {
  font-family: monospace;
  font-size: 10px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scripts */
.etrlp-scripts-content {
  padding-left: 12px;
  margin-top: 4px;
}

.etrlp-script-group {
  margin-bottom: 6px;
}

.etrlp-script-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2px;
}

.etrlp-script-item {
  font-family: monospace;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.etrlp-light .etrlp-script-item {
  background: #fafafa;
}

.etrlp-dark .etrlp-script-item {
  background: #2a2a2a;
}

.etrlp-var-name {
  font-weight: 500;
  min-width: 80px;
}

.etrlp-var-value {
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clickable Items */
.etrlp-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.etrlp-light .etrlp-clickable:hover {
  background-color: #d8d8d8;
}

.etrlp-dark .etrlp-clickable:hover {
  background-color: #404040;
}

/* RecipeLivePreview.css - Compact live preview styles for recipes */

.rclp-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px;
  min-width: 200px;
}

.rclp-dark {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.rclp-light {
  background-color: #ffffff;
  color: #333333;
}

.rclp-loading,
.rclp-error {
  padding: 16px;
  text-align: center;
  opacity: 0.7;
}

.rclp-error {
  color: #e74c3c;
}

/* Header */
.rclp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.rclp-icon {
  font-size: 20px;
}

.rclp-title {
  flex: 1;
  min-width: 0;
}

.rclp-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rclp-type {
  font-size: 10px;
  opacity: 0.6;
  text-transform: capitalize;
}

/* Sections */
.rclp-section {
  margin-bottom: 8px;
}

.rclp-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}

.rclp-section-header:hover {
  opacity: 0.8;
}

.rclp-expand-icon {
  font-size: 8px;
  width: 12px;
  text-align: center;
}

.rclp-badge {
  margin-left: auto;
  background: rgba(128, 128, 128, 0.2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}

/* Pattern grid */
.rclp-pattern {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
  font-family: monospace;
}

.rclp-pattern-row {
  display: flex;
  gap: 2px;
}

.rclp-pattern-cell {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(128, 128, 128, 0.2);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s;
}

.rclp-pattern-cell:hover {
  background: rgba(98, 100, 167, 0.3);
}

.rclp-pattern-empty {
  opacity: 0.3;
}

/* Items list */
.rclp-items {
  padding: 4px 0;
}

.rclp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin: 2px 0;
  background: rgba(128, 128, 128, 0.08);
  border-radius: 4px;
}

.rclp-item-key {
  font-weight: 600;
  min-width: 20px;
  color: #6264a7;
}

.rclp-dark .rclp-item-key {
  color: #8b8de0;
}

.rclp-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rclp-item-count {
  font-size: 10px;
  opacity: 0.7;
}

/* Output */
.rclp-output {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(46, 204, 113, 0.15);
  border-radius: 4px;
  border-left: 3px solid #2ecc71;
}

.rclp-output-item {
  font-weight: 600;
}

.rclp-output-count {
  font-size: 11px;
  opacity: 0.8;
}

/* Tags */
.rclp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.rclp-tag {
  padding: 2px 6px;
  background: rgba(128, 128, 128, 0.15);
  border-radius: 4px;
  font-size: 10px;
}

/* Clickable */
.rclp-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.rclp-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.rclp-dark .rclp-clickable:hover {
  background: rgba(255, 255, 255, 0.12);
}

.rclp-light .rclp-clickable:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Copyright (c) Microsoft Corporation. */
/* Licensed under the MIT License. */

/* LootTableLivePreview - Loot table preview styling */

.ltlp-container {
  font-family: var(--font-family-sans, "Segoe UI", sans-serif);
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
}

.ltlp-light {
  background: #f5f5f5;
  color: #333;
}

.ltlp-dark {
  background: #2d2d2d;
  color: #e0e0e0;
}

/* Loading/Error States */
.ltlp-loading,
.ltlp-error {
  padding: 16px;
  text-align: center;
  font-style: italic;
  opacity: 0.7;
}

.ltlp-error {
  color: #d9534f;
}

/* Header */
.ltlp-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.ltlp-light .ltlp-header {
  background: #e0e0e0;
}

.ltlp-dark .ltlp-header {
  background: #3a3a3a;
}

.ltlp-icon {
  font-size: 24px;
  margin-right: 10px;
}

.ltlp-title {
  flex: 1;
}

.ltlp-name {
  font-weight: 600;
  font-size: 14px;
}

.ltlp-id {
  font-size: 10px;
  opacity: 0.6;
  font-family: monospace;
}

/* Sections */
.ltlp-section {
  margin-bottom: 8px;
}

.ltlp-section-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  gap: 6px;
}

.ltlp-light .ltlp-section-header {
  background: #e8e8e8;
}

.ltlp-light .ltlp-section-header:hover {
  background: #ddd;
}

.ltlp-dark .ltlp-section-header {
  background: #383838;
}

.ltlp-dark .ltlp-section-header:hover {
  background: #444;
}

.ltlp-expand-icon {
  font-size: 10px;
  width: 12px;
  text-align: center;
}

.ltlp-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.ltlp-light .ltlp-badge {
  background: #ccc;
  color: #333;
}

.ltlp-dark .ltlp-badge {
  background: #555;
  color: #e0e0e0;
}

/* Pools */
.ltlp-pools {
  padding-left: 12px;
  margin-top: 4px;
}

.ltlp-pool {
  margin-bottom: 6px;
}

.ltlp-pool-header {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 3px;
  gap: 8px;
  font-size: 11px;
}

.ltlp-light .ltlp-pool-header {
  background: #f0f0f0;
}

.ltlp-dark .ltlp-pool-header {
  background: #333;
}

.ltlp-pool-name {
  font-weight: 500;
}

.ltlp-pool-rolls {
  opacity: 0.7;
  font-size: 10px;
}

.ltlp-pool-entries {
  margin-left: auto;
  opacity: 0.6;
  font-size: 10px;
}

/* Entries */
.ltlp-entries {
  padding-left: 16px;
  margin-top: 4px;
}

.ltlp-entry {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  gap: 6px;
  font-size: 11px;
  margin-bottom: 2px;
}

.ltlp-light .ltlp-entry {
  background: #fafafa;
}

.ltlp-light .ltlp-entry:hover {
  background: #eee;
}

.ltlp-dark .ltlp-entry {
  background: #2a2a2a;
}

.ltlp-dark .ltlp-entry:hover {
  background: #3a3a3a;
}

.ltlp-entry-icon {
  font-size: 12px;
}

.ltlp-entry-name {
  flex: 1;
  text-transform: capitalize;
}

.ltlp-entry-weight {
  font-size: 10px;
  opacity: 0.6;
  padding: 1px 4px;
  border-radius: 3px;
}

.ltlp-light .ltlp-entry-weight {
  background: #e0e0e0;
}

.ltlp-dark .ltlp-entry-weight {
  background: #444;
}

.ltlp-entry-details {
  display: flex;
  gap: 4px;
}

.ltlp-detail-badge {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  opacity: 0.7;
}

.ltlp-light .ltlp-detail-badge {
  background: #d0d0d0;
}

.ltlp-dark .ltlp-detail-badge {
  background: #444;
}

/* Clickable Items */
.ltlp-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ltlp-light .ltlp-clickable:hover {
  background-color: #d8d8d8;
}

.ltlp-dark .ltlp-clickable:hover {
  background-color: #404040;
}

/* Copyright (c) Microsoft Corporation. */
/* Licensed under the MIT License. */

/* SpawnRuleLivePreview - Spawn rule preview styling */

.srlp-container {
  font-family: var(--font-family-sans, "Segoe UI", sans-serif);
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
}

.srlp-light {
  background: #f5f5f5;
  color: #333;
}

.srlp-dark {
  background: #2d2d2d;
  color: #e0e0e0;
}

/* Loading/Error States */
.srlp-loading,
.srlp-error {
  padding: 16px;
  text-align: center;
  font-style: italic;
  opacity: 0.7;
}

.srlp-error {
  color: #d9534f;
}

/* Header */
.srlp-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.srlp-light .srlp-header {
  background: #e0e0e0;
}

.srlp-dark .srlp-header {
  background: #3a3a3a;
}

.srlp-icon {
  font-size: 24px;
  margin-right: 10px;
}

.srlp-title {
  flex: 1;
}

.srlp-name {
  font-weight: 600;
  font-size: 14px;
}

.srlp-id {
  font-size: 10px;
  opacity: 0.6;
  font-family: monospace;
}

/* Sections */
.srlp-section {
  margin-bottom: 8px;
}

.srlp-section-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  gap: 6px;
}

.srlp-light .srlp-section-header {
  background: #e8e8e8;
}

.srlp-light .srlp-section-header:hover {
  background: #ddd;
}

.srlp-dark .srlp-section-header {
  background: #383838;
}

.srlp-dark .srlp-section-header:hover {
  background: #444;
}

.srlp-expand-icon {
  font-size: 10px;
  width: 12px;
  text-align: center;
}

.srlp-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.srlp-light .srlp-badge {
  background: #ccc;
  color: #333;
}

.srlp-dark .srlp-badge {
  background: #555;
  color: #e0e0e0;
}

/* Conditions */
.srlp-conditions {
  padding-left: 12px;
  margin-top: 4px;
}

.srlp-condition {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  gap: 6px;
  font-size: 11px;
  margin-bottom: 2px;
  cursor: pointer;
}

.srlp-light .srlp-condition {
  background: #fafafa;
}

.srlp-light .srlp-condition:hover {
  background: #eee;
}

.srlp-dark .srlp-condition {
  background: #2a2a2a;
}

.srlp-dark .srlp-condition:hover {
  background: #3a3a3a;
}

.srlp-condition-icon {
  font-size: 12px;
}

.srlp-condition-name {
  flex: 1;
}

.srlp-condition-range,
.srlp-condition-value {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  opacity: 0.8;
}

.srlp-light .srlp-condition-range,
.srlp-light .srlp-condition-value {
  background: #e0e0e0;
}

.srlp-dark .srlp-condition-range,
.srlp-dark .srlp-condition-value {
  background: #444;
}

/* Population */
.srlp-population {
  padding-left: 12px;
  margin-top: 4px;
}

.srlp-pop-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  gap: 8px;
  font-size: 11px;
  margin-bottom: 2px;
}

.srlp-light .srlp-pop-item {
  background: #fafafa;
}

.srlp-dark .srlp-pop-item {
  background: #2a2a2a;
}

.srlp-pop-icon {
  font-size: 12px;
}

.srlp-pop-label {
  flex: 1;
}

.srlp-pop-value {
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
}

.srlp-light .srlp-pop-value {
  background: #e0e0e0;
}

.srlp-dark .srlp-pop-value {
  background: #444;
}

/* Biomes */
.srlp-biomes {
  padding-left: 12px;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.srlp-biome {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  gap: 4px;
  font-size: 10px;
}

.srlp-light .srlp-biome {
  background: #e8e8e8;
}

.srlp-dark .srlp-biome {
  background: #3a3a3a;
}

.srlp-biome-icon {
  font-size: 10px;
}

.srlp-biome-name {
  text-transform: capitalize;
}

/* Copyright (c) Microsoft Corporation. */
/* Licensed under the MIT License. */

/* RenderControllerLivePreview - Render controller preview styling */

.rclp-container {
  font-family: var(--font-family-sans, "Segoe UI", sans-serif);
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
}

.rclp-light {
  background: #f5f5f5;
  color: #333;
}

.rclp-dark {
  background: #2d2d2d;
  color: #e0e0e0;
}

/* Loading/Error States */
.rclp-loading,
.rclp-error {
  padding: 16px;
  text-align: center;
  font-style: italic;
  opacity: 0.7;
}

.rclp-error {
  color: #d9534f;
}

/* Header */
.rclp-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.rclp-light .rclp-header {
  background: #e0e0e0;
}

.rclp-dark .rclp-header {
  background: #3a3a3a;
}

.rclp-icon {
  font-size: 24px;
  margin-right: 10px;
}

.rclp-title {
  flex: 1;
}

.rclp-name {
  font-weight: 600;
  font-size: 14px;
}

.rclp-id {
  font-size: 10px;
  opacity: 0.6;
  font-family: monospace;
}

/* Controllers */
.rclp-controllers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rclp-controller {
  border-radius: 4px;
}

.rclp-light .rclp-controller {
  background: #e8e8e8;
}

.rclp-dark .rclp-controller {
  background: #383838;
}

.rclp-controller-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  gap: 6px;
}

.rclp-light .rclp-controller-header:hover {
  background: #ddd;
}

.rclp-dark .rclp-controller-header:hover {
  background: #444;
}

.rclp-expand-icon {
  font-size: 10px;
  width: 12px;
  text-align: center;
}

.rclp-controller-id {
  font-family: monospace;
  font-size: 11px;
}

.rclp-controller-content {
  padding: 4px 8px 8px 20px;
}

/* Subsections */
.rclp-subsection {
  margin-bottom: 8px;
}

.rclp-subsection-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Items */
.rclp-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rclp-item {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 3px;
  gap: 6px;
  font-size: 11px;
}

.rclp-light .rclp-item {
  background: #f5f5f5;
}

.rclp-dark .rclp-item {
  background: #2a2a2a;
}

.rclp-item-index {
  font-family: monospace;
  font-size: 9px;
  opacity: 0.6;
}

.rclp-item-name {
  font-weight: 500;
}

.rclp-item-arrow {
  opacity: 0.5;
}

.rclp-item-value {
  font-family: monospace;
  font-size: 10px;
}

.rclp-item-condition {
  font-family: monospace;
  font-size: 10px;
  opacity: 0.8;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Arrays */
.rclp-array {
  padding: 4px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
}

.rclp-light .rclp-array {
  background: #f5f5f5;
}

.rclp-dark .rclp-array {
  background: #2a2a2a;
}

.rclp-array-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.rclp-array-name {
  font-family: monospace;
  font-weight: 500;
  font-size: 11px;
}

.rclp-array-type {
  font-size: 9px;
  text-transform: uppercase;
  opacity: 0.6;
}

.rclp-badge {
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
}

.rclp-light .rclp-badge {
  background: #ccc;
  color: #333;
}

.rclp-dark .rclp-badge {
  background: #555;
  color: #e0e0e0;
}

.rclp-array-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rclp-array-value {
  font-family: monospace;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
}

.rclp-light .rclp-array-value {
  background: #e0e0e0;
}

.rclp-dark .rclp-array-value {
  background: #3a3a3a;
}

.rclp-array-more {
  font-size: 9px;
  font-style: italic;
  opacity: 0.6;
  padding: 2px 5px;
}

/* Clickable Items */
.rclp-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.rclp-light .rclp-clickable:hover {
  background-color: #d8d8d8;
}

.rclp-dark .rclp-clickable:hover {
  background-color: #404040;
}

/* Copyright (c) Microsoft Corporation. */
/* Licensed under the MIT License. */

/* AttachableLivePreview - Attachable preview styling */

.atlp-container {
  font-family: var(--font-family-sans, "Segoe UI", sans-serif);
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
}

.atlp-light {
  background: #f5f5f5;
  color: #333;
}

.atlp-dark {
  background: #2d2d2d;
  color: #e0e0e0;
}

/* Loading/Error States */
.atlp-loading,
.atlp-error {
  padding: 16px;
  text-align: center;
  font-style: italic;
  opacity: 0.7;
}

.atlp-error {
  color: #d9534f;
}

/* Header */
.atlp-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.atlp-light .atlp-header {
  background: #e0e0e0;
}

.atlp-dark .atlp-header {
  background: #3a3a3a;
}

.atlp-icon {
  font-size: 24px;
  margin-right: 10px;
}

.atlp-title {
  flex: 1;
}

.atlp-name {
  font-weight: 600;
  font-size: 14px;
}

.atlp-id {
  font-size: 10px;
  opacity: 0.6;
  font-family: monospace;
}

/* Sections */
.atlp-section {
  margin-bottom: 8px;
}

.atlp-section-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  gap: 6px;
}

.atlp-light .atlp-section-header {
  background: #e8e8e8;
}

.atlp-light .atlp-section-header:hover {
  background: #ddd;
}

.atlp-dark .atlp-section-header {
  background: #383838;
}

.atlp-dark .atlp-section-header:hover {
  background: #444;
}

.atlp-expand-icon {
  font-size: 10px;
  width: 12px;
  text-align: center;
}

.atlp-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.atlp-light .atlp-badge {
  background: #ccc;
  color: #333;
}

.atlp-dark .atlp-badge {
  background: #555;
  color: #e0e0e0;
}

/* Items */
.atlp-items {
  padding-left: 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atlp-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  gap: 6px;
  font-size: 11px;
}

.atlp-light .atlp-item {
  background: #fafafa;
}

.atlp-light .atlp-item:hover {
  background: #eee;
}

.atlp-dark .atlp-item {
  background: #2a2a2a;
}

.atlp-dark .atlp-item:hover {
  background: #3a3a3a;
}

.atlp-item-key {
  font-weight: 500;
  min-width: 60px;
}

.atlp-item-arrow {
  opacity: 0.5;
}

.atlp-item-value {
  font-family: monospace;
  font-size: 10px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scripts */
.atlp-scripts-content {
  padding-left: 12px;
  margin-top: 4px;
}

.atlp-script-group {
  margin-bottom: 6px;
}

.atlp-script-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2px;
}

.atlp-script-item {
  font-family: monospace;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlp-light .atlp-script-item {
  background: #fafafa;
}

.atlp-dark .atlp-script-item {
  background: #2a2a2a;
}

/* Clickable Items */
.atlp-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.atlp-light .atlp-clickable:hover {
  background-color: #d8d8d8;
}

.atlp-dark .atlp-clickable:hover {
  background-color: #404040;
}

/* Copyright (c) Microsoft Corporation. */
/* Licensed under the MIT License. */

/* SoundDefinitionLivePreview - Sound definition preview styling */

.sdlp-container {
  font-family: var(--font-family-sans, "Segoe UI", sans-serif);
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
}

.sdlp-light {
  background: #f5f5f5;
  color: #333;
}

.sdlp-dark {
  background: #2d2d2d;
  color: #e0e0e0;
}

/* Loading/Error States */
.sdlp-loading,
.sdlp-error {
  padding: 16px;
  text-align: center;
  font-style: italic;
  opacity: 0.7;
}

.sdlp-error {
  color: #d9534f;
}

/* Header */
.sdlp-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.sdlp-light .sdlp-header {
  background: #e0e0e0;
}

.sdlp-dark .sdlp-header {
  background: #3a3a3a;
}

.sdlp-icon {
  font-size: 24px;
  margin-right: 10px;
}

.sdlp-title {
  flex: 1;
}

.sdlp-name {
  font-weight: 600;
  font-size: 14px;
}

.sdlp-id {
  font-size: 10px;
  opacity: 0.6;
}

/* Definitions */
.sdlp-definitions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Categories */
.sdlp-category {
  margin-bottom: 4px;
}

.sdlp-category-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  gap: 6px;
}

.sdlp-light .sdlp-category-header {
  background: #e8e8e8;
}

.sdlp-light .sdlp-category-header:hover {
  background: #ddd;
}

.sdlp-dark .sdlp-category-header {
  background: #383838;
}

.sdlp-dark .sdlp-category-header:hover {
  background: #444;
}

.sdlp-expand-icon {
  font-size: 10px;
  width: 12px;
  text-align: center;
}

.sdlp-category-icon {
  font-size: 14px;
}

.sdlp-category-name {
  flex: 1;
  text-transform: capitalize;
}

.sdlp-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.sdlp-light .sdlp-badge {
  background: #ccc;
  color: #333;
}

.sdlp-dark .sdlp-badge {
  background: #555;
  color: #e0e0e0;
}

.sdlp-category-items {
  padding-left: 12px;
  margin-top: 4px;
}

/* Definitions */
.sdlp-definition {
  margin-bottom: 2px;
}

.sdlp-def-header {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  gap: 6px;
  font-size: 11px;
}

.sdlp-light .sdlp-def-header {
  background: #f0f0f0;
}

.sdlp-dark .sdlp-def-header {
  background: #333;
}

.sdlp-def-id {
  font-family: monospace;
  font-size: 11px;
  flex: 1;
}

.sdlp-def-count {
  font-size: 10px;
  opacity: 0.6;
}

/* Sounds */
.sdlp-sounds {
  padding-left: 16px;
  margin-top: 2px;
}

.sdlp-sound {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 3px;
  gap: 6px;
  font-size: 10px;
  margin-bottom: 1px;
}

.sdlp-light .sdlp-sound {
  background: #fafafa;
}

.sdlp-light .sdlp-sound:hover {
  background: #eee;
}

.sdlp-dark .sdlp-sound {
  background: #2a2a2a;
}

.sdlp-dark .sdlp-sound:hover {
  background: #3a3a3a;
}

.sdlp-sound-icon {
  font-size: 10px;
  opacity: 0.7;
}

.sdlp-sound-name {
  flex: 1;
  font-family: monospace;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sdlp-sound-prop {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  opacity: 0.8;
  white-space: nowrap;
}

.sdlp-light .sdlp-sound-prop {
  background: #e0e0e0;
}

.sdlp-dark .sdlp-sound-prop {
  background: #444;
}

/* Clickable Items */
.sdlp-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sdlp-light .sdlp-clickable:hover {
  background-color: #d8d8d8;
}

.sdlp-dark .sdlp-clickable:hover {
  background-color: #404040;
}

/* Copyright (c) Microsoft Corporation. */
/* Licensed under the MIT License. */

/* FeatureLivePreview - Feature preview styling */

.flp-container {
  font-family: var(--font-family-sans, "Segoe UI", sans-serif);
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
}

.flp-light {
  background: #f5f5f5;
  color: #333;
}

.flp-dark {
  background: #2d2d2d;
  color: #e0e0e0;
}

/* Loading/Error States */
.flp-loading,
.flp-error {
  padding: 16px;
  text-align: center;
  font-style: italic;
  opacity: 0.7;
}

.flp-error {
  color: #d9534f;
}

/* Header */
.flp-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.flp-light .flp-header {
  background: #e0e0e0;
}

.flp-dark .flp-header {
  background: #3a3a3a;
}

.flp-icon {
  font-size: 24px;
  margin-right: 10px;
}

.flp-title {
  flex: 1;
}

.flp-name {
  font-weight: 600;
  font-size: 14px;
}

.flp-id {
  font-size: 10px;
  opacity: 0.6;
  font-family: monospace;
}

.flp-type-badge {
  font-size: 9px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.flp-light .flp-type-badge {
  background: #ccc;
  color: #333;
}

.flp-dark .flp-type-badge {
  background: #555;
  color: #e0e0e0;
}

/* Places */
.flp-places {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  gap: 8px;
}

.flp-light .flp-places {
  background: #dce8dc;
}

.flp-dark .flp-places {
  background: #2d3d2d;
}

.flp-places-label {
  font-weight: 500;
}

.flp-places-value {
  font-family: monospace;
  font-size: 11px;
}

/* Sections */
.flp-section {
  margin-bottom: 8px;
}

.flp-section-header {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  gap: 6px;
}

.flp-light .flp-section-header {
  background: #e8e8e8;
}

.flp-light .flp-section-header:hover {
  background: #ddd;
}

.flp-dark .flp-section-header {
  background: #383838;
}

.flp-dark .flp-section-header:hover {
  background: #444;
}

.flp-expand-icon {
  font-size: 10px;
  width: 12px;
  text-align: center;
}

.flp-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.flp-light .flp-badge {
  background: #ccc;
  color: #333;
}

.flp-dark .flp-badge {
  background: #555;
  color: #e0e0e0;
}

/* Conditions */
.flp-conditions {
  padding-left: 12px;
  margin-top: 4px;
}

.flp-condition-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  gap: 6px;
  font-size: 11px;
  margin-bottom: 2px;
}

.flp-light .flp-condition-item {
  background: #fafafa;
}

.flp-dark .flp-condition-item {
  background: #2a2a2a;
}

.flp-cond-icon {
  font-size: 12px;
}

.flp-cond-label {
  font-weight: 500;
  min-width: 100px;
}

.flp-cond-value {
  font-family: monospace;
  font-size: 10px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Distribution */
.flp-distribution {
  padding-left: 12px;
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 4px;
}

.flp-dist-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  gap: 6px;
  font-size: 11px;
}

.flp-light .flp-dist-item {
  background: #fafafa;
}

.flp-dark .flp-dist-item {
  background: #2a2a2a;
}

.flp-dist-label {
  font-weight: 500;
  min-width: 50px;
}

.flp-dist-value {
  font-family: monospace;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Configs */
.flp-configs {
  padding-left: 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flp-config-item {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 3px;
  gap: 8px;
  font-size: 11px;
}

.flp-light .flp-config-item {
  background: #fafafa;
}

.flp-dark .flp-config-item {
  background: #2a2a2a;
}

.flp-config-name {
  font-weight: 500;
  min-width: 120px;
}

.flp-config-value {
  font-family: monospace;
  font-size: 10px;
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Clickable Items */
.flp-clickable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.flp-light .flp-clickable:hover {
  background-color: #d8d8d8;
}

.flp-dark .flp-clickable:hover {
  background-color: #404040;
}

/* ManifestLivePreview.css - Styles for manifest pack live preview */

.mnlp-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  overflow-y: auto;
  padding: 8px;
  height: 100%;
  box-sizing: border-box;
}

.mnlp-light {
  background-color: #fafafa;
  color: #333;
}

.mnlp-dark {
  background-color: #1e1e1e;
  color: #d4d4d4;
}

/* Header */
.mnlp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.mnlp-light .mnlp-header {
  background: linear-gradient(135deg, #e8f4f8 0%, #d4e8f0 100%);
  border: 1px solid #b8d4e0;
}

.mnlp-dark .mnlp-header {
  background: linear-gradient(135deg, #2a3a40 0%, #1e2a30 100%);
  border: 1px solid #3a4a50;
}

.mnlp-icon {
  font-size: 24px;
}

.mnlp-title {
  flex: 1;
}

.mnlp-name {
  font-size: 14px;
  font-weight: 600;
}

.mnlp-light .mnlp-name {
  color: #1a5070;
}

.mnlp-dark .mnlp-name {
  color: #7cb8d4;
}

.mnlp-type {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

/* Sections */
.mnlp-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mnlp-section {
  border-radius: 4px;
}

.mnlp-light .mnlp-section {
  background-color: #fff;
  border: 1px solid #e0e0e0;
}

.mnlp-dark .mnlp-section {
  background-color: #252526;
  border: 1px solid #3c3c3c;
}

.mnlp-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
}

.mnlp-section-header:hover {
  background-color: rgba(128, 128, 128, 0.1);
}

.mnlp-toggle {
  font-size: 8px;
  width: 12px;
  opacity: 0.6;
}

.mnlp-section-icon {
  font-size: 12px;
}

.mnlp-section-title {
  font-weight: 500;
  flex: 1;
}

.mnlp-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  opacity: 0.8;
}

.mnlp-light .mnlp-count {
  background-color: #e8e8e8;
  color: #666;
}

.mnlp-dark .mnlp-count {
  background-color: #3c3c3c;
  color: #aaa;
}

.mnlp-section-content {
  padding: 4px 8px 8px 26px;
}

/* Metadata Items */
.mnlp-meta-item {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 11px;
}

.mnlp-meta-label {
  font-weight: 500;
  min-width: 80px;
  opacity: 0.7;
}

.mnlp-meta-value {
  flex: 1;
  word-break: break-word;
}

.mnlp-mono {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 10px;
}

.mnlp-url {
  color: #0078d4;
}

.mnlp-dark .mnlp-url {
  color: #4da6ff;
}

.mnlp-description {
  flex-direction: column;
  gap: 2px;
}

.mnlp-uuid {
  opacity: 0.7;
}

/* Module Items */
.mnlp-module-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.mnlp-module-item:last-child {
  border-bottom: none;
}

.mnlp-module-icon {
  font-size: 14px;
  padding-top: 2px;
}

.mnlp-module-info {
  flex: 1;
}

.mnlp-module-type {
  font-weight: 500;
  text-transform: capitalize;
}

.mnlp-module-version {
  font-size: 10px;
  opacity: 0.7;
}

.mnlp-module-lang,
.mnlp-module-entry {
  font-size: 10px;
  font-family: "Consolas", "Monaco", monospace;
  opacity: 0.6;
  margin-top: 2px;
}

/* Dependency Items */
.mnlp-dep-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.mnlp-dep-item:last-child {
  border-bottom: none;
}

.mnlp-dep-icon {
  font-size: 12px;
}

.mnlp-dep-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mnlp-dep-name {
  font-weight: 500;
  font-size: 11px;
}

.mnlp-dep-version {
  font-size: 10px;
  opacity: 0.7;
  font-family: "Consolas", "Monaco", monospace;
}

/* Capabilities */
.mnlp-capabilities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mnlp-capability-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
}

.mnlp-light .mnlp-capability-tag {
  background-color: #e8f0e8;
  color: #2a6030;
  border: 1px solid #c0d8c0;
}

.mnlp-dark .mnlp-capability-tag {
  background-color: #2a3a2a;
  color: #80c080;
  border: 1px solid #3a5a3a;
}

/* Loading and Error States */
.mnlp-loading,
.mnlp-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  font-size: 13px;
  opacity: 0.7;
}

.mnlp-error-icon {
  font-size: 16px;
}

/* ItemTypeLivePreview.css - Styles for item type live preview */

.itlp-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  overflow-y: auto;
  padding: 8px;
  height: 100%;
  box-sizing: border-box;
}

.itlp-light {
  background-color: var(--surface-bg);
  color: var(--surface-text);
}

.itlp-dark {
  background-color: #1e1e1e;
  color: #d4d4d4;
}

/* Header */
.itlp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.itlp-light .itlp-header {
  background: linear-gradient(135deg, #f0e8f4 0%, #e0d4e8 100%);
  border: 1px solid #c8b8d4;
}

.itlp-dark .itlp-header {
  background: linear-gradient(135deg, #3a2a40 0%, #2a1e30 100%);
  border: 1px solid #4a3a50;
}

.itlp-icon {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

.itlp-title {
  flex: 1;
}

.itlp-name {
  font-size: 14px;
  font-weight: 600;
}

.itlp-light .itlp-name {
  color: #5a3070;
}

.itlp-dark .itlp-name {
  color: #c88fd4;
}

.itlp-id {
  font-size: 10px;
  font-family: "Consolas", "Monaco", monospace;
  opacity: 0.7;
  margin-top: 2px;
}

/* Metadata */
.itlp-meta {
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.itlp-light .itlp-meta {
  background-color: var(--surface-elevated);
  border: 1px solid var(--surface-border);
}

.itlp-dark .itlp-meta {
  background-color: #252526;
  border: 1px solid #3c3c3c;
}

.itlp-meta-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-size: 11px;
}

.itlp-meta-label {
  font-weight: 500;
  min-width: 60px;
  opacity: 0.7;
}

.itlp-meta-value {
  flex: 1;
}

/* Sections */
.itlp-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.itlp-section {
  border-radius: 4px;
}

.itlp-light .itlp-section {
  background-color: var(--surface-bg);
  border: 1px solid var(--surface-border);
}

.itlp-dark .itlp-section {
  background-color: #252526;
  border: 1px solid #3c3c3c;
}

.itlp-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
}

.itlp-section-header:hover {
  background-color: rgba(128, 128, 128, 0.1);
}

.itlp-toggle {
  font-size: 8px;
  width: 12px;
  opacity: 0.6;
}

.itlp-section-icon {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}

.itlp-section-title {
  font-weight: 500;
  flex: 1;
}

.itlp-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  opacity: 0.8;
}

.itlp-light .itlp-count {
  background-color: #e8e8e8;
  color: #666;
}

.itlp-dark .itlp-count {
  background-color: #3c3c3c;
  color: #aaa;
}

.itlp-section-content {
  padding: 4px 8px 8px 8px;
}

/* Component Items */
.itlp-component-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin: 2px 0;
}

.itlp-component-item:hover {
  background-color: rgba(128, 128, 128, 0.15);
}

.itlp-component-icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.itlp-component-name {
  font-weight: 500;
  flex: 1;
}

.itlp-component-summary {
  font-size: 10px;
  opacity: 0.6;
  font-family: "Consolas", "Monaco", monospace;
}

/* Event Items */
.itlp-event-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin: 2px 0;
}

.itlp-event-item:hover {
  background-color: rgba(128, 128, 128, 0.15);
}

.itlp-event-icon {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}

.itlp-event-name {
  font-size: 11px;
  font-family: "Consolas", "Monaco", monospace;
}

/* Loading and Error States */
.itlp-loading,
.itlp-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  font-size: 13px;
  opacity: 0.7;
}

.itlp-error-icon {
  font-size: 16px;
}

/* VoxelShapeLivePreview.css - Styles for the Voxel Shape Live Preview component */

/* Container */
.vslp-container {
  display: flex;
  flex-direction: column;
  font-family:
    "Segoe UI",
    -apple-system,
    sans-serif;
  font-size: 12px;
  overflow-y: auto;
  height: 100%;
}

/* Dark/Light theme variants */
.vslp-dark {
  background-color: #1e1e1e;
  color: #d4d4d4;
}

.vslp-light {
  background-color: #ffffff;
  color: #333333;
}

/* Loading state */
.vslp-loading {
  padding: 20px;
  text-align: center;
  opacity: 0.7;
  font-style: italic;
}

/* Error state */
.vslp-error {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f44336;
}

.vslp-errorIcon {
  font-size: 16px;
}

/* Header */
.vslp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.vslp-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vslp-icon {
  font-size: 16px;
}

.vslp-identifier {
  font-weight: 600;
  font-size: 13px;
  word-break: break-all;
}

.vslp-version {
  font-size: 11px;
  opacity: 0.6;
  padding: 2px 6px;
  border-radius: 3px;
}

.vslp-dark .vslp-version {
  background-color: rgba(255, 255, 255, 0.1);
}

.vslp-light .vslp-version {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 3D Preview area */
.vslp-preview {
  height: 200px;
  min-height: 150px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
  position: relative;
  overflow: hidden;
}

.vslp-previewLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 0.6;
  font-style: italic;
}

/* Section styling */
.vslp-section {
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.vslp-sectionHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-weight: 500;
  cursor: default;
}

.vslp-dark .vslp-sectionHeader {
  background-color: rgba(255, 255, 255, 0.03);
}

.vslp-light .vslp-sectionHeader {
  background-color: rgba(0, 0, 0, 0.02);
}

.vslp-sectionIcon {
  font-size: 12px;
}

.vslp-sectionTitle {
  flex: 1;
}

/* Box list */
.vslp-boxList {
  padding: 4px 8px;
  max-height: 200px;
  overflow-y: auto;
}

.vslp-boxItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.vslp-dark .vslp-boxItem:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.vslp-light .vslp-boxItem:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.vslp-boxNumber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
}

/* Box number colors matching the texture atlas */
.vslp-boxItem:nth-child(8n + 1) .vslp-boxNumber {
  background-color: #5588dd;
  color: white;
}
.vslp-boxItem:nth-child(8n + 2) .vslp-boxNumber {
  background-color: #dd5555;
  color: white;
}
.vslp-boxItem:nth-child(8n + 3) .vslp-boxNumber {
  background-color: #55bb55;
  color: white;
}
.vslp-boxItem:nth-child(8n + 4) .vslp-boxNumber {
  background-color: #ddaa33;
  color: white;
}
.vslp-boxItem:nth-child(8n + 5) .vslp-boxNumber {
  background-color: #aa55cc;
  color: white;
}
.vslp-boxItem:nth-child(8n + 6) .vslp-boxNumber {
  background-color: #33bbbb;
  color: white;
}
.vslp-boxItem:nth-child(8n + 7) .vslp-boxNumber {
  background-color: #dd77aa;
  color: white;
}
.vslp-boxItem:nth-child(8n + 0) .vslp-boxNumber {
  background-color: #888855;
  color: white;
}

.vslp-boxCoords {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  opacity: 0.9;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/


/* Default standalone editor fonts */
.monaco-editor {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", system-ui, "Ubuntu", "Droid Sans", sans-serif;
	--monaco-monospace-font: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
}

.monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item:focus .action-label {
	stroke-width: 1.2px;
}

.monaco-editor.vs-dark .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,
.monaco-editor.hc-black .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label,
.monaco-editor.hc-light .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .action-label {
	stroke-width: 1.2px;
}

.monaco-hover p {
	margin: 0;
}

/* See https://github.com/microsoft/monaco-editor/issues/2168#issuecomment-780078600 */
.monaco-aria-container {
	position: absolute !important;
	top: 0; /* avoid being placed underneath a sibling element */
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.monaco-editor, .monaco-diff-editor .synthetic-focus,
.monaco-editor, .monaco-diff-editor [tabindex="0"]:focus,
.monaco-editor, .monaco-diff-editor [tabindex="-1"]:focus,
.monaco-editor, .monaco-diff-editor button:focus,
.monaco-editor, .monaco-diff-editor input[type=button]:focus,
.monaco-editor, .monaco-diff-editor input[type=checkbox]:focus,
.monaco-editor, .monaco-diff-editor input[type=search]:focus,
.monaco-editor, .monaco-diff-editor input[type=text]:focus,
.monaco-editor, .monaco-diff-editor select:focus,
.monaco-editor, .monaco-diff-editor textarea:focus {
	outline-width: 1px;
	outline-style: solid;
	outline-offset: -1px;
	outline-color: var(--vscode-focusBorder);
	opacity: 1
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-aria-container {
	position: absolute; /* try to hide from window but not from screen readers */
	left:-999em;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* -------------------- IE10 remove auto clear button -------------------- */

::-ms-clear {
	display: none;
}

/* All widgets */
/* I am not a big fan of this rule */
.monaco-editor .editor-widget input {
	color: inherit;
}

/* -------------------- Editor -------------------- */

.monaco-editor {
	position: relative;
	overflow: visible;
	-webkit-text-size-adjust: 100%;
	color: var(--vscode-editor-foreground);
	background-color: var(--vscode-editor-background);
}
.monaco-editor-background {
	background-color: var(--vscode-editor-background);
}
.monaco-editor .rangeHighlight {
	background-color: var(--vscode-editor-rangeHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-rangeHighlightBorder);
}
.monaco-editor.hc-black .rangeHighlight, .monaco-editor.hc-light .rangeHighlight {
	border-style: dotted;
}
.monaco-editor .symbolHighlight {
	background-color: var(--vscode-editor-symbolHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-symbolHighlightBorder);
}
.monaco-editor.hc-black .symbolHighlight, .monaco-editor.hc-light .symbolHighlight {
	border-style: dotted;
}

/* -------------------- Misc -------------------- */

.monaco-editor .overflow-guard {
	position: relative;
	overflow: hidden;
}

.monaco-editor .view-overlays {
	position: absolute;
	top: 0;
}

.monaco-editor .view-overlays > div, .monaco-editor .margin-view-overlays > div {
	position: absolute;
	width: 100%;
}

.monaco-editor .view-overlays > div > div, .monaco-editor .margin-view-overlays > div > div {
	bottom: 0;
}

/*
.monaco-editor .auto-closed-character {
	opacity: 0.3;
}
*/


.monaco-editor .squiggly-error {
	border-bottom: 4px double var(--vscode-editorError-border);
}
.monaco-editor .squiggly-error::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorError-background);
}
.monaco-editor .squiggly-warning {
	border-bottom: 4px double var(--vscode-editorWarning-border);
}
.monaco-editor .squiggly-warning::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorWarning-background);
}
.monaco-editor .squiggly-info {
	border-bottom: 4px double var(--vscode-editorInfo-border);
}
.monaco-editor .squiggly-info::before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: var(--vscode-editorInfo-background);
}
.monaco-editor .squiggly-hint {
	border-bottom: 2px dotted var(--vscode-editorHint-border);
}
.monaco-editor.showUnused .squiggly-unnecessary {
	border-bottom: 2px dashed var(--vscode-editorUnnecessaryCode-border);
}
.monaco-editor.showDeprecated .squiggly-inline-deprecated {
	text-decoration: line-through;
	text-decoration-color: var(--vscode-editor-foreground, inherit);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Arrows */
.monaco-scrollable-element > .scrollbar > .scra {
	cursor: pointer;
	font-size: 11px !important;
}

.monaco-scrollable-element > .visible {
	opacity: 1;

	/* Background rule added for IE9 - to allow clicks on dom node */
	background:rgba(0,0,0,0);

	transition: opacity 100ms linear;
	/* In front of peek view */
	z-index: 11;
}
.monaco-scrollable-element > .invisible {
	opacity: 0;
	pointer-events: none;
}
.monaco-scrollable-element > .invisible.fade {
	transition: opacity 800ms linear;
}

/* Scrollable Content Inset Shadow */
.monaco-scrollable-element > .shadow {
	position: absolute;
	display: none;
}
.monaco-scrollable-element > .shadow.top {
	display: block;
	top: 0;
	left: 3px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
}
.monaco-scrollable-element > .shadow.left {
	display: block;
	top: 3px;
	left: 0;
	height: 100%;
	width: 3px;
	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
}
.monaco-scrollable-element > .shadow.top-left-corner {
	display: block;
	top: 0;
	left: 0;
	height: 3px;
	width: 3px;
}
.monaco-scrollable-element > .shadow.top.left {
	box-shadow: var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;
}

.monaco-scrollable-element > .scrollbar > .slider {
	background: var(--vscode-scrollbarSlider-background);
}

.monaco-scrollable-element > .scrollbar > .slider:hover {
	background: var(--vscode-scrollbarSlider-hoverBackground);
}

.monaco-scrollable-element > .scrollbar > .slider.active {
	background: var(--vscode-scrollbarSlider-activeBackground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .inputarea {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	outline: none !important;
	resize: none;
	border: none;
	overflow: hidden;
	color: transparent;
	background-color: transparent;
	z-index: -10;
}
/*.monaco-editor .inputarea {
	position: fixed !important;
	width: 800px !important;
	height: 500px !important;
	top: initial !important;
	left: initial !important;
	bottom: 0 !important;
	right: 0 !important;
	color: black !important;
	background: white !important;
	line-height: 15px !important;
	font-size: 14px !important;
	z-index: 10 !important;
}*/
.monaco-editor .inputarea.ime-input {
	z-index: 10;
	caret-color: var(--vscode-editorCursor-foreground);
	color: var(--vscode-editor-foreground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .margin-view-overlays .line-numbers {
	bottom: 0;
	font-variant-numeric: tabular-nums;
	position: absolute;
	text-align: right;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	cursor: default;
}

.monaco-editor .relative-current-line-number {
	text-align: left;
	display: inline-block;
	width: 100%;
}

.monaco-editor .margin-view-overlays .line-numbers.lh-odd {
	margin-top: 1px;
}

.monaco-editor .line-numbers {
	color: var(--vscode-editorLineNumber-foreground);
}

.monaco-editor .line-numbers.active-line-number {
	color: var(--vscode-editorLineNumber-activeForeground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .margin {
	background-color: var(--vscode-editorGutter-background);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-mouse-cursor-text {
	cursor: text;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .blockDecorations-container {
	position: absolute;
	top: 0;
	pointer-events: none;
}

.monaco-editor .blockDecorations-block {
	position: absolute;
	box-sizing: border-box;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .view-overlays .current-line {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	height: 100%;
}

.monaco-editor .margin-view-overlays .current-line {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing: border-box;
	height: 100%;
}

.monaco-editor
	.margin-view-overlays
	.current-line.current-line-margin.current-line-margin-both {
	border-right: 0;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cdr = core decorations rendering (div)
*/
.monaco-editor .lines-content .cdr {
	position: absolute;
	height: 100%;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .glyph-margin {
	position: absolute;
	top: 0;
}

/*
	Keeping name short for faster parsing.
	cgmr = core glyph margin rendering (div)
*/
.monaco-editor .glyph-margin-widgets .cgmr {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
	Ensure spinning icons are pixel-perfectly centered and avoid wobble.
	This is only applied to icons that spin to avoid unnecessary
	GPU layers and blurry subpixel AA.
*/
.monaco-editor .glyph-margin-widgets .cgmr.codicon-modifier-spin::before  {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .lines-content .core-guide {
	position: absolute;
	box-sizing: border-box;
	height: 100%;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Uncomment to see lines flashing when they're painted */
/*.monaco-editor .view-lines > .view-line {
	background-color: none;
	animation-name: flash-background;
	animation-duration: 800ms;
}
@keyframes flash-background {
	0%   { background-color: lightgreen; }
	100% { background-color: none }
}*/

.mtkcontrol {
	color: rgb(255, 255, 255) !important;
	background: rgb(150, 0, 0) !important;
}

.mtkoverflow {
	background-color: var(--vscode-button-background, var(--vscode-editor-background));
	color: var(--vscode-button-foreground, var(--vscode-editor-foreground));
	border-width: 1px;
	border-style: solid;
	border-color: var(--vscode-contrastBorder);
	border-radius: 2px;
	padding: 4px;
	cursor: pointer;
}
.mtkoverflow:hover {
	background-color: var(--vscode-button-hoverBackground);
}

.monaco-editor.no-user-select .lines-content,
.monaco-editor.no-user-select .view-line,
.monaco-editor.no-user-select .view-lines {
	user-select: none;
	-webkit-user-select: none;
}
/* Use user-select: text for lookup feature on macOS */
/* https://github.com/microsoft/vscode/issues/85632 */
.monaco-editor.mac .lines-content:hover,
.monaco-editor.mac .view-line:hover,
.monaco-editor.mac .view-lines:hover {
	user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
}

.monaco-editor.enable-user-select {
	user-select: initial;
	-webkit-user-select: initial;
}

.monaco-editor .view-lines {
	white-space: nowrap;
}

.monaco-editor .view-line {
	position: absolute;
	width: 100%;
}

/* There are view-lines in view-zones. We have to make sure this rule does not apply to them, as they don't set a line height */
.monaco-editor .lines-content > .view-lines > .view-line > span {
	top: 0;
	bottom: 0;
	position: absolute;
}

.monaco-editor .mtkw {
	color: var(--vscode-editorWhitespace-foreground) !important;
}

.monaco-editor .mtkz {
	display: inline-block;
	color: var(--vscode-editorWhitespace-foreground) !important;
}

/* TODO@tokenization bootstrap fix */
/*.monaco-editor .view-line > span > span {
	float: none;
	min-height: inherit;
	margin-left: inherit;
}*/

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .lines-decorations {
	position: absolute;
	top: 0;
	background: white;
}

/*
	Keeping name short for faster parsing.
	cldr = core lines decorations rendering (div)
*/
.monaco-editor .margin-view-overlays .cldr {
	position: absolute;
	height: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cmdr = core margin decorations rendering (div)
*/
.monaco-editor .margin-view-overlays .cmdr {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* START cover the case that slider is visible on mouseover */
.monaco-editor .minimap.slider-mouseover .minimap-slider {
	opacity: 0;
	transition: opacity 100ms linear;
}
.monaco-editor .minimap.slider-mouseover:hover .minimap-slider {
	opacity: 1;
}
.monaco-editor .minimap.slider-mouseover .minimap-slider.active {
	opacity: 1;
}
/* END cover the case that slider is visible on mouseover */
.monaco-editor .minimap-slider .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-background);
}
.monaco-editor .minimap-slider:hover .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-hoverBackground);
}
.monaco-editor .minimap-slider.active .minimap-slider-horizontal {
	background: var(--vscode-minimapSlider-activeBackground);
}
.monaco-editor .minimap-shadow-visible {
	box-shadow: var(--vscode-scrollbar-shadow) -6px 0 6px -6px inset;
}
.monaco-editor .minimap-shadow-hidden {
	position: absolute;
	width: 0;
}
.monaco-editor .minimap-shadow-visible {
	position: absolute;
	left: -6px;
	width: 6px;
}
.monaco-editor.no-minimap-shadow .minimap-shadow-visible {
	position: absolute;
	left: -1px;
	width: 1px;
}

/* 0.5s fade in/out for the minimap */
.minimap.autohide {
	opacity: 0;
	transition: opacity 0.5s;
}
.minimap.autohide:hover {
	opacity: 1;
}

.monaco-editor .minimap {
	z-index: 5;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .overlayWidgets {
	position: absolute;
	top: 0;
	left:0;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .view-ruler {
	position: absolute;
	top: 0;
	box-shadow: 1px 0 0 0 var(--vscode-editorRuler-foreground) inset;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .scroll-decoration {
	position: absolute;
	top: 0;
	left: 0;
	height: 6px;
	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/*
	Keeping name short for faster parsing.
	cslr = core selections layer rendering (div)
*/
.monaco-editor .lines-content .cslr {
	position: absolute;
}

.monaco-editor .focused .selected-text {
	background-color: var(--vscode-editor-selectionBackground);
}

.monaco-editor .selected-text {
	background-color: var(--vscode-editor-inactiveSelectionBackground);
}

.monaco-editor			.top-left-radius		{ border-top-left-radius: 3px; }
.monaco-editor			.bottom-left-radius		{ border-bottom-left-radius: 3px; }
.monaco-editor			.top-right-radius		{ border-top-right-radius: 3px; }
.monaco-editor			.bottom-right-radius	{ border-bottom-right-radius: 3px; }

.monaco-editor.hc-black .top-left-radius		{ border-top-left-radius: 0; }
.monaco-editor.hc-black .bottom-left-radius		{ border-bottom-left-radius: 0; }
.monaco-editor.hc-black .top-right-radius		{ border-top-right-radius: 0; }
.monaco-editor.hc-black .bottom-right-radius	{ border-bottom-right-radius: 0; }

.monaco-editor.hc-light .top-left-radius		{ border-top-left-radius: 0; }
.monaco-editor.hc-light .bottom-left-radius		{ border-bottom-left-radius: 0; }
.monaco-editor.hc-light .top-right-radius		{ border-top-right-radius: 0; }
.monaco-editor.hc-light .bottom-right-radius	{ border-bottom-right-radius: 0; }

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .cursors-layer {
	position: absolute;
	top: 0;
}

.monaco-editor .cursors-layer > .cursor {
	position: absolute;
	overflow: hidden;
	box-sizing: border-box;
}

/* -- smooth-caret-animation -- */
.monaco-editor .cursors-layer.cursor-smooth-caret-animation > .cursor {
	transition: all 80ms;
}

/* -- block-outline-style -- */
.monaco-editor .cursors-layer.cursor-block-outline-style > .cursor {
	background: transparent !important;
	border-style: solid;
	border-width: 1px;
}

/* -- underline-style -- */
.monaco-editor .cursors-layer.cursor-underline-style > .cursor {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	background: transparent !important;
}

/* -- underline-thin-style -- */
.monaco-editor .cursors-layer.cursor-underline-thin-style > .cursor {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	background: transparent !important;
}

@keyframes monaco-cursor-smooth {
	0%,
	20% {
		opacity: 1;
	}
	60%,
	100% {
		opacity: 0;
	}
}

@keyframes monaco-cursor-phase {
	0%,
	20% {
		opacity: 1;
	}
	90%,
	100% {
		opacity: 0;
	}
}

@keyframes monaco-cursor-expand {
	0%,
	20% {
		transform: scaleY(1);
	}
	80%,
	100% {
		transform: scaleY(0);
	}
}

.cursor-smooth {
	animation: monaco-cursor-smooth 0.5s ease-in-out 0s 20 alternate;
}

.cursor-phase {
	animation: monaco-cursor-phase 0.5s ease-in-out 0s 20 alternate;
}

.cursor-expand > .cursor {
	animation: monaco-cursor-expand 0.5s ease-in-out 0s 20 alternate;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .mwh {
	position: absolute;
	color: var(--vscode-editorWhitespace-foreground) !important;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-workbench .workbench-hover {
	position: relative;
	font-size: 13px;
	line-height: 19px;
	/* Must be higher than sash's z-index and terminal canvases */
	z-index: 40;
	overflow: hidden;
	max-width: 700px;
	background: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 3px;
	color: var(--vscode-editorHoverWidget-foreground);
	box-shadow: 0 2px 8px var(--vscode-widget-shadow);
}

.monaco-workbench .workbench-hover hr {
	border-bottom: none;
}

.monaco-workbench .workbench-hover:not(.skip-fade-in) {
	animation: fadein 100ms linear;
}

.monaco-workbench .workbench-hover.compact {
	font-size: 12px;
}

.monaco-workbench .workbench-hover.compact .hover-contents {
	padding: 2px 8px;
}

.monaco-workbench .workbench-hover-container.locked .workbench-hover {
	outline: 1px solid var(--vscode-editorHoverWidget-border);
}
.monaco-workbench .workbench-hover-container.locked .workbench-hover:focus,
.monaco-workbench .workbench-hover-lock:focus {
	outline: 1px solid var(--vscode-focusBorder);
}
.monaco-workbench .workbench-hover-container.locked .workbench-hover-lock:hover {
	background: var(--vscode-toolbar-hoverBackground);
}

.monaco-workbench .workbench-hover-pointer {
	position: absolute;
	/* Must be higher than workbench hover z-index */
	z-index: 41;
	pointer-events: none;
}

.monaco-workbench .workbench-hover-pointer:after {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: var(--vscode-editorHoverWidget-background);
	border-right: 1px solid var(--vscode-editorHoverWidget-border);
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
}
.monaco-workbench .locked .workbench-hover-pointer:after {
	width: 4px;
	height: 4px;
	border-right-width: 2px;
	border-bottom-width: 2px;
}

.monaco-workbench .workbench-hover-pointer.left   { left: -3px; }
.monaco-workbench .workbench-hover-pointer.right  { right: 3px; }
.monaco-workbench .workbench-hover-pointer.top    { top: -3px; }
.monaco-workbench .workbench-hover-pointer.bottom { bottom: 3px; }

.monaco-workbench .workbench-hover-pointer.left:after {
	transform: rotate(135deg);
}

.monaco-workbench .workbench-hover-pointer.right:after {
	transform: rotate(315deg);
}

.monaco-workbench .workbench-hover-pointer.top:after {
	transform: rotate(225deg);
}

.monaco-workbench .workbench-hover-pointer.bottom:after {
	transform: rotate(45deg);
}

.monaco-workbench .workbench-hover a {
	color: var(--vscode-textLink-foreground);
}

.monaco-workbench .workbench-hover a:focus {
	outline: 1px solid;
	outline-offset: -1px;
	text-decoration: underline;
	outline-color: var(--vscode-focusBorder);
}

.monaco-workbench .workbench-hover a:hover,
.monaco-workbench .workbench-hover a:active {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-workbench .workbench-hover code {
	background: var(--vscode-textCodeBlock-background);
}

.monaco-workbench .workbench-hover .hover-row .actions {
	background: var(--vscode-editorHoverWidget-statusBarBackground);
}

.monaco-workbench .workbench-hover.right-aligned {
	/* The context view service wraps strangely when it's right up against the edge without this */
	left: 1px;
}

.monaco-workbench .workbench-hover.right-aligned .hover-row.status-bar .actions {
	flex-direction: row-reverse;
}

.monaco-workbench .workbench-hover.right-aligned .hover-row.status-bar .actions .action-container {
	margin-right: 0;
	margin-left: 16px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-hover {
	cursor: default;
	position: absolute;
	overflow: hidden;
	user-select: text;
	-webkit-user-select: text;
	box-sizing: border-box;
	animation: fadein 100ms linear;
	line-height: 1.5em;
	white-space: var(--vscode-hover-whiteSpace, normal);
}

.monaco-hover.hidden {
	display: none;
}

.monaco-hover a:hover:not(.disabled) {
	cursor: pointer;
}

.monaco-hover .hover-contents:not(.html-hover-contents) {
	padding: 4px 8px;
}

.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) {
	max-width: var(--vscode-hover-maxWidth, 500px);
	word-wrap: break-word;
}

.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) hr {
	min-width: 100%;
}

.monaco-hover p,
.monaco-hover .code,
.monaco-hover ul,
.monaco-hover h1,
.monaco-hover h2,
.monaco-hover h3,
.monaco-hover h4,
.monaco-hover h5,
.monaco-hover h6 {
	margin: 8px 0;
}

.monaco-hover h1,
.monaco-hover h2,
.monaco-hover h3,
.monaco-hover h4,
.monaco-hover h5,
.monaco-hover h6 {
	line-height: 1.1;
}

.monaco-hover code {
	font-family: var(--monaco-monospace-font);
}

.monaco-hover hr {
	box-sizing: border-box;
	border-left: 0px;
	border-right: 0px;
	margin-top: 4px;
	margin-bottom: -4px;
	margin-left: -8px;
	margin-right: -8px;
	height: 1px;
}

.monaco-hover p:first-child,
.monaco-hover .code:first-child,
.monaco-hover ul:first-child {
	margin-top: 0;
}

.monaco-hover p:last-child,
.monaco-hover .code:last-child,
.monaco-hover ul:last-child {
	margin-bottom: 0;
}

/* MarkupContent Layout */
.monaco-hover ul {
	padding-left: 20px;
}
.monaco-hover ol {
	padding-left: 20px;
}

.monaco-hover li > p {
	margin-bottom: 0;
}

.monaco-hover li > ul {
	margin-top: 0;
}

.monaco-hover code {
	border-radius: 3px;
	padding: 0 0.4em;
}

.monaco-hover .monaco-tokenized-source {
	white-space: var(--vscode-hover-sourceWhiteSpace, pre-wrap);
}

.monaco-hover .hover-row.status-bar {
	font-size: 12px;
	line-height: 22px;
}

.monaco-hover .hover-row.status-bar .info {
	font-style: italic;
	padding: 0px 8px;
}

.monaco-hover .hover-row.status-bar .actions {
	display: flex;
	padding: 0px 8px;
}

.monaco-hover .hover-row.status-bar .actions .action-container {
	margin-right: 16px;
	cursor: pointer;
}

.monaco-hover .hover-row.status-bar .actions .action-container .action .icon {
	padding-right: 4px;
}

.monaco-hover .markdown-hover .hover-contents .codicon {
	color: inherit;
	font-size: inherit;
	vertical-align: middle;
}

.monaco-hover .hover-contents a.code-link:hover,
.monaco-hover .hover-contents a.code-link {
	color: inherit;
}

.monaco-hover .hover-contents a.code-link:before {
	content: '(';
}

.monaco-hover .hover-contents a.code-link:after {
	content: ')';
}

.monaco-hover .hover-contents a.code-link > span {
	text-decoration: underline;
	/** Hack to force underline to show **/
	border-bottom: 1px solid transparent;
	text-underline-position: under;
	color: var(--vscode-textLink-foreground);
}

.monaco-hover .hover-contents a.code-link > span:hover {
	color: var(--vscode-textLink-activeForeground);
}

/** Spans in markdown hovers need a margin-bottom to avoid looking cramped: https://github.com/microsoft/vscode/issues/101496 **/
.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span {
	margin-bottom: 4px;
	display: inline-block;
}

.monaco-hover-content .action-container a {
	-webkit-user-select: none;
	user-select: none;
}

.monaco-hover-content .action-container.disabled {
	pointer-events: none;
	opacity: 0.4;
	cursor: default;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .rendered-markdown kbd {
	background-color: var(--vscode-keybindingLabel-background);
	color: var(--vscode-keybindingLabel-foreground);
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	border-color: var(--vscode-keybindingLabel-border);
	border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
	box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
	vertical-align: middle;
	padding: 1px 3px;
}

.rendered-markdown li:has(input[type=checkbox]) {
	list-style-type: none;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.context-view {
	position: absolute;
}

.context-view.fixed {
	all: initial;
	font-family: inherit;
	font-size: 13px;
	position: fixed;
	color: inherit;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-list {
	position: relative;
	height: 100%;
	width: 100%;
	white-space: nowrap;
}

.monaco-list.mouse-support {
	user-select: none;
	-webkit-user-select: none;
}

.monaco-list > .monaco-scrollable-element {
	height: 100%;
}

.monaco-list-rows {
	position: relative;
	width: 100%;
	height: 100%;
}

.monaco-list.horizontal-scrolling .monaco-list-rows {
	width: auto;
	min-width: 100%;
}

.monaco-list-row {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

.monaco-list.mouse-support .monaco-list-row {
	cursor: pointer;
	touch-action: none;
}

/* Make sure the scrollbar renders above overlays (sticky scroll) */
.monaco-list .monaco-scrollable-element > .scrollbar.vertical,
.monaco-pane-view > .monaco-split-view2.vertical > .monaco-scrollable-element > .scrollbar.vertical {
	z-index: 14;
}

/* for OS X ballistic scrolling */
.monaco-list-row.scrolling {
	display: none !important;
}

/* Focus */
.monaco-list.element-focused,
.monaco-list.selection-single,
.monaco-list.selection-multiple {
	outline: 0 !important;
}

/* Dnd */
.monaco-drag-image {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 12px;
	position: absolute;
	z-index: 1000;
}

/* Filter */

.monaco-list-type-filter-message {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 40px 1em 1em 1em;
	text-align: center;
	white-space: normal;
	opacity: 0.7;
	pointer-events: none;
}

.monaco-list-type-filter-message:empty {
	display: none;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Use custom CSS vars to expose padding into parent select for padding calculation */
.monaco-select-box-dropdown-padding {
	--dropdown-padding-top: 1px;
	--dropdown-padding-bottom: 1px;
}

.hc-black .monaco-select-box-dropdown-padding,
.hc-light .monaco-select-box-dropdown-padding {
	--dropdown-padding-top: 3px;
	--dropdown-padding-bottom: 4px;
}

.monaco-select-box-dropdown-container {
	display: none;
	box-sizing:	border-box;
}

.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown * {
	margin: 0;
}

.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
}

.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown code {
	line-height: 15px; /** For some reason, this is needed, otherwise <code> will take up 20px height */
	font-family: var(--monaco-monospace-font);
}


.monaco-select-box-dropdown-container.visible {
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 1px;
	overflow: hidden;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
	flex: 0 0 auto;
	align-self: flex-start;
	padding-top: var(--dropdown-padding-top);
	padding-bottom: var(--dropdown-padding-bottom);
	padding-left: 1px;
	padding-right: 1px;
	width: 100%;
	overflow: hidden;
	box-sizing:	border-box;
}

.monaco-select-box-dropdown-container > .select-box-details-pane {
	padding: 5px;
}

.hc-black .monaco-select-box-dropdown-container > .select-box-dropdown-list-container {
	padding-top: var(--dropdown-padding-top);
	padding-bottom: var(--dropdown-padding-bottom);
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row {
	cursor: pointer;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-text {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 3.5px;
	white-space: nowrap;
	float: left;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-detail {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-left: 3.5px;
	white-space: nowrap;
	float: left;
	opacity: 0.7;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .option-decorator-right {
	text-overflow: ellipsis;
	overflow: hidden;
	padding-right: 10px;
	white-space: nowrap;
	float: right;
}


/* Accepted CSS hiding technique for accessibility reader text  */
/* https://webaim.org/techniques/css/invisiblecontent/ */

.monaco-select-box-dropdown-container > .select-box-dropdown-list-container .monaco-list .monaco-list-row > .visually-hidden {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control {
	flex: 1 1 auto;
	align-self: flex-start;
	opacity: 0;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div {
	overflow: hidden;
	max-height: 0px;
}

.monaco-select-box-dropdown-container > .select-box-dropdown-container-width-control > .width-control-div > .option-text-width-control {
	padding-left: 4px;
	padding-right: 8px;
	white-space: nowrap;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-select-box {
	width: 100%;
	cursor: pointer;
	border-radius: 2px;
}

.monaco-select-box-dropdown-container {
	font-size: 13px;
	font-weight: normal;
	text-transform: none;
}

/** Actions */

.monaco-action-bar .action-item.select-container {
	cursor: default;
}

.monaco-action-bar .action-item .monaco-select-box {
	cursor: pointer;
	min-width: 100px;
	min-height: 18px;
	padding: 2px 23px 2px 8px;
}

.mac .monaco-action-bar .action-item .monaco-select-box {
	font-size: 11px;
	border-radius: 5px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-action-bar {
	white-space: nowrap;
	height: 100%;
}

.monaco-action-bar .actions-container {
	display: flex;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	width: 100%;
	align-items: center;
}

.monaco-action-bar.vertical .actions-container {
	display: inline-block;
}

.monaco-action-bar .action-item {
	display: block;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;  /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
}

.monaco-action-bar .action-item.disabled {
	cursor: default;
}

.monaco-action-bar .action-item .icon,
.monaco-action-bar .action-item .codicon {
	display: block;
}

.monaco-action-bar .action-item .codicon {
	display: flex;
	align-items: center;
	width: 16px;
	height: 16px;
}

.monaco-action-bar .action-label {
	display: flex;
	font-size: 11px;
	padding: 3px;
	border-radius: 5px;
}

.monaco-action-bar .action-item.disabled .action-label,
.monaco-action-bar .action-item.disabled .action-label::before,
.monaco-action-bar .action-item.disabled .action-label:hover {
	color: var(--vscode-disabledForeground);
}

/* Vertical actions */

.monaco-action-bar.vertical {
	text-align: left;
}

.monaco-action-bar.vertical .action-item {
	display: block;
}

.monaco-action-bar.vertical .action-label.separator {
	display: block;
	border-bottom: 1px solid #bbb;
	padding-top: 1px;
	margin-left: .8em;
	margin-right: .8em;
}

.monaco-action-bar .action-item .action-label.separator {
	width: 1px;
	height: 16px;
	margin: 5px 4px !important;
	cursor: default;
	min-width: 1px;
	padding: 0;
	background-color: #bbb;
}

.secondary-actions .monaco-action-bar .action-label {
	margin-left: 6px;
}

/* Action Items */
.monaco-action-bar .action-item.select-container {
	overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
	flex: 1;
	max-width: 170px;
	min-width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
}

.monaco-action-bar .action-item.action-dropdown-item {
	display: flex;
}

.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator {
	display: flex;
	align-items: center;
	cursor: default;
}

.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div {
	width: 1px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-dropdown {
	height: 100%;
	padding: 0;
}

.monaco-dropdown > .dropdown-label {
	cursor: pointer;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.monaco-dropdown > .dropdown-label > .action-label.disabled {
	cursor: default;
}

.monaco-dropdown-with-primary {
	display: flex !important;
	flex-direction: row;
	border-radius: 5px;
}

.monaco-dropdown-with-primary > .action-container > .action-label {
	margin-right: 0;
}

.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
	font-size: 12px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 16px;
	margin-left: -3px;
}

.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
	display: block;
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-action-bar .action-item.menu-entry .action-label.icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 16px;
}

.monaco-dropdown-with-default {
	display: flex !important;
	flex-direction: row;
	border-radius: 5px;
}

.monaco-dropdown-with-default > .action-container > .action-label {
	margin-right: 0;
}

.monaco-dropdown-with-default > .action-container.menu-entry > .action-label.icon {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 16px;
}

.monaco-dropdown-with-default:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
	font-size: 12px;
	padding-left: 0px;
	padding-right: 0px;
	line-height: 16px;
	margin-left: -3px;
}

.monaco-dropdown-with-default > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
	display: block;
	background-size: 16px;
	background-position: center center;
	background-repeat: no-repeat;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.quick-input-widget {
	font-size: 13px;
}

.quick-input-widget .monaco-highlighted-label .highlight,
.quick-input-widget .monaco-highlighted-label .highlight {
	color: #0066BF;
}

.vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight,
.vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight {
	color: #9DDDFF;
}

.vs-dark .quick-input-widget .monaco-highlighted-label .highlight,
.vs-dark .quick-input-widget .monaco-highlighted-label .highlight {
	color: #0097fb;
}

.hc-black .quick-input-widget .monaco-highlighted-label .highlight,
.hc-black .quick-input-widget .monaco-highlighted-label .highlight {
	color: #F38518;
}

.hc-light .quick-input-widget .monaco-highlighted-label .highlight,
.hc-light .quick-input-widget .monaco-highlighted-label .highlight {
	color: #0F4A85;
}

.monaco-keybinding > .monaco-keybinding-key {
	background-color: rgba(221, 221, 221, 0.4);
	border: solid 1px rgba(204, 204, 204, 0.4);
	border-bottom-color: rgba(187, 187, 187, 0.4);
	box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4);
	color: #555;
}

.hc-black .monaco-keybinding > .monaco-keybinding-key {
	background-color: transparent;
	border: solid 1px rgb(111, 195, 223);
	box-shadow: none;
	color: #fff;
}

.hc-light .monaco-keybinding > .monaco-keybinding-key {
	background-color: transparent;
	border: solid 1px #0F4A85;
	box-shadow: none;
	color: #292929;
}

.vs-dark .monaco-keybinding > .monaco-keybinding-key {
	background-color: rgba(128, 128, 128, 0.17);
	border: solid 1px rgba(51, 51, 51, 0.6);
	border-bottom-color: rgba(68, 68, 68, 0.6);
	box-shadow: inset 0 -1px 0 rgba(68, 68, 68, 0.6);
	color: #ccc;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-custom-toggle {
	margin-left: 2px;
	float: left;
	cursor: pointer;
	overflow: hidden;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	border: 1px solid transparent;
	padding: 1px;
	box-sizing:	border-box;
	user-select: none;
	-webkit-user-select: none;
}

.monaco-custom-toggle:hover {
	background-color: var(--vscode-inputOption-hoverBackground);
}

.hc-black .monaco-custom-toggle:hover,
.hc-light .monaco-custom-toggle:hover {
	border: 1px dashed var(--vscode-focusBorder);
}

.hc-black .monaco-custom-toggle,
.hc-light .monaco-custom-toggle {
	background: none;
}

.hc-black .monaco-custom-toggle:hover,
.hc-light .monaco-custom-toggle:hover {
	background: none;
}

.monaco-custom-toggle.monaco-checkbox {
	height: 18px;
	width: 18px;
	border: 1px solid transparent;
	border-radius: 3px;
	margin-right: 9px;
	margin-left: 0px;
	padding: 0px;
	opacity: 1;
	background-size: 16px !important;
}

.monaco-action-bar .checkbox-action-item {
	display: flex;
	align-items: center;
}

.monaco-action-bar .checkbox-action-item > .monaco-custom-toggle.monaco-checkbox {
	margin-right: 4px;
}

.monaco-action-bar .checkbox-action-item > .checkbox-label {
	font-size: 12px;
}

/* hide check when unchecked */
.monaco-custom-toggle.monaco-checkbox:not(.checked)::before {
	visibility: hidden;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.quick-input-widget {
	position: absolute;
	width: 600px;
	z-index: 2550;
	left: 50%;
	margin-left: -300px;
	-webkit-app-region: no-drag;
	border-radius: 6px;
}

.quick-input-titlebar {
	display: flex;
	align-items: center;
	border-radius: inherit;
}

.quick-input-left-action-bar {
	display: flex;
	margin-left: 4px;
	flex: 1;
}

.quick-input-title {
	padding: 3px 0px;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
}

.quick-input-right-action-bar {
	display: flex;
	margin-right: 4px;
	flex: 1;
}

.quick-input-right-action-bar > .actions-container {
	justify-content: flex-end;
}

.quick-input-titlebar .monaco-action-bar .action-label.codicon {
	background-position: center;
	background-repeat: no-repeat;
	padding: 2px;
}

.quick-input-description {
	margin: 6px 6px 6px 11px;
}

.quick-input-header .quick-input-description {
	margin: 4px 2px;
	flex: 1;
}

.quick-input-header {
	display: flex;
	padding: 8px 6px 2px 6px;
}

.quick-input-widget.hidden-input .quick-input-header {
	/* reduce margins and paddings when input box hidden */
	padding: 0;
	margin-bottom: 0;
}

.quick-input-and-message {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
	position: relative;
}

.quick-input-check-all {
	align-self: center;
	margin: 0;
}

.quick-input-filter {
	flex-grow: 1;
	display: flex;
	position: relative;
}

.quick-input-box {
	flex-grow: 1;
}

.quick-input-widget.show-checkboxes .quick-input-box,
.quick-input-widget.show-checkboxes .quick-input-message {
	margin-left: 5px;
}

.quick-input-visible-count {
	position: absolute;
	left: -10000px;
}

.quick-input-count {
	align-self: center;
	position: absolute;
	right: 4px;
	display: flex;
	align-items: center;
}

.quick-input-count .monaco-count-badge {
	vertical-align: middle;
	padding: 2px 4px;
	border-radius: 2px;
	min-height: auto;
	line-height: normal;
}

.quick-input-action {
	margin-left: 6px;
}

.quick-input-action .monaco-text-button {
	font-size: 11px;
	padding: 0 6px;
	display: flex;
	height: 25px;
	align-items: center;
}

.quick-input-message {
	margin-top: -1px;
	padding: 5px;
	overflow-wrap: break-word;
}

.quick-input-message > .codicon {
	margin: 0 0.2em;
	vertical-align: text-bottom;
}

/* Links in descriptions & validations */
.quick-input-message a {
	color: inherit;
}

.quick-input-progress.monaco-progress-container {
	position: relative;
}

.quick-input-list {
	line-height: 22px;
}

.quick-input-widget.hidden-input .quick-input-list {
	margin-top: 4px; /* reduce margins when input box hidden */
	padding-bottom: 4px;
}

.quick-input-list .monaco-list {
	overflow: hidden;
	max-height: calc(20 * 22px);
	padding-bottom: 5px;
}

.quick-input-list .monaco-scrollable-element {
	padding: 0px 5px;
}

.quick-input-list .quick-input-list-entry {
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	height: 100%;
	padding: 0 6px;
}

.quick-input-list .quick-input-list-entry.quick-input-list-separator-border {
	border-top-width: 1px;
	border-top-style: solid;
}

.quick-input-list .monaco-list-row {
	border-radius: 3px;
}

.quick-input-list .monaco-list-row[data-index="0"] .quick-input-list-entry.quick-input-list-separator-border {
	border-top-style: none;
}

.quick-input-list .quick-input-list-label {
	overflow: hidden;
	display: flex;
	height: 100%;
	flex: 1;
}

.quick-input-list .quick-input-list-checkbox {
	align-self: center;
	margin: 0;
}

.quick-input-list .quick-input-list-icon {
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-input-list .quick-input-list-rows {
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1;
	margin-left: 5px;
}

.quick-input-widget.show-checkboxes .quick-input-list .quick-input-list-rows {
	margin-left: 10px;
}

.quick-input-widget .quick-input-list .quick-input-list-checkbox {
	display: none;
}
.quick-input-widget.show-checkboxes .quick-input-list .quick-input-list-checkbox {
	display: inline;
}

.quick-input-list .quick-input-list-rows > .quick-input-list-row {
	display: flex;
	align-items: center;
}

.quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label,
.quick-input-list .quick-input-list-rows > .quick-input-list-row .monaco-icon-label .monaco-icon-label-container > .monaco-icon-name-container {
	flex: 1; /* make sure the icon label grows within the row */
}

.quick-input-list .quick-input-list-rows > .quick-input-list-row .codicon[class*='codicon-'] {
	vertical-align: text-bottom;
}

.quick-input-list .quick-input-list-rows .monaco-highlighted-label > span {
	opacity: 1;
}

.quick-input-list .quick-input-list-entry .quick-input-list-entry-keybinding {
	margin-right: 8px; /* separate from the separator label or scrollbar if any */
}

.quick-input-list .quick-input-list-label-meta {
	opacity: 0.7;
	line-height: normal;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* preserve list-like styling instead of tree-like styling */
.quick-input-list .monaco-list .monaco-list-row .monaco-highlighted-label .highlight {
	font-weight: bold;
	background-color: unset;
	color: var(--vscode-list-highlightForeground) !important;
}

/* preserve list-like styling instead of tree-like styling */
.quick-input-list .monaco-list .monaco-list-row.focused .monaco-highlighted-label .highlight {
	color: var(--vscode-list-focusHighlightForeground) !important;
}

.quick-input-list .quick-input-list-entry .quick-input-list-separator {
	margin-right: 4px; /* separate from keybindings or actions */
}

.quick-input-list .quick-input-list-entry-action-bar {
	display: flex;
	flex: 0;
	overflow: visible;
}

.quick-input-list .quick-input-list-entry-action-bar .action-label {
	/*
	 * By default, actions in the quick input action bar are hidden
	 * until hovered over them or selected.
	 */
	display: none;
}

.quick-input-list .quick-input-list-entry-action-bar .action-label.codicon {
	margin-right: 4px;
	padding: 0px 2px 2px 2px;
}

.quick-input-list .quick-input-list-entry-action-bar {
	margin-top: 1px;
}

.quick-input-list .quick-input-list-entry-action-bar {
	margin-right: 4px; /* separate from scrollbar */
}

.quick-input-list .quick-input-list-entry .quick-input-list-entry-action-bar .action-label.always-visible,
.quick-input-list .quick-input-list-entry:hover .quick-input-list-entry-action-bar .action-label,
.quick-input-list .quick-input-list-entry.focus-inside .quick-input-list-entry-action-bar .action-label,
.quick-input-list .monaco-list-row.focused .quick-input-list-entry-action-bar .action-label,
.quick-input-list .monaco-list-row.passive-focused .quick-input-list-entry-action-bar .action-label {
	display: flex;
}

/* focused items in quick pick */
.quick-input-list .monaco-list-row.focused .monaco-keybinding-key,
.quick-input-list .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator {
	color: inherit
}
.quick-input-list .monaco-list-row.focused .monaco-keybinding-key {
	background: none;
}

.quick-input-list .quick-input-list-separator-as-item {
	padding: 4px 6px;
	font-size: 12px;
}

/* Quick input separators as full-row item */
.quick-input-list .quick-input-list-separator-as-item .label-name {
	font-weight: 600;
}

.quick-input-list .quick-input-list-separator-as-item .label-description {
	/* Override default description opacity so we don't have a contrast ratio issue. */
	opacity: 1 !important;
}

/* Hide border when the item becomes the sticky one */
.quick-input-list .monaco-tree-sticky-row .quick-input-list-entry.quick-input-list-separator-as-item.quick-input-list-separator-border {
	border-top-style: none;
}

/* Give sticky row the same padding as the scrollable list */
.quick-input-list .monaco-tree-sticky-row {
	padding: 0 5px;
}

/* Hide the twistie containers so that there isn't blank indent */
.quick-input-list .monaco-tl-twistie {
	display: none !important;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

:root {
	--vscode-sash-size: 4px;
	--vscode-sash-hover-size: 4px;
}

.monaco-sash {
	position: absolute;
	z-index: 35;
	touch-action: none;
}

.monaco-sash.disabled {
	pointer-events: none;
}

.monaco-sash.mac.vertical {
	cursor: col-resize;
}

.monaco-sash.vertical.minimum {
	cursor: e-resize;
}

.monaco-sash.vertical.maximum {
	cursor: w-resize;
}

.monaco-sash.mac.horizontal {
	cursor: row-resize;
}

.monaco-sash.horizontal.minimum {
	cursor: s-resize;
}

.monaco-sash.horizontal.maximum {
	cursor: n-resize;
}

.monaco-sash.disabled {
	cursor: default !important;
	pointer-events: none !important;
}

.monaco-sash.vertical {
	cursor: ew-resize;
	top: 0;
	width: var(--vscode-sash-size);
	height: 100%;
}

.monaco-sash.horizontal {
	cursor: ns-resize;
	left: 0;
	width: 100%;
	height: var(--vscode-sash-size);
}

.monaco-sash:not(.disabled) > .orthogonal-drag-handle {
	content: " ";
	height: calc(var(--vscode-sash-size) * 2);
	width: calc(var(--vscode-sash-size) * 2);
	z-index: 100;
	display: block;
	cursor: all-scroll;
	position: absolute;
}

.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
	> .orthogonal-drag-handle.start,
.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
	> .orthogonal-drag-handle.end {
	cursor: nwse-resize;
}

.monaco-sash.horizontal.orthogonal-edge-north:not(.disabled)
	> .orthogonal-drag-handle.end,
.monaco-sash.horizontal.orthogonal-edge-south:not(.disabled)
	> .orthogonal-drag-handle.start {
	cursor: nesw-resize;
}

.monaco-sash.vertical > .orthogonal-drag-handle.start {
	left: calc(var(--vscode-sash-size) * -0.5);
	top: calc(var(--vscode-sash-size) * -1);
}
.monaco-sash.vertical > .orthogonal-drag-handle.end {
	left: calc(var(--vscode-sash-size) * -0.5);
	bottom: calc(var(--vscode-sash-size) * -1);
}
.monaco-sash.horizontal > .orthogonal-drag-handle.start {
	top: calc(var(--vscode-sash-size) * -0.5);
	left: calc(var(--vscode-sash-size) * -1);
}
.monaco-sash.horizontal > .orthogonal-drag-handle.end {
	top: calc(var(--vscode-sash-size) * -0.5);
	right: calc(var(--vscode-sash-size) * -1);
}

.monaco-sash:before {
	content: '';
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
}

.monaco-workbench:not(.reduce-motion) .monaco-sash:before {
	transition: background-color 0.1s ease-out;
}

.monaco-sash.hover:before,
.monaco-sash.active:before {
	background: var(--vscode-sash-hoverBorder);
}

.monaco-sash.vertical:before {
	width: var(--vscode-sash-hover-size);
	left: calc(50% - (var(--vscode-sash-hover-size) / 2));
}

.monaco-sash.horizontal:before {
	height: var(--vscode-sash-hover-size);
	top: calc(50% - (var(--vscode-sash-hover-size) / 2));
}

.pointer-events-disabled {
	pointer-events: none !important;
}

/** Debug **/

.monaco-sash.debug {
	background: cyan;
}

.monaco-sash.debug.disabled {
	background: rgba(0, 255, 255, 0.2);
}

.monaco-sash.debug:not(.disabled) > .orthogonal-drag-handle {
	background: red;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-split-view2 {
	position: relative;
	width: 100%;
	height: 100%;
}

.monaco-split-view2 > .sash-container {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.monaco-split-view2 > .sash-container > .monaco-sash {
	pointer-events: initial;
}

.monaco-split-view2 > .monaco-scrollable-element {
	width: 100%;
	height: 100%;
}

.monaco-split-view2 > .monaco-scrollable-element > .split-view-container {
	width: 100%;
	height: 100%;
	white-space: nowrap;
	position: relative;
}

.monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view {
	white-space: initial;
	position: absolute;
}

.monaco-split-view2 > .monaco-scrollable-element > .split-view-container > .split-view-view:not(.visible) {
	display: none;
}

.monaco-split-view2.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view {
	width: 100%;
}

.monaco-split-view2.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view {
	height: 100%;
}

.monaco-split-view2.separator-border > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	pointer-events: none;
	background-color: var(--separator-border);
}

.monaco-split-view2.separator-border.horizontal > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	height: 100%;
	width: 1px;
}

.monaco-split-view2.separator-border.vertical > .monaco-scrollable-element > .split-view-container > .split-view-view:not(:first-child)::before {
	height: 1px;
	width: 100%;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-table {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.monaco-table > .monaco-split-view2 {
	border-bottom: 1px solid transparent;
}

.monaco-table > .monaco-list {
	flex: 1;
}

.monaco-table-tr {
	display: flex;
	height: 100%;
}

.monaco-table-th {
	width: 100%;
	height: 100%;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
}

.monaco-table-th,
.monaco-table-td {
	box-sizing: border-box;
	flex-shrink: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
	content: "";
	position: absolute;
	left: calc(var(--vscode-sash-size) / 2);
	width: 0;
	border-left: 1px solid transparent;
}

.monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2,
.monaco-workbench:not(.reduce-motion) .monaco-table > .monaco-split-view2 .monaco-sash.vertical::before {
	transition: border-color 0.2s ease-out;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-inputbox {
	position: relative;
	display: block;
	padding: 0;
	box-sizing:	border-box;
	border-radius: 2px;

	/* Customizable */
	font-size: inherit;
}

.monaco-inputbox > .ibwrapper > .input,
.monaco-inputbox > .ibwrapper > .mirror {

	/* Customizable */
	padding: 4px 6px;
}

.monaco-inputbox > .ibwrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.monaco-inputbox > .ibwrapper > .input {
	display: inline-block;
	box-sizing:	border-box;
	width: 100%;
	height: 100%;
	line-height: inherit;
	border: none;
	font-family: inherit;
	font-size: inherit;
	resize: none;
	color: inherit;
}

.monaco-inputbox > .ibwrapper > input {
	text-overflow: ellipsis;
}

.monaco-inputbox > .ibwrapper > textarea.input {
	display: block;
	scrollbar-width: none; /* Firefox: hide scrollbars */
	outline: none;
}

.monaco-inputbox > .ibwrapper > textarea.input::-webkit-scrollbar {
	display: none; /* Chrome + Safari: hide scrollbar */
}

.monaco-inputbox > .ibwrapper > textarea.input.empty {
	white-space: nowrap;
}

.monaco-inputbox > .ibwrapper > .mirror {
	position: absolute;
	display: inline-block;
	width: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	white-space: pre-wrap;
	visibility: hidden;
	word-wrap: break-word;
}

/* Context view */

.monaco-inputbox-container {
	text-align: right;
}

.monaco-inputbox-container .monaco-inputbox-message {
	display: inline-block;
	overflow: hidden;
	text-align: left;
	width: 100%;
	box-sizing:	border-box;
	padding: 0.4em;
	font-size: 12px;
	line-height: 17px;
	margin-top: -1px;
	word-wrap: break-word;
}

/* Action bar support */
.monaco-inputbox .monaco-action-bar {
	position: absolute;
	right: 2px;
	top: 4px;
}

.monaco-inputbox .monaco-action-bar .action-item {
	margin-left: 2px;
}

.monaco-inputbox .monaco-action-bar .action-item .codicon {
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
/* ---------- Find input ---------- */

.monaco-findInput {
	position: relative;
}

.monaco-findInput .monaco-inputbox {
	font-size: 13px;
	width: 100%;
}

.monaco-findInput > .controls {
	position: absolute;
	top: 3px;
	right: 2px;
}

.vs .monaco-findInput.disabled {
	background-color: #E1E1E1;
}

/* Theming */
.vs-dark .monaco-findInput.disabled {
	background-color: #333;
}

/* Highlighting */
.monaco-findInput.highlight-0 .controls,
.hc-light .monaco-findInput.highlight-0 .controls {
	animation: monaco-findInput-highlight-0 100ms linear 0s;
}

.monaco-findInput.highlight-1 .controls,
.hc-light .monaco-findInput.highlight-1 .controls {
	animation: monaco-findInput-highlight-1 100ms linear 0s;
}

.hc-black .monaco-findInput.highlight-0 .controls,
.vs-dark  .monaco-findInput.highlight-0 .controls {
	animation: monaco-findInput-highlight-dark-0 100ms linear 0s;
}

.hc-black .monaco-findInput.highlight-1 .controls,
.vs-dark  .monaco-findInput.highlight-1 .controls {
	animation: monaco-findInput-highlight-dark-1 100ms linear 0s;
}

@keyframes monaco-findInput-highlight-0 {
	0% { background: rgba(253, 255, 0, 0.8); }
	100% { background: transparent; }
}
@keyframes monaco-findInput-highlight-1 {
	0% { background: rgba(253, 255, 0, 0.8); }
	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
	99% { background: transparent; }
}

@keyframes monaco-findInput-highlight-dark-0 {
	0% { background: rgba(255, 255, 255, 0.44); }
	100% { background: transparent; }
}
@keyframes monaco-findInput-highlight-dark-1 {
	0% { background: rgba(255, 255, 255, 0.44); }
	/* Made intentionally different such that the CSS minifier does not collapse the two animations into a single one*/
	99% { background: transparent; }
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-tl-row {
	display: flex;
	height: 100%;
	align-items: center;
	position: relative;
}

.monaco-tl-row.disabled {
	cursor: default;
}
.monaco-tl-indent {
	height: 100%;
	position: absolute;
	top: 0;
	left: 16px;
	pointer-events: none;
}

.hide-arrows .monaco-tl-indent {
	left: 12px;
}

.monaco-tl-indent > .indent-guide {
	display: inline-block;
	box-sizing: border-box;
	height: 100%;
	border-left: 1px solid transparent;
}

.monaco-workbench:not(.reduce-motion) .monaco-tl-indent > .indent-guide {
	transition: border-color 0.1s linear;
}

.monaco-tl-twistie,
.monaco-tl-contents {
	height: 100%;
}

.monaco-tl-twistie {
	font-size: 10px;
	text-align: right;
	padding-right: 6px;
	flex-shrink: 0;
	width: 16px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transform: translateX(3px);
}

.monaco-tl-contents {
	flex: 1;
	overflow: hidden;
}

.monaco-tl-twistie::before {
	border-radius: 20px;
}

.monaco-tl-twistie.collapsed::before {
	transform: rotate(-90deg);
}

.monaco-tl-twistie.codicon-tree-item-loading::before {
	/* Use steps to throttle FPS to reduce CPU usage */
	animation: codicon-spin 1.25s steps(30) infinite;
}

.monaco-tree-type-filter {
	position: absolute;
	top: 0;
	display: flex;
	padding: 3px;
	max-width: 200px;
	z-index: 100;
	margin: 0 6px;
	border: 1px solid var(--vscode-widget-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.monaco-workbench:not(.reduce-motion) .monaco-tree-type-filter {
	transition: top 0.3s;
}

.monaco-tree-type-filter.disabled {
	top: -40px !important;
}

.monaco-tree-type-filter-grab {
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: grab;
	margin-right: 2px;
}

.monaco-tree-type-filter-grab.grabbing {
	cursor: grabbing;
}

.monaco-tree-type-filter-input {
	flex: 1;
}

.monaco-tree-type-filter-input .monaco-inputbox {
	height: 23px;
}

.monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .input,
.monaco-tree-type-filter-input .monaco-inputbox > .ibwrapper > .mirror {
	padding: 2px 4px;
}

.monaco-tree-type-filter-input .monaco-findInput > .controls {
	top: 2px;
}

.monaco-tree-type-filter-actionbar {
	margin-left: 4px;
}

.monaco-tree-type-filter-actionbar .monaco-action-bar .action-label {
	padding: 2px;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 13; /* Settings editor uses z-index: 12 */

	/* TODO@benibenj temporary solution, all lists should provide their background */
	background-color: var(--vscode-sideBar-background);
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row.monaco-list-row{
	position: absolute;
	width: 100%;
	opacity: 1 !important; /* Settings editor uses opacity < 1 */
	overflow: hidden;

	/* TODO@benibenj temporary solution, all lists should provide their background */
	background-color: var(--vscode-sideBar-background);
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-row:hover{
	background-color: var(--vscode-list-hoverBackground) !important;
	cursor: pointer;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty,
.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container.empty .monaco-tree-sticky-container-shadow {
	display: none;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container .monaco-tree-sticky-container-shadow{
	position: absolute;
	bottom: -3px;
	left: 0px;
	height: 3px;
	width: 100%;
	box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
}

.monaco-list .monaco-scrollable-element .monaco-tree-sticky-container[tabindex="0"]:focus{
	outline: none;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* ---------- Icon label ---------- */

.monaco-icon-label {
	display: flex; /* required for icons support :before rule */
	overflow: hidden;
	text-overflow: ellipsis;
}

.monaco-icon-label::before {

	/* svg icons rendered as background image */
	background-size: 16px;
	background-position: left center;
	background-repeat: no-repeat;
	padding-right: 6px;
	width: 16px;
	height: 22px;
	line-height: inherit !important;
	display: inline-block;

	/* fonts icons */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: top;

	flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */
}

.monaco-icon-label-container.disabled {
	color: var(--vscode-disabledForeground);
}
.monaco-icon-label > .monaco-icon-label-container {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name {
	color: inherit;
	white-space: pre; /* enable to show labels that include multiple whitespaces */
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-name-container > .label-name > .label-separator {
	margin: 0 2px;
	opacity: 0.5;
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-suffix-container > .label-suffix {
	opacity: .7;
	white-space: pre;
}

.monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	opacity: .7;
	margin-left: 0.5em;
	font-size: 0.9em;
	white-space: pre; /* enable to show labels that include multiple whitespaces */
}

.monaco-icon-label.nowrap > .monaco-icon-label-container > .monaco-icon-description-container > .label-description{
	white-space: nowrap
}

.vs .monaco-icon-label > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	opacity: .95;
}

.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.monaco-icon-label.italic > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	font-style: italic;
}

.monaco-icon-label.deprecated {
	text-decoration: line-through;
	opacity: 0.66;
}

/* make sure apply italic font style to decorations as well */
.monaco-icon-label.italic::after {
	font-style: italic;
}

.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-name-container > .label-name,
.monaco-icon-label.strikethrough > .monaco-icon-label-container > .monaco-icon-description-container > .label-description {
	text-decoration: line-through;
}

.monaco-icon-label::after {
	opacity: 0.75;
	font-size: 90%;
	font-weight: 600;
	margin: auto 16px 0 5px; /* https://github.com/microsoft/vscode/issues/113223 */
	text-align: center;
}

/* make sure selection color wins when a label is being selected */
.monaco-list:focus .selected .monaco-icon-label, /* list */
.monaco-list:focus .selected .monaco-icon-label::after
{
	color: inherit !important;
}

.monaco-list-row.focused.selected .label-description,
.monaco-list-row.selected .label-description {
	opacity: .8;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-keybinding {
	display: flex;
	align-items: center;
	line-height: 10px;
}

.monaco-keybinding > .monaco-keybinding-key {
	display: inline-block;
	border-style: solid;
	border-width: 1px;
	border-radius: 3px;
	vertical-align: middle;
	font-size: 11px;
	padding: 3px 5px;
	margin: 0 2px;
}

.monaco-keybinding > .monaco-keybinding-key:first-child {
	margin-left: 0;
}

.monaco-keybinding > .monaco-keybinding-key:last-child {
	margin-right: 0;
}

.monaco-keybinding > .monaco-keybinding-key-separator {
	display: inline-block;
}

.monaco-keybinding > .monaco-keybinding-key-chord-separator {
	width: 6px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-text-button {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	padding: 4px;
	border-radius: 2px;
	text-align: center;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--vscode-button-border, transparent);
	line-height: 18px;
}

.monaco-text-button:focus {
	outline-offset: 2px !important;
}

.monaco-text-button:hover {
	text-decoration: none !important;
}

.monaco-button.disabled:focus,
.monaco-button.disabled {
	opacity: 0.4 !important;
	cursor: default;
}

.monaco-text-button .codicon {
	margin: 0 0.2em;
	color: inherit !important;
}

.monaco-text-button.monaco-text-button-with-short-label {
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0 4px;
	overflow: hidden;
	height: 28px;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label {
	flex-basis: 100%;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
	flex-grow: 1;
	width: 0;
	overflow: hidden;
}

.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label,
.monaco-text-button.monaco-text-button-with-short-label > .monaco-button-label-short {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: normal;
	font-style: inherit;
	padding: 4px 0;
}

.monaco-button-dropdown {
	display: flex;
	cursor: pointer;
}

.monaco-button-dropdown.disabled {
	cursor: default;
}

.monaco-button-dropdown > .monaco-button:focus {
	outline-offset: -1px !important;
}

.monaco-button-dropdown.disabled > .monaco-button.disabled,
.monaco-button-dropdown.disabled > .monaco-button.disabled:focus,
.monaco-button-dropdown.disabled > .monaco-button-dropdown-separator {
	opacity: 0.4 !important;
}

.monaco-button-dropdown > .monaco-button.monaco-text-button {
	border-right-width: 0 !important;
}

.monaco-button-dropdown .monaco-button-dropdown-separator {
	padding: 4px 0;
	cursor: default;
}

.monaco-button-dropdown .monaco-button-dropdown-separator > div {
	height: 100%;
	width: 1px;
}

.monaco-button-dropdown > .monaco-button.monaco-dropdown-button {
	border: 1px solid var(--vscode-button-border, transparent);
	border-left-width: 0 !important;
	border-radius: 0 2px 2px 0;
	display: flex;
	align-items: center;
}

.monaco-button-dropdown > .monaco-button.monaco-text-button {
	border-radius: 2px 0 0 2px;
}

.monaco-description-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 4px 5px; /* allows button focus outline to be visible */
}

.monaco-description-button .monaco-button-description {
	font-style: italic;
	font-size: 11px;
	padding: 4px 20px;
}

.monaco-description-button .monaco-button-label,
.monaco-description-button .monaco-button-description {
	display: flex;
	justify-content: center;
	align-items: center;
}

.monaco-description-button .monaco-button-label > .codicon,
.monaco-description-button .monaco-button-description > .codicon {
	margin: 0 0.2em;
	color: inherit !important;
}

/* default color styles - based on CSS variables */

.monaco-button.default-colors,
.monaco-button-dropdown.default-colors > .monaco-button{
	color: var(--vscode-button-foreground);
	background-color: var(--vscode-button-background);
}

.monaco-button.default-colors:hover,
.monaco-button-dropdown.default-colors > .monaco-button:hover {
	background-color: var(--vscode-button-hoverBackground);
}

.monaco-button.default-colors.secondary,
.monaco-button-dropdown.default-colors > .monaco-button.secondary {
	color: var(--vscode-button-secondaryForeground);
	background-color: var(--vscode-button-secondaryBackground);
}

.monaco-button.default-colors.secondary:hover,
.monaco-button-dropdown.default-colors > .monaco-button.secondary:hover {
	background-color: var(--vscode-button-secondaryHoverBackground);
}

.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator {
	background-color: var(--vscode-button-background);
	border-top: 1px solid var(--vscode-button-border);
	border-bottom: 1px solid var(--vscode-button-border);
}

.monaco-button-dropdown.default-colors .monaco-button.secondary + .monaco-button-dropdown-separator {
	background-color: var(--vscode-button-secondaryBackground);
}

.monaco-button-dropdown.default-colors .monaco-button-dropdown-separator > div {
	background-color: var(--vscode-button-separator);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-count-badge {
	padding: 3px 6px;
	border-radius: 11px;
	font-size: 11px;
	min-width: 18px;
	min-height: 18px;
	line-height: 11px;
	font-weight: normal;
	text-align: center;
	display: inline-block;
	box-sizing: border-box;
}

.monaco-count-badge.long {
	padding: 2px 3px;
	border-radius: 2px;
	min-height: auto;
	line-height: normal;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-progress-container {
	width: 100%;
	height: 2px;
	overflow: hidden; /* keep progress bit in bounds */
}

.monaco-progress-container .progress-bit {
	width: 2%;
	height: 2px;
	position: absolute;
	left: 0;
	display: none;
}

.monaco-progress-container.active .progress-bit {
	display: inherit;
}

.monaco-progress-container.discrete .progress-bit {
	left: 0;
	transition: width 100ms linear;
}

.monaco-progress-container.discrete.done .progress-bit {
	width: 100%;
}

.monaco-progress-container.infinite .progress-bit {
	animation-name: progress;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform: translate3d(0px, 0px, 0px);
	animation-timing-function: linear;
}

.monaco-progress-container.infinite.infinite-long-running .progress-bit {
	/*
		The more smooth `linear` timing function can cause
		higher GPU consumption as indicated in
		https://github.com/microsoft/vscode/issues/97900 &
		https://github.com/microsoft/vscode/issues/138396
	*/
	animation-timing-function: steps(100);
}

/**
 * The progress bit has a width: 2% (1/50) of the parent container. The animation moves it from 0% to 100% of
 * that container. Since translateX is relative to the progress bit size, we have to multiple it with
 * its relative size to the parent container:
 * parent width: 5000%
 *    bit width: 100%
 * translateX should be as follow:
 *  50%: 5000% * 50% - 50% (set to center) = 2450%
 * 100%: 5000% * 100% - 100% (do not overflow) = 4900%
 */
@keyframes progress { from { transform: translateX(0%) scaleX(1) } 50% { transform: translateX(2500%) scaleX(3) } to { transform: translateX(4900%) scaleX(1) } }

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .diff-hidden-lines-widget {
	width: 100%;
}

.monaco-editor .diff-hidden-lines {
	height: 0px; /* The children each have a fixed height, the transform confuses the browser */
	transform: translate(0px, -10px);
	font-size: 13px;
	line-height: 14px;
}

.monaco-editor .diff-hidden-lines:not(.dragging) .top:hover,
.monaco-editor .diff-hidden-lines:not(.dragging) .bottom:hover,
.monaco-editor .diff-hidden-lines .top.dragging,
.monaco-editor .diff-hidden-lines .bottom.dragging {
	background-color: var(--vscode-focusBorder);
}

.monaco-editor .diff-hidden-lines .top,
.monaco-editor .diff-hidden-lines .bottom {
	transition: background-color 0.1s ease-out;
	height: 4px;
	background-color: transparent;
	background-clip: padding-box;
	border-bottom: 2px solid transparent;
	border-top: 4px solid transparent;
	/*cursor: n-resize;*/
}

.monaco-editor.draggingUnchangedRegion.canMoveTop:not(.canMoveBottom) *,
.monaco-editor .diff-hidden-lines .top.canMoveTop:not(.canMoveBottom),
.monaco-editor .diff-hidden-lines .bottom.canMoveTop:not(.canMoveBottom) {
	cursor: n-resize !important;
}

.monaco-editor.draggingUnchangedRegion:not(.canMoveTop).canMoveBottom *,
.monaco-editor .diff-hidden-lines .top:not(.canMoveTop).canMoveBottom,
.monaco-editor .diff-hidden-lines .bottom:not(.canMoveTop).canMoveBottom {
	cursor: s-resize !important;
}

.monaco-editor.draggingUnchangedRegion.canMoveTop.canMoveBottom *,
.monaco-editor .diff-hidden-lines .top.canMoveTop.canMoveBottom,
.monaco-editor .diff-hidden-lines .bottom.canMoveTop.canMoveBottom {
	cursor: ns-resize !important;
}

.monaco-editor .diff-hidden-lines .top {
	transform: translate(0px, 4px);
}

.monaco-editor .diff-hidden-lines .bottom {
	transform: translate(0px, -6px);
}

.monaco-editor .diff-unchanged-lines {
	background: var(--vscode-diffEditor-unchangedCodeBackground);
}

.monaco-editor .noModificationsOverlay {
	z-index: 1;
	background: var(--vscode-editor-background);

	display: flex;
	justify-content: center;
	align-items: center;
}


.monaco-editor .diff-hidden-lines .center {
	background: var(--vscode-diffEditor-unchangedRegionBackground);
	color: var(--vscode-diffEditor-unchangedRegionForeground);
	overflow: hidden;
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;

	height: 24px;
	box-shadow: inset 0 -5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow), inset 0 5px 5px -7px var(--vscode-diffEditor-unchangedRegionShadow);
}

.monaco-editor .diff-hidden-lines .center span.codicon {
	vertical-align: middle;
}

.monaco-editor .diff-hidden-lines .center a:hover .codicon {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

.monaco-editor .diff-hidden-lines div.breadcrumb-item {
	cursor: pointer;
}

.monaco-editor .diff-hidden-lines div.breadcrumb-item:hover {
	color: var(--vscode-editorLink-activeForeground);
}

.monaco-editor .movedOriginal {
	border: 2px solid var(--vscode-diffEditor-move-border);
}

.monaco-editor .movedModified {
	border: 2px solid var(--vscode-diffEditor-move-border);
}

.monaco-editor .movedOriginal.currentMove, .monaco-editor .movedModified.currentMove {
	border: 2px solid var(--vscode-diffEditor-moveActive-border);
}

.monaco-diff-editor .moved-blocks-lines path.currentMove {
	stroke: var(--vscode-diffEditor-moveActive-border);
}

.monaco-diff-editor .moved-blocks-lines path {
	pointer-events: visiblestroke;
}

.monaco-diff-editor .moved-blocks-lines .arrow {
	fill: var(--vscode-diffEditor-move-border);
}

.monaco-diff-editor .moved-blocks-lines .arrow.currentMove {
	fill: var(--vscode-diffEditor-moveActive-border);
}

.monaco-diff-editor .moved-blocks-lines .arrow-rectangle {
	fill: var(--vscode-editor-background);
}

.monaco-diff-editor .moved-blocks-lines {
	position: absolute;
	pointer-events: none;
}

.monaco-diff-editor .moved-blocks-lines path {
	fill: none;
	stroke: var(--vscode-diffEditor-move-border);
	stroke-width: 2;
}

.monaco-editor .char-delete.diff-range-empty {
	margin-left: -1px;
	border-left: solid var(--vscode-diffEditor-removedTextBackground) 3px;
}

.monaco-editor .char-insert.diff-range-empty {
	border-left: solid var(--vscode-diffEditor-insertedTextBackground) 3px;
}

.monaco-editor .fold-unchanged {
	cursor: pointer;
}

.monaco-diff-editor .diff-moved-code-block {
	display: flex;
	justify-content: flex-end;
	margin-top: -4px;
}

.monaco-diff-editor .diff-moved-code-block .action-bar .action-label.codicon {
	width: 12px;
	height: 12px;
	font-size: 12px;
}

/* ---------- DiffEditor ---------- */

.monaco-diff-editor .diffOverview {
	z-index: 9;
}

.monaco-diff-editor .diffOverview .diffViewport {
	z-index: 10;
}

/* colors not externalized: using transparancy on background */
.monaco-diff-editor.vs			.diffOverview { background: rgba(0, 0, 0, 0.03); }
.monaco-diff-editor.vs-dark		.diffOverview { background: rgba(255, 255, 255, 0.01); }

.monaco-scrollable-element.modified-in-monaco-diff-editor.vs		.scrollbar { background: rgba(0,0,0,0); }
.monaco-scrollable-element.modified-in-monaco-diff-editor.vs-dark	.scrollbar { background: rgba(0,0,0,0); }
.monaco-scrollable-element.modified-in-monaco-diff-editor.hc-black	.scrollbar { background: none; }
.monaco-scrollable-element.modified-in-monaco-diff-editor.hc-light	.scrollbar { background: none; }

.monaco-scrollable-element.modified-in-monaco-diff-editor .slider {
	z-index: 10;
}
.modified-in-monaco-diff-editor				.slider.active { background: rgba(171, 171, 171, .4); }
.modified-in-monaco-diff-editor.hc-black	.slider.active { background: none; }
.modified-in-monaco-diff-editor.hc-light	.slider.active { background: none; }

/* ---------- Diff ---------- */

.monaco-editor .insert-sign,
.monaco-diff-editor .insert-sign,
.monaco-editor .delete-sign,
.monaco-diff-editor .delete-sign {
	font-size: 11px !important;
	opacity: 0.7 !important;
	display: flex !important;
	align-items: center;
}
.monaco-editor.hc-black .insert-sign,
.monaco-diff-editor.hc-black .insert-sign,
.monaco-editor.hc-black .delete-sign,
.monaco-diff-editor.hc-black .delete-sign,
.monaco-editor.hc-light .insert-sign,
.monaco-diff-editor.hc-light .insert-sign,
.monaco-editor.hc-light .delete-sign,
.monaco-diff-editor.hc-light .delete-sign {
	opacity: 1;
}

.monaco-editor .inline-deleted-margin-view-zone {
	text-align: right;
}
.monaco-editor .inline-added-margin-view-zone {
	text-align: right;
}

.monaco-editor .arrow-revert-change {
	z-index: 10;
	position: absolute;
}

.monaco-editor .arrow-revert-change:hover {
	cursor: pointer;
}

/* ---------- Inline Diff ---------- */

.monaco-editor .view-zones .view-lines .view-line span {
	display: inline-block;
}

.monaco-editor .margin-view-zones .lightbulb-glyph:hover {
	cursor: pointer;
}

.monaco-editor .char-insert, .monaco-diff-editor .char-insert {
	background-color: var(--vscode-diffEditor-insertedTextBackground);
}

.monaco-editor .line-insert, .monaco-diff-editor .line-insert {
	background-color: var(--vscode-diffEditor-insertedLineBackground, var(--vscode-diffEditor-insertedTextBackground));
}

.monaco-editor .line-insert,
.monaco-editor .char-insert {
	box-sizing: border-box;
	border: 1px solid var(--vscode-diffEditor-insertedTextBorder);
}
.monaco-editor.hc-black .line-insert, .monaco-editor.hc-light .line-insert,
.monaco-editor.hc-black .char-insert, .monaco-editor.hc-light .char-insert {
	border-style: dashed;
}

.monaco-editor .line-delete,
.monaco-editor .char-delete {
	box-sizing: border-box;
	border: 1px solid var(--vscode-diffEditor-removedTextBorder);
}
.monaco-editor.hc-black .line-delete, .monaco-editor.hc-light .line-delete,
.monaco-editor.hc-black .char-delete, .monaco-editor.hc-light .char-delete {
	border-style: dashed;
}

.monaco-editor .inline-added-margin-view-zone,
.monaco-editor .gutter-insert, .monaco-diff-editor .gutter-insert {
	background-color: var(--vscode-diffEditorGutter-insertedLineBackground, var(--vscode-diffEditor-insertedLineBackground), var(--vscode-diffEditor-insertedTextBackground));
}

.monaco-editor .char-delete, .monaco-diff-editor .char-delete {
	background-color: var(--vscode-diffEditor-removedTextBackground);
}

.monaco-editor .line-delete, .monaco-diff-editor .line-delete {
	background-color: var(--vscode-diffEditor-removedLineBackground, var(--vscode-diffEditor-removedTextBackground));
}

.monaco-editor .inline-deleted-margin-view-zone,
.monaco-editor .gutter-delete, .monaco-diff-editor .gutter-delete {
	background-color: var(--vscode-diffEditorGutter-removedLineBackground, var(--vscode-diffEditor-removedLineBackground), var(--vscode-diffEditor-removedTextBackground));
}

.monaco-diff-editor.side-by-side .editor.modified {
	box-shadow: -6px 0 5px -5px var(--vscode-scrollbar-shadow);
	border-left: 1px solid var(--vscode-diffEditor-border);
}

.monaco-diff-editor.side-by-side .editor.original {
	box-shadow: 6px 0 5px -5px var(--vscode-scrollbar-shadow);
	border-right: 1px solid var(--vscode-diffEditor-border);
}

.monaco-diff-editor .diffViewport {
	background: var(--vscode-scrollbarSlider-background);
}

.monaco-diff-editor .diffViewport:hover {
	background: var(--vscode-scrollbarSlider-hoverBackground);
}

.monaco-diff-editor .diffViewport:active {
	background: var(--vscode-scrollbarSlider-activeBackground);
}

.monaco-editor .diagonal-fill {
	background-image: linear-gradient(
		-45deg,
		var(--vscode-diffEditor-diagonalFill) 12.5%,
		#0000 12.5%, #0000 50%,
		var(--vscode-diffEditor-diagonalFill) 50%, var(--vscode-diffEditor-diagonalFill) 62.5%,
		#0000 62.5%, #0000 100%
	);
	background-size: 8px 8px;
}

.monaco-diff-editor .gutter {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	flex-grow: 0;

	.gutterItem {
		opacity: 0;
		transition: opacity 0.7s;

		&.showAlways {
			opacity: 1;
			transition: none;
		}

		&.noTransition {
			transition: none;
		}
	}

	&:hover .gutterItem {
		opacity: 1;
		transition: opacity 0.1s ease-in-out;
	}

	.gutterItem {
		.background {
			position: absolute;
			height: 100%;
			left: 50%;
			width: 1px;

			border-left: 2px var(--vscode-menu-border) solid;
		}

		.buttons {
			position: absolute;
			/*height: 100%;*/
			width: 100%;

			display: flex;
			justify-content: center;
			align-items: center;

			.monaco-toolbar {
				height: fit-content;
				.monaco-action-bar  {
					line-height: 1;

					.actions-container {
						width: fit-content;
						border-radius: 4px;
						border: 1px var(--vscode-menu-border) solid;
						background: var(--vscode-editor-background);

						.action-item {
							&:hover {
								background: var(--vscode-toolbar-hoverBackground);
							}

							.action-label {
								padding: 0.5px 1px;
							}
						}
					}
				}
			}
		}
	}
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-component.diff-review {
	user-select: none;
	-webkit-user-select: none;
	z-index: 99;
}

.monaco-diff-editor .diff-review {
	position: absolute;

}

.monaco-component.diff-review .diff-review-line-number {
	text-align: right;
	display: inline-block;
	color: var(--vscode-editorLineNumber-foreground);
}

.monaco-component.diff-review .diff-review-summary {
	padding-left: 10px;
}

.monaco-component.diff-review .diff-review-shadow {
	position: absolute;
	box-shadow: var(--vscode-scrollbar-shadow) 0 -6px 6px -6px inset;
}

.monaco-component.diff-review .diff-review-row {
	white-space: pre;
}

.monaco-component.diff-review .diff-review-table {
	display: table;
	min-width: 100%;
}

.monaco-component.diff-review .diff-review-row {
	display: table-row;
	width: 100%;
}

.monaco-component.diff-review .diff-review-spacer {
	display: inline-block;
	width: 10px;
	vertical-align: middle;
}

.monaco-component.diff-review .diff-review-spacer > .codicon {
	font-size: 9px !important;
}

.monaco-component.diff-review .diff-review-actions {
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 2px;
	z-index: 100;
}

.monaco-component.diff-review .diff-review-actions .action-label {
	width: 16px;
	height: 16px;
	margin: 2px 0;
}

.monaco-component.diff-review .revertButton {
	cursor: pointer;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-toolbar {
	height: 100%;
}

.monaco-toolbar .toolbar-toggle-more {
	display: inline-block;
	padding: 0;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-component.multiDiffEditor {
	background: var(--vscode-multiDiffEditor-background);
	overflow-y: hidden;

	.focused {
		--vscode-multiDiffEditor-border: var(--vscode-focusBorder);
	}

	.multiDiffEntry {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;


		.collapse-button {
			margin: 0 5px;
			cursor: pointer;

			a {
				display: block;
			}
		}

		.header {
			z-index: 1000;
			background: var(--vscode-editor-background);

			&:not(.collapsed) .header-content {
				border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
			}

			.header-content {
				margin: 8px 8px 0px 8px;
				padding: 4px 5px;

				border-top: 1px solid var(--vscode-multiDiffEditor-border);
				border-right: 1px solid var(--vscode-multiDiffEditor-border);
				border-left: 1px solid var(--vscode-multiDiffEditor-border);
				border-top-left-radius: 2px;
				border-top-right-radius: 2px;

				display: flex;
				align-items: center;

				color: var(--vscode-foreground);
				background: var(--vscode-multiDiffEditor-headerBackground);

				&.shadow {
					box-shadow: var(--vscode-scrollbar-shadow) 0px 6px 6px -6px;
				}

				.file-path {
					display: flex;
					flex: 1;
					min-width: 0;

					.title {
						font-size: 14px;
						line-height: 22px;

						&.original {
							flex: 1;
							min-width: 0;
							text-overflow: ellipsis;
						}
					}

					.status {
						font-weight: 600;
						opacity: 0.75;
						margin: 0px 10px;
						line-height: 22px;

						/*
							TODO@hediet: move colors from git extension to core!
						&.renamed {
							color: v ar(--vscode-gitDecoration-renamedResourceForeground);
						}

						&.deleted {
							color: v ar(--vscode-gitDecoration-deletedResourceForeground);
						}

						&.added {
							color: v ar(--vscode-gitDecoration-addedResourceForeground);
						}
						*/
					}
				}

				.actions {
					padding: 0 8px;
				}
			}


		}

		.editorParent {
			flex: 1;
			display: flex;
			flex-direction: column;

			margin-right: 8px;
			margin-left: 8px;

			border-right: 1px solid var(--vscode-multiDiffEditor-border);
			border-left: 1px solid var(--vscode-multiDiffEditor-border);
			border-bottom: 1px solid var(--vscode-multiDiffEditor-border);
			border-radius: 2px;
			overflow: hidden;
		}

		.editorContainer {
			flex: 1;
		}
	}
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .selection-anchor {
	background-color: #007ACC;
	width: 2px !important;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .bracket-match {
	box-sizing: border-box;
	background-color: var(--vscode-editorBracketMatch-background);
	border: 1px solid var(--vscode-editorBracketMatch-border);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.inline-editor-progress-decoration {
	display: inline-block;
	width: 1em;
	height: 1em;
}

.inline-progress-widget  {
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.inline-progress-widget .icon {
	font-size: 80% !important;
}

.inline-progress-widget:hover .icon {
	font-size: 90% !important;
	animation: none;
}

.inline-progress-widget:hover .icon::before {
	content: "\ea76"; /* codicon-x */
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .monaco-editor-overlaymessage {
	padding-bottom: 8px;
	z-index: 10000;
}

.monaco-editor .monaco-editor-overlaymessage.below {
	padding-bottom: 0;
	padding-top: 8px;
	z-index: 10000;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.monaco-editor .monaco-editor-overlaymessage.fadeIn {
	animation: fadeIn 150ms ease-out;
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}
.monaco-editor .monaco-editor-overlaymessage.fadeOut {
	animation: fadeOut 100ms ease-out;
}

.monaco-editor .monaco-editor-overlaymessage .message {
	padding: 2px 4px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-inputValidation-infoBorder);
	border-radius: 3px;
}

.monaco-editor .monaco-editor-overlaymessage .message p {
	margin-block: 0px;
}

.monaco-editor .monaco-editor-overlaymessage .message a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .monaco-editor-overlaymessage .message a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor.hc-black .monaco-editor-overlaymessage .message,
.monaco-editor.hc-light .monaco-editor-overlaymessage .message {
	border-width: 2px;
}

.monaco-editor .monaco-editor-overlaymessage .anchor {
	width: 0 !important;
	height: 0 !important;
	border-color: transparent;
	border-style: solid;
	z-index: 1000;
	border-width: 8px;
	position: absolute;
	left: 2px;
}

.monaco-editor .monaco-editor-overlaymessage .anchor.top {
	border-bottom-color: var(--vscode-inputValidation-infoBorder);
}

.monaco-editor .monaco-editor-overlaymessage .anchor.below {
	border-top-color: var(--vscode-inputValidation-infoBorder);
}

.monaco-editor .monaco-editor-overlaymessage:not(.below) .anchor.top,
.monaco-editor .monaco-editor-overlaymessage.below .anchor.below {
	display: none;
}

.monaco-editor .monaco-editor-overlaymessage.below .anchor.top {
	display: inherit;
	top: -8px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.post-edit-widget {
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	border: 1px solid var(--vscode-widget-border, transparent);
	border-radius: 4px;
	background-color: var(--vscode-editorWidget-background);
	overflow: hidden;
}

.post-edit-widget .monaco-button {
	padding: 2px;
	border: none;
	border-radius: 0;
}

.post-edit-widget .monaco-button:hover {
	background-color: var(--vscode-button-secondaryHoverBackground) !important;
}

.post-edit-widget .monaco-button .codicon {
	margin: 0;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

@font-face {
	font-family: "codicon";
	font-display: block;
	src: url(762fced46d6cddbda272.ttf) format("truetype");
}

.codicon[class*='codicon-'] {
	font: normal normal normal 16px/1 codicon;
	display: inline-block;
	text-decoration: none;
	text-rendering: auto;
	text-align: center;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	user-select: none;
	-webkit-user-select: none;
}

/* icon rules are dynamically created by the platform theme service (see iconsStyleSheet.ts) */

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.codicon-wrench-subaction {
	opacity: 0.5;
}

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

.codicon-sync.codicon-modifier-spin,
.codicon-loading.codicon-modifier-spin,
.codicon-gear.codicon-modifier-spin,
.codicon-notebook-state-executing.codicon-modifier-spin {
	/* Use steps to throttle FPS to reduce CPU usage */
	animation: codicon-spin 1.5s steps(30) infinite;
}

.codicon-modifier-disabled {
	opacity: 0.4;
}

/* custom speed & easing for loading icon */
.codicon-loading,
.codicon-tree-item-loading::before {
	animation-duration: 1s !important;
	animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67) !important;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .codicon.codicon-symbol-array,
.monaco-workbench .codicon.codicon-symbol-array { color: var(--vscode-symbolIcon-arrayForeground); }
.monaco-editor .codicon.codicon-symbol-boolean,
.monaco-workbench .codicon.codicon-symbol-boolean { color: var(--vscode-symbolIcon-booleanForeground); }
.monaco-editor .codicon.codicon-symbol-class,
.monaco-workbench .codicon.codicon-symbol-class { color: var(--vscode-symbolIcon-classForeground); }
.monaco-editor .codicon.codicon-symbol-method,
.monaco-workbench .codicon.codicon-symbol-method { color: var(--vscode-symbolIcon-methodForeground); }
.monaco-editor .codicon.codicon-symbol-color,
.monaco-workbench .codicon.codicon-symbol-color { color: var(--vscode-symbolIcon-colorForeground); }
.monaco-editor .codicon.codicon-symbol-constant,
.monaco-workbench .codicon.codicon-symbol-constant { color: var(--vscode-symbolIcon-constantForeground); }
.monaco-editor .codicon.codicon-symbol-constructor,
.monaco-workbench .codicon.codicon-symbol-constructor { color: var(--vscode-symbolIcon-constructorForeground); }
.monaco-editor .codicon.codicon-symbol-value,
.monaco-workbench .codicon.codicon-symbol-value,
.monaco-editor .codicon.codicon-symbol-enum,
.monaco-workbench .codicon.codicon-symbol-enum { color: var(--vscode-symbolIcon-enumeratorForeground); }
.monaco-editor .codicon.codicon-symbol-enum-member,
.monaco-workbench .codicon.codicon-symbol-enum-member { color: var(--vscode-symbolIcon-enumeratorMemberForeground); }
.monaco-editor .codicon.codicon-symbol-event,
.monaco-workbench .codicon.codicon-symbol-event { color: var(--vscode-symbolIcon-eventForeground); }
.monaco-editor .codicon.codicon-symbol-field,
.monaco-workbench .codicon.codicon-symbol-field { color: var(--vscode-symbolIcon-fieldForeground); }
.monaco-editor .codicon.codicon-symbol-file,
.monaco-workbench .codicon.codicon-symbol-file { color: var(--vscode-symbolIcon-fileForeground); }
.monaco-editor .codicon.codicon-symbol-folder,
.monaco-workbench .codicon.codicon-symbol-folder { color: var(--vscode-symbolIcon-folderForeground); }
.monaco-editor .codicon.codicon-symbol-function,
.monaco-workbench .codicon.codicon-symbol-function { color: var(--vscode-symbolIcon-functionForeground); }
.monaco-editor .codicon.codicon-symbol-interface,
.monaco-workbench .codicon.codicon-symbol-interface { color: var(--vscode-symbolIcon-interfaceForeground); }
.monaco-editor .codicon.codicon-symbol-key,
.monaco-workbench .codicon.codicon-symbol-key { color: var(--vscode-symbolIcon-keyForeground); }
.monaco-editor .codicon.codicon-symbol-keyword,
.monaco-workbench .codicon.codicon-symbol-keyword { color: var(--vscode-symbolIcon-keywordForeground); }
.monaco-editor .codicon.codicon-symbol-module,
.monaco-workbench .codicon.codicon-symbol-module { color: var(--vscode-symbolIcon-moduleForeground); }
.monaco-editor .codicon.codicon-symbol-namespace,
.monaco-workbench .codicon.codicon-symbol-namespace { color: var(--vscode-symbolIcon-namespaceForeground); }
.monaco-editor .codicon.codicon-symbol-null,
.monaco-workbench .codicon.codicon-symbol-null { color: var(--vscode-symbolIcon-nullForeground); }
.monaco-editor .codicon.codicon-symbol-number,
.monaco-workbench .codicon.codicon-symbol-number { color: var(--vscode-symbolIcon-numberForeground); }
.monaco-editor .codicon.codicon-symbol-object,
.monaco-workbench .codicon.codicon-symbol-object { color: var(--vscode-symbolIcon-objectForeground); }
.monaco-editor .codicon.codicon-symbol-operator,
.monaco-workbench .codicon.codicon-symbol-operator { color: var(--vscode-symbolIcon-operatorForeground); }
.monaco-editor .codicon.codicon-symbol-package,
.monaco-workbench .codicon.codicon-symbol-package { color: var(--vscode-symbolIcon-packageForeground); }
.monaco-editor .codicon.codicon-symbol-property,
.monaco-workbench .codicon.codicon-symbol-property { color: var(--vscode-symbolIcon-propertyForeground); }
.monaco-editor .codicon.codicon-symbol-reference,
.monaco-workbench .codicon.codicon-symbol-reference { color: var(--vscode-symbolIcon-referenceForeground); }
.monaco-editor .codicon.codicon-symbol-snippet,
.monaco-workbench .codicon.codicon-symbol-snippet { color: var(--vscode-symbolIcon-snippetForeground); }
.monaco-editor .codicon.codicon-symbol-string,
.monaco-workbench .codicon.codicon-symbol-string { color: var(--vscode-symbolIcon-stringForeground); }
.monaco-editor .codicon.codicon-symbol-struct,
.monaco-workbench .codicon.codicon-symbol-struct { color: var(--vscode-symbolIcon-structForeground); }
.monaco-editor .codicon.codicon-symbol-text,
.monaco-workbench .codicon.codicon-symbol-text { color: var(--vscode-symbolIcon-textForeground); }
.monaco-editor .codicon.codicon-symbol-type-parameter,
.monaco-workbench .codicon.codicon-symbol-type-parameter { color: var(--vscode-symbolIcon-typeParameterForeground); }
.monaco-editor .codicon.codicon-symbol-unit,
.monaco-workbench .codicon.codicon-symbol-unit { color: var(--vscode-symbolIcon-unitForeground); }
.monaco-editor .codicon.codicon-symbol-variable,
.monaco-workbench .codicon.codicon-symbol-variable { color: var(--vscode-symbolIcon-variableForeground); }

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .lightBulbWidget {
	display: flex;
	align-items: center;
	justify-content: center;
}

.monaco-editor .lightBulbWidget:hover{
	cursor: pointer;
}

.monaco-editor .lightBulbWidget.codicon-light-bulb,
.monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle {
	color: var(--vscode-editorLightBulb-foreground);
}

.monaco-editor .lightBulbWidget.codicon-lightbulb-autofix,
.monaco-editor .lightBulbWidget.codicon-lightbulb-sparkle-autofix {
	color: var(--vscode-editorLightBulbAutoFix-foreground, var(--vscode-editorLightBulb-foreground));
}

.monaco-editor .lightBulbWidget.codicon-sparkle-filled {
	color: var(--vscode-editorLightBulbAi-foreground, var(--vscode-icon-foreground));
}

.monaco-editor .lightBulbWidget:before {
	position: relative;
	z-index: 2;
}

.monaco-editor .lightBulbWidget:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	background-color: var(--vscode-editor-background);
	z-index: 1;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.action-widget {
	font-size: 13px;
	border-radius: 0;
	min-width: 160px;
	max-width: 80vw;
	z-index: 40;
	display: block;
	width: 100%;
	border: 1px solid var(--vscode-editorWidget-border) !important;
	border-radius: 2px;
	background-color: var(--vscode-editorWidget-background);
	color: var(--vscode-editorWidget-foreground);
}

.context-view-block {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.context-view-pointerBlock {
	position: fixed;
	cursor: initial;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.action-widget .monaco-list {
	user-select: none;
	-webkit-user-select: none;
	border: none !important;
	border-width: 0 !important;
}

.action-widget .monaco-list:focus:before {
	outline: 0 !important;
}

.action-widget .monaco-list .monaco-scrollable-element {
	overflow: visible;
}

/** Styles for each row in the list element **/
.action-widget .monaco-list .monaco-list-row {
	padding: 0 10px;
	white-space: nowrap;
	cursor: pointer;
	touch-action: none;
	width: 100%;
}

.action-widget .monaco-list .monaco-list-row.action.focused:not(.option-disabled) {
	background-color: var(--vscode-quickInputList-focusBackground) !important;
	color: var(--vscode-quickInputList-focusForeground);
	outline: 1px solid var(--vscode-menu-selectionBorder, transparent);
	outline-offset: -1px;
}

.action-widget .monaco-list-row.group-header {
	color: var(--vscode-descriptionForeground) !important;
	font-weight: 600;
}

.action-widget .monaco-list .group-header,
.action-widget .monaco-list .option-disabled,
.action-widget .monaco-list .option-disabled:before,
.action-widget .monaco-list .option-disabled .focused,
.action-widget .monaco-list .option-disabled .focused:before {
	cursor: default !important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	background-color: transparent !important;
	outline: 0 solid !important;
}

.action-widget .monaco-list-row.action {
	display: flex;
	gap: 6px;
	align-items: center;
}

.action-widget .monaco-list-row.action.option-disabled,
.action-widget .monaco-list:focus .monaco-list-row.focused.action.option-disabled,
.action-widget .monaco-list-row.action.option-disabled .codicon,
.action-widget .monaco-list:not(.drop-target):not(.dragging) .monaco-list-row:hover:not(.selected):not(.focused).option-disabled {
	color: var(--vscode-disabledForeground);
}


.action-widget .monaco-list-row.action:not(.option-disabled) .codicon {
	color: inherit;
}

.action-widget .monaco-list-row.action .title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.action-widget .monaco-list-row.action .monaco-keybinding > .monaco-keybinding-key {
		background-color: var(--vscode-keybindingLabel-background);
		color: var(--vscode-keybindingLabel-foreground);
		border-style: solid;
		border-width: 1px;
		border-radius: 3px;
		border-color: var(--vscode-keybindingLabel-border);
		border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
		box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
}

/* Action bar */

.action-widget .action-widget-action-bar {
	background-color: var(--vscode-editorHoverWidget-statusBarBackground);
	border-top: 1px solid var(--vscode-editorHoverWidget-border);
}

.action-widget .action-widget-action-bar::before {
	display: block;
	content: "";
	width: 100%;
}

.action-widget .action-widget-action-bar .actions-container {
	padding: 0 8px;
}

.action-widget-action-bar .action-label {
	color: var(--vscode-textLink-activeForeground);
	font-size: 12px;
	line-height: 22px;
	padding: 0;
	pointer-events: all;
}

.action-widget-action-bar .action-item {
	margin-right: 16px;
	pointer-events: none;
}

.action-widget-action-bar .action-label:hover {
	background-color: transparent !important;
}

.monaco-action-bar .actions-container.highlight-toggled .action-label.checked {
	/* The important gives this rule precedence over the hover rule. */
	background: var(--vscode-actionBar-toggledBackground) !important;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .codelens-decoration {
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--vscode-editorCodeLens-foreground);
	line-height: var(--vscode-editorCodeLens-lineHeight);
	font-size: var(--vscode-editorCodeLens-fontSize);
	padding-right: calc(var(--vscode-editorCodeLens-fontSize)*0.5);
	font-feature-settings: var(--vscode-editorCodeLens-fontFeatureSettings);
	font-family: var(--vscode-editorCodeLens-fontFamily), var(--vscode-editorCodeLens-fontFamilyDefault);
}

.monaco-editor .codelens-decoration > span,
.monaco-editor .codelens-decoration > a {
	user-select: none;
	-webkit-user-select: none;
	white-space: nowrap;
	vertical-align: sub;
}

.monaco-editor .codelens-decoration > a {
	text-decoration: none;
}

.monaco-editor .codelens-decoration > a:hover {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

.monaco-editor .codelens-decoration > a:hover .codicon {
	color: var(--vscode-editorLink-activeForeground) !important;
}

.monaco-editor .codelens-decoration .codicon {
	vertical-align: middle;
	color: currentColor !important;
	color: var(--vscode-editorCodeLens-foreground);
	line-height: var(--vscode-editorCodeLens-lineHeight);
	font-size: var(--vscode-editorCodeLens-fontSize);
}

.monaco-editor .codelens-decoration > a:hover .codicon::before {
	cursor: pointer;
}

@keyframes fadein {
	0% {
		opacity: 0;
		visibility: visible;
	}

	100% {
		opacity: 1;
	}
}

.monaco-editor .codelens-decoration.fadein {
	animation: fadein 0.1s linear;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.colorpicker-widget {
	height: 190px;
	user-select: none;
	-webkit-user-select: none;
}

/* Decoration */

.colorpicker-color-decoration,
.hc-light .colorpicker-color-decoration {
	border: solid 0.1em #000;
	box-sizing: border-box;
	margin: 0.1em 0.2em 0 0.2em;
	width: 0.8em;
	height: 0.8em;
	line-height: 0.8em;
	display: inline-block;
	cursor: pointer;
}

.hc-black .colorpicker-color-decoration,
.vs-dark .colorpicker-color-decoration {
	border: solid 0.1em #eee;
}

/* Header */

.colorpicker-header {
	display: flex;
	height: 24px;
	position: relative;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=);
	background-size: 9px 9px;
	image-rendering: pixelated;
}

.colorpicker-header .picked-color {
	width: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 24px;
	cursor: pointer;
	color: white;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
}

.colorpicker-header .picked-color .picked-color-presentation {
	white-space: nowrap;
	margin-left: 5px;
	margin-right: 5px;
}

.colorpicker-header .picked-color .codicon {
	color: inherit;
	font-size: 14px;
}

.colorpicker-header .picked-color.light {
	color: black;
}

.colorpicker-header .original-color {
	width: 74px;
	z-index: inherit;
	cursor: pointer;
}

.standalone-colorpicker {
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.colorpicker-header.standalone-colorpicker {
	border-bottom: none;
}

.colorpicker-header .close-button {
	cursor: pointer;
	background-color: var(--vscode-editorHoverWidget-background);
	border-left: 1px solid var(--vscode-editorHoverWidget-border);
}

.colorpicker-header .close-button-inner-div {
	width: 100%;
	height: 100%;
	text-align: center;
}

.colorpicker-header .close-button-inner-div:hover {
	background-color: var(--vscode-toolbar-hoverBackground);
}

.colorpicker-header .close-icon {
	padding: 3px;
}

/* Body */

.colorpicker-body {
	display: flex;
	padding: 8px;
	position: relative;
}

.colorpicker-body .saturation-wrap {
	overflow: hidden;
	height: 150px;
	position: relative;
	min-width: 220px;
	flex: 1;
}

.colorpicker-body .saturation-box {
	height: 150px;
	position: absolute;
}

.colorpicker-body .saturation-selection {
	width: 9px;
	height: 9px;
	margin: -5px 0 0 -5px;
	border: 1px solid rgb(255, 255, 255);
	border-radius: 100%;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
	position: absolute;
}

.colorpicker-body .strip {
	width: 25px;
	height: 150px;
}

.colorpicker-body .standalone-strip {
	width: 25px;
	height: 122px;
}

.colorpicker-body .hue-strip {
	position: relative;
	margin-left: 8px;
	cursor: grab;
	background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.colorpicker-body .opacity-strip {
	position: relative;
	margin-left: 8px;
	cursor: grab;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAHUlEQVQYV2PYvXu3JAi7uLiAMaYAjAGTQBPYLQkAa/0Zef3qRswAAAAASUVORK5CYII=);
	background-size: 9px 9px;
	image-rendering: pixelated;
}

.colorpicker-body .strip.grabbing {
	cursor: grabbing;
}

.colorpicker-body .slider {
	position: absolute;
	top: 0;
	left: -2px;
	width: calc(100% + 4px);
	height: 4px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.71);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
}

.colorpicker-body .strip .overlay {
	height: 150px;
	pointer-events: none;
}

.colorpicker-body .standalone-strip .standalone-overlay {
	height: 122px;
	pointer-events: none;
}

.standalone-colorpicker-body {
	display: block;
	border: 1px solid transparent;
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
	overflow: hidden;
}

.colorpicker-body .insert-button {
	position: absolute;
	height: 20px;
	width: 58px;
	padding: 0px;
	right: 8px;
	bottom: 8px;
	background: var(--vscode-button-background);
	color: var(--vscode-button-foreground);
	border-radius: 2px;
	border: none;
	cursor: pointer;
}

.colorpicker-body .insert-button:hover{
	background: var(--vscode-button-hoverBackground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .goto-definition-link {
	text-decoration: underline;
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .peekview-widget .head {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.monaco-editor .peekview-widget .head .peekview-title {
	display: flex;
	align-items: baseline;
	font-size: 13px;
	margin-left: 20px;
	min-width: 0;
	text-overflow: ellipsis;
	overflow: hidden;
}

.monaco-editor .peekview-widget .head .peekview-title.clickable {
	cursor: pointer;
}

.monaco-editor .peekview-widget .head .peekview-title .dirname:not(:empty) {
	font-size: 0.9em;
	margin-left: 0.5em;
}

.monaco-editor .peekview-widget .head .peekview-title .meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.monaco-editor .peekview-widget .head .peekview-title .dirname {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .peekview-widget .head .peekview-title .filename {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .peekview-widget .head .peekview-title .meta:not(:empty)::before {
	content: '-';
	padding: 0 0.3em;
}

.monaco-editor .peekview-widget .head .peekview-actions {
	flex: 1;
	text-align: right;
	padding-right: 2px;
}

.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar {
	display: inline-block;
}

.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar,
.monaco-editor .peekview-widget .head .peekview-actions > .monaco-action-bar > .actions-container {
	height: 100%;
}

.monaco-editor .peekview-widget > .body {
	border-top: 1px solid;
	position: relative;
}

.monaco-editor .peekview-widget .head .peekview-title .codicon {
	margin-right: 4px;
	align-self: center;
}

.monaco-editor .peekview-widget .monaco-list .monaco-list-row.focused .codicon {
	color: inherit !important;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .zone-widget {
	position: absolute;
	z-index: 10;
}


.monaco-editor .zone-widget .zone-widget-container {
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-width: 0;
	border-bottom-width: 0;
	position: relative;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* -- zone widget */
.monaco-editor .zone-widget .zone-widget-container.reference-zone-widget {
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.monaco-editor .reference-zone-widget .inline {
	display: inline-block;
	vertical-align: top;
}

.monaco-editor .reference-zone-widget .messages {
	height: 100%;
	width: 100%;
	text-align: center;
	padding: 3em 0;
}

.monaco-editor .reference-zone-widget .ref-tree {
	line-height: 23px;
	background-color: var(--vscode-peekViewResult-background);
	color: var(--vscode-peekViewResult-lineForeground);
}

.monaco-editor .reference-zone-widget .ref-tree .reference {
	text-overflow: ellipsis;
	overflow: hidden;
}

.monaco-editor .reference-zone-widget .ref-tree .reference-file {
	display: inline-flex;
	width: 100%;
	height: 100%;
	color: var(--vscode-peekViewResult-fileForeground);
}

.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .selected .reference-file {
	color: inherit !important;
}

.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected:not(.highlighted) {
	background-color: var(--vscode-peekViewResult-selectionBackground);
	color: var(--vscode-peekViewResult-selectionForeground) !important;
}

.monaco-editor .reference-zone-widget .ref-tree .reference-file .count {
	margin-right: 12px;
	margin-left: auto;
}

.monaco-editor .reference-zone-widget .ref-tree .referenceMatch .highlight {
	background-color: var(--vscode-peekViewResult-matchHighlightBackground);
}

.monaco-editor .reference-zone-widget .preview .reference-decoration {
	background-color: var(--vscode-peekViewEditor-matchHighlightBackground);
	border: 2px solid var(--vscode-peekViewEditor-matchHighlightBorder);
	box-sizing: border-box;
}

.monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background,
.monaco-editor .reference-zone-widget .preview .monaco-editor .inputarea.ime-input {
	background-color: var(--vscode-peekViewEditor-background);
}

.monaco-editor .reference-zone-widget .preview .monaco-editor .margin {
	background-color: var(--vscode-peekViewEditorGutter-background);
}

/* High Contrast Theming */

.monaco-editor.hc-black .reference-zone-widget .ref-tree .reference-file,
.monaco-editor.hc-light .reference-zone-widget .ref-tree .reference-file {
	font-weight: bold;
}

.monaco-editor.hc-black .reference-zone-widget .ref-tree .referenceMatch .highlight,
.monaco-editor.hc-light .reference-zone-widget .ref-tree .referenceMatch .highlight {
	border: 1px dotted var(--vscode-contrastActiveBorder, transparent);
	box-sizing: border-box;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* marker zone */

.monaco-editor .peekview-widget .head .peekview-title .severity-icon {
	display: inline-block;
	vertical-align: text-top;
	margin-right: 4px;
}

.monaco-editor .marker-widget {
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .marker-widget > .stale {
	opacity: 0.6;
	font-style: italic;
}

.monaco-editor .marker-widget .title {
	display: inline-block;
	padding-right: 5px;
}

.monaco-editor .marker-widget .descriptioncontainer {
	position: absolute;
	white-space: pre;
	user-select: text;
	-webkit-user-select: text;
	padding: 8px 12px 0 20px;
}

.monaco-editor .marker-widget .descriptioncontainer .message {
	display: flex;
	flex-direction: column;
}

.monaco-editor .marker-widget .descriptioncontainer .message .details {
	padding-left: 6px;
}

.monaco-editor .marker-widget .descriptioncontainer .message .source,
.monaco-editor .marker-widget .descriptioncontainer .message span.code {
	opacity: 0.6;
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link {
	opacity: 0.6;
	color: inherit;
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link:before {
	content: '(';
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link:after {
	content: ')';
}

.monaco-editor .marker-widget .descriptioncontainer .message a.code-link > span {
	text-decoration: underline;
	/** Hack to force underline to show **/
	border-bottom: 1px solid transparent;
	text-underline-position: under;
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor .marker-widget .descriptioncontainer .filename {
	cursor: pointer;
	color: var(--vscode-textLink-activeForeground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .zone-widget .codicon.codicon-error,
.markers-panel .marker-icon.error, .markers-panel .marker-icon .codicon.codicon-error,
.text-search-provider-messages .providerMessage .codicon.codicon-error,
.extensions-viewlet > .extensions .codicon.codicon-error,
.extension-editor .codicon.codicon-error,
.preferences-editor .codicon.codicon-error {
	color: var(--vscode-problemsErrorIcon-foreground);
}

.monaco-editor .zone-widget .codicon.codicon-warning,
.markers-panel .marker-icon.warning, .markers-panel .marker-icon .codicon.codicon-warning,
.text-search-provider-messages .providerMessage .codicon.codicon-warning,
.extensions-viewlet > .extensions .codicon.codicon-warning,
.extension-editor .codicon.codicon-warning,
.preferences-editor .codicon.codicon-warning {
	color: var(--vscode-problemsWarningIcon-foreground);
}

.monaco-editor .zone-widget .codicon.codicon-info,
.markers-panel .marker-icon.info, .markers-panel .marker-icon .codicon.codicon-info,
.text-search-provider-messages .providerMessage .codicon.codicon-info,
.extensions-viewlet > .extensions .codicon.codicon-info,
.extension-editor .codicon.codicon-info,
.preferences-editor .codicon.codicon-info {
	color: var(--vscode-problemsInfoIcon-foreground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .inlineSuggestionsHints.withBorder {
	z-index: 39;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .inlineSuggestionsHints a {
	color: var(--vscode-foreground);
}

.monaco-editor .inlineSuggestionsHints a:hover {
	color: var(--vscode-foreground);
}

.monaco-editor .inlineSuggestionsHints .keybinding {
	display: flex;
	margin-left: 4px;
	opacity: 0.6;
}

.monaco-editor .inlineSuggestionsHints .keybinding .monaco-keybinding-key {
	font-size: 8px;
	padding: 2px 3px;
}

.monaco-editor .inlineSuggestionsHints .availableSuggestionCount a {
	display: flex;
	min-width: 19px;
	justify-content: center;
}

.monaco-editor .inlineSuggestionStatusBarItemLabel {
	margin-right: 2px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .hoverHighlight {
	background-color: var(--vscode-editor-hoverHighlightBackground);
}

.monaco-editor .monaco-hover {
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
	border-radius: 3px;
}

.monaco-editor .monaco-hover a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .monaco-hover a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor .monaco-hover .hover-row .actions {
	background-color: var(--vscode-editorHoverWidget-statusBarBackground);
}

.monaco-editor .monaco-hover code {
	background-color: var(--vscode-textCodeBlock-background);
}



/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor.vs .dnd-target,
.monaco-editor.hc-light .dnd-target {
	border-right: 2px dotted black;
	color: white; /* opposite of black */
}
.monaco-editor.vs-dark .dnd-target {
	border-right: 2px dotted #AEAFAD;
	color: #51504f; /* opposite of #AEAFAD */
}
.monaco-editor.hc-black .dnd-target {
	border-right: 2px dotted #fff;
	color: #000; /* opposite of #fff */
}

.monaco-editor.mouse-default .view-lines,
.monaco-editor.vs-dark.mac.mouse-default .view-lines,
.monaco-editor.hc-black.mac.mouse-default .view-lines,
.monaco-editor.hc-light.mac.mouse-default .view-lines {
	cursor: default;
}
.monaco-editor.mouse-copy .view-lines,
.monaco-editor.vs-dark.mac.mouse-copy .view-lines,
.monaco-editor.hc-black.mac.mouse-copy .view-lines,
.monaco-editor.hc-light.mac.mouse-copy .view-lines {
	cursor: copy;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .findOptionsWidget {
	background-color: var(--vscode-editorWidget-background);
	color: var(--vscode-editorWidget-foreground);
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	border: 2px solid var(--vscode-contrastBorder);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Find widget */
.monaco-editor .find-widget {
	position: absolute;
	z-index: 35;
	height: 33px;
	overflow: hidden;
	line-height: 19px;
	transition: transform 200ms linear;
	padding: 0 4px;
	box-sizing: border-box;
	transform: translateY(calc(-100% - 10px)); /* shadow (10px) */
	box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
	color: var(--vscode-editorWidget-foreground);
	border-left: 1px solid var(--vscode-widget-border);
	border-right: 1px solid var(--vscode-widget-border);
	border-bottom: 1px solid var(--vscode-widget-border);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background-color: var(--vscode-editorWidget-background);
}

.monaco-workbench.reduce-motion .monaco-editor .find-widget {
	transition: transform 0ms linear;
}

.monaco-editor .find-widget textarea {
	margin: 0px;
}

.monaco-editor .find-widget.hiddenEditor {
	display: none;
}

/* Find widget when replace is toggled on */
.monaco-editor .find-widget.replaceToggled > .replace-part {
	display: flex;
}

.monaco-editor .find-widget.visible  {
	transform: translateY(0);
}

/* This outline-color rule is used to override the outline color for synthetic-focus find input. */
.monaco-editor .find-widget .monaco-inputbox.synthetic-focus {
	outline: 1px solid -webkit-focus-ring-color;
	outline-offset: -1px;
	outline-color: var(--vscode-focusBorder);
}

.monaco-editor .find-widget .monaco-inputbox .input {
	background-color: transparent;
	min-height: 0;
}

.monaco-editor .find-widget .monaco-findInput .input {
	font-size: 13px;
}

.monaco-editor .find-widget > .find-part,
.monaco-editor .find-widget > .replace-part {
	margin: 3px 25px 0 17px;
	font-size: 12px;
	display: flex;
}

.monaco-editor .find-widget > .find-part .monaco-inputbox,
.monaco-editor .find-widget > .replace-part .monaco-inputbox {
	min-height: 25px;
}


.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror {
	padding-right: 22px;
}

.monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .input,
.monaco-editor .find-widget > .find-part .monaco-inputbox > .ibwrapper > .mirror,
.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .input,
.monaco-editor .find-widget > .replace-part .monaco-inputbox > .ibwrapper > .mirror {
	padding-top: 2px;
	padding-bottom: 2px;
}

.monaco-editor .find-widget > .find-part .find-actions {
	height: 25px;
	display: flex;
	align-items: center;
}

.monaco-editor .find-widget > .replace-part .replace-actions {
	height: 25px;
	display: flex;
	align-items: center;
}

.monaco-editor .find-widget .monaco-findInput {
	vertical-align: middle;
	display: flex;
	flex:1;
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element {
	/* Make sure textarea inherits the width correctly */
	width: 100%;
}

.monaco-editor .find-widget .monaco-findInput .monaco-scrollable-element .scrollbar.vertical {
	/* Hide vertical scrollbar */
	opacity: 0;
}

.monaco-editor .find-widget .matchesCount {
	display: flex;
	flex: initial;
	margin: 0 0 0 3px;
	padding: 2px 0 0 2px;
	height: 25px;
	vertical-align: middle;
	box-sizing: border-box;
	text-align: center;
	line-height: 23px;
}

.monaco-editor .find-widget .button {
	width: 16px;
	height: 16px;
	padding: 3px;
	border-radius: 5px;
	display: flex;
	flex: initial;
	margin-left: 3px;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* find in selection button */
.monaco-editor .find-widget .codicon-find-selection {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 5px;
}

.monaco-editor .find-widget .button.left {
	margin-left: 0;
	margin-right: 3px;
}

.monaco-editor .find-widget .button.wide {
	width: auto;
	padding: 1px 6px;
	top: -1px;
}

.monaco-editor .find-widget .button.toggle {
	position: absolute;
	top: 0;
	left: 3px;
	width: 18px;
	height: 100%;
	border-radius: 0;
	box-sizing: border-box;
}

.monaco-editor .find-widget .button.toggle.disabled {
	display: none;
}

.monaco-editor .find-widget .disabled {
	color: var(--vscode-disabledForeground);
	cursor: default;
}

.monaco-editor .find-widget > .replace-part {
	display: none;
}

.monaco-editor .find-widget > .replace-part > .monaco-findInput {
	position: relative;
	display: flex;
	vertical-align: middle;
	flex: auto;
	flex-grow: 0;
	flex-shrink: 0;
}

.monaco-editor .find-widget > .replace-part > .monaco-findInput > .controls {
	position: absolute;
	top: 3px;
	right: 2px;
}

/* REDUCED */
.monaco-editor .find-widget.reduced-find-widget .matchesCount {
	display:none;
}

/* NARROW (SMALLER THAN REDUCED) */
.monaco-editor .find-widget.narrow-find-widget {
	max-width: 257px !important;
}

/* COLLAPSED (SMALLER THAN NARROW) */
.monaco-editor .find-widget.collapsed-find-widget {
	max-width: 170px !important;
}

.monaco-editor .find-widget.collapsed-find-widget .button.previous,
.monaco-editor .find-widget.collapsed-find-widget .button.next,
.monaco-editor .find-widget.collapsed-find-widget .button.replace,
.monaco-editor .find-widget.collapsed-find-widget .button.replace-all,
.monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls {
	display:none;
}

.monaco-editor .find-widget.no-results .matchesCount {
	color: var(--vscode-errorForeground);
}

.monaco-editor .findMatch {
	animation-duration: 0;
	animation-name: inherit !important;
	background-color: var(--vscode-editor-findMatchHighlightBackground);
}

.monaco-editor .currentFindMatch {
	background-color: var(--vscode-editor-findMatchBackground);
	border: 2px solid var(--vscode-editor-findMatchBorder);
	padding: 1px;
	box-sizing: border-box;
}

.monaco-editor .findScope {
	background-color: var(--vscode-editor-findRangeHighlightBackground);
}

.monaco-editor .find-widget .monaco-sash {
	left: 0 !important;
	background-color: var(--vscode-editorWidget-resizeBorder, var(--vscode-editorWidget-border));
}

.monaco-editor.hc-black .find-widget .button:before {
	position: relative;
	top: 1px;
	left: 2px;
}

/* Action bars */
.monaco-editor .find-widget .button:not(.disabled):hover,
.monaco-editor .find-widget .codicon-find-selection:hover {
	background-color: var(--vscode-toolbar-hoverBackground) !important;
}

.monaco-editor.findMatch {
	background-color: var(--vscode-editor-findMatchHighlightBackground);
}

.monaco-editor.currentFindMatch {
	background-color: var(--vscode-editor-findMatchBackground);
}

.monaco-editor.findScope {
	background-color: var(--vscode-editor-findRangeHighlightBackground);
}

.monaco-editor.findMatch {
	background-color: var(--vscode-editorWidget-background);
}

/* Close button position. */
.monaco-editor .find-widget > .button.codicon-widget-close {
	position: absolute;
	top: 5px;
	right: 4px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,
.monaco-editor .margin-view-overlays .codicon-folding-manual-expanded,
.monaco-editor .margin-view-overlays .codicon-folding-expanded,
.monaco-editor .margin-view-overlays .codicon-folding-collapsed {
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.5s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 140%;
	margin-left: 2px;
}

.monaco-workbench.reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-collapsed,
.monaco-workbench.reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-manual-expanded,
.monaco-workbench.reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-expanded,
.monaco-workbench.reduce-motion .monaco-editor .margin-view-overlays .codicon-folding-collapsed {
	transition: initial;
}

.monaco-editor .margin-view-overlays:hover .codicon,
.monaco-editor .margin-view-overlays .codicon.codicon-folding-collapsed,
.monaco-editor .margin-view-overlays .codicon.codicon-folding-manual-collapsed,
.monaco-editor .margin-view-overlays .codicon.alwaysShowFoldIcons {
	opacity: 1;
}

.monaco-editor .inline-folded:after {
	color: grey;
	margin: 0.1em 0.2em 0 0.2em;
	content: "\22EF"; /* ellipses unicode character */
	display: inline;
	line-height: 1em;
	cursor: pointer;
}

.monaco-editor .folded-background {
	background-color: var(--vscode-editor-foldBackground);
}

.monaco-editor .cldr.codicon.codicon-folding-expanded,
.monaco-editor .cldr.codicon.codicon-folding-collapsed,
.monaco-editor .cldr.codicon.codicon-folding-manual-expanded,
.monaco-editor .cldr.codicon.codicon-folding-manual-collapsed {
	color: var(--vscode-editorGutter-foldingControlForeground) !important;
}


/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .suggest-preview-additional-widget {
	white-space: nowrap;
}

.monaco-editor .suggest-preview-additional-widget .content-spacer {
	color: transparent;
	white-space: pre;
}

.monaco-editor .suggest-preview-additional-widget .button {
	display: inline-block;
	cursor: pointer;
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .ghost-text-hidden {
	opacity: 0;
	font-size: 0;
}

.monaco-editor .ghost-text-decoration, .monaco-editor .suggest-preview-text .ghost-text {
	font-style: italic;
}

.monaco-editor .inline-completion-text-to-replace {
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .ghost-text-decoration,
.monaco-editor .ghost-text-decoration-preview,
.monaco-editor .suggest-preview-text .ghost-text {
	color: var(--vscode-editorGhostText-foreground) !important;
	background-color: var(--vscode-editorGhostText-background);
	border: 1px solid var(--vscode-editorGhostText-border);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .snippet-placeholder {
	min-width: 2px;
	outline-style: solid;
	outline-width: 1px;
	background-color: var(--vscode-editor-snippetTabstopHighlightBackground, transparent);
	outline-color: var(--vscode-editor-snippetTabstopHighlightBorder, transparent);
}

.monaco-editor .finish-snippet-placeholder {
	outline-style: solid;
	outline-width: 1px;
	background-color: var(--vscode-editor-snippetFinalTabstopHighlightBackground, transparent);
	outline-color: var(--vscode-editor-snippetFinalTabstopHighlightBorder, transparent);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Suggest widget*/

.monaco-editor .suggest-widget {
	width: 430px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	border-radius: 3px;
}

.monaco-editor .suggest-widget.message {
	flex-direction: row;
	align-items: center;
}

.monaco-editor .suggest-widget,
.monaco-editor .suggest-details {
	flex: 0 1 auto;
	width: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: var(--vscode-editorSuggestWidget-border);
	background-color: var(--vscode-editorSuggestWidget-background);
}

.monaco-editor.hc-black .suggest-widget,
.monaco-editor.hc-black .suggest-details,
.monaco-editor.hc-light .suggest-widget,
.monaco-editor.hc-light .suggest-details {
	border-width: 2px;
}

/* Styles for status bar part */


.monaco-editor .suggest-widget .suggest-status-bar {
	box-sizing: border-box;
	display: none;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	font-size: 80%;
	padding: 0 4px 0 4px;
	border-top: 1px solid var(--vscode-editorSuggestWidget-border);
	overflow: hidden;
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar {
	display: flex;
}

.monaco-editor .suggest-widget .suggest-status-bar .left {
	padding-right: 8px;
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-label {
	color: var(--vscode-editorSuggestWidgetStatus-foreground);
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label {
	margin-right: 0;
}

.monaco-editor .suggest-widget.with-status-bar .suggest-status-bar .action-item:not(:last-of-type) .action-label::after {
	content: ', ';
	margin-right: 0.3em;
}

.monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row > .contents > .main > .right > .readMore,
.monaco-editor .suggest-widget.with-status-bar .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore {
	display: none;
}

.monaco-editor .suggest-widget.with-status-bar:not(.docs-side) .monaco-list .monaco-list-row:hover > .contents > .main > .right.can-expand-details > .details-label {
	width: 100%;
}

/* Styles for Message element for when widget is loading or is empty */

.monaco-editor .suggest-widget > .message {
	padding-left: 22px;
}

/** Styles for the list element **/

.monaco-editor .suggest-widget > .tree {
	height: 100%;
	width: 100%;
}

.monaco-editor .suggest-widget .monaco-list {
	user-select: none;
	-webkit-user-select: none;
}

/** Styles for each row in the list element **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
	display: flex;
	-mox-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 10px;
	background-repeat: no-repeat;
	background-position: 2px 2px;
	white-space: nowrap;
	cursor: pointer;
	touch-action: none;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
	color: var(--vscode-editorSuggestWidget-selectedForeground);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused .codicon {
	color: var(--vscode-editorSuggestWidget-selectedIconForeground);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents {
	flex: 1;
	height: 100%;
	overflow: hidden;
	padding-left: 2px;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main {
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
	justify-content: space-between;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
	display: flex;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.focused) > .contents > .main .monaco-icon-label {
	color: var(--vscode-editorSuggestWidget-foreground);
}

.monaco-editor .suggest-widget:not(.frozen) .monaco-highlighted-label .highlight {
	font-weight: bold;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main .monaco-highlighted-label .highlight {
	color: var(--vscode-editorSuggestWidget-highlightForeground);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused > .contents > .main .monaco-highlighted-label .highlight {
	color: var(--vscode-editorSuggestWidget-focusHighlightForeground);
}

/** ReadMore Icon styles **/

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore::before {
	color: inherit;
	opacity: 1;
	font-size: 14px;
	cursor: pointer;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close {
	position: absolute;
	top: 6px;
	right: 2px;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .codicon-close:hover,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore:hover {
	opacity: 1;
}

/** signature, qualifier, type/details opacity **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	opacity: 0.7;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .signature-label {
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.6;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .qualifier-label {
	margin-left: 12px;
	opacity: 0.4;
	font-size: 85%;
	line-height: initial;
	text-overflow: ellipsis;
	overflow: hidden;
	align-self: center;
}

/** Type Info and icon next to the label in the focused completion item **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	font-size: 85%;
	margin-left: 1.1em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label > .monaco-tokenized-source {
	display: inline;
}

/** Details: if using CompletionItem#details, show on focus **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .details-label {
	display: none;
}

.monaco-editor .suggest-widget:not(.shows-details) .monaco-list .monaco-list-row.focused > .contents > .main > .right > .details-label {
	display: inline;
}

/** Details: if using CompletionItemLabel#details, always show **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .right > .details-label,
.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row.focused:not(.string-label) > .contents > .main > .right > .details-label {
	display: inline;
}

/** Ellipsis on hover **/

.monaco-editor .suggest-widget:not(.docs-side) .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right.can-expand-details > .details-label {
	width: calc(100% - 26px);
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left {
	flex-shrink: 1;
	flex-grow: 1;
	overflow: hidden;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .left > .monaco-icon-label {
	flex-shrink: 0;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row:not(.string-label) > .contents > .main > .left > .monaco-icon-label {
	max-width: 100%;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .left > .monaco-icon-label {
	flex-shrink: 1;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right {
	overflow: hidden;
	flex-shrink: 4;
	max-width: 70%;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
	display: inline-block;
	position: absolute;
	right: 10px;
	width: 18px;
	height: 18px;
	visibility: hidden;
}

/** Do NOT display ReadMore when docs is side/below **/

.monaco-editor .suggest-widget.docs-side .monaco-list .monaco-list-row > .contents > .main > .right > .readMore {
	display: none !important;
}

/** Do NOT display ReadMore when using plain CompletionItemLabel (details/documentation might not be resolved) **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.string-label > .contents > .main > .right > .readMore {
	display: none;
}

/** Focused item can show ReadMore, but can't when docs is side/below **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused.string-label > .contents > .main > .right > .readMore {
	display: inline-block;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused:hover > .contents > .main > .right > .readMore {
	visibility: visible;
}

/** Styles for each row in the list **/

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated {
	opacity: 0.66;
	text-decoration: unset;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label.deprecated > .monaco-icon-label-container > .monaco-icon-name-container {
	text-decoration: line-through;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label::before {
	height: 100%;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon {
	display: block;
	height: 16px;
	width: 16px;
	margin-left: 2px;
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: center;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.hide {
	display: none;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon {
	display: flex;
	align-items: center;
	margin-right: 4px;
}

.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .icon,
.monaco-editor .suggest-widget.no-icons .monaco-list .monaco-list-row .suggest-icon::before {
	display: none;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .icon.customcolor .colorspan {
	margin: 0 0 0 0.3em;
	border: 0.1em solid #000;
	width: 0.7em;
	height: 0.7em;
	display: inline-block;
}

/** Styles for the docs of the completion item in focus **/

.monaco-editor .suggest-details-container {
	z-index: 41;
}

.monaco-editor .suggest-details {
	display: flex;
	flex-direction: column;
	cursor: default;
	color: var(--vscode-editorSuggestWidget-foreground);
}

.monaco-editor .suggest-details.focused {
	border-color: var(--vscode-focusBorder);
}

.monaco-editor .suggest-details a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .suggest-details a:hover {
	color: var(--vscode-textLink-activeForeground);
}

.monaco-editor .suggest-details code {
	background-color: var(--vscode-textCodeBlock-background);
}

.monaco-editor .suggest-details.no-docs {
	display: none;
}

.monaco-editor .suggest-details > .monaco-scrollable-element {
	flex: 1;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type {
	flex: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.7;
	white-space: pre;
	margin: 0 24px 0 0;
	padding: 4px 0 12px 5px;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .header > .type.auto-wrap {
	white-space: normal;
	word-break: break-all;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs {
	margin: 0;
	padding: 4px 5px;
	white-space: pre-wrap;
}

.monaco-editor .suggest-details.no-type > .monaco-scrollable-element > .body > .docs {
	margin-right: 24px;
	overflow: hidden;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs {
	padding: 0;
	white-space: initial;
	min-height: calc(1rem + 8px);
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div,
.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > span:not(:empty) {
	padding: 4px 5px;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:first-child {
	margin-top: 0;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs > div > p:last-child {
	margin-bottom: 0;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .monaco-tokenized-source {
	white-space: pre;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs .code {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > .docs.markdown-docs .codicon {
	vertical-align: sub;
}

.monaco-editor .suggest-details > .monaco-scrollable-element > .body > p:empty {
	display: none;
}

.monaco-editor .suggest-details code {
	border-radius: 3px;
	padding: 0 0.4em;
}

.monaco-editor .suggest-details ul {
	padding-left: 20px;
}

.monaco-editor .suggest-details ol {
	padding-left: 20px;
}

.monaco-editor .suggest-details p code {
	font-family: var(--monaco-monospace-font);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/


.monaco-editor.vs .valueSetReplacement {
	outline: solid 2px var(--vscode-editorBracketMatch-border);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .linked-editing-decoration {
	background-color: var(--vscode-editor-linkedEditingBackground);

	/* Ensure decoration is visible even if range is empty */
	min-width: 1px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
.monaco-editor .detected-link,
.monaco-editor .detected-link-active {
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .detected-link-active {
	cursor: pointer;
	color: var(--vscode-editorLink-activeForeground) !important;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .focused .selectionHighlight {
	background-color: var(--vscode-editor-selectionHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-selectionHighlightBorder);
}
.monaco-editor.hc-black .focused .selectionHighlight, .monaco-editor.hc-light .focused .selectionHighlight {
	border-style: dotted;
}

.monaco-editor .wordHighlight {
	background-color: var(--vscode-editor-wordHighlightBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightBorder);
}
.monaco-editor.hc-black .wordHighlight, .monaco-editor.hc-light .wordHighlight {
	border-style: dotted;
}

.monaco-editor .wordHighlightStrong {
	background-color: var(--vscode-editor-wordHighlightStrongBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightStrongBorder);
}
.monaco-editor.hc-black .wordHighlightStrong, .monaco-editor.hc-light .wordHighlightStrong {
	border-style: dotted;
}

.monaco-editor .wordHighlightText {
	background-color: var(--vscode-editor-wordHighlightTextBackground);
	box-sizing: border-box;
	border: 1px solid var(--vscode-editor-wordHighlightTextBorder);
}
.monaco-editor.hc-black .wordHighlightText, .monaco-editor.hc-light .wordHighlightText {
	border-style: dotted;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .inline-edit-remove {
	background-color: var(--vscode-editorGhostText-background);
	font-style: italic;
	text-decoration: line-through;
}

.monaco-editor .inline-edit-remove.backgroundColoring {
	background-color: var(--vscode-diffEditor-removedLineBackground);
}

.monaco-editor .inline-edit-hidden {
	opacity: 0;
	font-size: 0;
}

.monaco-editor .inline-edit-decoration, .monaco-editor .suggest-preview-text .inline-edit {
	font-style: italic;
}

.monaco-editor .inline-completion-text-to-replace {
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .inline-edit-decoration,
.monaco-editor .inline-edit-decoration-preview,
.monaco-editor .suggest-preview-text .inline-edit {
	color: var(--vscode-editorGhostText-foreground) !important;
	background-color: var(--vscode-editorGhostText-background);
	border: 1px solid var(--vscode-editorGhostText-border);
}



/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .inlineEditHints.withBorder {
	z-index: 39;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .inlineEditHints a {
	color: var(--vscode-foreground);
}

.monaco-editor .inlineEditHints a:hover {
	color: var(--vscode-foreground);
}

.monaco-editor .inlineEditHints .keybinding {
	display: flex;
	margin-left: 4px;
	opacity: 0.6;
}

.monaco-editor .inlineEditHints .keybinding .monaco-keybinding-key {
	font-size: 8px;
	padding: 2px 3px;
}

.monaco-editor .inlineEditStatusBarItemLabel {
	margin-right: 2px;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .parameter-hints-widget {
	/* Must be higher than the sash's z-index and terminal canvases but lower than the suggest widget */
	z-index: 39;
	display: flex;
	flex-direction: column;
	line-height: 1.5em;
	cursor: default;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}

.hc-black .monaco-editor .parameter-hints-widget,
.hc-light .monaco-editor .parameter-hints-widget {
	border-width: 2px;
}

.monaco-editor .parameter-hints-widget > .phwrapper {
	max-width: 440px;
	display: flex;
	flex-direction: row;
}

.monaco-editor .parameter-hints-widget.multiple {
	min-height: 3.3em;
	padding: 0;
}

.monaco-editor .parameter-hints-widget.multiple .body::before {
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	opacity: 0.5;
	border-left: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .parameter-hints-widget p,
.monaco-editor .parameter-hints-widget ul {
	margin: 8px 0;
}

.monaco-editor .parameter-hints-widget .monaco-scrollable-element,
.monaco-editor .parameter-hints-widget .body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 100%;
}

.monaco-editor .parameter-hints-widget .signature {
	padding: 4px 5px;
	position: relative;
}

.monaco-editor .parameter-hints-widget .signature.has-docs::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	padding-top: 4px;
	opacity: 0.5;
	border-bottom: 1px solid var(--vscode-editorHoverWidget-border);
}

.monaco-editor .parameter-hints-widget .docs {
	padding: 0 10px 0 5px;
	white-space: pre-wrap;
}

.monaco-editor .parameter-hints-widget .docs.empty {
	display: none;
}

.monaco-editor .parameter-hints-widget .docs a {
	color: var(--vscode-textLink-foreground);
}

.monaco-editor .parameter-hints-widget .docs a:hover {
	color: var(--vscode-textLink-activeForeground);
	cursor: pointer;
}

.monaco-editor .parameter-hints-widget .docs .markdown-docs {
	white-space: initial;
}

.monaco-editor .parameter-hints-widget .docs code {
	font-family: var(--monaco-monospace-font);
	border-radius: 3px;
	padding: 0 0.4em;
	background-color: var(--vscode-textCodeBlock-background);
}

.monaco-editor .parameter-hints-widget .docs .monaco-tokenized-source,
.monaco-editor .parameter-hints-widget .docs .code {
	white-space: pre-wrap;
}

.monaco-editor .parameter-hints-widget .controls {
	display: none;
	flex-direction: column;
	align-items: center;
	min-width: 22px;
	justify-content: flex-end;
}

.monaco-editor .parameter-hints-widget.multiple .controls {
	display: flex;
	padding: 0 2px;
}

.monaco-editor .parameter-hints-widget.multiple .button {
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.monaco-editor .parameter-hints-widget .button.previous {
	bottom: 24px;
}

.monaco-editor .parameter-hints-widget .overloads {
	text-align: center;
	height: 12px;
	line-height: 12px;
	font-family: var(--monaco-monospace-font);
}

.monaco-editor .parameter-hints-widget .signature .parameter.active {
	color: var(--vscode-editorHoverWidget-highlightForeground);
	font-weight: bold;
}

.monaco-editor .parameter-hints-widget .documentation-parameter > .parameter {
	font-weight: bold;
	margin-right: 0.5em;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .rename-box {
	z-index: 100;
	color: inherit;
	border-radius: 4px;
}

.monaco-editor .rename-box.preview {
	padding: 4px 4px 0 4px;
}

.monaco-editor .rename-box .rename-input {
	padding: 3px;
	border-radius: 2px;
	width: calc(100% - 8px); /* 4px padding on each side */
}

.monaco-editor .rename-box .rename-label {
	display: none;
	opacity: .8;
}

.monaco-editor .rename-box.preview .rename-label {
	display: inherit;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .sticky-widget {
	overflow: hidden;
}

.monaco-editor .sticky-widget-line-numbers {
	float: left;
	background-color: inherit;
}

.monaco-editor .sticky-widget-lines-scrollable {
	display: inline-block;
	position: absolute;
	overflow: hidden;
	width: var(--vscode-editorStickyScroll-scrollableWidth);
	background-color: inherit;
}

.monaco-editor .sticky-widget-lines {
	position: absolute;
	background-color: inherit;
}

.monaco-editor .sticky-line-number, .monaco-editor .sticky-line-content {
	color: var(--vscode-editorLineNumber-foreground);
	white-space: nowrap;
	display: inline-block;
	position: absolute;
	background-color: inherit;
}

.monaco-editor .sticky-line-number .codicon-folding-expanded,
.monaco-editor .sticky-line-number .codicon-folding-collapsed {
	float: right;
	transition: var(--vscode-editorStickyScroll-foldingOpacityTransition);
}

.monaco-editor .sticky-line-content {
	width: var(--vscode-editorStickyScroll-scrollableWidth);
	background-color: inherit;
	white-space: nowrap;
}

.monaco-editor .sticky-line-number-inner {
	display: inline-block;
	text-align: right;
}

.monaco-editor .sticky-widget {
	border-bottom: 1px solid var(--vscode-editorStickyScroll-border);
}

.monaco-editor .sticky-line-content:hover {
	background-color: var(--vscode-editorStickyScrollHover-background);
	cursor: pointer;
}

.monaco-editor .sticky-widget {
	width: 100%;
	box-shadow: var(--vscode-editorStickyScroll-shadow) 0 3px 2px -2px;
	z-index: 4;
	background-color: var(--vscode-editorStickyScroll-background);
}

.monaco-editor .sticky-widget.peek {
	background-color: var(--vscode-peekViewEditorStickyScroll-background);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .unicode-highlight {
	border: 1px solid var(--vscode-editorUnicodeHighlight-border);
	background-color: var(--vscode-editorUnicodeHighlight-background);
	box-sizing: border-box;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.editor-banner {
	box-sizing: border-box;
	cursor: default;
	width: 100%;
	font-size: 12px;
	display: flex;
	overflow: visible;

	height: 26px;

	background: var(--vscode-banner-background);
}


.editor-banner .icon-container {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0 6px 0 10px;
}

.editor-banner .icon-container.custom-icon {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px;
	width: 16px;
	padding: 0;
	margin: 0 6px 0 10px;
}

.editor-banner .message-container {
	display: flex;
	align-items: center;
	line-height: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.editor-banner .message-container p {
	margin-block-start: 0;
	margin-block-end: 0;
}

.editor-banner .message-actions-container {
	flex-grow: 1;
	flex-shrink: 0;
	line-height: 26px;
	margin: 0 4px;
}

.editor-banner .message-actions-container a.monaco-button {
	width: inherit;
	margin: 2px 8px;
	padding: 0px 12px;
}

.editor-banner .message-actions-container a {
	padding: 3px;
	margin-left: 12px;
	text-decoration: underline;
}

.editor-banner .action-container {
	padding: 0 10px 0 6px;
}

.editor-banner {
	background-color: var(--vscode-banner-background);
}

.editor-banner,
.editor-banner .action-container .codicon,
.editor-banner .message-actions-container .monaco-link {
	color: var(--vscode-banner-foreground);
}

.editor-banner .icon-container .codicon {
	color: var(--vscode-banner-iconForeground);
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-link {
	color: var(--vscode-textLink-foreground);
}

.monaco-link:hover {
	color: var(--vscode-textLink-activeForeground);
}


/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .iPadShowKeyboard {
	width: 58px;
	min-width: 0;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	resize: none;
	overflow: hidden;
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjNDI0MjQyIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==) center center no-repeat;
	border: 4px solid #F6F6F6;
	border-radius: 4px;
}

.monaco-editor.vs-dark .iPadShowKeyboard {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCA1MyAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDguMDM2NCA0LjAxMDQySDQuMDA3NzlMNC4wMDc3OSAzMi4wMjg2SDQ4LjAzNjRWNC4wMTA0MlpNNC4wMDc3OSAwLjAwNzgxMjVDMS43OTcyMSAwLjAwNzgxMjUgMC4wMDUxODc5OSAxLjc5OTg0IDAuMDA1MTg3OTkgNC4wMTA0MlYzMi4wMjg2QzAuMDA1MTg3OTkgMzQuMjM5MiAxLjc5NzIxIDM2LjAzMTIgNC4wMDc3OSAzNi4wMzEySDQ4LjAzNjRDNTAuMjQ3IDM2LjAzMTIgNTIuMDM5IDM0LjIzOTIgNTIuMDM5IDMyLjAyODZWNC4wMTA0MkM1Mi4wMzkgMS43OTk4NCA1MC4yNDcgMC4wMDc4MTI1IDQ4LjAzNjQgMC4wMDc4MTI1SDQuMDA3NzlaTTguMDEwNDIgOC4wMTMwMkgxMi4wMTNWMTIuMDE1Nkg4LjAxMDQyVjguMDEzMDJaTTIwLjAxODIgOC4wMTMwMkgxNi4wMTU2VjEyLjAxNTZIMjAuMDE4MlY4LjAxMzAyWk0yNC4wMjA4IDguMDEzMDJIMjguMDIzNFYxMi4wMTU2SDI0LjAyMDhWOC4wMTMwMlpNMzYuMDI4NiA4LjAxMzAySDMyLjAyNlYxMi4wMTU2SDM2LjAyODZWOC4wMTMwMlpNNDAuMDMxMiA4LjAxMzAySDQ0LjAzMzlWMTIuMDE1Nkg0MC4wMzEyVjguMDEzMDJaTTE2LjAxNTYgMTYuMDE4Mkg4LjAxMDQyVjIwLjAyMDhIMTYuMDE1NlYxNi4wMTgyWk0yMC4wMTgyIDE2LjAxODJIMjQuMDIwOFYyMC4wMjA4SDIwLjAxODJWMTYuMDE4MlpNMzIuMDI2IDE2LjAxODJIMjguMDIzNFYyMC4wMjA4SDMyLjAyNlYxNi4wMTgyWk00NC4wMzM5IDE2LjAxODJWMjAuMDIwOEgzNi4wMjg2VjE2LjAxODJINDQuMDMzOVpNMTIuMDEzIDI0LjAyMzRIOC4wMTA0MlYyOC4wMjZIMTIuMDEzVjI0LjAyMzRaTTE2LjAxNTYgMjQuMDIzNEgzNi4wMjg2VjI4LjAyNkgxNi4wMTU2VjI0LjAyMzRaTTQ0LjAzMzkgMjQuMDIzNEg0MC4wMzEyVjI4LjAyNkg0NC4wMzM5VjI0LjAyMzRaIiBmaWxsPSIjQzVDNUM1Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDAiPgo8cmVjdCB3aWR0aD0iNTMiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==) center center no-repeat;
	border: 4px solid #252526;
}
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .tokens-inspect-widget {
	z-index: 50;
	user-select: text;
	-webkit-user-select: text;
	padding: 10px;
	color: var(--vscode-editorHoverWidget-foreground);
	background-color: var(--vscode-editorHoverWidget-background);
	border: 1px solid var(--vscode-editorHoverWidget-border);
}
.monaco-editor.hc-black .tokens-inspect-widget, .monaco-editor.hc-light .tokens-inspect-widget {
	border-width: 2px;
}

.monaco-editor .tokens-inspect-widget .tokens-inspect-separator {
	height: 1px;
	border: 0;
	background-color: var(--vscode-editorHoverWidget-border);
}

.monaco-editor .tokens-inspect-widget .tm-token {
	font-family: var(--monaco-monospace-font);
}

.monaco-editor .tokens-inspect-widget .tm-token-length {
	font-weight: normal;
	font-size: 60%;
	float: right;
}

.monaco-editor .tokens-inspect-widget .tm-metadata-table {
	width: 100%;
}

.monaco-editor .tokens-inspect-widget .tm-metadata-value {
	font-family: var(--monaco-monospace-font);
	text-align: right;
}

.monaco-editor .tokens-inspect-widget .tm-token-type {
	font-family: var(--monaco-monospace-font);
}

/**
 * ValidationIssuesPanel - Styles for the compact validation issues panel
 */

.vip-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid #444;
}

.vip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

.vip-title {
  font-weight: 600;
  font-size: 12px;
  color: #f0f0f0;
}

.vip-counts {
  display: flex;
  gap: 12px;
  font-size: 11px;
}

.vip-count {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vip-count-error {
  color: #ff7066;
}

.vip-count-warning {
  color: #ffd24a;
}

.vip-count-recommendation {
  color: #6ab8f0;
}

.vip-count-info {
  color: #b0bec5;
}

.vip-issues-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.vip-issue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.4;
  border-left: 3px solid transparent;
  transition: background-color 0.1s ease;
}

.vip-issue:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.vip-issue-error {
  border-left-color: #ef5350;
}

.vip-issue-warning {
  border-left-color: #ffc107;
}

.vip-issue-recommendation {
  border-left-color: #42a5f5;
}

.vip-issue-info {
  border-left-color: #90a4ae;
}

.vip-issue-icon {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.vip-icon {
  font-size: 12px;
}

.vip-icon-error {
  color: #ff7066;
}

.vip-icon-warning {
  color: #ffd24a;
}

.vip-icon-recommendation {
  color: #6ab8f0;
}

.vip-icon-info {
  color: #b0bec5;
}

/*
 * Issue code badge — colored by severity, with high-contrast text.
 * Each badge uses a solid background paired with white text (≥ 7:1 contrast)
 * so the rule code is clearly readable at 10px against the dark panel.
 */
.vip-issue-code {
  flex-shrink: 0;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffffff;
  background-color: #4a4a4a;
  border: 1px solid #2a2a2a;
  padding: 1px 5px;
  border-radius: 2px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.vip-issue-error .vip-issue-code {
  background-color: #c0392b;
  border-color: #922b21;
}

.vip-issue-warning .vip-issue-code {
  background-color: #b9770e;
  border-color: #7e5109;
}

.vip-issue-recommendation .vip-issue-code {
  background-color: #2980b9;
  border-color: #1a5276;
}

.vip-issue-info .vip-issue-code {
  background-color: #5d6d7e;
  border-color: #34495e;
}

.vip-issue-message {
  flex: 1;
  color: #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-issue-content {
  flex-shrink: 0;
  max-width: 200px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 10px;
  color: #b8b8b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wte-outer {
  padding: 8px;
  padding-top: 2px;
  width: 100%;
}

.wte-topZone .ui-dropdown__container {
  width: 160px !important;
}

.wte-topZone {
  margin: 4px;
  display: grid;
  grid-template-columns: 1fr 180px 180px 36px;
}

.wte-topWorld {
  grid-column: 1;
}

.wte-topArea {
  grid-column: 2;
}

.wte-topAdd {
  grid-column: 3;
}

.wte-topTools {
  grid-column: 4;
}

.wte-gallery {
  overflow-y: auto;
  max-height: 280px;
  min-height: 280px;
  background-color: #202020;
}

.wte-selectedProject {
  padding-top: 20px;
  padding-left: 30px;
}

.wte-toolBin {
  display: grid;
  grid-template-columns: 1fr 400px;
}

.wte-worldView {
  width: 100%;
  grid-column: 1;
}
.wte-areaView {
  grid-column: 2;
  border-left: solid 1px black;
  background-color: #303030;
}

.wtae-outer {
  padding: 8px;
  padding-top: 2px;
  width: 100%;
  min-height: 450px;
}
margin .wtae-gallery {
  overflow-y: auto;
  max-height: 280px;
  min-height: 280px;
  background-color: #202020;
}

.wtae-summaryArea {
  display: grid;
  background-color: #203020;
  grid-template-columns: 110px 1fr;
  vertical-align: top;
}

.wtae-summaryAreaTitle {
  grid-column: 1;
  padding-left: 4px;
  padding-top: 9px;
}

.wtae-summaryAreaForm {
  grid-column: 2;
}

.wtae-actionsArea {
  display: grid;
  background-color: #262626;
  padding: 4px;
  grid-template-columns: 160px 1fr;
}

.wtae-actionsAreaDropdown {
  grid-column: 1;
}

.wtae-actionsAreaToolbar {
  grid-column: 2;
}

.wtae-actionsArea .ui-dropdown__container {
  width: 160px !important;
}

.ase-outer {
  padding: 0px;
  padding-top: 0px;
  width: 100%;
  min-height: 450px;
  display: grid;
  grid-template-rows: 28px 36px 1fr;
  grid-template-columns: 260px 1fr;
}

.ase-outer-fullscreen {
  min-height: 100%;
  height: 100%;
  grid-template-rows: 28px 1fr;
  grid-template-columns: 1fr;
}

.ase-dropdownArea {
  grid-column: 1;
  grid-row: 2;
  padding: 2px;
}

.ase-toolBar {
  grid-column: 2;
  grid-row: 2;
}

.ase-workspaceArea-full {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 3;
}

.ase-workspaceArea {
  grid-row: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}

.ase-workspaceArea-maximized {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── Editor Toolbar (maximize bar) ─── */
.ase-editorToolbar {
  grid-row: 1;
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  height: 28px;
  box-sizing: border-box;
  user-select: none;
}

.ase-editorToolbar-dark {
  background: rgba(0, 0, 0, 0.25);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.ase-editorToolbar-title {
  margin-right: auto;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
}

.ase-editorToolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.08);
  color: #444;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.ase-editorToolbar-btn:hover {
  background: rgba(82, 165, 53, 0.2);
  border-color: rgba(82, 165, 53, 0.5);
}

.ase-editorToolbar-btn-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ccc;
}

.ase-editorToolbar-btn-dark:hover {
  background: rgba(82, 165, 53, 0.3);
  border-color: rgba(82, 165, 53, 0.6);
  color: #fff;
}

/* ─── Fullscreen overlay ─── */
.ase-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #f5f0ed;
  display: flex;
  flex-direction: column;
}

.ase-fullscreen-dark {
  background: #262423;
}

.ase-loading {
  padding: 8px;
}

/* ─── Empty state / loading ─── */
.ase-emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
  color: #6b6562;
  gap: 8px;
  padding: 40px 20px;
}

.ase-emptyState-dark {
  color: #a39895;
}

.ase-emptyState-icon {
  font-size: 36px;
  opacity: 0.35;
  margin-bottom: 4px;
}

.ase-emptyState-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

.ase-emptyState-hint {
  font-size: 12px;
  max-width: 280px;
  line-height: 1.5;
  opacity: 0.5;
}

.ase-gallery {
  overflow-y: auto;
  max-height: 280px;
  min-height: 280px;
  background-color: #202020;
}

.blocklyMainBackground {
  stroke-width: 0px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Minecraft-themed Blockly Overrides
 *
 * These CSS rules style Blockly's internal SVG and DOM elements to match
 * the Minecraft Creator Tools UI: thick borders, squared shapes (via custom
 * "minecraft" renderer extending Zelos), Noto Sans font, MC color palette,
 * and dark/light mode support.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* --- Block rendering --- */
.blocklyPath {
  stroke-width: 2px;
  shape-rendering: crispEdges;
}

.blocklyDragging > .blocklyPath {
  filter: drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.6));
  stroke-width: 2.5px;
}

.blocklySelected > .blocklyPath {
  stroke: #ffffff;
  stroke-width: 3px;
}

/* --- Block text --- */
.blocklyText {
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 11pt;
}

.blocklyFlyoutLabelText {
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  font-size: 12pt;
  font-weight: 600;
}

/* --- Toolbox --- */
.blocklyToolboxDiv {
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  padding: 4px 0;
}

.blocklyTreeRow {
  padding: 6px 12px !important;
  margin: 2px 4px;
  border: 2px solid transparent;
  transition:
    background-color 0.1s,
    border-color 0.1s;
}

.blocklyTreeRow:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.blocklyTreeRowContentContainer {
  display: flex;
  align-items: center;
}

.blocklyTreeLabel {
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blocklyTreeSelected .blocklyTreeLabel {
  font-weight: 700;
}

/* Category color indicator — thicken the left bar to look more MC */
.blocklyTreeIcon {
  width: 6px !important;
  border-radius: 0 !important;
  margin-right: 8px;
}

/* --- Flyout --- */
.blocklyFlyoutBackground {
  stroke-width: 0;
}

/* --- Dropdown fields --- */
.blocklyDropdownRect {
  rx: 0;
  ry: 0;
  stroke: #131313;
  stroke-width: 1.5px;
}

/* --- Text input fields --- */
.blocklyEditableText > rect,
.blocklyEditableText > .blocklyFieldRect {
  rx: 0;
  ry: 0;
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 1px;
}

/* --- Scrollbar --- */
.blocklyScrollbarHandle {
  rx: 2;
  ry: 2;
}

/* --- Context menu / widget overlays --- */
.blocklyWidgetDiv .blocklyMenu {
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  border: 2px solid #131313;
  border-radius: 0;
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.4);
}

.blocklyWidgetDiv .blocklyMenuItem {
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  font-size: 12px;
}

.blocklyWidgetDiv .blocklyMenuItemContent {
  padding: 4px 12px;
}

/* --- Comment boxes --- */
.blocklyCommentTextarea {
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Dark mode overrides (body.ct-dark applies when dark theme is active)
 * ═══════════════════════════════════════════════════════════════════════════ */
body.ct-dark .blocklyTreeRow {
  border-color: transparent;
}

body.ct-dark .blocklyTreeRow:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

body.ct-dark .blocklyTreeSelected {
  background-color: rgba(82, 165, 53, 0.25) !important;
  border-color: rgba(82, 165, 53, 0.5);
}

body.ct-dark .blocklyDropdownRect {
  fill-opacity: 0.2;
  stroke: rgba(255, 255, 255, 0.25);
}

body.ct-dark .blocklyWidgetDiv .blocklyMenu {
  background-color: #333;
  border-color: #1a1a1a;
  color: #e0e0e0;
}

body.ct-dark .blocklyWidgetDiv .blocklyMenuItem:hover {
  background-color: rgba(82, 165, 53, 0.3);
}

body.ct-dark .blocklyFlyoutBackground {
  fill: #3a3530;
}

body.ct-dark .blocklyText {
  fill: #f0ece8;
}

body.ct-dark .blocklyEditableText > rect,
body.ct-dark .blocklyEditableText > .blocklyFieldRect {
  stroke: rgba(255, 255, 255, 0.15);
}

/* Dark mode: improve toolbox category dividers */
body.ct-dark .blocklyToolboxCategory {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Dark mode: improve flyout block visibility */
body.ct-dark .blocklyFlyout .blocklyPath {
  stroke-width: 1.5px;
  stroke-opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Light mode overrides
 * ═══════════════════════════════════════════════════════════════════════════ */
body:not(.ct-dark) .blocklyTreeRow:hover {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}

body:not(.ct-dark) .blocklyTreeSelected {
  background-color: rgba(82, 165, 53, 0.2) !important;
  border-color: rgba(82, 165, 53, 0.4);
}

body:not(.ct-dark) .blocklyWidgetDiv .blocklyMenu {
  background-color: #f5f0ed;
  border-color: #8b8b8b;
  color: #333;
}

body:not(.ct-dark) .blocklyWidgetDiv .blocklyMenuItem:hover {
  background-color: rgba(82, 165, 53, 0.15);
}

body:not(.ct-dark) .blocklyText {
  fill: #ffffff;
}

/* Light mode: toolbox category dividers */
body:not(.ct-dark) .blocklyToolboxCategory {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Light mode: flyout block visibility */
body:not(.ct-dark) .blocklyFlyout .blocklyPath {
  stroke-width: 1.5px;
}

.ase-bw {
  width: 100%;
  height: 100%;
}

.ase-selectedProject {
  padding-top: 20px;
  padding-left: 30px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATAFORM STYLES - Minecraft Creator Tools
   
   Design Philosophy:
   - Blocky, pixelated aesthetic (max 4px border-radius)
   - Green accent (#52a535) for focus states and highlights
   - Stone gray for secondary elements
   - Subtle shadows for depth without heaviness
   - Clear visual hierarchy with field cards
   
   See: docs/ux/Components.md, docs/ux/ShapeBorderGuidelines.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   BASE FORM STRUCTURE
   ───────────────────────────────────────────────────────────────────────────── */

.df-formArea .ms {
  margin-bottom: 0px !important;
}

.df-form {
  border-top: solid 1px;
  border-bottom: solid 1px;
}

.df-form TEXTAREA {
  min-width: 320px;
  max-width: calc(100vw - 30px);
  min-height: 46px;
  line-height: normal;
  padding: 8px 12px;
  border-radius: 3px;
  border: 2px solid rgba(107, 101, 98, 0.4);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.df-form TEXTAREA:focus {
  border-color: #52a535;
  box-shadow: 0 0 0 2px rgba(82, 165, 53, 0.2);
  outline: none;
}

.df-outer {
  padding: 0px;
  vertical-align: top;
  width: 100%;
}

.df-wrapper {
  margin: 8px 12px 4px 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.df-headerOuter {
  display: grid;
  grid-template-columns: 1fr 30px;
  padding-bottom: 8px;
}

.df-closeArea {
  grid-column: 2;
}

.df-headerTitle {
  font-size: 15pt;
  font-weight: 600;
  grid-column: 1;
  letter-spacing: 0.3px;
  position: relative;
  padding-bottom: 8px;
}

/* Green accent underline for header */
.df-headerTitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #52a535 0%, transparent 100%);
}

.df-headerSubTitle {
  font-size: 12pt;
  grid-column: 1;
  opacity: 0.8;
}

.df-subHeaderTitle {
  font-size: 12pt;
  font-weight: 600;
  padding-top: 4px;
  padding-bottom: 4px;
  grid-column: 1;
  letter-spacing: 0.2px;
}

.df-subHeaderSubTitle {
  font-size: 10pt;
  grid-column: 1;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIELD DESCRIPTION - Info callout style
   ───────────────────────────────────────────────────────────────────────────── */

.df-fieldDescription {
  font-size: 11px;
  padding: 4px 0;
  margin: 4px 0;
  line-height: 1.4;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIELD WRAPPER - Card-style field containers
   ───────────────────────────────────────────────────────────────────────────── */

.df-fieldWrap .ui-checkbox__label {
  font-size: 12px;
  font-weight: 600;
  position: relative;
  color: inherit !important;
  top: -2px;
  left: -2px;
}

/* Checkbox toggle row layout */
.df-checkboxRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.df-checkboxLabel {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
}

.df-fieldTitle {
  padding-bottom: 0px !important;
  margin-bottom: 4px !important;
}

.df-fieldWrap {
  padding: 16px 14px 20px 14px;
  margin: 4px 0;
  border-radius: 4px;
  border: 1px solid rgba(107, 101, 98, 0.2);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.df-fieldWrap:hover {
  border-color: rgba(107, 101, 98, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.df-fieldWrap:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.dfw-fieldWrap .ui-form__label {
  vertical-align: middle;
  padding-right: 14px;
  display: inline-block !important;
  width: 189px;
}

.df-fieldWrap .ui-dropdown {
  display: inline-block;
}

.df-fieldWrap .ui-dropdown__container {
  width: 235px;
  border-radius: 3px;
}

.df-fieldWrap label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* MUI shrunk label (floated above input) — keep readable at a larger size */
.df-fieldWrap .MuiInputLabel-shrink {
  font-size: 16px;
  font-weight: 700;
  left: -4px;
}

/* Input focus states — remove default outlines; MUI handles its own focus ring */
.df-fieldWrap input:focus,
.df-fieldWrap select:focus {
  outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENT TITLES AND BINS
   ───────────────────────────────────────────────────────────────────────────── */

.df-elementBinTitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  margin-bottom: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARD WRAPPERS - Minecraft-style blocky cards
   ───────────────────────────────────────────────────────────────────────────── */

.df-cardWrapper {
  padding: 12px 14px 14px 14px;
  border: 2px solid rgba(107, 101, 98, 0.3);
  border-radius: 4px;
  margin-bottom: 8px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: border-color 0.15s ease;
}

.df-cardWrapper:hover {
  border-color: rgba(107, 101, 98, 0.5);
}

.df-arrayOfKeyedStringSet {
  padding: 10px 14px;
  border: 2px solid rgba(107, 101, 98, 0.3);
  border-radius: 4px;
  margin-bottom: 8px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.df-description {
  font-size: 11px;
  padding: 8px 0 16px 0;
  line-height: 1.5;
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SLIDER COMPONENT
   ───────────────────────────────────────────────────────────────────────────── */

.df-sliderSet {
  display: grid;
  margin-top: 8px;
  grid-template-columns: 1fr 80px;
  gap: 12px;
  align-items: center;
}

.df-sliderSet .ui-form__input {
  margin-left: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENT TITLES
   ───────────────────────────────────────────────────────────────────────────── */

.df-elementTitle {
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.df-elementTitleInvalid {
  color: #d32f2f;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENT BINS - Container for nested elements
   ───────────────────────────────────────────────────────────────────────────── */

.df-elementBinNoScroll {
  padding: 10px 12px;
  margin-left: 0;
  min-height: 100px;
  border: 1px solid rgba(107, 101, 98, 0.25);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
}

.df-elementBin {
  padding: 10px 12px;
  margin-left: 0;
  min-height: 100px;
  border: 1px solid rgba(107, 101, 98, 0.25);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.df-stringArray {
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 8px;
}

.df-stringArrayTitle {
  grid-column: 1;
  padding-top: 8px;
  font-weight: 600;
  font-size: 12px;
}

.df-stringArrayData {
  grid-column: 2;
}

.df-stringArrayData .ui-form__input {
  width: 300px;
  max-width: 300px;
  margin-bottom: 4px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SLIDER DETAILS
   ───────────────────────────────────────────────────────────────────────────── */

.df-sliderTitle {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 1;
  font-size: 14px;
  font-weight: 700;
  padding-top: 4px;
  padding-bottom: 8px;
  color: inherit;
}

.df-sliderInput {
  grid-column: 2;
  grid-row: 2;
  padding: 4px 0;
}

.df-sliderInput input {
  text-align: center;
  border-radius: 3px;
}

.df-slider {
  grid-column: 1;
  grid-row: 2;
  padding: 4px 0;
  padding-left: 0;
  padding-top: 12px;
}

/* Green slider track */
.df-slider input[type="range"]::-webkit-slider-thumb {
  background: #52a535;
}

.df-slider input[type="range"]::-moz-range-thumb {
  background: #52a535;
}

/* ─────────────────────────────────────────────────────────────────────────────
   READ-ONLY DISPLAY
   ───────────────────────────────────────────────────────────────────────────── */

.dfw-ro-row {
  display: table-row;
}

.dfw-ro-title {
  display: table-cell;
  padding-left: 1px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-right: 12px;
  font-weight: 600;
  font-size: 12px;
}

.dfw-ro-value {
  display: table-cell;
  padding: 6px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SAMPLE AND DEFAULT VALUE DISPLAY
   ───────────────────────────────────────────────────────────────────────────── */

.df-sampleTable {
  display: table;
  padding-left: 0;
  font-size: 11px;
  margin-top: 0;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  padding: 8px;
}

.df-defaultValueDescription {
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 11px;
  font-style: italic;
  background: rgba(107, 101, 98, 0.08);
  border-radius: 3px;
  border-left: 2px solid rgba(107, 101, 98, 0.3);
}

.df-sampleDescription {
  font-style: italic;
  padding: 6px 0 0 0;
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.8;
}

.df-sampleRow {
  display: table-row;
}

.df-ro-sampleValue {
  display: table-cell;
  padding: 4px 8px;
  font-size: 11px;
  vertical-align: middle;
}

.df-sampleChip {
  display: inline-block;
  padding: 1px 8px;
  margin: 2px 4px 2px 0;
  font-size: 11px;
  font-family: "Consolas", "Monaco", monospace;
  border-radius: 3px;
  background: rgba(128, 128, 128, 0.18);
  opacity: 0.7;
}

.df-ro-table {
  display: table;
}

/* ─────────────────────────────────────────────────────────────────────────────
   KEYED COLLECTIONS
   ───────────────────────────────────────────────────────────────────────────── */

.df-keyedBooleanCollection {
  display: grid;
  gap: 4px;
  align-items: center;
}

.df-keyedBooleanCollectionTitle {
  grid-column: 1;
  font-weight: 600;
  font-size: 12px;
}

.df-keyedBooleanCollectionData {
  grid-column: 2;
}

.df-keyedBooleanCollectionClose {
  grid-column: 3;
}

.df-keyedStringCollection {
  display: grid;
  grid-template-columns: 205px 1fr auto 100px;
  max-width: 830px;
  gap: 8px;
  align-items: center;
}

.df-keyedStringCollectionAction {
  grid-column: 3;
}

.df-keyedStringCollectionTitle {
  grid-column: 1;
  font-weight: 600;
  font-size: 12px;
}

.df-keyedStringCollectionData {
  grid-column: 2;
}

.df-keyedStringCollectionData input {
  width: 500px;
  max-width: calc(100vw - 550px);
  margin-bottom: 4px;
  border-radius: 3px;
}

.df-keyedStringCollectionClose {
  grid-column: 4;
}

.df-keyedStringCollectionClose button {
  height: 32px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NUMBER INPUTS
   ───────────────────────────────────────────────────────────────────────────── */

.df-fieldWrapNumber input {
  text-align: left;
}

/* Prevent double borders: MUI OutlinedInput uses fieldset for the border,
   so strip any border/outline from the input element itself */
.df-fieldWrap .MuiOutlinedInput-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIELD WITH ADD BUTTON
   ───────────────────────────────────────────────────────────────────────────── */

.df-fieldWithAddButtonWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.df-fieldAddButtonLabel {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.df-fieldWithAddButton {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 350px;
}

.df-fieldWithAddButton > div:first-child {
  flex: 1;
  min-width: 0;
}

.df-fieldAddButton {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #52a535;
  border-radius: 3px;
  background: #3d7a2a;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  height: 32px;
  line-height: 1;
}

.df-fieldAddButton:hover {
  background: #4a9432;
  border-color: #6bc74a;
}

.df-fieldAddButton:active {
  background: #52a535;
}

/* ─────────────────────────────────────────────────────────────────────────────
   READ-ONLY ROW STYLING
   ───────────────────────────────────────────────────────────────────────────── */

.df-ro-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin: 2px 0;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
  gap: 12px;
}

.df-ro-title {
  font-weight: 600;
  font-size: 12px;
  min-width: 120px;
}

.df-ro-value {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  opacity: 0.9;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPACT NUMERIC INPUTS
   ───────────────────────────────────────────────────────────────────────────── */

.df-numericInput input {
  max-width: 100px !important;
  min-width: 60px !important;
  text-align: right;
  border-radius: 3px;
  padding: 6px 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIELD GROUPS - Compact grouped field rendering
   ───────────────────────────────────────────────────────────────────────────── */

/* Required but empty field highlighting */
.df-fieldWrapRequiredEmpty {
  border-left: 3px solid #e8a033 !important;
  background: rgba(232, 160, 51, 0.08) !important;
}

.df-fieldWrapRequiredEmpty::before {
  content: "* Required";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #e8a033;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.df-fieldWrap {
  position: relative;
}

.df-fieldGroup {
  padding: 12px 14px 16px 14px;
  margin: 4px 0;
  border-radius: 4px;
  border: 1px solid rgba(107, 101, 98, 0.2);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.df-fieldGroupTitle {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}

.df-fieldGroupDescription {
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Flow layout - fields arranged horizontally with wrapping */
.df-fieldGroupFlow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.df-fieldGroupFlow .df-groupedField {
  display: flex;
  flex-direction: column;
  min-width: 80px;
}

.df-fieldGroupFlow .df-groupedFieldLabel {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 4px;
  padding-left: 4px;
  text-align: center;
}

.df-fieldGroupFlow .df-groupedFieldInput input {
  max-width: 90px;
  min-width: 70px;
  text-align: right;
  padding: 6px 8px;
  border-radius: 3px;
  border: 2px solid rgba(107, 101, 98, 0.3);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-size: 13px;
}

.df-fieldGroupFlow .df-groupedFieldInput input:focus {
  border-color: #52a535;
  box-shadow: 0 0 0 2px rgba(82, 165, 53, 0.2);
  outline: none;
}

/* Grid layout - fields in a structured grid */
.df-fieldGroupGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px 16px;
}

/* Compact layout - vertical with reduced spacing */
.df-fieldGroupCompact .df-groupedField {
  margin-bottom: 6px;
}

.df-fieldGroupCompact .df-groupedFieldLabel {
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 2px;
}

.mifi-outer {
  display: table;
  margin-top: 2px !important;
}

/* In narrow containers (diagram pane), override table layout to block so width is constrained */
.ead-n-area .mifi-outer,
.etde-pane .mifi-outer {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
}

.mifi-inner {
  display: table-row;
}

.mifi-cell {
  display: table-cell;
}

.mifi-input {
  width: 60px;
  max-width: 60px;
}

.mifi-input input {
  min-width: 55px;
  width: 52px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.mificl-choice {
  cursor: pointer;
}

.mificl-descript {
  max-width: 200px;
  font-size: x-small;
  padding-top: 4px;
}

.mifics-outer {
  display: table;
  margin-top: 2px !important;
}

.mifics-outer-narrow {
  display: block;
  margin-top: 2px !important;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.mifics-toolbar {
  margin-bottom: 4px;
  max-width: 100%;
}

.mifics-toolbarInner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.mifics-outer-narrow .mifics-inner {
  display: block;
}

.mifics-outer-narrow .mifics-cell {
  display: block;
}

.mifics-inner {
  display: table-row;
}

.mifics-cell {
  display: table-cell;
}

.mifics-input {
  width: 60px;
  max-width: 60px;
}

.mifics-input input {
  min-width: 55px;
  width: 52px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.mifics-ambient {
  display: table-cell;
  width: 50px;
  max-width: 50px;
}

.mifics-ambient button {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0px;
}

.mifics-toggledExtendedButton {
  border: solid 1px #606060;
  background-color: #b0b0b0;
  padding: 2px;
  margin-top: 2px;
  margin-left: 3px;
  margin-right: 1px;
}

.mifics-extendedButton {
  border: solid 1px #606060;
  padding: 2px;
  margin-top: 2px;
  margin-left: 3px;
  margin-right: 1px;
}

.mifics-buttonLabel {
  padding-left: 6px;
  padding-right: 2px;
}

.mificl-outer {
  display: block;
  width: 100%;
  margin-top: 2px !important;
}

.mificln-outer {
  display: block;
  width: 100%;
  margin-top: 4px !important;
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px 10px;
  box-sizing: border-box;
  position: relative;
}

.mificln-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding-right: 28px;
}

.mificln-cell {
  display: block;
  padding-top: 2px;
  max-width: 100%;
  min-width: 0;
}

.mificln-cell .MuiOutlinedInput-root {
  max-width: 100%;
}

.mificln-test {
  flex: 1 1 100%;
}

.mificln-test .MuiOutlinedInput-root {
  width: 100%;
}

.mificln-descript {
  font-size: 11px;
  opacity: 0.7;
  padding-top: 2px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mificln-closeCell {
  position: absolute;
  top: 4px;
  right: 4px;
}

.mificln-closeCell .mificl-closeButton {
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  opacity: 0.6;
}

.mificln-closeCell .mificl-closeButton:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.mificln-inner .ui-dropdown__container {
  width: 180px;
}

.mificln-test .ui-dropdown__container {
  width: 180px;
}

.mificl-inner {
  display: flex;
}

.mificl-cell {
  display: inline-block;
  padding-right: 4px;
}

.mificl-inner .ui-dropdown__container {
  width: 160px;
}

.mificl-input .ui-form__input {
  padding-top: 0px !important;
}

.mificl-input {
  padding-top: 0px !important;
  width: 60px;
  max-width: 60px;
}

.mificl-input input {
  min-width: 55px;
  width: 52px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.mificl-test .ui-dropdown__container {
  width: 205px;
}

/* SimplifiedBiomeFilterEditor styles */

.sbfe-outer {
  margin-top: 4px;
}

.sbfe-simplified {
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px;
  background: #2a2a2a;
}

.sbfe-advanced {
  /* No extra styling needed, wraps MinecraftFilterEditor */
}

.sbfe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #444;
}

.sbfe-matchMode {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sbfe-matchLabel {
  font-size: 12px;
  color: #aaa;
  margin-right: 4px;
}

.sbfe-matchButton {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid #555;
  background: #333;
  color: #ccc;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.sbfe-matchButton:hover {
  background: #444;
  border-color: #666;
}

.sbfe-matchActive {
  background: #4a6a9a;
  border-color: #5a7aaa;
  color: #fff;
}

.sbfe-advancedButton,
.sbfe-simpleButton {
  padding: 4px 10px;
  font-size: 11px;
  border: 1px solid #555;
  background: #333;
  color: #aaa;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.sbfe-advancedButton:hover,
.sbfe-simpleButton:hover {
  background: #444;
  color: #fff;
}

.sbfe-simpleButton.sbfe-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sbfe-search {
  display: flex;
  margin-bottom: 12px;
}

.sbfe-search input {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid #555;
  background: #222;
  color: #fff;
  border-radius: 3px;
}

.sbfe-search input:focus {
  outline: none;
  border-color: #5a7aaa;
}

.sbfe-addCustom {
  margin-left: 4px;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid #555;
  background: #4a6a4a;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
}

.sbfe-addCustom:hover {
  background: #5a7a5a;
}

.sbfe-category {
  margin-bottom: 12px;
}

.sbfe-categoryName {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: bold;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid #333;
}

.sbfe-tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sbfe-tag {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid #444;
  background: #333;
  color: #ccc;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sbfe-tag svg:first-of-type {
  margin-right: 4px;
}

.sbfe-tag:hover {
  background: #3a3a3a;
  border-color: #555;
}

.sbfe-tagSelected {
  background: #3a5a3a;
  border-color: #4a7a4a;
  color: #8f8;
}

.sbfe-tagSelected:hover {
  background: #4a6a4a;
}

.sbfe-tagLabel {
  user-select: none;
}

.sbfe-summary {
  margin-top: 12px;
  padding: 8px;
  font-size: 12px;
  background: #333;
  border-radius: 3px;
  border: 1px solid #444;
  color: #ccc;
}

.sbfe-summaryNote {
  color: #888;
  font-style: italic;
}

.miet-outer {
  display: table;
  margin-top: 8px !important;
  min-width: 300px;
  width: 100%;
}

.miet-toolBarRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 8px;
}

.miet-actionListDropdown {
  flex: 1;
  min-width: 0;
}

.miet-inner {
  display: table-row;
}

.miet-cell {
  display: table-cell;
}

.miet-input {
  width: 60px;
  max-width: 60px;
}

.miet-input input {
  min-width: 55px;
  width: 52px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.miet-ambient {
  display: table-cell;
  width: 50px;
  max-width: 50px;
}

.miet-ambient button {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0px;
}

.ead-area {
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 20px 4px 20px;
  box-sizing: border-box;
}

.ead-n-area {
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 8px 10px;
  box-sizing: border-box;
}

.ead-areaNoScroll {
  width: 100%;
  max-width: 100%;
  padding: 4px 20px 4px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.ead-areaDesigner {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 4px 20px 4px 20px;
  box-sizing: border-box;
}

.ead-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.ead-header {
  padding-top: 16px;
  padding-bottom: 8px;
  font-weight: 600;
  font-size: large;
}

.ead-tabRow {
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid rgba(82, 165, 53, 0.4);
  padding: 8px 8px 0 8px;
  margin-bottom: 8px;
  border-radius: 3px 3px 0 0;
}

.ead-tabRow .MuiButton-root {
  padding-bottom: 0;
  margin-bottom: -2px;
  border-radius: 4px 4px 0 0;
  min-width: auto;
}

.ead-tabRow .MuiStack-root {
  gap: 2px !important;
}

.ead-tabRow .label-tab {
  border-bottom: 2px solid rgba(74, 69, 67, 1);
  position: relative;
  z-index: 1;
}

.ead-tabRow .label-deseltab {
  border-bottom: 2px solid rgba(82, 165, 53, 0.4);
}

.ead-n-header {
  padding: 6px 8px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
  background-color: rgba(0, 0, 0, 0.2);
  border-left: 3px solid #52a535;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ead-openFullBtn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
  opacity: 0.7;
  transition:
    opacity 0.15s,
    background-color 0.15s;
}

.ead-openFullBtn:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.ead-codeSnippet {
  background-color: rgba(0, 0, 0, 0.45);
  font-family: "Consolas", "Courier New", Courier, monospace;
  padding: 3px 6px;
  border-radius: 3px;
  text-wrap: nowrap;
}

.ead-cgToggle {
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  display: inline-block;
  margin-right: 3px;
  margin-bottom: 3px;
  text-wrap: wrap;
  padding: 0px 8px 0px 2px;
}

.ead-addTriggerArea {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 100px 230px 1fr;
  margin-bottom: 10px;
  align-items: center;
}

.ead-n-addTriggerArea {
  margin-top: 8px;
  margin-bottom: 10px;
}

.ead-addTriggerInstruction {
  grid-column: 1;
  padding-top: 6px;
  font-size: 13px;
  opacity: 0.85;
}

.ead-n-addTriggerInstruction {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 13px;
  opacity: 0.85;
}

.ead-addTriggerArea .ui-dropdown__container {
  width: 220px;
}

.ead-n-addTriggerArea .ui-dropdown__container {
  width: 220px;
}

.ead-addTriggerDropdown {
  grid-column: 2;
}

.ead-n-addTriggerDropdown {
  padding-bottom: 4px;
}

.ead-addTriggerButton {
  grid-column: 3;
}

.ead-n-addTriggerButton {
  padding-bottom: 4px;
}

.ead-cgAdd {
  background-color: rgba(82, 165, 53, 0.4);
}

.ead-cgRemove {
  background-color: rgba(200, 60, 60, 0.4);
}

.ead-icon {
  min-width: 18px;
  display: inline-block;
}

.ead-componentGroupsHeaderInfo {
  padding-bottom: 4px;
}

.ead-componentGroupsBin {
  padding: 4px;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 4px;
}

.ead-triggerTitle {
  padding-bottom: 8px;
  padding-top: 16px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.7;
}

.ead-n-triggerTitle {
  padding-bottom: 6px;
  padding-top: 8px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.7;
}

.ead-actionsTitle {
  padding-bottom: 8px;
  padding-top: 16px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.7;
}

.ead-info {
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.5;
}

.ead-actionSetBin {
  padding: 8px;
  border-radius: 4px;
  margin-top: 8px;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

.ead-instruction {
  padding-bottom: 4px;
}

.eas-area {
  padding: 8px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 4px;
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100%;
}

.eat-area {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 4px;
  margin-top: 8px;
  box-sizing: border-box;
}

.eat-areaNoScroll {
  width: 100%;
  max-width: 100%;
  padding: 12px 20px;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 4px;
  box-sizing: border-box;
}

.eat-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.eat-header {
  padding-top: 16px;
  padding-bottom: 8px;
  font-weight: 600;
  font-size: large;
}

.eat-codeSnippet {
  background-color: rgba(0, 0, 0, 0.45);
  font-family: "Consolas", "Courier New", Courier, monospace;
  padding: 3px 6px;
  border-radius: 3px;
  text-wrap: nowrap;
}

.eat-conditionLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.7;
  padding-bottom: 6px;
}

.eat-conditionsBin {
  padding: 6px 10px 8px 10px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 4px;
  margin-bottom: 2px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.eat-toolbarArea {
  padding-top: 8px;
  border-top: 2px solid rgba(255, 255, 255, 0.15);
  margin-top: 10px;
}

.eat-toolbarArea .ui-toolbar__item {
  height: 50px;
}

.eat-toolbarLabel {
  grid-column: 1;
  padding-top: 4px;
}

.eat-toolbar {
  grid-column: 2;
}

.eat-mcBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border: none;
  cursor: pointer;
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  color: #fff;
  background-color: #4a4a4a;
  box-shadow:
    inset -2px -3px 0 #2a2a2a,
    inset 2px 2px 0 #6a6a6a;
  margin-right: 4px;
  min-width: 140px;
}

.eat-mcBtn:hover {
  background-color: #5a5a5a;
  box-shadow:
    inset -2px -3px 0 #3a3a3a,
    inset 2px 2px 0 #7a7a7a;
}

.eat-mcBtn:active {
  background-color: #3a3a3a;
  box-shadow:
    inset 2px 3px 0 #2a2a2a,
    inset -2px -2px 0 #4a4a4a;
}

.eat-mcBtn svg {
  margin-right: 5px;
}

.eat-mcBtn-active {
  background-color: #3a6a2a;
  box-shadow:
    inset -2px -3px 0 #1e4d14,
    inset 2px 2px 0 #52a535;
}

.eat-mcBtn:disabled {
  opacity: 0.5;
  cursor: default;
}

.mifics-toolbarInner .eat-mcBtn {
  min-width: auto;
}

.eat-cgToggle {
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  margin-bottom: 4px;
  text-wrap: wrap;
  padding: 3px 10px 3px 6px;
  font-size: 12px;
  text-transform: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  min-height: 30px;
}

.eat-cgToggle:hover {
  border-color: rgba(128, 128, 128, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.eat-addTriggerArea {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 100px 230px 1fr;
  margin-bottom: 10px;
  align-items: center;
}

.eat-addTriggerInstruction {
  grid-column: 1;
  padding-top: 6px;
  font-size: 13px;
  opacity: 0.85;
}

.eat-addTriggerArea .ui-dropdown__container {
  width: 220px;
}

.eat-addTriggerDropdown {
  grid-column: 2;
}

.eat-addTriggerButton {
  grid-column: 3;
}

.eat-cgAdd {
  background-color: rgba(82, 165, 53, 0.25);
  border-color: rgba(82, 165, 53, 0.5);
}

.eat-cgAdd:hover {
  background-color: rgba(82, 165, 53, 0.35);
}

.eat-cgRemove {
  background-color: rgba(200, 60, 60, 0.25);
  border-color: rgba(200, 60, 60, 0.5);
}

.eat-cgRemove:hover {
  background-color: rgba(200, 60, 60, 0.35);
}

.eat-icon {
  min-width: 18px;
  display: inline-block;
}

.eat-componentGroupsHeaderInfo {
  padding-bottom: 6px;
  padding-top: 8px;
  font-size: 12px;
  opacity: 0.7;
}

.eat-componentGroupsBin {
  padding: 8px;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
}

.eat-triggerTitle {
  padding-bottom: 8px;
  padding-top: 16px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.7;
}

.eat-actionsTitle {
  padding-bottom: 8px;
  padding-top: 16px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.7;
}

.eat-functionsHeader {
  padding-top: 4px;
}

/* Override MUI outlined input background inside action tiles
   so the text field blends with the tile's mid-gray background
   instead of using the global offBlack (#1a1918). */
.eat-area .MuiOutlinedInput-root,
.eat-areaNoScroll .MuiOutlinedInput-root {
  background-color: rgba(0, 0, 0, 0.18);
}

/* Match the floating label pill background to the tile surface
   so it doesn't show a dark rectangle behind the label text. */
.eat-area .MuiInputLabel-shrink,
.eat-areaNoScroll .MuiInputLabel-shrink {
  background-color: transparent;
}

.eat-instruction {
  padding-bottom: 4px;
}

/**
 * Lazy loading fallback styles
 */

.lazy-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
  background-color: rgba(0, 0, 0, 0.1);
}

.lazy-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(82, 165, 53, 0.3);
  border-top: 3px solid #52a535;
  border-radius: 50%;
  animation: lazy-spin 1s linear infinite;
}

.lazy-loading-message {
  margin-top: 12px;
  font-size: 14px;
  color: #888;
}

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

/* Dark mode support */
.lazy-loading-dark .lazy-loading-container {
  background-color: rgba(255, 255, 255, 0.05);
}

.lazy-loading-dark .lazy-loading-message {
  color: #aaa;
}

.p3-data {
  display: table;
  max-width: 170px;
  margin-top: 2px !important;
}

.p3-inner {
  display: table-row;
}

.p3-label {
  font-size: small;
}

.p3-cell {
  display: table-cell;
}

.p3-input {
  width: 60px;
  max-width: 60px;
}

.p3-input input {
  min-width: 55px;
  width: 52px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.p3-ambient {
  display: table-cell;
  width: 50px;
  max-width: 50px;
}

.p3-ambient button {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0px;
}

.ver-data {
  display: table;
  max-width: 170px;
  margin-top: 2px !important;
}

.ver-inner {
  display: table-row;
}

.ver-cell {
  display: table-cell;
}

.ver-input {
  width: 60px;
  max-width: 60px;
}

.ver-input input {
  min-width: 55px;
  width: 52px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.ver-ambient {
  display: table-cell;
  width: 50px;
  max-width: 50px;
}

.ver-ambient button {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0px;
}

.rng-data {
  display: table;
  max-width: 170px;
  margin-top: 2px !important;
}

.rng-inner {
  display: table-row;
}

.rng-label {
  font-size: large;
}

.rng-cell {
  display: table-cell;
}

.rng-input {
  width: 60px;
  max-width: 60px;
}

.rng-input input {
  min-width: 55px;
  width: 52px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.rng-intro {
  display: table-cell;
  padding-right: 9px;
  text-wrap: nowrap;
}

.rng-joiner {
  display: table-cell;
  padding-left: 4px;
  padding-right: 9px;
}

.rng-ambient {
  display: table-cell;
  width: 50px;
  max-width: 50px;
}

.rng-ambient button {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0px;
}

.sarr-outer {
  max-width: 570px;
  margin-top: 6px !important;
  margin-bottom: 4px;
}

.sarr-add BUTTON {
  padding-left: 3px;
  padding-right: 3px;
  margin-top: 4px;
  margin-bottom: 6px;
  min-width: 30px;
  width: 30px;
}

.sarr-inner {
  display: grid;
}

.sarr-inner .ui-dropdown {
  display: inherit !important;
}

.sarr-inner .ui-dropdown__container {
  width: inherit !important;
}

.sarr-input {
  grid-column: 1;
}

.sarr-input .ui-box {
  min-width: 500px;
}

.sarr-input INPUT {
  padding-left: 6px !important;
  padding-right: 6px !important;
  min-width: 500px;
  margin-bottom: 2px;
}

.sarr-none {
  padding-bottom: 30px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MINECRAFT-STYLED AUTOCOMPLETE TAGS
   Replaces rounded MUI chips with blocky beveled Minecraft inventory style.
   ───────────────────────────────────────────────────────────────────────────── */

.sarr-inner .MuiChip-root {
  border-radius: 0;
  background: #505050;
  color: #ffffff;
  font-weight: 600;
  font-size: 11px;
  height: 26px;
  margin: 3px 4px 3px 0;
  box-shadow:
    inset -1px -1px 0 0 #303030,
    inset 1px 1px 0 0 #707070;
  transition:
    background 0.1s ease,
    box-shadow 0.1s ease;
}

.sarr-inner .MuiChip-root:hover {
  background: #5a5a5a;
  box-shadow:
    inset -1px -1px 0 0 #252525,
    inset 1px 1px 0 0 #808080;
}

.sarr-inner .MuiChip-label {
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  padding: 0 4px 0 6px;
}

/* Replace round cancel icon with a square x button */
.sarr-inner .MuiChip-deleteIcon {
  color: transparent !important;
  font-size: 14px;
  margin-right: 3px !important;
  margin-left: 3px !important;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: #3a3a3a;
  box-shadow:
    inset -1px -1px 0 0 #252525,
    inset 1px 1px 0 0 #505050;
  /* Crosshair x via inline SVG background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cline x1=%274%27 y1=%274%27 x2=%2712%27 y2=%2712%27 stroke=%27%23999%27 stroke-width=%272%27/%3E%3Cline x1=%2712%27 y1=%274%27 x2=%274%27 y2=%2712%27 stroke=%27%23999%27 stroke-width=%272%27/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
}

.sarr-inner .MuiChip-deleteIcon:hover {
  color: transparent;
  background-color: #4a2020;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cline x1=%274%27 y1=%274%27 x2=%2712%27 y2=%2712%27 stroke=%27%23ff6b6b%27 stroke-width=%272%27/%3E%3Cline x1=%2712%27 y1=%274%27 x2=%274%27 y2=%2712%27 stroke=%27%23ff6b6b%27 stroke-width=%272%27/%3E%3C/svg%3E");
}

/* Hide the SVG path inside the delete icon */
.sarr-inner .MuiChip-deleteIcon path {
  display: none;
}

/* Square off the autocomplete input to match */
.sarr-inner .MuiOutlinedInput-root {
  border-radius: 0;
}

.sarr-inner .MuiOutlinedInput-notchedOutline {
  border-radius: 0;
  border-color: rgba(255, 255, 255, 0.15);
}

.sarr-inner .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.3);
}

.sarr-inner .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #52a535;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUMMARIZER STYLES - Minecraft Creator Tools
   
   Design Philosophy:
   - Semantic styling that adapts to light/dark themes
   - Blocky aesthetic consistent with Minecraft
   - Green accent (#52a535) for positive sentiment
   - Clear visual hierarchy with emphasis levels
   
   See: docs/ux/Components.md, docs/ux/ShapeBorderGuidelines.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   CONTAINER VARIANTS
   ───────────────────────────────────────────────────────────────────────────── */

.sum-container {
  line-height: 1.5;
  font-size: 13px;
}

/* Card variant - prominent display with background */
.sum-card {
  padding: 12px 16px;
  margin: 8px 0 16px 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(180, 180, 180, 0.5);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Inline variant - no container styling */
.sum-inline {
  display: inline;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}

/* Compact variant - smaller text, minimal spacing */
.sum-compact {
  padding: 6px 10px;
  margin: 4px 0;
  font-size: 12px;
  background: rgba(82, 165, 53, 0.04);
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOKEN BASE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.sum-token {
  /* Default: inherit all styles */
}

.sum-phrase {
  /* Phrases are inline containers */
}

.sum-separator {
  color: inherit;
  opacity: 0.7;
}

.sum-prefix {
  color: inherit;
  opacity: 0.8;
}

.sum-period {
  color: inherit;
}

.sum-plain {
  font-style: normal;
}

/* Capitalize the first letter when no prefix is provided */
.sum-capitalize-first::first-letter {
  text-transform: uppercase;
}

.sum-icon {
  margin-right: 4px;
}

/* Icon after text */
.sum-token .sum-icon:last-child {
  margin-right: 0;
  margin-left: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EMPHASIS LEVELS
   ───────────────────────────────────────────────────────────────────────────── */

.sum-emphasis-strong {
  font-weight: 600;
}

.sum-emphasis-subtle {
  opacity: 0.7;
  font-size: 0.92em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SENTIMENT COLORS (adapt to theme)
   ───────────────────────────────────────────────────────────────────────────── */

/* Positive - Green (good values, buffs, strengths) */
.sum-sentiment-positive {
  color: #2e7d32;
}

/* Negative - Red (bad values, debuffs, weaknesses) */
.sum-sentiment-negative {
  color: #c62828;
}

/* Warning - Orange (dangerous, caution) */
.sum-sentiment-warning {
  color: #ef6c00;
}

/* Info - Blue (informational highlights) */
.sum-sentiment-info {
  color: #1565c0;
}

/* Dark theme overrides - lighter colors for readability */
.sum-dark .sum-sentiment-positive,
.sum-dark.sum-sentiment-positive {
  color: #66bb6a;
}

.sum-dark .sum-sentiment-negative,
.sum-dark.sum-sentiment-negative {
  color: #ef5350;
}

.sum-dark .sum-sentiment-warning,
.sum-dark.sum-sentiment-warning {
  color: #ffa726;
}

.sum-dark .sum-sentiment-info,
.sum-dark.sum-sentiment-info {
  color: #42a5f5;
}

.sum-dark .sum-card,
.sum-dark.sum-card {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: rgba(200, 200, 200, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEMANTIC ROLES
   ───────────────────────────────────────────────────────────────────────────── */

/* Value role - data values (numbers, identifiers) */
.sum-role-value {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95em;
  background: rgba(82, 165, 53, 0.12);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Unit role - unit labels (HP, blocks, seconds) */
.sum-role-unit {
  opacity: 0.85;
  font-size: 0.9em;
}

/* Label role - category names, labels */
.sum-role-label {
  font-weight: 500;
}

/* Comparison role - reference comparisons */
.sum-role-comparison {
  font-style: italic;
  opacity: 0.9;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BADGE STYLING
   ───────────────────────────────────────────────────────────────────────────── */

.sum-badge {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 500;
  background: rgba(107, 101, 98, 0.15);
  border: 1px solid rgba(107, 101, 98, 0.25);
}

/* Sentiment-colored badges */
.sum-badge.sum-sentiment-positive {
  background: rgba(46, 125, 50, 0.12);
  border-color: rgba(46, 125, 50, 0.3);
}

.sum-badge.sum-sentiment-negative {
  background: rgba(198, 40, 40, 0.12);
  border-color: rgba(198, 40, 40, 0.3);
}

.sum-badge.sum-sentiment-warning {
  background: rgba(239, 108, 0, 0.12);
  border-color: rgba(239, 108, 0, 0.3);
}

.sum-badge.sum-sentiment-info {
  background: rgba(21, 101, 192, 0.12);
  border-color: rgba(21, 101, 192, 0.3);
}

/* Dark theme badge overrides */
.sum-dark .sum-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.sum-dark .sum-badge.sum-sentiment-positive {
  background: rgba(102, 187, 106, 0.15);
  border-color: rgba(102, 187, 106, 0.3);
}

.sum-dark .sum-badge.sum-sentiment-negative {
  background: rgba(239, 83, 80, 0.15);
  border-color: rgba(239, 83, 80, 0.3);
}

.sum-dark .sum-badge.sum-sentiment-warning {
  background: rgba(255, 167, 38, 0.15);
  border-color: rgba(255, 167, 38, 0.3);
}

.sum-dark .sum-badge.sum-sentiment-info {
  background: rgba(66, 165, 245, 0.15);
  border-color: rgba(66, 165, 245, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMBINED EFFECTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Strong + Positive (e.g., high health value) */
.sum-emphasis-strong.sum-sentiment-positive {
  font-weight: 700;
}

/* Strong + Negative (e.g., critical warning) */
.sum-emphasis-strong.sum-sentiment-negative {
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANIMATIONS (optional, can be enabled via class)
   ───────────────────────────────────────────────────────────────────────────── */

.sum-animate .sum-token {
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

/* Sparkle animation for special effects */
@keyframes sum-sparkle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.sum-sparkle {
  animation: sum-sparkle 1.5s ease-in-out infinite;
}

.ghre-area {
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  width: calc(100% - 2px);
  height: 100%;
}

.ghre-toolbar {
  padding: 2px;
}

.pie-outer {
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
}

.pie-loadingLabel {
  padding: 10px;
}

.pie-highlight-line {
  background-color: rgba(255, 213, 0, 0.2) !important;
  animation: pie-fade-highlight 2s ease-out;
}

@keyframes pie-fade-highlight {
  0% {
    background-color: rgba(255, 213, 0, 0.4);
  }
  100% {
    background-color: rgba(255, 213, 0, 0);
  }
}

.pie-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 52px 1fr;
}

.pie-variantView {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  padding-left: 4px;
  padding-right: 4px;
}

.pie-viewTabs {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  overflow-x: auto;
}
.pie-viewTabs button {
  min-width: inherit;
}

.pie-interior {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

.pie-variantView .ui-dropdown__container {
  width: 220px !important;
}

.dme-area {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow-y: auto;
}

.dme-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.dme-header {
  font-size: 16pt;
  padding-top: 15px;
  padding-left: 30px;
  padding-bottom: 2px;
}

.dme-incompleteItem {
  background-color: red;
  padding: 4px;
  border-radius: 2px;
}

.dme-moduleProps {
  padding-left: 20px;
  padding-top: 40px;
  padding-bottom: 0px;
}

.dme-classEditorOuter {
  display: grid;
  width: 100%;
  grid-template-columns: 226px 1fr;
}

.dme-classList {
  grid-column: 1;
  border-right: outset 1px black;
  overflow-y: scroll;
}

.dme-classList LI {
  padding-left: 6px;
  margin-left: 0px;
}

.dme-classEditor {
  grid-column: 2;
  overflow-y: scroll;
}

.dce-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.dce-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.dce-header {
  font-size: 16pt;
  padding-top: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
}

.dce-classProps {
  padding-left: 4px;
  padding-top: 4px;
}

.dce-classCard {
  padding: 4px;
  margin: 4px;
  margin-bottom: 10px;
  border: solid 1px black;
}

.dsee-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.dsee-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.dsee-header {
  font-size: 16pt;
  padding-top: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
}

.dsee-enumProps {
  padding-left: 4px;
  padding-top: 4px;
}

.dsee-enumCard {
  padding: 4px;
  margin: 4px;
  margin-bottom: 10px;
  border: solid 1px black;
}

.dcse-area {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow-y: auto;
}

.dcse-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.dcse-header {
  font-size: 16pt;
  padding-top: 15px;
  padding-left: 30px;
  padding-bottom: 2px;
}

.dcse-moduleProps {
  padding-left: 20px;
  padding-top: 40px;
  padding-bottom: 10px;
  border-bottom: outset 1px black;
}

.dcse-classEditorOuter {
  display: grid;
  width: 100%;
  grid-template-columns: 226px 1fr;
}

.dcse-classList {
  grid-column: 1;
  border-right: outset 1px black;
  overflow-y: scroll;
}

.dcse-classList LI {
  padding-left: 6px;
  margin-left: 0px;
}

.dcse-classEditor {
  grid-column: 2;
  overflow-y: scroll;
}

.dcomme-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.dcomme-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.dcomme-header {
  font-size: 16pt;
  padding-top: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
}

.dcomme-commandProps {
  padding-left: 4px;
  padding-top: 4px;
}

.dcomme-commandCard {
  padding: 12px;
  margin: 4px;
  margin-bottom: 10px;
  border: solid 1px black;
}

.dcomme-section {
  font-size: 14pt;
  padding-top: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
}

.npme-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.npme-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.npme-mainArea {
}

.npme-componentList {
  grid-column: 1;
  padding-top: 40px;
}

.npme-componentListInterior {
  overflow-y: scroll;
  overflow-x: hidden;
}

.npme-itemBin {
  grid-column: 2;
}

.npme-header {
  font-size: 16pt;
  padding-top: 10px;
  padding-left: 30px;
  padding-bottom: 13px;
}

.npme-form {
  padding-top: 20px;
  padding-left: 20px;
}

.npme-componentHeader {
  padding-top: 20px;
  font-size: 14pt;
  padding: 12px;
  padding-top: 40px;
  padding-bottom: 14px;
}

.npme-extraArea {
  margin-bottom: 5px;
}

.npme-commands {
  display: grid;
  padding: 3px;
  grid-template-columns: 200px 1fr;
}

.npme-toolBarArea {
  grid-column: 1;
}

.npme-extraArea {
  grid-column: 2;
}

.npme-loading {
  padding: 4px;
}

.bpme-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.bpme-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.bpme-header {
  padding-top: 10px;
  padding-left: 30px;
  padding-bottom: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bpme-header-title {
  font-size: 16pt;
  font-weight: 600;
}

.bpme-header-subtitle {
  font-size: 10pt;
  letter-spacing: 1px;
  opacity: 0.7;
  text-transform: uppercase;
}

.bpme-header-uuid {
  font-size: 9pt;
  opacity: 0.65;
}

.bpme-header-uuid-label {
  margin-right: 6px;
  font-weight: 600;
}

.bpme-header-uuid-value {
  font-family: "Consolas", "Courier New", monospace;
}

.bpme-form {
  padding-top: 20px;
  padding-left: 20px;
}

.bpme-loading {
  padding: 4px;
}

.ifm-outer {
  image-rendering: pixelated;
}

.ifm-image {
  padding: 6px;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: contain;
}

.ifm-float {
  position: absolute;
  margin-top: 3px;
  margin-left: 3px;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.ifm-float BUTTON {
  padding-left: 0px;
  padding-right: 0px;
  width: 36px;
  min-width: inherit;
  color: white;
}

.ie-outer {
  image-rendering: pixelated;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 150px);
}

.ie-toolBar {
  padding-left: 80px;
  flex-shrink: 0;
}

.ie-contents {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.ie-image {
  padding: 6px;
  image-rendering: pixelated;
  display: block;
}

.ie-float {
  position: absolute;
  margin: 8px;
  z-index: 100;
}

.ie-float BUTTON {
  padding-left: 0px;
  padding-right: 0px;
  width: 36px;
  min-width: inherit;
}

.dfe-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
  display: grid;
}

.dfe-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.dfe-header {
  font-size: 16pt;
  padding-top: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
  grid-column-start: 1;
  grid-column-end: 3;
}

.dfe-form {
  padding-left: 4px;
  padding-top: 4px;
  grid-column: 1;
  grid-row: 2;
}

.dfe-sourceFormform {
  padding-left: 4px;
  padding-top: 4px;
  grid-column: 2;
  grid-row: 2;
}

/* ============================================
   Project Info Display - Summary Page Styles
   Based on Minecraft Creator Tools UX Guidelines
   ============================================ */

/* ---- Hero Section (matches ProjectActions) ---- */
.pid-hero {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(82, 165, 53, 0.12) 0%, rgba(82, 165, 53, 0.06) 50%, transparent 100%);
  border-bottom: 2px solid rgba(82, 165, 53, 0.5);
  position: relative;
}

.pid-hero::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, #52a535 0%, transparent 100%);
}

.pid-heroContent {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.pid-heroImage {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(82, 165, 53, 0.4);
}

.pid-heroImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.pid-heroText {
  flex: 1;
  min-width: 0;
}

.pid-titleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.pid-heroTitle {
  font-family: "Minecrafter", "Noto Sans", sans-serif;
  font-size: 22px;
  font-weight: normal;
  margin: 0;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pid-heroCreator {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 6px;
}

.pid-heroDescription {
  font-size: 13px;
  opacity: 0.75;
  margin: 0;
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
}

/* ---- Stats Bar (matches ProjectActions) ---- */
.pid-statsBar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 32px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  background-color: rgba(0, 0, 0, 0.1);
  align-items: center;
}

.pid-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(128, 128, 128, 0.12);
  padding: 8px 14px;
  border-radius: 2px; /* Blocky Minecraft style - not pill-shaped */
  border: 1px solid rgba(128, 128, 128, 0.2);
  font-size: 13px;
  line-height: 16px;
}

.pid-statIcon {
  color: #52a535;
  font-size: 14px;
  vertical-align: middle;
}

.pid-statCount {
  font-weight: 600;
  font-family: "Consolas", "Monaco", monospace;
  color: #52a535;
  vertical-align: middle;
  line-height: 26px;
  position: relative;
  top: 1px;
}

.pid-statLabel {
  opacity: 0.85;
  vertical-align: middle;
  line-height: 16px;
}

/* ---- Responsive Layout ---- */
@media only screen and (min-width: 1100px) {
  .pid-toolArea {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  }

  .pid-suiteDropdown .ui-dropdown__container {
    width: 210px;
  }

  .pis-contentSummaryArea {
    grid-template-columns: minmax(200px, 1.5fr) repeat(5, minmax(70px, 100px));
  }

  .pis-statsGrid {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
}

@media only screen and (max-width: 1100px) {
  .pid-toolArea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  }

  .pid-suiteDropdown .ui-dropdown__container {
    width: 165px;
  }

  .pis-contentSummaryArea {
    grid-template-columns: minmax(150px, 1fr) repeat(5, minmax(50px, 80px));
  }

  .pis-statsGrid {
    grid-template-columns: 1fr;
  }
}

/* ---- Base Layout ---- */
.pid-hiddenButton {
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-block;
  cursor: pointer;
}

.pid-hiddenButton:hover .mc-tab:not(.mc-tab--selected) {
  color: inherit;
  opacity: 0.85;
}

.pid-hiddenButton:focus {
  outline: 2px solid #52a535;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Minecraft-Style Tabs ---- */
.pid-topToolbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-right: 16px;
  border-right: 1px solid rgba(128, 128, 128, 0.2);
  padding-right: 16px;
}

.mc-tab {
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.mc-tab:hover:not(.mc-tab--selected) {
  opacity: 0.85;
}

.pid-suiteTitle {
  font-size: 13px;
  opacity: 0.7;
  margin-left: 8px;
  display: flex;
  align-items: center;
}

.pid-suiteDropdown {
  flex-shrink: 0;
}

.pid-actionToolbar {
  margin-left: auto;
}

.pid-outer {
  height: 100%;
  text-align: left;
  vertical-align: top;
}

.pid-header {
  font-family: "Minecrafter", "Noto Sans", sans-serif;
  font-size: 18px;
  margin-bottom: 16px;
  color: inherit;
  letter-spacing: 0.5px;
}

/* Page Title - Minecraft-style header with subtle gradient */
.pid-title {
  font-family: "Noto Sans", sans-serif;
  font-size: 16pt;
  padding: 16px 20px;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.3px;
  /* Subtle gradient background - works in both light and dark modes */
  background: linear-gradient(135deg, rgba(82, 165, 53, 0.12) 0%, rgba(82, 165, 53, 0.06) 50%, transparent 100%);
  border-bottom: 2px solid rgba(82, 165, 53, 0.5);
  position: relative;
}

/* Accent line effect */
.pid-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, #52a535 0%, transparent 100%);
}

.pid-filterToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background-color: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(128, 128, 128, 0.12);
  align-items: center;
}

/* Override Fluent UI toolbar styling for filter chips */
.pid-filterToolbar .ui-toolbar {
  gap: 8px;
}

.pid-filterToolbar .ui-toolbar__item {
  margin: 0;
}

.pid-filterActions {
  flex-wrap: wrap;
}

.pid-filterControl {
  display: inline-flex;
  margin: 0;
}

/* ---- Summary Area ---- */
.pid-summaryArea {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  min-height: 0; /* Required for flex child to scroll properly */
}

.pis-summaryArea {
  margin-bottom: 24px;
}

/* ---- Section Cards ---- */
.pis-sectionCard {
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(128, 128, 128, 0.15);
}

.pis-sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 0;
  user-select: none;
}

.pis-sectionTitle {
  font-family: "Minecrafter", "Noto Sans", sans-serif;
  font-size: 16px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pis-sectionBadge {
  background-color: #52a535;
  color: white;
  padding: 2px 8px;
  border-radius: 2px; /* Blocky Minecraft style - not pill-shaped */
  border: 1px solid #1e4d14;
  font-size: 12px;
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  text-shadow: 1px 1px 0px #2a641c;
}

.pis-sectionToggle {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid currentColor;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.pis-sectionToggle.pis-expanded {
  transform: rotate(180deg);
}

.pis-sectionToggle.pis-collapsed {
  border-left: 10px solid currentColor;
  border-right: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.pis-sectionContent {
  padding-top: 12px;
}

/* ---- Area Headers ---- */
.pis-areaHeader {
  font-family: "Minecrafter", "Noto Sans", sans-serif;
  font-size: 16px;
  padding-top: 20px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 2px solid #52a535;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pis-areaHeader::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: #52a535;
  border-radius: 2px;
}

/* ---- Content Summary Grid ---- */
.pis-contentSummaryHeader {
  font-family: "Minecrafter", "Noto Sans", sans-serif;
  font-size: 16px;
  padding: 16px 0 12px 0;
  margin-top: 24px;
  border-bottom: 2px solid #52a535;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pis-contentSummaryHeader::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: #52a535;
  border-radius: 2px;
}

.pis-contentSummaryArea {
  display: grid;
  padding: 0;
  margin-top: 8px;
  gap: 4px 16px;
  font-size: 13px;
}

.pis-itemHeadCell {
  grid-row: 1;
  font-weight: 600;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.pis-itemSummName {
  grid-column: 1;
  padding: 8px;
  border-radius: 4px;
}

.pis-itemSummName:hover {
  background-color: rgba(82, 165, 53, 0.1);
}

.pis-itemSummCt,
.pis-itemSummCount {
  grid-column: 2;
  padding: 8px;
  text-align: right;
  font-family: "Consolas", "Monaco", monospace;
}

.pis-itemDataSummTotal,
.pis-itemSummTotal {
  grid-column: 3;
  padding: 8px;
  text-align: right;
  font-family: "Consolas", "Monaco", monospace;
}

.pis-itemSummMax,
.pis-itemDataSummMax {
  grid-column: 4;
  padding: 8px;
  text-align: right;
  font-family: "Consolas", "Monaco", monospace;
}

.pis-itemSummAvg,
.pis-itemDataSummAvg {
  grid-column: 5;
  padding: 8px;
  text-align: right;
  font-family: "Consolas", "Monaco", monospace;
}

.pis-itemSummMin,
.pis-itemDataSummMin {
  grid-column: 6;
  padding: 8px;
  text-align: right;
  font-family: "Consolas", "Monaco", monospace;
}

/* Alternating row backgrounds for grid */
.pis-itemSummName:nth-child(12n + 7),
.pis-itemSummCt:nth-child(12n + 8),
.pis-itemDataSummTotal:nth-child(12n + 9),
.pis-itemSummMax:nth-child(12n + 10),
.pis-itemSummAvg:nth-child(12n + 11),
.pis-itemSummMin:nth-child(12n + 12) {
  background-color: rgba(128, 128, 128, 0.05);
}

/* ---- Key Items Table ---- */
.pis-detailTable {
  width: 100%;
  vertical-align: top;
  border-collapse: separate;
  border-spacing: 0;
}

.pis-detailTable thead tr {
  background-color: rgba(128, 128, 128, 0.12);
}

.pis-detailTable thead td {
  padding: 12px 16px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.pis-detailTable tbody tr:hover {
  background-color: rgba(128, 128, 128, 0.08);
}

.pis-detailTable tbody tr:nth-child(even) {
  background-color: rgba(128, 128, 128, 0.04);
}

.pis-image {
  background-size: cover;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  border: 1px solid rgba(128, 128, 128, 0.15);
}

.pis-itemDataHeader {
  font-weight: bold;
  min-width: 150px;
}

.pis-itemValueHeader {
  width: 100%;
}

.pis-itemHeader {
  vertical-align: top;
  min-width: 200px;
  padding: 10px 16px;
  font-weight: 500;
}

.pis-itemDataCell {
  vertical-align: top;
  width: 100%;
  padding: 10px 16px;
}

.pis-itemData {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 13px;
}

/* ---- Search Area ---- */
.pis-searchArea {
  padding: 0 0 16px 0;
}

.pis-searchArea .ui-input__input {
  width: 100%;
  max-width: 400px;
  padding: 10px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 14px;
}

.pis-searchArea .ui-input__input:focus {
  border-color: #52a535;
  outline: none;
  box-shadow: 0 0 0 2px rgba(82, 165, 53, 0.2);
}

/* ---- Details Section ---- */
.pis-detailsSection {
  margin-top: 24px;
}

.pis-detailsToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid rgba(128, 128, 128, 0.15);
  background-color: rgba(128, 128, 128, 0.05);
  transition: background-color 0.2s ease;
  font-size: 14px;
  font-weight: 500;
}

.pis-detailsToggle:hover {
  background-color: rgba(128, 128, 128, 0.1);
  border-color: rgba(128, 128, 128, 0.3);
}

.pis-detailsContent {
  margin-top: 12px;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid rgba(128, 128, 128, 0.15);
  background-color: rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
}

/* ---- Stats Grid for categorized stats ---- */
.pis-statsGrid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.pis-statCard {
  padding: 16px;
  border-radius: 4px;
  border: 1px solid rgba(128, 128, 128, 0.15);
  background-color: rgba(128, 128, 128, 0.05);
  display: flex;
  flex-direction: column;
}

.pis-statCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.pis-statCardTitle {
  font-family: "Minecrafter", "Noto Sans", sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pis-statCardCount {
  background-color: #52a535;
  color: white;
  padding: 2px 10px;
  border-radius: 2px; /* Blocky Minecraft style - not pill-shaped */
  border: 1px solid #1e4d14;
  font-size: 12px;
  font-weight: 500;
  text-shadow: 1px 1px 0px #2a641c;
}

.pis-statItem {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}

.pis-statItem:not(:last-child) {
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
}

.pis-statLabel {
  opacity: 0.85;
  font-weight: 400;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pis-statValue {
  font-family: "Consolas", "Monaco", monospace;
  font-weight: 600;
  font-size: 13px;
  color: #52a535;
  flex-shrink: 0;
  text-align: right;
}

.pis-statValueMeta {
  font-size: 11px;
  opacity: 0.7;
  color: inherit;
  font-weight: 400;
}

/* ---- Prefix Group (grouped metrics with same prefix) ---- */
.pis-prefixGroup {
  background-color: rgba(128, 128, 128, 0.05);
  border-radius: 4px;
  margin-bottom: 8px;
  border: 1px solid rgba(128, 128, 128, 0.12);
  overflow: hidden;
}

.pis-prefixHeader {
  font-weight: 600;
  font-size: 13px;
  padding: 8px 12px;
  background-color: rgba(128, 128, 128, 0.08);
  border-bottom: 1px solid rgba(128, 128, 128, 0.12);
  color: inherit;
}

.pis-prefixContent {
  padding: 4px 12px;
}

.pis-prefixContent .pis-statItem {
  padding: 3px 0;
}

.pis-prefixContent .pis-statItemCard {
  margin: 4px 0;
}

/* ---- Stat Item Card (for combined lines/size stats) ---- */
.pis-statItemCard {
  background-color: rgba(128, 128, 128, 0.06);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(128, 128, 128, 0.12);
}

.pis-statItemCard:hover {
  background-color: rgba(128, 128, 128, 0.1);
  border-color: rgba(128, 128, 128, 0.25);
}

.pis-statItemHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.pis-statItemName {
  font-weight: 600;
  font-size: 13px;
}

.pis-statItemFileCount {
  font-size: 11px;
  opacity: 0.7;
  background-color: rgba(128, 128, 128, 0.15);
  padding: 2px 8px;
  border-radius: 2px; /* Blocky Minecraft style - not pill-shaped */
  border: 1px solid rgba(128, 128, 128, 0.2);
}

.pis-statItemMetrics {
  display: flex;
  gap: 16px;
}

.pis-statMetric {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pis-metricValue {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 15px;
  font-weight: 600;
  color: #52a535;
}

.pis-metricLabel {
  font-size: 11px;
  opacity: 0.7;
  text-transform: lowercase;
}

/* ---- Empty State ---- */
.pis-emptyState {
  text-align: center;
  padding: 48px 24px;
  opacity: 0.6;
}

.pis-emptyState-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.pis-emptyState-text {
  font-size: 16px;
}

/* ---- Items Area Container ---- */
.pid-areaOuter {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pid-tableWrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.pid-area {
  display: table;
  width: 100%;
  height: 100%;
  font-size: small;
  overflow: hidden;
}

.pid-header {
  padding-left: 10px;
  padding-top: 10px;
}

.pid-headerRow {
  display: table-row;
}

.pid-headerCell {
  display: table-cell;
  padding: 10px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: smaller;
}

.pid-headerTypeCell {
  width: 120px;
  min-width: 120px;
}

.pid-headerCodeCell {
  width: 110px;
  min-width: 90px;
}

.pid-headerActionsCell {
  width: 50px;
  min-width: 50px;
  text-align: center;
}

.pid-topToolbar {
  grid-column: 1;
}

.pid-suiteTitle {
  grid-column: 2;
  padding-top: 5px;
}

.pid-suiteDropdown {
  grid-column: 3;
}

.pid-actionToolbar {
  grid-column: 4;
}

.pid-validating {
  padding: 20px;
  padding-top: 19px;
}

/* ---- Mobile Card List ---- */
.pid-cardList {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pid-cardList .piid-card:last-child {
  border-bottom: none;
}

/* ---- Mobile Responsive Styles ---- */
.pid-title-mobile {
  font-size: 13pt;
  padding: 10px 14px;
}

.pid-toolArea-mobile {
  flex-wrap: nowrap;
  gap: 4px;
  padding: 6px 8px;
}

.pid-toolArea-mobile .pid-topToolbar {
  margin-right: 4px;
  padding-right: 4px;
  gap: 4px;
  border-right: 1px solid rgba(128, 128, 128, 0.2);
}

.pid-toolArea-mobile .pid-suiteDropdown {
  flex: 1;
  min-width: 0;
}

.pid-toolArea-mobile .pid-actionToolbar {
  flex-shrink: 0;
  margin-left: auto;
}

@media only screen and (max-width: 600px) {
  .pid-filterToolbar {
    gap: 4px;
    padding: 8px 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .pid-filterActions {
    flex-wrap: nowrap;
  }

  .pid-statsBar {
    padding: 10px 16px;
    gap: 8px;
  }

  .pid-stat {
    padding: 6px 10px;
    font-size: 12px;
  }

  .pid-hero {
    padding: 14px 16px;
  }

  .pid-heroTitle {
    font-size: 18px;
  }

  .pid-heroImage {
    width: 56px;
    height: 56px;
  }
}

/* ProjectInfoItemDisplay - Items View Row Styling */

/* Main row styling */
.piid-row {
  display: table-row;
  font-size: 13px;
  transition: background-color 0.15s ease;
}

.piid-row:hover {
  background-color: rgba(82, 165, 53, 0.08) !important;
}

.piid-rowClickable {
  cursor: pointer;
}

.piid-rowClickable:focus {
  outline: 2px solid rgba(82, 165, 53, 0.8);
  outline-offset: -2px;
}

/* Cell base styling */
.piid-cell {
  display: table-cell;
  padding: 5px 8px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Type indicator cell */
.piid-typeCell {
  width: 120px;
  min-width: 120px;
  padding-left: 8px;
}

.piid-typeContainer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.piid-typeIcon {
  font-size: 14px;
}

/* Type indicator background colors */
.piid-indicator-error {
  border-left: 3px solid #e74c3c;
}

.piid-indicator-warning {
  border-left: 3px solid #f39c12;
}

.piid-indicator-recommendation {
  border-left: 3px solid #3498db;
}

.piid-indicator-info {
  border-left: 3px solid #7f8c8d;
}

.piid-indicator-success {
  border-left: 3px solid #27ae60;
}

.piid-indicator-fail {
  border-left: 3px solid #c0392b;
}

/* Type badges - blocky Minecraft style with high contrast */
.piid-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 2px; /* Blocky Minecraft style - not pill-shaped */
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* High contrast badges - solid backgrounds with white text */
.piid-badge-error {
  background-color: #c0392b;
  color: #ffffff;
  border-color: #922b21;
}

.piid-badge-warning {
  background-color: #d68910;
  color: #ffffff;
  border-color: #b9770e;
}

.piid-badge-recommendation {
  background-color: #2980b9;
  color: #ffffff;
  border-color: #1a5276;
}

.piid-badge-info {
  background-color: #6c757d;
  color: #ffffff;
  border-color: #545b62;
}

.piid-badge-success {
  background-color: #27ae60;
  color: #ffffff;
  border-color: #1e8449;
}

.piid-badge-fail {
  background-color: #922b21;
  color: #ffffff;
  border-color: #7b241c;
}

/* Rule info cell */
.piid-ruleCell {
  width: 200px;
  min-width: 180px;
  max-width: 250px;
}

/* Error code cell */
.piid-codeCell {
  width: 110px;
  min-width: 90px;
  max-width: 140px;
}

.piid-code {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  opacity: 0.8;
}

.piid-ruleContainer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: help;
}

.piid-ruleTitle {
  font-weight: 500;
  font-size: 13px;
  color: inherit;
  line-height: 1.3;
}

.piid-ruleArea {
  font-size: 11px;
  opacity: 0.6;
  font-family: "Consolas", "Monaco", monospace;
}

/* Message cell */
.piid-messageCell {
  min-width: 200px;
  max-width: 400px;
  word-wrap: break-word;
  line-height: 1.4;
}

/* Location/file cell */
.piid-locationCell {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piid-locationLink {
  cursor: pointer;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.piid-locationLink:hover {
  opacity: 1;
  text-decoration: underline;
  color: #52a535;
}

/* Actions cell */
.piid-actionsCell {
  width: 80px;
  min-width: 80px;
  text-align: center;
}

.piid-actionsContainer {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.piid-infoButton {
  border: none !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  background-color: rgba(93, 173, 226, 0.15) !important;
  color: #5dade2 !important;
  border-radius: 4px !important;
  transition: background-color 0.15s ease !important;
}

.piid-infoButton:hover {
  background-color: rgba(93, 173, 226, 0.3) !important;
}

.piid-infoButton:focus {
  outline: 2px solid #5dade2 !important;
  outline-offset: 2px !important;
}

.piid-fixButton {
  border: none !important;
  min-width: 28px !important;
  max-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  background-color: rgba(82, 165, 53, 0.15) !important;
  color: #52a535 !important;
  border-radius: 4px !important;
  transition: background-color 0.15s ease !important;
}

.piid-fixButton:hover {
  background-color: rgba(82, 165, 53, 0.3) !important;
}

/* Tooltip styling */
.piid-tooltip {
  max-width: 350px;
  padding: 4px;
}

.piid-tooltip-errorCode {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.08);
  padding: 3px 6px;
  border-radius: 4px;
  margin-top: 8px;
  display: inline-block;
  letter-spacing: 0.5px;
}

.piid-tooltip-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: #52a535;
}

.piid-tooltip-description {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.piid-tooltip-howToUse {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 8px;
  padding: 6px 8px;
  background-color: rgba(82, 165, 53, 0.15);
  border-left: 3px solid #52a535;
  border-radius: 0 4px 4px 0;
}

.piid-tooltip-howToUse strong {
  color: #52a535;
}

.piid-tooltip-technical {
  font-size: 11px;
  opacity: 0.7;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
  margin-top: 4px;
}

/* Accessible dialog content (alternative to hover tooltip) */
.piid-dialog-content {
  padding: 8px 4px;
  max-width: 500px;
}

.piid-dialog-errorCode {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 12px;
  display: inline-block;
  letter-spacing: 0.5px;
}

.piid-dialog-title {
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 12px 0;
  color: #52a535;
}

.piid-dialog-description {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.piid-dialog-howToUse {
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0;
  padding: 10px 12px;
  background-color: rgba(82, 165, 53, 0.15);
  border-left: 4px solid #52a535;
  border-radius: 0 4px 4px 0;
}

.piid-dialog-howToUse strong {
  color: #52a535;
  display: block;
  margin-bottom: 4px;
}

.piid-dialog-technical {
  font-size: 13px;
  opacity: 0.8;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  margin: 12px 0;
}

.piid-dialog-message {
  font-size: 13px;
  margin: 8px 0;
}

.piid-dialog-location {
  font-size: 13px;
  margin: 8px 0;
}

.piid-dialog-location code {
  font-family: "Consolas", "Monaco", monospace;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Legacy styles for backwards compatibility */
.piid-outer {
  margin-top: 4px;
  margin-bottom: 4px;
  display: table-row;
  word-wrap: break-word;
  font-size: small;
  vertical-align: top;
}

/* ---- Mobile Card Layout ---- */
.piid-card {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  border-left: 3px solid transparent;
}

.piid-card.piid-rowClickable {
  cursor: pointer;
}

.piid-card.piid-rowClickable:hover {
  background-color: rgba(82, 165, 53, 0.08) !important;
}

.piid-cardHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.piid-cardHeader .piid-typeContainer {
  flex-shrink: 0;
}

.piid-cardHeader .piid-code {
  flex: 1;
  min-width: 0;
}

.piid-cardHeader .piid-actionsContainer {
  flex-shrink: 0;
  margin-left: auto;
}

.piid-cardBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 4px;
}

.piid-cardRule {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
}

.piid-cardMessage {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.85;
  word-wrap: break-word;
}

.piid-cardLocation {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piid-indicator {
  min-height: 20px;
  vertical-align: middle;
  max-width: 30px;
}

.piid-icon {
  padding-left: 8px;
  padding-top: 4px;
  padding-bottom: 8px;
  height: 100%;
  vertical-align: middle;
}

.piid-successIconCell {
  background-color: green;
}

.piid-failIconCell {
  background-color: red;
}

.piid-infoIconCell {
  background-color: gray;
}

.piid-errorIconCell {
  background-color: #d88800;
}

.piid-link {
  cursor: pointer;
}

.piid-link:hover {
  text-decoration: underline;
}

.piid-contextMenuButton button {
  border: solid 0px;
  max-width: 24px;
  min-width: 24px;
  grid-column: 2;
  line-height: 1;
  text-align: center;
  padding: 0px;
  min-height: 22px;
  margin-left: 14px;
  max-height: 22px;
  padding-bottom: 8px;
  box-shadow: none;
}

.ltb-outer {
  display: block;
}

.ete-area {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ete-message {
  padding: 10px;
}

.ete-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.ete-mainArea {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENT EDITOR INTERIOR - Panel Grid Layout
   ───────────────────────────────────────────────────────────────────────────── */

.ete-componentEditorInterior {
  grid-row: 1;
  min-height: 0;
}

.ete-componentEditorInterior.editor-panel-grid {
  /* Allow the columns prop (via --grid-columns var) to drive the layout so the
     states sidebar can collapse to a narrow rail. */
  grid-template-rows: 1fr;
}

/* Groups panel (left sidebar) */
.ete-groupsPanel {
  min-width: 280px;
  max-width: 280px;
  position: relative;
}

.ete-groupsPanel.ete-groupsPanel-collapsed {
  min-width: 32px;
  max-width: 32px;
}

.ete-groupsPanel .editor-panel-content {
  overflow: hidden !important;
}

/* Collapse / expand toggle for the states sidebar */
.ete-statesToggle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 11px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition:
    color 0.15s,
    background 0.15s;
}

.ete-statesToggle:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.ete-statesToggle-expand {
  position: static;
  width: 100%;
  height: 32px;
}

/* Component groups info text */
.ete-groupsInfo {
  font-size: 0.75rem;
  color: #888;
  padding: 4px 8px;
  line-height: 1.3;
}

.ete-addStateRow {
  padding: 8px 8px 4px;
}

.ete-addStateRow .eat-mcBtn {
  width: 100%;
  font-size: 12px;
}

/* Item bin panel (main content) */
.ete-itemBinPanel {
  min-width: 0;
  flex: 1;
  /* Establish a containment context so the inner editor can react to the
     panel's actual rendered width (separate from viewport width). */
  container-type: inline-size;
}

.ete-itemBinPanel > .editor-panel-content {
  /* Default: no horizontal scrollbar — the inner panels handle their own
     overflow, and on wide layouts the grid fills the available space. */
  overflow-x: hidden !important;
}

/* When the panel is genuinely narrower than the inner editor's minimum
   usable width (~640px = 280px components list + 360px form), enable
   horizontal scrolling and force the inner grid to its minimum so the
   form area stays usable. */
@container (max-width: 640px) {
  .ete-itemBinPanel > .editor-panel-content {
    overflow-x: auto !important;
  }
  .ete-itemBinPanel .ete-componentEditorInterior {
    min-width: 640px;
  }
}

.ete-componentEditorInteriorFull {
  grid-row: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Override viewport-based inline min/max height on child editors so they fill
   the remaining flex space rather than overflowing the container when the
   header chip is taller than the hardcoded height offset. */
.ete-componentEditorInteriorFull > .etre-area {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  height: 100%;
}

.ete-select {
  padding: 8px;
}

/* List item header text overflow */
.ete-componentEditorInterior .ui-list__itemheader {
  white-space: nowrap;
  max-width: 210px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

/* List interior scrolling */
.ete-listInterior {
  overflow-y: auto;
  overflow-x: hidden !important;
  padding: 4px 0;
}

.ete-addButtonRow {
  padding: 4px 6px;
}

.ete-addActionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 8px;
  border: none;
  cursor: pointer;
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
  color: #fff;
  background-color: #3e8828;
  box-shadow:
    inset -2px -3px 0 #1e4d14,
    inset 2px 2px 0 #6fc24a;
}

.ete-addActionBtn:hover {
  background-color: #52a535;
  box-shadow:
    inset -2px -3px 0 #2a641c,
    inset 2px 2px 0 #86d562;
}

.ete-addActionBtn:active {
  background-color: #2a641c;
  box-shadow:
    inset 2px 3px 0 #1e4d14,
    inset -2px -2px 0 #3e8828;
}

.ete-header {
  font-size: 16pt;
  padding-top: 2px;
  padding-left: 36px;
}

.ete-componentHeader {
  padding-top: 20px;
  font-size: 14pt;
  padding: 12px;
  padding-top: 40px;
  padding-bottom: 14px;
}

.ete-extraArea {
  margin-bottom: 5px;
  grid-column: 2;
}

.ete-commands {
  display: grid;
  padding: 3px;
  grid-template-columns: 200px 1fr;
}

.ete-toolBarArea {
  grid-column: 1;
  width: 100%;
  padding-top: 8px;
  padding-left: 29px;
}

.ete-loading {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ete-retry-button {
  padding: 6px 16px;
  background-color: #52a535;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color 0.15s ease;
}

.ete-retry-button:hover {
  background-color: #63c244;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GROUP LIST ITEMS - Minecraft Slot Style
   
   List items styled as mini inventory slots with inset appearance and
   green glow selection state matching the component slots.
   ───────────────────────────────────────────────────────────────────────────── */

.ete-listInterior .ui-list__item {
  padding: 6px 10px;
  margin: 3px 6px;
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 0.1s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease;
  /* Inset slot style */
  background: rgba(0, 0, 0, 0.2);
  box-shadow:
    inset 1px 1px 0 0 rgba(0, 0, 0, 0.4),
    inset -1px -1px 0 0 rgba(255, 255, 255, 0.1);
  border: 2px solid transparent;
}

.ete-listInterior .ui-list__item:hover {
  background: rgba(82, 165, 53, 0.15);
  box-shadow:
    inset 1px 1px 0 0 rgba(0, 0, 0, 0.3),
    inset -1px -1px 0 0 rgba(255, 255, 255, 0.15);
  transform: translateX(2px);
}

/* Selected state - Minecraft green glow */
.ete-listInterior .ui-list__item[aria-selected="true"] {
  background: rgba(82, 165, 53, 0.25);
  border-color: #52a535;
  box-shadow:
    0 0 8px rgba(82, 165, 53, 0.5),
    inset 1px 1px 0 0 rgba(82, 165, 53, 0.3),
    inset -1px -1px 0 0 rgba(82, 165, 53, 0.5);
  font-weight: 500;
}

.ete-listInterior .ui-list__item[aria-selected="true"]:hover {
  background: rgba(82, 165, 53, 0.3);
}

/* Empty state styling */
.ete-emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  min-height: 120px;
}

.ete-emptyStateIcon {
  opacity: 0.4;
  margin-bottom: 10px;
}

.ete-emptyStateTitle {
  font-size: 14pt;
  font-weight: 500;
  margin-bottom: 6px;
  opacity: 0.8;
}

.ete-emptyStateMessage {
  font-size: 10pt;
  opacity: 0.6;
  max-width: 300px;
  line-height: 1.4;
}

/* Breadcrumb styling */
.ete-breadcrumb {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 10pt;
  opacity: 0.8;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  margin-bottom: 8px;
}

.ete-breadcrumbItem {
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.ete-breadcrumbItem:hover {
  background-color: rgba(128, 128, 128, 0.15);
}

.ete-breadcrumbSeparator {
  margin: 0 4px;
  opacity: 0.5;
}

.ete-breadcrumbCurrent {
  font-weight: 500;
  opacity: 1;
}

/* Improved item bin transitions */
.ete-itemBin {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  transition: background-color 0.15s ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY TYPE COMPONENT SET EDITOR - Minecraft Creator Tools
   
   Design Philosophy:
   - Blocky, Minecraft-authentic aesthetic (max 4px border-radius)
   - Green accent (#52a535) for selected states and focus
   - Theme-aware: adapts to light/dark mode
   - Clear visual hierarchy between list and editor panes
   - Smooth transitions for polish without being distracting
   - Uses EditorContentPanel for consistent panel styling
   
   See: docs/ux/Components.md, docs/ux/ColorSystem.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   THEME VARIABLES - Component Slot Colors
   Default to dark mode, override for light mode
   ───────────────────────────────────────────────────────────────────────────── */

/* Dark mode defaults */
.etcse-area-dark {
  --slot-grid-bg: #8b8b8b;
  --slot-grid-border-dark: #373737;
  --slot-grid-border-light: #b0b0b0;
  --slot-bg: #8b8b8b;
  --slot-chip-bg: #505050;
  --slot-chip-highlight: #707070;
  --slot-chip-shadow: #303030;
  --slot-chip-hover-bg: #5a5a5a;
  --slot-chip-hover-shadow: #252525;
  --slot-chip-hover-highlight: #808080;
  --slot-text-color: #ffffff;
  --slot-text-shadow: rgba(0, 0, 0, 0.6);
  --slot-summary-color: #d0d0d0;
  --slot-add-bg: #6b6b6b;
  --slot-add-color: #52a535;
  --slot-add-hover-bg: #7a7a7a;
  --slot-add-hover-color: #d0d0d0;
  --slot-selected-chip-bg: #424242;
  --slot-selected-glow: rgba(82, 165, 53, 0.5);
  --help-hint-bg: rgba(82, 165, 53, 0.14);
  --help-hint-border: rgba(82, 165, 53, 0.55);
  --help-hint-title: #f0f8ed;
  --help-hint-text: #d5e4cf;
  --help-hint-next: #b6c9ad;
}

/* Light mode overrides */
.etcse-area-light {
  --slot-grid-bg: #d8d8d8;
  --slot-grid-border-dark: #b0b0b0;
  --slot-grid-border-light: #f0f0f0;
  --slot-bg: #d8d8d8;
  --slot-chip-bg: #e8e8e8;
  --slot-chip-highlight: #f5f5f5;
  --slot-chip-shadow: #c0c0c0;
  --slot-chip-hover-bg: #f0f0f0;
  --slot-chip-hover-shadow: #b0b0b0;
  --slot-chip-hover-highlight: #ffffff;
  --slot-text-color: #333333;
  --slot-text-shadow: rgba(255, 255, 255, 0.5);
  --slot-summary-color: #555555;
  --slot-add-bg: #c8c8c8;
  --slot-add-color: #3e8828;
  --slot-add-hover-bg: #d0d0d0;
  --slot-add-hover-color: #333333;
  --slot-selected-chip-bg: #f0f0f0;
  --slot-selected-glow: rgba(82, 165, 53, 0.3);
  --help-hint-bg: rgba(82, 165, 53, 0.11);
  --help-hint-border: rgba(62, 136, 40, 0.55);
  --help-hint-title: #23451a;
  --help-hint-text: #2e5323;
  --help-hint-next: #3a6230;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.etcse-area-narrow {
  width: 100%;
  padding-top: 12px;
  padding-bottom: 0;
  padding-right: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* In narrow mode, override inline-grid to prevent horizontal overflow */
.etcse-area-narrow .etcse-componentForm {
  display: grid;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.etcse-area-narrow .editor-panel-content {
  min-width: 0;
  overflow-x: hidden;
}

.etcse-area-narrow .df-outer {
  min-width: 0;
  max-width: 100%;
}

/* Panel grid inside the area */
.etcse-panelGrid {
  flex: 1;
  min-height: 0;
}

/* Component list panel */
.etcse-componentListPanel {
  overflow: hidden;
}

.etcse-componentListPanel .editor-panel-content {
  overflow-y: auto;
  overflow-x: hidden !important;
}

/* Component bin panel */
.etcse-componentBinPanel {
  overflow: hidden;
  /* Keep the form area usable. As the second column (1fr) in the inner grid,
     this min-width grows the grid past the parent's width when the viewport
     is narrow, which (combined with the parent's container query) triggers
     a horizontal scrollbar instead of crushing the form. */
  min-width: 360px;
}

.etcse-componentBinPanel .editor-panel-content {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-header {
  font-size: 16pt;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.etcse-note {
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 11px;
  font-style: italic;
  background: rgba(82, 165, 53, 0.08);
  border-left: 3px solid rgba(82, 165, 53, 0.4);
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENT FORM AREA
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-componentForm {
  margin-bottom: 12px;
  padding: 0 16px 16px 16px;
  width: 100%;
  display: inline-grid;
  min-height: 220px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENT SLOTS - Minecraft Inventory/Container Style
   
   Design: Components appear as items in inventory slots, inspired by
   Minecraft's brewing stand and crafting UI. Each slot has:
   - Dark inset background with beveled 3D edges
   - Item icon centered in the slot
   - Pop-out effect on hover
   - Glowing selection state
   ───────────────────────────────────────────────────────────────────────────── */

/* Slot grid container */
.etcse-slotGrid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px;
  background: var(--slot-grid-bg);
  border: 2px solid;
  border-color: var(--slot-grid-border-dark) var(--slot-grid-border-light) var(--slot-grid-border-light)
    var(--slot-grid-border-dark);
  border-radius: 0;
  margin: 4px 6px;
}

/* Individual slot - Minecraft inventory slot style, full width with room for summary */
/* Touch targets: min-height ensures 36px+ for compact density */
.etcse-componentSlot {
  position: relative;
  width: 100%;
  min-height: 36px;
  height: auto;
  background: var(--slot-bg);
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* Asymmetric padding: more on top-left (groove shadow side),
     less on bottom-right so chip sits into the groove */
  padding: 3px 1px 1px 3px;
  box-sizing: border-box;
  /* Inset bevel - dark top-left, light bottom-right */
  box-shadow:
    inset 2px 2px 0 0 var(--slot-grid-border-dark),
    inset -2px -2px 0 0 var(--slot-grid-border-light);
  overflow: hidden;
  /* Vertical spacing between component slots */
  margin-bottom: 8px;
}

/* Inner chip - outset appearance inside the inset slot */
.etcse-slotChip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  background: var(--slot-chip-bg);
  /* Outset bevel - light top-left, dark bottom-right */
  box-shadow:
    inset -2px -2px 0 0 var(--slot-chip-shadow),
    inset 2px 2px 0 0 var(--slot-chip-highlight);
  overflow: hidden;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* Top row with icon and title - top aligned */
.etcse-slotChipHeader {
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: 2px;
}

/* Icon container on the left - top aligned */
.etcse-slotIcon {
  flex-shrink: 0;
  width: 24px;
  height: 18px;
  margin: 1px 3px 0 3px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
}

/* Icon container with no additional bevel - chip has the bevel */
.etcse-slotIcon .component-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.etcse-slotIcon .component-icon img {
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

/* Text label container */
.etcse-slotLabel {
  flex: 1;
  min-width: 0;
  padding: 2px 4px 0 0;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.etcse-slotText {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--slot-text-color);
  text-shadow: 1px 1px 1px var(--slot-text-shadow);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* Summarizer text area below the header */
.etcse-slotSummary {
  padding: 0 6px 8px 30px;
  margin-top: -3px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--slot-summary-color);
  text-shadow: 1px 1px 1px var(--slot-text-shadow);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  /* Hard max-height fallback: 2 lines × 1.3 line-height = 2.6em */
  max-height: 2.6em;
  flex-shrink: 1;
  flex-grow: 0;
}

.etcse-slotSummary:empty {
  display: none;
}

/* Hover state - chip pops out, slot stays in place */
.etcse-componentSlot:hover .etcse-slotChip {
  transform: translateY(-1px);
  box-shadow:
    inset -2px -2px 0 0 var(--slot-chip-hover-shadow),
    inset 2px 2px 0 0 var(--slot-chip-hover-highlight),
    0 2px 4px rgba(0, 0, 0, 0.2);
  background: var(--slot-chip-hover-bg);
}

/* Add component slot - empty inset slot with + sign, full width */
.etcse-addSlot {
  position: relative;
  width: 100%;
  height: 28px;
  min-height: 28px;
  background: var(--slot-add-bg);
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Inset bevel - dark top-left, light bottom-right */
  box-shadow:
    inset 2px 2px 0 0 var(--slot-grid-border-dark),
    inset -2px -2px 0 0 var(--slot-grid-border-light);
  /* Reset button defaults */
  padding: 0;
  margin: 0;
  font: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.1s ease;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  color: var(--slot-add-color);
  text-shadow: none;
}

/* Add slot wrapper - same dimensions as .etcse-componentSlot */
.etcse-addSlotWrapper {
  position: relative;
  width: 100%;
  height: 28px;
  display: block;
  box-sizing: border-box;
}

/* Add slot button - empty inset slot style, matching .etcse-componentSlot exactly */
.etcse-addSlot {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 0;
  bottom: 0;
  width: calc(100% + 4px);
  height: 28px;
  background: var(--slot-add-bg);
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Inset bevel - dark top-left, light bottom-right */
  box-shadow:
    inset 2px 2px 0 0 var(--slot-grid-border-dark),
    inset -2px -2px 0 0 var(--slot-grid-border-light);
  padding: 0;
  margin: 0;
  font: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.1s ease;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  color: var(--slot-add-color);
  text-shadow: none;
}

/* Plus icon inside add slot */
.etcse-addSlotIcon {
  font-size: 15px;
  font-weight: bold;
  color: var(--slot-add-color);
  transition: color 0.15s ease;
}

.etcse-addSlot:hover {
  background: var(--slot-add-hover-bg);
  color: var(--slot-add-hover-color);
}

.etcse-addSlot:hover .etcse-addSlotIcon {
  color: #52a535;
  text-shadow: 0 0 4px var(--slot-selected-glow);
}

/* Selected state - glowing border */
.etcse-componentSlot.etcse-slotSelected {
  box-shadow:
    0 0 10px var(--slot-selected-glow),
    inset -2px -2px 0 0 #6fc74a,
    inset 2px 2px 0 0 #3a7525;
}

.etcse-componentSlot.etcse-slotSelected .etcse-slotChip {
  background: var(--slot-selected-chip-bg);
  box-shadow:
    inset 2px 2px 0 0 var(--slot-chip-shadow),
    inset -1px -1px 0 0 var(--slot-chip-highlight),
    inset 0 0 6px var(--slot-selected-glow);
}

/* Selection border using outline */
.etcse-componentSlot.etcse-slotSelected {
  outline: 2px solid var(--slot-color, #52a535);
  outline-offset: -2px;
}

/* Category section header for slot view */
.etcse-slotCategoryHeader {
  width: 100%;
  padding: 18px 0 2px 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Color is set via inline style from theme */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid currentColor;
  border-bottom-color: rgba(128, 128, 128, 0.3);
  margin-bottom: 4px;
  opacity: 0.9;
  /* Left align with first slot */
  margin-left: 0;
  text-align: left;
}

.etcse-slotCategoryHeaderClickable {
  cursor: pointer;
  user-select: none;
}

.etcse-slotCategoryHeaderClickable:hover {
  opacity: 1;
}

.etcse-categoryChevron {
  margin-right: 4px;
  font-size: 8px;
  opacity: 0.7;
}

.etcse-slotCategoryHeader:first-child {
  padding-top: 4px;
}

/* Legacy chip styles - kept for backwards compatibility */
.etcse-componentChip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: 1px 0;
  min-height: 28px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(107, 101, 98, 0.25);
  border-left: 3px solid var(--chip-color, #52a535);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.etcse-componentChip::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--chip-color, #52a535);
  border-radius: 3px 0 0 3px;
  opacity: 1;
  transition:
    width 0.15s ease,
    opacity 0.15s ease;
}

.etcse-componentChip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(107, 101, 98, 0.4);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.etcse-componentChip:hover::before {
  width: 4px;
}

/* Icon container within chip */
.etcse-componentChip .component-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Label text */
.etcse-componentChipLabel {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* Selected state for component chips */
.etcse-componentList .ui-list__item[aria-selected="true"] .etcse-componentChip {
  background: linear-gradient(90deg, rgba(var(--chip-color-rgb, 82, 165, 53), 0.15) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: var(--chip-color, #52a535);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}

.etcse-componentList .ui-list__item[aria-selected="true"] .etcse-componentChip::before {
  width: 4px;
  box-shadow: 0 0 8px var(--chip-color, #52a535);
}

/* Legacy wrapper styles (kept for compatibility) */
.etcse-componentWrapper {
  margin: 2px 0;
  font-size: 12px;
  border-radius: 3px;
  transition: all 0.12s ease;
}

.etcse-componentWrapper:hover {
  transform: translateX(3px);
}

.etcse-componentWrapperInner {
  padding: 4px 8px;
  font-weight: 500;
}

.etcse-componentForm .ui-form__input {
  padding-top: 4px;
  margin-bottom: 6px;
  border-radius: 3px;
}

.etcse-componentForm .ui-form__checkbox {
  padding-top: 4px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.etcse-componentForm .pu > :last-child {
  margin-top: 0px;
}

.etcse-componentForm .pt > :not(:last-child) {
  margin-bottom: 0px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENT HEADER - Hero-style with large icon and green accent
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-componentHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 8px 16px;
  font-size: 14pt;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, rgba(82, 165, 53, 0.12) 0%, rgba(82, 165, 53, 0.04) 60%, transparent 100%);
  border-bottom: 2px solid rgba(82, 165, 53, 0.3);
  position: relative;
}

/* Large icon slot in header */
.etcse-componentHeaderIcon {
  width: 36px;
  height: 36px;
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 2px solid;
  border-color: var(--header-icon-color, #52a535);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 8px rgba(var(--header-icon-color-rgb, 82, 165, 53), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.etcse-componentHeaderIcon .component-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.etcse-componentHeaderIcon .component-icon img {
  image-rendering: pixelated;
}

/* Header text content */
.etcse-componentHeaderText {
  flex: 1;
  min-width: 0;
}

.etcse-componentHeaderTitle {
  font-size: 14pt;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.etcse-componentHeaderSubtitle {
  font-size: 10px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.etcse-componentHeaderDescription {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
  line-height: 1.4;
  font-style: italic;
}

.etcse-helpHint {
  position: relative;
  margin: 8px 12px 10px;
  padding: 10px 32px 10px 12px;
  line-height: 1.45;
  border: 2px solid var(--help-hint-border);
  background: var(--help-hint-bg);
  border-radius: 2px;
}

.etcse-helpHintDismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--help-hint-next);
  opacity: 0.6;
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 2px;
  transition: opacity 0.15s ease;
}

.etcse-helpHintDismiss:hover {
  opacity: 1;
}

.etcse-helpHintTitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--help-hint-title);
  margin-bottom: 6px;
}

.etcse-helpHintBody {
  font-size: 12px;
  color: var(--help-hint-text);
  margin-bottom: 4px;
}

.etcse-helpHintNext {
  margin-top: 6px;
  font-size: 11px;
  color: var(--help-hint-next);
  font-weight: 600;
}

/* Delete button inline in header */
.etcse-componentHeaderDelete {
  flex-shrink: 0;
  margin-left: auto;
}

/* Green accent line effect */
.etcse-componentHeader::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, #52a535 0%, transparent 100%);
}

.etcse-noeditor {
  padding: 24px 20px;
  text-align: center;
  opacity: 0.7;
  font-size: 13px;
}

.etcse-title {
  width: 200px;
  font-weight: 600;
}

.etcse-extraArea {
  margin-bottom: 5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENT DROPDOWN (Narrow mode)
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-componentDropdown .ui-dropdown__container {
  width: 205px;
  margin: 4px;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENT LIST PANEL - Left sidebar with slot grid
   
   Now uses EditorContentPanel, but list styling remains the same.
   ───────────────────────────────────────────────────────────────────────────── */

/* Styles apply to both old .etcse-componentList and new .etcse-componentListPanel */
.etcse-componentList,
.etcse-componentListPanel .editor-panel-content {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 10px 4px 6px;
  min-width: 270px;
  width: 100%;
  box-sizing: border-box;
}

/* Search filter wrapper with clear button */
.etcse-searchFilterWrapper {
  position: relative;
  flex: 1;
  min-width: 120px;
  max-width: 240px;
}

.etcse-searchFilter {
  width: 100%;
  height: 28px;
  padding: 4px 28px 4px 8px;
  border: 1px solid var(--slot-grid-border-light, #b0b0b0);
  border-radius: 3px;
  background: var(--slot-chip-bg, #505050);
  color: var(--slot-text-color, #ffffff);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}

.etcse-searchFilterClear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--slot-summary-color, #d0d0d0);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.1s ease;
}

.etcse-searchFilterClear:hover {
  opacity: 1;
}

.etcse-searchFilter:focus {
  border-color: #52a535;
}

.etcse-searchFilter::placeholder {
  color: var(--slot-summary-color, #d0d0d0);
  opacity: 0.7;
}

.etcse-componentListPanel .ui-dropdown__container,
.etcse-componentList .ui-dropdown__container {
  width: 200px;
  border-radius: 3px;
}

/* Make the list items display as a vertical column */
.etcse-componentListPanel .ui-list,
.etcse-componentList .ui-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  align-content: flex-start;
  width: 100%;
}

.etcse-componentListPanel li,
.etcse-componentList li {
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

/* Component and add slot list items - full width for summary display */
.etcse-componentListPanel li:has(.etcse-componentSlot),
.etcse-componentList li:has(.etcse-componentSlot) {
  width: 100%;
  min-height: 40px;
  height: auto;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 !important;
}

.etcse-componentListPanel li:has(.etcse-addSlot),
.etcse-componentList li:has(.etcse-addSlot) {
  width: 100%;
  min-height: 28px;
  height: auto;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure all content wrappers in slots have no extra padding */
.etcse-componentListPanel li:has(.etcse-componentSlot) .ui-list__itemcontent,
.etcse-componentList li:has(.etcse-componentSlot) .ui-list__itemcontent {
  width: 100% !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.etcse-componentListPanel li:has(.etcse-addSlot) .ui-list__itemcontent,
.etcse-componentList li:has(.etcse-addSlot) .ui-list__itemcontent {
  width: 100% !important;
  min-height: 28px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* Category headers span full width */
.etcse-componentListPanel li:has(.etcse-slotCategoryHeader),
.etcse-componentList li:has(.etcse-slotCategoryHeader) {
  width: 100%;
  flex-basis: 100%;
}

.etcse-componentListPanel .ui-list__itemcontent,
.etcse-componentList .ui-list__itemcontent {
  margin-right: 0;
}

/* Ensure add slots can receive clicks - button element needs explicit sizing */
.etcse-componentListPanel li:has(.etcse-addSlotWrapper),
.etcse-componentList li:has(.etcse-addSlotWrapper) {
  width: 100%;
  min-height: 28px;
  height: auto;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto;
}

.etcse-componentListPanel li:has(.etcse-addSlotWrapper) .ui-list__itemcontent,
.etcse-componentList li:has(.etcse-addSlotWrapper) .ui-list__itemcontent {
  pointer-events: auto;
  width: 100% !important;
  min-height: 28px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENT BIN - Right editor panel
   
   Now uses EditorContentPanel for consistent Minecraft styling.
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-componentBin,
.etcse-componentBinPanel .editor-panel-content {
  padding: 0 12px 0 0;
  height: 100%;
  min-height: 200px;
  vertical-align: top;
  overflow-y: auto;
  overflow-x: hidden;
}

.etcse-componentBin-narrow,
.etcse-componentBinPanel.etcse-componentBin-narrow .editor-panel-content {
  padding: 0;
  padding-top: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOOLBAR AND TITLE AREA
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-componentArea {
  display: grid;
  padding: 8px 12px;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(107, 101, 98, 0.2);
}

.etcse-titleArea {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0;
  font-weight: 600;
  font-size: 13px;
}

.etcse-toolBarArea {
  grid-column: 2;
  grid-row: 1;
}

.etcse-componentToolBarArea {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etcse-extraArea {
  grid-column: 1;
  grid-row: 1;
  padding-left: 0;
}

.etcse-loading {
  padding: 20px;
  text-align: center;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BREADCRUMB NAVIGATION - Minecraft style
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-breadcrumb {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 11px;
  border-bottom: 1px solid rgba(107, 101, 98, 0.2);
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(0, 0, 0, 0.03);
}

.etcse-breadcrumbItem {
  padding: 4px 10px;
  border-radius: 3px;
  transition: all 0.12s ease;
  white-space: nowrap;
  font-weight: 500;
}

.etcse-breadcrumbItem:hover {
  background-color: rgba(107, 101, 98, 0.15);
  cursor: pointer;
}

.etcse-breadcrumbSeparator {
  margin: 0 2px;
  opacity: 0.35;
  font-size: 9px;
}

.etcse-breadcrumbCurrent {
  font-weight: 600;
  background-color: rgba(82, 165, 53, 0.15);
  color: #52a535;
}

.etcse-breadcrumbCurrent:hover {
  background-color: rgba(82, 165, 53, 0.25);
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENT LIST ITEMS - Slot grid styling
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-componentList .ui-list__item {
  transition: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  border-left: none;
  background: transparent;
}

.etcse-componentList .ui-list__item:hover {
  background-color: transparent;
  transform: none;
  border-left-color: transparent;
}

.etcse-componentList .ui-list__item[aria-selected="true"] {
  background-color: transparent;
  border-left: none;
  transform: none;
}

.etcse-componentList .ui-list__item[aria-selected="true"]:hover {
  background-color: transparent;
}

/* Remove focus outline on list items - the slot handles its own styling */
.etcse-componentList .ui-list__item:focus {
  outline: none;
  box-shadow: none;
}

.etcse-componentList .ui-list__item:focus-visible {
  outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATEGORY HEADERS IN LIST - Stone gray styling
   ───────────────────────────────────────────────────────────────────────────── */

.etcse-componentList .ui-list__item[data-is-header="true"],
.etcse-componentList li:not([aria-selected]) > div:first-child:not(.etcse-componentChip) {
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.7;
  padding: 12px 8px 6px 8px;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MUI LIST OVERRIDES - Compact slot layout for McSelectableList
   
   The MUI ListItemButton adds default padding that pushes the component
   slot chips away from their inset groove edges. These overrides strip
   that padding so the slot chips sit flush in their beveled grooves.
   Also reduces vertical spacing between items for a tighter layout.
   ───────────────────────────────────────────────────────────────────────────── */

/* Remove all MUI padding from list items within the component panel */
.etcse-componentListPanel .MuiList-root {
  padding-top: 2px;
  padding-bottom: 2px;
}

.etcse-componentListPanel .MuiListItem-root {
  padding: 0;
  margin-bottom: 7px;
}

/* Strip MUI ListItemButton padding so component slot fills the full area */
.etcse-componentListPanel .MuiListItemButton-root {
  padding: 1px 0;
  min-height: 0;
  overflow: hidden;
}

/* Remove MUI selection/hover backgrounds — the slot chip handles its own styling */
.etcse-componentListPanel .MuiListItemButton-root:hover,
.etcse-componentListPanel .MuiListItemButton-root.Mui-selected,
.etcse-componentListPanel .MuiListItemButton-root.Mui-selected:hover {
  background-color: transparent;
}

/* Remove MUI ListItemText padding/margins so slot chip content isn't offset */
.etcse-componentListPanel .MuiListItemText-root {
  margin: 0;
  padding: 0;
}

.etcse-componentListPanel .MuiListItemText-secondary {
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD COMPONENT DIALOG - Minecraft Inventory Slot Style
   
   Matches the component editor's slot grid aesthetic with:
   - Blocky Minecraft inventory slots for each component
   - Inset beveled edges on slots
   - Glowing selection state
   - Category list sidebar (full mode) or header (single category mode)
   ═══════════════════════════════════════════════════════════════════════════ */

.etac-area {
  min-height: 400px;
  max-height: 520px;
}

.etac-area.etac-singleCategory {
  min-height: 300px;
}

.etac-mainArea {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  min-height: 400px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATEGORY LIST (LEFT SIDEBAR)
   ───────────────────────────────────────────────────────────────────────────── */

.etac-category {
  grid-column: 1;
  border: solid 1px;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 0;
}

.etac-category .ui-list__item {
  padding: 10px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.etac-category .ui-list__item:hover {
  background: rgba(82, 165, 53, 0.1);
}

.etac-category .ui-list__item[aria-selected="true"] {
  background: rgba(82, 165, 53, 0.2);
  border-left: 3px solid #52a535;
}

/* ─────────────────────────────────────────────────────────────────────────────
   COMPONENT PANE (RIGHT SIDE - SLOT GRID)
   ───────────────────────────────────────────────────────────────────────────── */

.etac-componentPane {
  grid-column: 2;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  border: solid 1px;
  border-left: none;
  padding: 8px;
}

.etac-beginnerTip {
  margin: 4px 8px 6px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
  border: 1px solid rgba(82, 165, 53, 0.45);
  background: rgba(82, 165, 53, 0.1);
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SLOT GRID - Minecraft Inventory Style
   ───────────────────────────────────────────────────────────────────────────── */

.etac-slotGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: #8b8b8b;
  border: 3px solid;
  border-color: var(--slot-border-dark, #373737) var(--slot-border-light, #b0b0b0) var(--slot-border-light, #b0b0b0)
    var(--slot-border-dark, #373737);
  border-radius: 0;
}

/* Individual component slot - outer container for Minecraft inventory look */
.etac-componentSlot {
  position: relative;
  width: 160px;
  min-height: 68px;
  height: auto;
  background: #8b8b8b;
  border: none;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 3px 3px 4px;
  /* Inset bevel - dark top-left, light bottom-right */
  box-shadow:
    inset 2px 2px 0 0 var(--slot-border-dark, #373737),
    inset -2px -2px 0 0 var(--slot-border-light, #b0b0b0);
  overflow: hidden;
}

/* Inner chip - outset appearance inside the inset slot */
.etac-slotChip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background: #505050;
  /* Outset bevel - light top-left, dark bottom-right */
  box-shadow:
    inset -2px -2px 0 0 #303030,
    inset 2px 2px 0 0 #707070;
  overflow: hidden;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* Icon container on the left */
.etac-slotIcon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.etac-slotIcon .component-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.etac-slotIcon .component-icon img {
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}

/* Text label container */
.etac-slotLabel {
  flex: 1;
  min-width: 0;
  padding: 2px 4px 2px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.etac-slotText {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.etac-slotDesc {
  font-size: 10px;
  opacity: 0.7;
  line-height: 1.3;
  padding: 0 4px 2px 4px;
  width: 100%;
  align-self: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Hover state - chip pops out, slot stays in place */
.etac-componentSlot:hover .etac-slotChip {
  transform: translateY(-1px);
  box-shadow:
    inset -2px -2px 0 0 #252525,
    inset 2px 2px 0 0 #808080,
    0 2px 4px rgba(0, 0, 0, 0.3);
  background: #5a5a5a;
}

/* Selected state - high-contrast glowing border + brightened chip */
.etac-componentSlot.etac-slotSelected {
  box-shadow:
    inset 0 0 0 3px var(--slot-color, #52a535),
    inset 2px 2px 0 0 var(--slot-border-dark, #373737),
    inset -2px -2px 0 0 var(--slot-border-light, #b0b0b0),
    0 0 0 2px var(--slot-color, #52a535),
    0 0 16px var(--slot-color, #52a535);
}

.etac-componentSlot.etac-slotSelected .etac-slotChip {
  background: var(--slot-color, #52a535);
  box-shadow:
    inset -2px -2px 0 0 rgba(0, 0, 0, 0.45),
    inset 2px 2px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 0 10px rgba(255, 255, 255, 0.18);
}

.etac-componentSlot.etac-slotSelected .etac-slotText,
.etac-componentSlot.etac-slotSelected .etac-slotDesc {
  color: #ffffff;
  opacity: 1;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SINGLE CATEGORY MODE (NO SIDEBAR)
   ───────────────────────────────────────────────────────────────────────────── */

.etac-singleHeader {
  padding: 0 0 12px 0;
  border-bottom: 2px solid rgba(128, 128, 128, 0.3);
  margin-bottom: 12px;
}

.etac-categoryTitle {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SELECTED COMPONENT INFO BAR
   ───────────────────────────────────────────────────────────────────────────── */

.etac-selectedInfo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  margin-top: 12px;
  background: rgba(82, 165, 53, 0.1);
  border-left: 3px solid #52a535;
  border-radius: 0 4px 4px 0;
}

.etac-selectedLabel {
  font-size: 11px;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.etac-selectedName {
  font-size: 13px;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEGACY STYLES (kept for compatibility)
   ───────────────────────────────────────────────────────────────────────────── */

.etac-list {
  grid-column: 2;
  max-height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: solid 1px;
  border-top: solid 1px;
  border-bottom: solid 1px;
}

.etac-description {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 2;
  padding-top: 10px;
}

.etac-form {
  padding: 8px 12px;
  font-size: 12px;
  font-style: italic;
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING SPINNER
   ───────────────────────────────────────────────────────────────────────────── */

.eatac-loading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 40px 20px;
  font-size: 14px;
  opacity: 0.8;
}

.eatac-loadingStatus {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eatac-loadingText {
  font-size: 14px;
  font-weight: 600;
}

.eatac-loadingDetail {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
  max-width: 420px;
}

.eatac-loadingActions {
  margin-top: 4px;
}

.eatac-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(82, 165, 53, 0.3);
  border-top-color: #52a535;
  border-radius: 50%;
  animation: eatac-spin 0.8s linear infinite;
}

@keyframes eatac-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RECENTLY USED SECTION
   ───────────────────────────────────────────────────────────────────────────── */

.etac-recentSection {
  margin-bottom: 8px;
}

.etac-recentLabel {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin-bottom: 4px;
  padding-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR CONTENT PANEL CSS - Minecraft Creator Tools
   
   DESIGN PHILOSOPHY:
   - Subtle, tasteful backgrounds that adapt to light/dark mode
   - Hierarchy through background color differences and borders, NOT beveling
   - The EditorHeader chip has the Minecraft beveling - panels are simpler
   - Clean, organized appearance without visual clutter
   
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   PANEL GRID CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */

.editor-panel-grid {
  display: grid;
  grid-template-columns: var(--grid-columns, 220px 1fr);
  gap: 1px;
  width: 100%;
  min-height: 100%;
  background: var(--panel-divider, rgba(128, 128, 128, 0.2));
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE PANEL STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.editor-content-panel {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  position: relative;
  overflow: hidden;
}

/* Panel header - simple, clean text */
.editor-panel-header {
  padding: 10px 14px 8px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--panel-header-text, #888);
  border-bottom: 1px solid var(--panel-border, rgba(128, 128, 128, 0.15));
}

.editor-panel-header-compact {
  padding: 8px 12px 6px 12px;
  font-size: 10px;
}

/* Panel content area */
.editor-panel-content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR PANEL (Left sidebar for lists/navigation)
   Uses slightly darker/lighter background to differentiate from main
   ───────────────────────────────────────────────────────────────────────────── */

.editor-panel-sidebar {
  /* Sidebar gets a subtle background differentiation */
  border-right: 1px solid var(--panel-border, rgba(128, 128, 128, 0.15));
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEGACY VARIANT SUPPORT
   Keep inset/raised/flat class names for backward compatibility
   but apply simpler, non-beveled styling
   ───────────────────────────────────────────────────────────────────────────── */

.editor-panel-inset {
  /* Sidebar-style: background set via CSS variables in JS */
  border-right: 1px solid var(--panel-border, rgba(128, 128, 128, 0.15));
}

.editor-panel-raised {
  /* Main-style: background set via CSS variables in JS */
  border-left: 1px solid var(--panel-border, rgba(128, 128, 128, 0.1));
}

.editor-panel-flat {
  /* Simple bordered panel */
  border: 1px solid var(--panel-border, rgba(128, 128, 128, 0.15));
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION HEADERS (inside panels)
   ───────────────────────────────────────────────────────────────────────────── */

.editor-panel-section-header {
  padding: 10px 12px 6px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--panel-header-text, #888);
  border-bottom: 1px solid var(--panel-border, rgba(128, 128, 128, 0.1));
  margin-bottom: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIST ITEMS INSIDE PANELS
   
   Simple, clean list item styling without heavy beveling.
   Selected items use a subtle green highlight.
   ───────────────────────────────────────────────────────────────────────────── */

/* Base list item inside panels - clean and simple */
.editor-content-panel .ui-list__item,
.editor-content-panel .panel-list-item {
  padding: 6px 12px;
  margin: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.1s ease;
  border: 1px solid transparent;
  background: transparent;
}

/* Hover state */
.editor-content-panel .ui-list__item:hover,
.editor-content-panel .panel-list-item:hover {
  background: rgba(128, 128, 128, 0.1);
}

/* Selected state - subtle green highlight */
.editor-content-panel .ui-list__item[aria-selected="true"],
.editor-content-panel .panel-list-item.selected {
  background: rgba(82, 165, 53, 0.12);
  border-color: rgba(82, 165, 53, 0.4);
}

.editor-content-panel .ui-list__item[aria-selected="true"]:hover,
.editor-content-panel .panel-list-item.selected:hover {
  background: rgba(82, 165, 53, 0.18);
}

/* Scrollbar styling removed — uses global Minecraft-themed scrollbars from index.css */

.etre-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.etre-mainArea {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.etre-toolBarArea {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 2px 6px 0 6px;
  min-height: 34px;
  background: transparent;
}

/* Reduce MUI Button padding for compact tab appearance - matches editor-header-tabs-container */
.etre-toolBarArea .MuiButton-root {
  padding: 2px 4px;
  min-width: unset;
}

.etre-toolBarArea .MuiStack-root {
  gap: 2px;
}

/* Inactive tab styling matching chip tabs */
.etre-toolBarArea .label-deseltab {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 6px 8px !important;
  cursor: pointer;
  transition: all 0.1s ease-out;
  gap: 6px;
  position: relative;
  background-color: var(--chip-shadow, rgba(60, 60, 60, 0.9)) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.4),
    inset -1px 0 0 var(--chip-highlight, rgba(255, 255, 255, 0.15)),
    0 1px 0 var(--chip-shadow, rgba(0, 0, 0, 0.3)) !important;
  margin-bottom: 0;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.etre-toolBarArea .label-deseltab::before,
.etre-toolBarArea .label-deseltab::after {
  content: none !important;
  display: none !important;
}

.etre-toolBarArea .label-deseltab:hover {
  background-color: var(--chip-main, rgba(80, 80, 80, 0.9)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.35),
    inset -1px 0 0 var(--chip-highlight, rgba(255, 255, 255, 0.2)),
    0 1px 0 var(--chip-shadow, rgba(0, 0, 0, 0.25)) !important;
}

/* Selected/active tab - pushed IN with accent underline */
.etre-toolBarArea .label-tab {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 6px 8px !important;
  gap: 6px;
  position: relative;
  background-color: var(--chip-border, rgba(40, 40, 40, 0.95)) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.55),
    inset -2px 0 0 rgba(0, 0, 0, 0.35),
    inset 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Add underline indicator for active tab */
.etre-toolBarArea .label-tab::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  bottom: 2px;
  left: 8px;
  right: 8px;
  height: 2px;
  background-color: #52a535;
  border-radius: 1px;
}

.etre-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.etre-header {
  font-size: 16pt;
  padding-top: 10px;
  padding-left: 30px;
  padding-bottom: 13px;
}

.etre-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.etre-rc-header {
  padding-left: 20px;
  padding-top: 10px;
}

.etre-header-interior {
  font-size: large;
}

.etre-loading {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.etre-retry-button {
  padding: 6px 16px;
  background-color: #52a535;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color 0.15s ease;
}

.etre-retry-button:hover {
  background-color: #63c244;
}

.etre-preview-container {
  width: 100%;
  flex: 1 1 auto;
  min-height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Make the model viewer and its canvas fill the preview container completely */
.etre-preview-container .mov-area {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  grid-template-rows: 40px 1fr;
  grid-template-columns: 1fr;
}

.etre-preview-container .mov-threedarea-lg {
  min-height: 0;
  grid-column: 1;
}

.etre-preview-container .mov-toolbar {
  grid-column: 1;
}

.etre-preview-container .ve-container,
.etre-preview-container .ve-main-area,
.etre-preview-container .ve-canvas-wrapper {
  height: 100%;
  min-height: 0;
}

.etre-preview-container .ve-canvas-wrapper canvas {
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
}

.etre-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  opacity: 0.7;
}

.etre-empty-state-icon {
  margin-bottom: 16px;
  opacity: 0.5;
}

.etre-empty-state-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}

.etre-empty-state-message {
  font-size: 14px;
  max-width: 400px;
  line-height: 1.5;
}

.rencoe-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.rencoe-inline {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
}

.rencoe-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.rencoe-header {
  font-size: 16pt;
  padding-top: 10px;
  padding-left: 30px;
  padding-bottom: 13px;
}

.rencoe-form {
  padding-top: 10px;
  padding-left: 20px;
}

.sevs-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.sevs-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.sevs-header {
  font-size: 16pt;
  padding-top: 10px;
  padding-left: 30px;
  padding-bottom: 13px;
}

.sevs-form {
  padding-top: 20px;
  padding-left: 20px;
}

.sevs-loading {
  padding: 4px;
}

.etpe-area {
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 210px 1fr;
}

.etpe-loading {
  padding: 6px;
}

.etpe-header {
  font-size: 17pt;
}

.etpe-componentForm {
  margin-bottom: 12px;
  padding: 0 16px 16px 16px;
  display: inline-grid;
  min-height: 220px;
}

.etpe-componentWrapper {
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 10px 6px;
  border: 2px outset;
  font-size: small;
}

.etpe-componentForm .ui-form__input {
  padding-top: 3px;
  margin-bottom: 4px;
}

.etpe-componentForm .ui-form__checkbox {
  padding-top: 3px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.etpe-componentForm .pu > :last-child {
  margin-top: 0px;
}
.etpe-componentForm .pt > :not(:last-child) {
  margin-bottom: 0px;
}

.etpe-componentHeader {
  padding-top: 20px;
  font-size: 11pt;
  padding-bottom: 14px;
}

.etpe-noeditor {
  padding: 10px;
}

.etpe-title {
  width: 200px;
}

.etpe-listPanel {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(128, 128, 128, 0.15);
}

body.ct-dark .etpe-listPanel {
  background-color: #2d2d2d;
}

.etpe-addButtonRow {
  padding: 4px 6px;
}

.etpe-componentList {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.etpe-componentList li {
  padding-left: 5px;
  padding-right: 2px;
}

.etpe-componentList .MuiListItemButton-root {
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  padding: 8px 12px;
  font-size: 0.875rem;
}

.etpe-componentList .MuiListItemButton-root:last-child {
  border-bottom: none;
}

.etpe-componentList .ui-list__itemcontent {
  margin-right: 3px;
}

.etpe-componentBin {
  padding: 12px 16px;
  min-height: 200px;
  vertical-align: top;
  grid-column: 2;
  overflow-y: auto;
  overflow-x: hidden;
}

body.ct-dark .etpe-componentBin {
  background-color: #252525;
}

.etpe-toolBarArea {
  flex: 0 0 auto;
}

.etpe-componentToolBarArea {
  margin-bottom: 8px;
}

.etde-outer {
  margin-left: 17px;
  margin-top: 20px;
  width: 200px;
  height: 46px;
  border: solid 3px black;
  background: rgb(37, 111, 177);
  background: linear-gradient(180deg, rgba(37, 111, 177, 1) 0%, rgba(48, 127, 193, 1) 37%, rgba(73, 150, 217, 1) 100%);
  display: inline-block;
}

.etde-outer-selected {
  margin-left: 17px;
  margin-top: 20px;
  width: 200px;
  height: 46px;
  border: solid 3px green;
  background: rgb(37, 111, 177);
  background: linear-gradient(180deg, rgba(37, 111, 177, 1) 0%, rgba(48, 127, 193, 1) 37%, rgba(73, 150, 217, 1) 100%);
  display: inline-block;
}

.etde-grid {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-rows: 52px 1fr;
  grid-template-columns: 1fr 420px;
}

.etde-mainArea {
  grid-row: 1;
  padding: 10px;
}

.etde-loading {
  padding: 4px;
}

.etde-title {
  font-weight: bold;
  padding-bottom: 10px;
  white-space: nowrap;
  overflow-x: hidden;
}

.etde-toolBarArea {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-template-columns: 220px auto 1fr;
  align-items: center;
  padding: 6px 0;
  background-color: rgba(0, 0, 0, 0.15);
}

.etde-dropdownArea {
  grid-column: 1;
  padding: 0 2px 0 6px;
}

.etde-dropdownArea .ui-dropdown__container {
  width: 210px;
}

.etde-toolBar {
  grid-column: 2;
  padding: 0 6px;
  display: flex;
  align-items: center;
}

/* Minecraft-style buttons for the diagram toolbar */
.etde-toolBar .MuiButton-root {
  background-color: #4a4a4a;
  border: 2px solid #2a2a2a;
  border-bottom-color: #1a1a1a;
  border-right-color: #1a1a1a;
  border-top-color: #5a5a5a;
  border-left-color: #5a5a5a;
  border-radius: 0;
  color: #e0e0e0;
  text-transform: none;
  padding: 4px 14px;
  min-height: 30px;
  font-size: 13px;
}

.etde-toolBar .MuiButton-root:hover {
  background-color: #585858;
  border-top-color: #6a6a6a;
  border-left-color: #6a6a6a;
  border-bottom-color: #1a1a1a;
  border-right-color: #1a1a1a;
  color: #ffffff;
}

.etde-toolBar .MuiButton-root:active {
  background-color: #383838;
  border-top-color: #1a1a1a;
  border-left-color: #1a1a1a;
  border-bottom-color: #5a5a5a;
  border-right-color: #5a5a5a;
}

.etde-container {
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.etde-container-wide {
  grid-column-start: 1;
  grid-column-end: 3;
}

.etde-pane {
  grid-row: 2;
  grid-column: 2;
  width: 420px;
  max-width: 420px;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Force all pane children to respect the 420px constraint */
.etde-pane * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Let form text wrap naturally in the narrow pane */
.etde-pane .rng-data {
  display: block;
  max-width: 100%;
}

.etde-pane .rng-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.etde-pane .rng-intro {
  display: inline;
  font-size: 13px;
  white-space: normal;
  text-wrap: wrap;
}

.etde-pane .rng-label {
  font-size: 15px;
}

.etde-pane .rng-cell {
  display: inline-block;
}

.etde-pane .rng-joiner {
  display: inline;
  font-size: 13px;
}

/* Prevent double scrollbars: the pane handles scrolling, not inner areas */
.etde-pane .ead-area,
.etde-pane .ead-n-area {
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

/* Let filter clause dropdowns shrink to fit the narrow pane */
.etde-pane .mificln-inner .MuiOutlinedInput-root,
.etde-pane .mificln-inner .MuiSelect-select {
  max-width: 100%;
}

.etde-pane .mificln-inner .ui-dropdown__container,
.etde-pane .mificln-test .ui-dropdown__container {
  width: 100%;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTITY TYPE DIAGRAM - Minecraft-Style Connections
   
   Custom styling for ReactFlow handles and edges to look more like
   Minecraft redstone circuits with plugs, sockets, and glowing wires.
   ═══════════════════════════════════════════════════════════════════════════ */

/* === HANDLE BASE STYLES === */

/* Inbound handles (target) - Socket/Receptacle style */
.react-flow__handle.react-flow__handle-top,
.react-flow__handle.react-flow__handle-bottom[id="target"] {
  width: 12px !important;
  height: 12px !important;
  background: #1a1a1a !important;
  border: 2px solid #555 !important;
  border-radius: 2px !important;
  box-shadow: var(--surface-shadow-inset, inset 0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Outbound handles (source) - Plug style */
.react-flow__handle.react-flow__handle-left,
.react-flow__handle.react-flow__handle-right {
  width: 10px !important;
  height: 10px !important;
  background: linear-gradient(135deg, #e8a855 0%, #c08030 100%) !important;
  border: 2px solid #8b5a00 !important;
  border-radius: 2px !important;
  box-shadow: 0 0 6px rgba(232, 168, 85, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.react-flow__handle.react-flow__handle-left:hover,
.react-flow__handle.react-flow__handle-right:hover {
  background: linear-gradient(135deg, #ffc060 0%, #e8a040 100%) !important;
  box-shadow: 0 0 12px rgba(232, 168, 85, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  transform: scale(1.2);
}

/* Add handle - Green socket */
.react-flow__handle[id="add"] {
  background: #1a3a1a !important;
  border-color: #2d5a2d !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 4px rgba(76, 175, 80, 0.3);
}

.react-flow__handle[id="add"]:hover {
  border-color: #4caf50 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(76, 175, 80, 0.6);
}

/* Remove handle - Red socket */
.react-flow__handle[id="remove"] {
  background: #3a1a1a !important;
  border-color: #5a2d2d !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 4px rgba(244, 67, 54, 0.3);
}

.react-flow__handle[id="remove"]:hover {
  border-color: #f44336 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(244, 67, 54, 0.6);
}

/* === EDGE STYLES - Redstone Wire Look === */

/* Base edge glow effect */
.react-flow__edge-path {
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
}

/* Green edges (add component group) */
.react-flow__edge.react-flow__edge-event-component-group-add-edge path {
  stroke: #4caf50 !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 4px rgba(76, 175, 80, 0.6));
}

/* Red edges (remove component group) */
.react-flow__edge.react-flow__edge-event-component-group-remove-edge path {
  stroke: #d63030 !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 4px rgba(214, 48, 48, 0.6));
}

/* Orange edges (event to event) */
.react-flow__edge.react-flow__edge-entity-type-event-edge path {
  stroke: #ff8c00 !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 4px rgba(255, 140, 0, 0.6));
}

/* Arrow markers - Redstone torch style */
.react-flow__arrowhead polyline {
  stroke-width: 2px;
}

/* Connection line while dragging */
.react-flow__connection-path {
  stroke: #ff4444 !important;
  stroke-width: 3px !important;
  stroke-dasharray: 8, 4 !important;
  animation: redstone-pulse 1s ease-in-out infinite;
}

@keyframes redstone-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 68, 68, 0.8));
    opacity: 1;
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 68, 68, 1));
    opacity: 0.8;
  }
}

/* Edge labels */
.react-flow__edge-textwrapper {
  font-family: "Minecraft", "Courier New", monospace;
}

/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}

.micb-outerExpand {
  height: 100%;
  width: 100%;
}

.micb-button {
  border: 0px !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  padding: 0px !important;
  text-align: left !important;
  vertical-align: inherit !important;
}

.micb-button .bi {
  height: 100% !important;
}

.micb-grid {
  display: grid;
  width: 100%;
  grid-template-columns: 3px 1fr 3px;
  grid-template-rows: 3px 1fr 3px;
  border: solid 2px;
}

.micb-edge {
  font-size: 1pt;
  font-family: sans-serif;
}

.micb-7 {
  grid-column: 1;
  grid-row: 1;
}

.micb-8 {
  grid-column: 2;
  grid-row: 1;
}

.micb-9 {
  grid-column: 3;
  grid-row: 1;
}

.micb-4 {
  grid-column: 1;
  grid-row: 2;
}

.micb-5 {
  grid-column: 2;
  grid-row: 2;
}

.micb-6 {
  grid-column: 3;
  grid-row: 2;
}

.micb-1 {
  grid-column: 1;
  grid-row: 3;
}

.micb-2 {
  grid-column: 2;
  grid-row: 3;
}

.micb-3 {
  grid-column: 3;
  grid-row: 3;
}

.ecsn-box {
  width: 280px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ecsn-inner {
  padding-top: 0px;
  padding-bottom: 0px;
}

.ecsn-header {
  height: 34px;
  padding-left: 10px;
  padding-top: 8px;
  padding-bottom: 6px;
  vertical-align: middle;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
}

.ecsn-headerIcon {
  opacity: 0.7;
}

.ecsn-unselected {
  border: 3px solid transparent;
  transition: all 0.2s ease;
}

.ecsn-unselected:hover {
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.ecsn-selected {
  border: 3px solid #4caf50;
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}

/* Connection row - integrates handles with content */
.ecsn-connectionRow {
  display: flex;
  align-items: center;
  height: 38px;
  margin-top: 4px;
  margin-bottom: 4px;
  position: relative;
}

/* Handle areas on left and right sides */
.ecsn-handleArea {
  width: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.ecsn-handleLeft {
  /* Left handle area - connects to strip */
}

.ecsn-handleRight {
  /* Right handle area - connects to strip */
}

/* The content strip between handles */
.ecsn-connectionContent {
  flex: 1;
  height: 30px;
  border-top: solid 1px;
  border-bottom: solid 1px;
  border-left: solid 4px;
  border-right: solid 1px;
  border-radius: 3px;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 8px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.ecsn-connectionContent:hover {
  filter: brightness(1.1);
}

.ecsn-connectionPointText {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Override ReactFlow handle positioning within our row structure */
.ecsn-handleArea .react-flow__handle {
  position: relative !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

.ecsn-connectBin {
  padding-top: 6px;
  padding-bottom: 4px;
}

.eten-outer {
  border: 3px solid;
  padding: 4px;
  width: 220px;
}

.eten-inner {
  padding: 4px;
  background-color: #669966;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}

.eten-selected {
  border: solid 3px red;
}

.eten-focused {
  border: solid 3px #cccccc;
}

.eten-unselected {
  border: solid 3px transparent;
}

.eten-label {
  padding-left: 4px;
}

.eten-icon {
  padding-top: 2px;
}

.etsn-outer {
  border: 3px solid;
  width: 260px;
  height: 120px;
}

.etsn-box {
  width: 254px;
  height: 120px;
}

.etsn-inner {
  height: 98px;
  margin: 4px;
}

.etsn-selected {
  border: solid 3px red;
}

.etsn-focused {
  border: solid 3px #cccccc;
}

.etsn-unselected {
  border: solid 3px transparent;
}

.etsn-icon {
  padding-top: 2px;
}

.mov-area {
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  width: calc(100% - 2px);
  height: 100%;
  display: grid;
  grid-template-columns: 200px 1fr 260px;
  grid-template-rows: 40px 1fr 120px;
}

.mov-toolbar {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 4;
  padding: 1px 3px;
  display: flex;
  align-items: center;
}

.mov-loading-area {
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 100px;
  background-color: #1e1e2e; /* Viewer-local: always-dark background */
  color: #cccccc; /* Viewer-local: light text on dark background */
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
}

.mov-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #52a535;
  border-radius: 50%;
  animation: mov-spin 1s linear infinite;
}

@keyframes mov-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mov-error-message {
  color: #ccc;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  text-align: center;
}

.mov-retry-button {
  padding: 6px 16px;
  /* Darker green than the brand `#52a535` so white text reaches 6.7:1 contrast
   * (WCAG 1.4.3 AA). The brand green at `#52a535` only yields ~3.1:1 with
   * white, which fails AA for non-large text. The lighter brand green is
   * preserved on hover for visual feedback (still ≥3:1 with white). */
  background-color: #2d6a14;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.mov-retry-button:hover {
  background-color: #3a7d20;
}

/* High-contrast mode: use system colors for visibility */
@media (forced-colors: active) {
  .mov-loading-area {
    background-color: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
  }

  .mov-loading-spinner {
    border-color: CanvasText;
    border-top-color: Highlight;
    forced-color-adjust: none;
  }

  .mov-error-message {
    color: CanvasText;
  }

  .mov-retry-button {
    background-color: Highlight;
    color: HighlightText;
    border: 1px solid ButtonText;
    forced-color-adjust: none;
  }

  .mov-retry-button:hover {
    background-color: HighlightText;
    color: Highlight;
  }
}

.mov-toolbar-area {
  display: grid;
  grid-template-columns: 1fr 370px 1px;
}

.mov-toolbar-inner {
  grid-column: 1;
  padding-top: 2px;
  white-space: nowrap;
}

.mov-entityselector-area {
  grid-column: 2;
  text-align: right;
}

.mov-entityadder-area {
  grid-column: 3;
}

.mov-threedarea-lg {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 4;
}

.mov-threedarea {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}

.mov-selectionarea {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  transition: all 0.3s ease-in-out;
  padding: 0px;
  margin: 0px;
  height: 120px;
}

.mov-editorbin {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 4;
  padding: 4px;
}

.mov-editorgrid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 290px 1fr;
}

.mov-editorsearchinput {
  grid-column-start: 1;
  grid-row: 1;
  grid-column-end: 2;
  margin-top: 4px;
  margin-left: 20px;
}

.mov-searchview {
  grid-column-end: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  text-align: left;
  margin-top: 4px;
  width: 120px;
  height: 80px;
}

.mov-searchviewcontainer {
  width: 80px;
  height: 80px;
}

/* Readonly mode - no toolbar, no grid layout */
.mov-area-readonly {
  display: block;
  width: 100%;
  height: 100%;
}

.mov-threedarea-readonly {
  width: 100%;
  height: 100%;
}

/* Light theme overrides for ModelViewer */
body.ct-light .mov-loading-area {
  background-color: #f5f0ed;
  color: #262423;
}

body.ct-light .mov-error-message {
  color: #262423;
}

body.ct-light .mov-retry-button {
  background-color: #2d6a14;
  color: #fff;
}

body.ct-light .mov-retry-button:hover {
  background-color: #3a7d20;
}

/**
 * BlockTypePicker CSS - Visual Block Type Selection Component
 * 
 * Styled to match VolumeEditor and the Minecraft Creator Tools UX Guidelines.
 * Uses dark semi-transparent overlays with the Minecraft color palette.
 * 
 * @see docs/ux/UXGuidelines.md
 */

/* ═══════════════════════════════════════════════════════════════════
 * CONTAINER
 * ═══════════════════════════════════════════════════════════════════ */

.bp-container {
  position: relative;
  width: 100%;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
}

.bp-container.bp-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * TRIGGER BUTTON (Selected Block Display)
 * ═══════════════════════════════════════════════════════════════════ */

.bp-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(45, 45, 48, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 36px;
}

.bp-trigger:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(55, 55, 58, 0.95);
}

.bp-container.bp-open .bp-trigger {
  border-color: rgba(82, 165, 53, 0.6);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bp-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.bp-selected-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.bp-selected-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-arrow {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  margin-left: 8px;
  flex-shrink: 0;
  display: inline-block;
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27rgba%28255,255,255,0.5%29%27 d=%27M0 0l5 6 5-6z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 6px;
  overflow: hidden;
  text-indent: -9999px;
}

.bp-arrow-up {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════════
 * DROPDOWN PANEL
 * ═══════════════════════════════════════════════════════════════════ */

.bp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: rgba(35, 35, 38, 0.98);
  border: 1px solid rgba(82, 165, 53, 0.6);
  border-top: none;
  border-radius: 0 0 4px 4px;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-height: 400px;
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════
 * SEARCH INPUT
 * ═══════════════════════════════════════════════════════════════════ */

.bp-search {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bp-search-input {
  width: 100%;
  background-color: rgba(28, 28, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
}

.bp-search-input:focus {
  border-color: rgba(82, 165, 53, 0.6);
}

.bp-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════
 * BLOCK LIST
 * ═══════════════════════════════════════════════════════════════════ */

.bp-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

.bp-loading,
.bp-empty {
  padding: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
 * BLOCK ITEM
 * ═══════════════════════════════════════════════════════════════════ */

.bp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.1s;
}

.bp-item:hover,
.bp-item-selected {
  background-color: rgba(82, 165, 53, 0.2);
}

.bp-item-current {
  background-color: rgba(82, 165, 53, 0.15);
  border-left: 2px solid #52a535;
  margin-left: -2px;
  padding-left: 10px;
}

.bp-item-image-container {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.bp-item-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bp-item-placeholder {
  font-size: 18px;
  opacity: 0.5;
}

.bp-no-image .bp-item-placeholder {
  display: block;
}

.bp-item-info {
  min-width: 0;
  flex: 1;
}

.bp-item-name {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-item-id {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-family: "Consolas", "Monaco", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scrollbar styling removed — uses global Minecraft-themed scrollbars from index.css */

/**
 * VolumeEditor CSS - Structure Editor Styling
 * 
 * Styled to match WorldMap.css and the Minecraft Creator Tools UX Guidelines.
 * Uses dark semi-transparent overlays with the Minecraft color palette.
 * 
 * @see docs/ux/UXGuidelines.md
 * @see docs/ux/ColorSystem.md
 */

/* ═══════════════════════════════════════════════════════════════════
 * CONTAINER & LAYOUT
 * ═══════════════════════════════════════════════════════════════════ */

.ve-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 0; /* Allow flex children to shrink and scroll */
  max-height: 100%;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.ve-main-area {
  position: relative;
  flex: 1;
  height: 100%;
  min-height: 100%;
}

.ve-main-area.ve-with-panel {
  /* Reduce width when right panel is visible */
  width: calc(100% - 280px);
}

.ve-main-area.ve-with-panels {
  /* Main area adjusts automatically via flex layout */
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════
 * LEFT TOOL BAR - Vertical Tool Selection
 * Far-left vertical toolbar for switching between tools (Selection, Brush, etc.)
 * ═══════════════════════════════════════════════════════════════════ */

.ve-left-toolbar {
  width: 64px;
  height: 100%;
  background-color: rgba(28, 28, 30, 0.98);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
  flex-shrink: 0;
}

.ve-tool-btn {
  width: 56px;
  height: 48px;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.15s;
  padding: 4px;
}

.ve-tool-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.ve-tool-btn-active {
  background-color: rgba(82, 165, 53, 0.3);
  border-left: 2px solid #52a535;
  border-radius: 0 6px 6px 0;
  margin-left: -2px;
}

.ve-tool-btn-active:hover {
  background-color: rgba(82, 165, 53, 0.4);
}

.ve-tool-icon {
  font-size: 16px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}

.ve-tool-btn-active .ve-tool-icon {
  color: #86d562;
}

.ve-tool-label {
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.2px;
  white-space: nowrap;
  /* Ensure long labels like "Properties" / "Controls" don't overflow the
   * narrow 40px button. They get clipped instead of bleeding outside. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ve-tool-btn-active .ve-tool-label {
  color: #86d562;
}

/* Separator between tool groups in left toolbar */
.ve-toolbar-separator {
  width: 32px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 4px 0;
}

/* Compact toolbar at small viewports */
@media (max-width: 900px) {
  .ve-left-toolbar {
    width: 36px;
    padding: 4px 0;
  }

  .ve-tool-btn {
    width: 32px;
    height: 36px;
  }

  .ve-tool-label {
    display: none;
  }

  .ve-toolbar-separator {
    width: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * TOP TOOLBAR - Global Actions
 * Horizontal toolbar at top for undo/redo, help, and other global actions
 * ═══════════════════════════════════════════════════════════════════ */

.ve-top-toolbar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background-color: rgba(28, 28, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  max-width: calc(100% - 16px);
}

.ve-top-toolbar-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.ve-top-toolbar-divider {
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 0 6px;
}

/* Hide dividers when toolbar wraps to multiple rows */
@media (max-width: 700px) {
  .ve-top-toolbar-divider {
    display: none;
  }
}

.ve-top-btn {
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}

.ve-top-btn:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ve-top-btn:active:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.15);
}

.ve-top-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ve-top-btn-icon {
  font-size: 16px;
  line-height: 1;
}

.ve-top-btn-active {
  background-color: rgba(82, 165, 53, 0.3);
  color: #86d562;
}

.ve-top-btn-active:hover {
  background-color: rgba(82, 165, 53, 0.4);
}

/* Top Toolbar - Labels */
.ve-top-toolbar-label {
  color: rgba(255, 255, 255, 0.6);
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

/* Top Toolbar - Inline Buttons (for tool-specific actions) */
.ve-top-toolbar-btn {
  background-color: rgba(50, 50, 50, 0.9);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.ve-top-toolbar-btn:hover:not(:disabled) {
  background-color: rgba(70, 70, 70, 0.95);
  border-color: rgba(255, 255, 255, 0.35);
}

.ve-top-toolbar-btn:active:not(:disabled) {
  background-color: rgba(90, 90, 90, 0.95);
}

.ve-top-toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ve-top-toolbar-btn-active {
  background-color: rgba(82, 165, 53, 0.85);
  border-color: rgba(134, 213, 98, 0.6);
  color: #fff;
}

.ve-top-toolbar-btn-active:hover:not(:disabled) {
  background-color: rgba(92, 185, 63, 0.9);
  border-color: rgba(134, 213, 98, 0.8);
}

.ve-top-toolbar-btn-primary {
  background-color: rgba(82, 165, 53, 0.85);
  border-color: rgba(134, 213, 98, 0.5);
}

.ve-top-toolbar-btn-primary:hover:not(:disabled) {
  background-color: rgba(92, 185, 63, 0.9);
}

.ve-top-toolbar-btn-danger {
  background-color: rgba(180, 50, 50, 0.85);
  border-color: rgba(220, 80, 80, 0.5);
}

.ve-top-toolbar-btn-danger:hover:not(:disabled) {
  background-color: rgba(200, 60, 60, 0.9);
}

/* Top Toolbar - Select Dropdown */
.ve-top-toolbar-select {
  background-color: rgba(50, 50, 50, 0.9);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  cursor: pointer;
  min-width: 80px;
}

.ve-top-toolbar-select:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.ve-top-toolbar-select:focus {
  outline: none;
  border-color: rgba(82, 165, 53, 0.6);
}

/* Top Toolbar - Number Input */
.ve-top-toolbar-input {
  background-color: rgba(50, 50, 50, 0.9);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  width: 50px;
  text-align: center;
}

.ve-top-toolbar-input:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.ve-top-toolbar-input:focus {
  outline: none;
  border-color: rgba(82, 165, 53, 0.6);
}

.ve-undo-count {
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 4px;
  min-width: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
 * LEFT PANEL - Tool-Specific Settings
 * Panel that shows settings for the currently selected tool
 * ═══════════════════════════════════════════════════════════════════ */

.ve-left-panel {
  width: 240px;
  height: 100%;
  max-height: 100%;
  background-color: rgba(35, 35, 38, 0.98);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  min-height: 0; /* Critical for flex container scrolling */
}

.ve-canvas-wrapper {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
 * COORDINATES DISPLAY - Bottom Left
 * Shows current cursor/selection coordinates
 * ═══════════════════════════════════════════════════════════════════ */

.ve-coords-container {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.ve-coords-display {
  background-color: rgba(30, 30, 30, 0.9);
  color: #aaffaa;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "Consolas", "Monaco", "Fira Code", monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════
 * BLOCK INFO DISPLAY - Bottom Right
 * Shows information about hovered/selected block
 * ═══════════════════════════════════════════════════════════════════ */

.ve-block-info-container {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  pointer-events: none;
}

.ve-block-info {
  background-color: rgba(30, 30, 30, 0.9);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 160px;
  max-width: 280px;
}

.ve-block-info-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff;
}

.ve-block-info-type {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-family: "Consolas", "Monaco", monospace;
}

.ve-block-info-coords {
  color: #aaffaa;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
 * KEYBOARD SHORTCUTS HELP - Top Left
 * Quick reference for keyboard controls
 * ═══════════════════════════════════════════════════════════════════ */

.ve-help-container {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
  pointer-events: auto;
}

.ve-help-toggle {
  background-color: rgba(40, 40, 40, 0.85);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ve-help-toggle:hover {
  background-color: rgba(60, 60, 60, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.ve-help-panel {
  background-color: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 220px;
  max-width: 280px;
  margin-top: 8px;
}

.ve-help-title {
  font-family: "Minecrafter", "Minecraft", monospace;
  font-size: 14px;
  color: #86d562;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.ve-help-section {
  margin-bottom: 12px;
}

.ve-help-section:last-child {
  margin-bottom: 0;
}

.ve-help-section-title {
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.ve-help-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}

.ve-help-key {
  background-color: rgba(60, 60, 60, 0.8);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ve-help-action {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
 * CAMERA CONTROLS - Top Right
 * Visual indicators for camera mode/speed
 * ═══════════════════════════════════════════════════════════════════ */

.ve-camera-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.ve-camera-btn {
  background-color: rgba(40, 40, 40, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ve-camera-btn:hover {
  background-color: rgba(80, 80, 80, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
}

.ve-camera-btn:active {
  background-color: rgba(100, 100, 100, 0.9);
}

.ve-camera-btn-active {
  background-color: rgba(82, 165, 53, 0.3);
  border-color: rgba(82, 165, 53, 0.6);
}

.ve-camera-btn-active:hover {
  background-color: rgba(82, 165, 53, 0.5);
  border-color: rgba(82, 165, 53, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════
 * SELECTION INDICATOR
 * Shows when blocks are selected
 * ═══════════════════════════════════════════════════════════════════ */

.ve-selection-info {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background-color: rgba(82, 165, 53, 0.9);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * LOADING OVERLAY
 * ═══════════════════════════════════════════════════════════════════ */

.ve-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(20, 20, 25, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  pointer-events: none;
}

.ve-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 36px;
  background-color: rgba(40, 40, 45, 0.95);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  min-width: 200px;
}

.ve-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #52a535;
  border-radius: 50%;
  animation: ve-spin 1s linear infinite;
}

@keyframes ve-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ve-loading-message {
  color: #e0e0e0;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.ve-loading-retry-button {
  margin-top: 8px;
  padding: 8px 20px;
  background-color: #52a535;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.15s ease;
}

.ve-loading-retry-button:hover {
  background-color: #63c244;
}

/* ═══════════════════════════════════════════════════════════════════
 * RIGHT PANEL - Selection Properties
 * Matching Minecraft Editor selection tool panel
 * ═══════════════════════════════════════════════════════════════════ */

.ve-right-panel {
  width: 280px;
  height: 100%;
  background-color: rgba(35, 35, 38, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.ve-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background-color: rgba(45, 45, 48, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ve-panel-icon {
  font-size: 18px;
}

.ve-panel-title {
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
}

.ve-panel-section {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ve-panel-section-title {
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.ve-panel-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ve-panel-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.ve-panel-radio input[type="radio"] {
  accent-color: #52a535;
  width: 14px;
  height: 14px;
}

.ve-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ve-panel-hint {
  margin-top: 8px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.ve-panel-hint kbd {
  background-color: rgba(60, 60, 63, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
}

.ve-panel-btn {
  flex: 1;
  min-width: 70px;
  background-color: rgba(60, 60, 63, 0.9);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.ve-panel-btn:hover:not(:disabled) {
  background-color: rgba(80, 80, 83, 0.95);
  border-color: rgba(255, 255, 255, 0.25);
}

.ve-panel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ve-panel-btn-primary {
  background-color: rgba(82, 165, 53, 0.8);
  border-color: rgba(134, 213, 98, 0.4);
}

.ve-panel-btn-primary:hover:not(:disabled) {
  background-color: rgba(92, 185, 63, 0.9);
}

.ve-panel-btn-danger {
  background-color: rgba(165, 53, 53, 0.8);
  border-color: rgba(213, 98, 98, 0.4);
}

.ve-panel-btn-danger:hover:not(:disabled) {
  background-color: rgba(185, 63, 63, 0.9);
}

/* Warning text for destructive operations (e.g., resize shrink) */
.ve-props-warning {
  background-color: rgba(165, 53, 53, 0.2);
  border: 1px solid rgba(165, 53, 53, 0.4);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11px;
  color: rgba(255, 200, 200, 0.9);
  line-height: 1.5;
}

.ve-panel-field {
  margin-bottom: 12px;
}

.ve-panel-field:last-child {
  margin-bottom: 0;
}

.ve-panel-field-label {
  display: block;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.ve-panel-select {
  width: 100%;
  background-color: rgba(50, 50, 53, 0.95);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 8px 28px 8px 10px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath fill=%27rgba%28255,255,255,0.5%29%27 d=%27M0 0l5 6 5-6z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

.ve-panel-select:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.ve-panel-select:focus {
  outline: none;
  border-color: rgba(82, 165, 53, 0.6);
}

.ve-panel-coords {
  display: flex;
  gap: 8px;
}

.ve-panel-coord {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(50, 50, 53, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 6px 8px;
}

.ve-panel-coord-label {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.ve-panel-coord-value {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 14px;
  color: #aaffaa;
  font-weight: 600;
}

.ve-panel-value {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.ve-panel-block-info {
  background-color: rgba(50, 50, 53, 0.6);
  border-radius: 4px;
  padding: 10px 12px;
}

.ve-panel-block-name {
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.ve-panel-block-type {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}

.ve-panel-block-coords {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  color: #aaffaa;
}

/* ═══════════════════════════════════════════════════════════════════
 * MARQUEE STEP HINT
 * Shows current step in marquee selection
 * ═══════════════════════════════════════════════════════════════════ */

.ve-marquee-hint {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background-color: rgba(30, 30, 30, 0.9);
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 16px;
  border-radius: 6px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * TOOLBAR INPUT CONTROLS
 * Input fields for the top toolbar
 * ═══════════════════════════════════════════════════════════════════ */

.ve-toolbar-select {
  background-color: rgba(50, 50, 53, 0.95);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
}

.ve-toolbar-select:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.ve-toolbar-select:focus {
  outline: none;
  border-color: rgba(82, 165, 53, 0.6);
}

.ve-toolbar-input {
  background-color: rgba(50, 50, 53, 0.95);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  width: 50px;
  text-align: center;
}

.ve-toolbar-input:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.ve-toolbar-input:focus {
  outline: none;
  border-color: rgba(82, 165, 53, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════
 * PANEL INPUT CONTROLS
 * Additional input styles for the panel
 * ═══════════════════════════════════════════════════════════════════ */

.ve-panel-input {
  width: 100%;
  background-color: rgba(50, 50, 53, 0.95);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
}

.ve-panel-input:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.ve-panel-input:focus {
  outline: none;
  border-color: rgba(82, 165, 53, 0.6);
}

.ve-panel-slider {
  flex: 1;
  height: 20px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* Track - narrow recessed bar */
.ve-panel-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 0;
  background-color: #3a3a3a;
  border: 2px solid #1a1a1a;
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.3),
    inset -1px -1px 0 rgba(255, 255, 255, 0.1);
}

.ve-panel-slider::-moz-range-track {
  height: 8px;
  border-radius: 0;
  background-color: #3a3a3a;
  border: 2px solid #1a1a1a;
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.3),
    inset -1px -1px 0 rgba(255, 255, 255, 0.1);
}

/* Thumb - blocky Minecraft button style with outset bevel */
.ve-panel-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 20px;
  margin-top: -8px;
  border-radius: 0;
  background-color: #6b6b6b;
  border: 2px solid #8a8a8a;
  border-right-color: #3a3a3a;
  border-bottom-color: #3a3a3a;
  box-shadow:
    inset 1px 1px 0 #9a9a9a,
    inset -1px -1px 0 #2a2a2a,
    0 0 0 1px #1a1a1a;
  cursor: pointer;
}

.ve-panel-slider::-moz-range-thumb {
  width: 12px;
  height: 20px;
  border-radius: 0;
  background-color: #6b6b6b;
  border: 2px solid #8a8a8a;
  border-right-color: #3a3a3a;
  border-bottom-color: #3a3a3a;
  box-shadow:
    inset 1px 1px 0 #9a9a9a,
    inset -1px -1px 0 #2a2a2a,
    0 0 0 1px #1a1a1a;
  cursor: pointer;
}

/* Thumb hover - lighter */
.ve-panel-slider::-webkit-slider-thumb:hover {
  background-color: #7a7a7a;
  border-color: #9a9a9a;
  border-right-color: #4a4a4a;
  border-bottom-color: #4a4a4a;
}

.ve-panel-slider::-moz-range-thumb:hover {
  background-color: #7a7a7a;
  border-color: #9a9a9a;
  border-right-color: #4a4a4a;
  border-bottom-color: #4a4a4a;
}

/* Thumb active - green Minecraft accent */
.ve-panel-slider::-webkit-slider-thumb:active {
  background-color: #5ac035;
  border: 2px solid #7de858;
  border-right-color: #2d6a1a;
  border-bottom-color: #2d6a1a;
  box-shadow:
    inset 1px 1px 0 #8ef068,
    inset -1px -1px 0 #1a4a10,
    0 0 0 2px #ffffff,
    0 0 0 3px #1a1a1a;
}

.ve-panel-slider::-moz-range-thumb:active {
  background-color: #5ac035;
  border: 2px solid #7de858;
  border-right-color: #2d6a1a;
  border-bottom-color: #2d6a1a;
  box-shadow:
    inset 1px 1px 0 #8ef068,
    inset -1px -1px 0 #1a4a10,
    0 0 0 2px #ffffff,
    0 0 0 3px #1a1a1a;
}

.ve-panel-slider-value {
  min-width: 24px;
  text-align: right;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* Number input for showing slider values */
.ve-panel-number-input {
  width: 48px;
  padding: 4px 6px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
}

.ve-panel-number-input:focus {
  outline: none;
  border-color: #52a535;
  background-color: rgba(0, 0, 0, 0.5);
}

.ve-panel-number-input::-webkit-inner-spin-button,
.ve-panel-number-input::-webkit-outer-spin-button {
  opacity: 0.5;
}

/* Slider row layout: label + slider + number input in a row */
.ve-panel-field:has(.ve-panel-slider) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.ve-panel-field:has(.ve-panel-slider) .ve-panel-field-label {
  min-width: 16px;
  margin-bottom: 0;
}

.ve-panel-field:has(.ve-panel-slider) .ve-panel-slider {
  flex: 1;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════
 * BLOCK INSPECTOR PROPERTIES LIST
 * ═══════════════════════════════════════════════════════════════════ */

.ve-panel-properties-list {
  background-color: rgba(40, 40, 43, 0.6);
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ve-panel-property-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background-color: rgba(50, 50, 53, 0.5);
  border-radius: 3px;
  gap: 12px;
}

.ve-panel-property-row:hover {
  background-color: rgba(60, 60, 63, 0.7);
}

.ve-panel-property-name {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  word-break: break-word;
  flex-shrink: 1;
  min-width: 0;
}

.ve-panel-property-value {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  color: #aaffaa;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Statistic value (for selection volume, etc.) */
.ve-panel-stat-value {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 13px;
  color: #aaffaa;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
 * LEGACY TOOLBAR (kept for compatibility)
 * ═══════════════════════════════════════════════════════════════════ */

.ve-toolbar {
  position: absolute;
  bottom: 60px;
  left: 16px;
  z-index: 100;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

/* High-contrast mode: ensure tool labels and icons are readable */
@media (forced-colors: active) {
  .ve-tool-label,
  .ve-tool-icon,
  .ve-tool-btn-active .ve-tool-label,
  .ve-tool-btn-active .ve-tool-icon {
    color: CanvasText;
  }

  .ve-tool-btn-active {
    border: 1px solid Highlight;
  }

  .ve-left-toolbar,
  .ve-top-toolbar {
    background-color: Canvas;
    color: CanvasText;
  }
}
.be-outer {
}

.be-pe {
  max-height: calc(100vh - 200px);
  padding: 4px;
  overflow-y: auto;
}

.be-header {
  background-color: #404040;
  padding: 10px;
  margin-left: 2px;
}

.be-title {
  font-weight: bold;
  margin-bottom: 4px;
}


.bpe-outer {
  padding: 2px;
}
.btt-outer {
  display: block;
}

.btt-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  margin: 1px;
  margin-top: 3px;
}

.btt-iconplaceholder {
  width: 16px;
  height: 16px;
  display: inline-block;
  border: solid 1px silver;
  margin: 1px;
  margin-top: 3px;
}

.btt-title {
  vertical-align: top;
  padding-top: 2px;
  padding-left: 4px;
}

.bpe-outer {
  padding: 4px;
  overflow-y: auto;
  height: 100%;
}

.bpe-row {
  padding-bottom: 10px;
  padding-top: 2px;
}

.bpe-row {
  padding-right: 4px;
}

/**
 * EntityTypeOverviewPanel.css
 *
 * Styles for the entity type overview panel, which displays:
 * - A model viewer on the left
 * - Behaviors (component summaries) on the right in a scrollable vertical list
 */

/* CSS Custom Properties for theming */
.etop-outer-dark {
  --etop-bg: #262423;
  --etop-panel-bg: #2a2a2a;
  --etop-text: #e0e0e0;
  --etop-text-muted: #a39895;
  --etop-border: #4a4543;
  --etop-link: #86d562;
  --etop-chip-bg: #4a4543;
  --etop-row-hover: rgba(255, 255, 255, 0.05);
  --etop-icon-bg: #262423;
}

.etop-outer-light {
  --etop-bg: #f5f0ed;
  --etop-panel-bg: #ffffff;
  --etop-text: #333333;
  --etop-text-muted: #6b6562;
  --etop-border: #d4ccc9;
  --etop-link: #3e8828;
  --etop-chip-bg: #ede5e2;
  --etop-row-hover: rgba(0, 0, 0, 0.03);
  --etop-icon-bg: #d4ccc9;
}

.etop-outer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 12px;
  padding: 8px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.etop-modelSection {
  flex: 0 0 auto;
  width: 100%;
  height: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Stretch the panel to fill the model section so the canvas can use the
   full available height instead of collapsing to its intrinsic size. */
.etop-modelSection > .editor-content-panel {
  flex: 1 1 auto;
  min-height: 0;
}

/* Lay the panel content out as a column so the viewer can flex-grow and
   the hint stays pinned underneath it. */
.etop-modelSection .editor-panel-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.etop-modelViewer {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Ensure the canvas fills the container without letterboxing */
.etop-modelViewer canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.etop-modelHint {
  flex: 0 0 auto;
  text-align: center;
  font-size: 11px;
  opacity: 0.5;
  padding: 2px 0;
  letter-spacing: 0.3px;
}

/* Behaviors section - below model, scrollable */
.etop-behaviorsSection {
  flex: 1 1 auto;
  width: 100%;
  min-height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Wide screen layout: side-by-side with model on left, behaviors on right */
@media (min-width: 1200px) {
  .etop-outer {
    flex-direction: row;
    overflow: hidden;
  }

  .etop-modelSection {
    flex: 1 1 0;
    min-width: 300px;
    height: 100%;
  }

  .etop-behaviorsSection {
    flex: 0 0 400px !important;
    width: 400px !important;
    min-width: 400px !important;
    height: 100%;
    min-height: unset;
    overflow-y: auto;
  }
}

.etop-behaviorsScroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

/* Component group sections */
.etop-componentGroupSection {
  margin-bottom: 16px;
}

.etop-componentGroupSection:last-child {
  margin-bottom: 0;
}

.etop-groupHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--etop-border);
  cursor: pointer;
}

.etop-groupName {
  font-size: 13px;
  font-weight: 600;
  color: var(--etop-text);
}

.etop-groupLink {
  font-size: 11px;
  color: var(--etop-link);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--etop-link);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.etop-groupHeader:hover .etop-groupLink {
  background: var(--etop-link);
  color: #fff;
  text-decoration: none;
}

/* Vertical component list */
.etop-componentList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.etop-componentRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 0.1s ease;
}

.etop-componentRowClickable {
  cursor: pointer;
}

.etop-componentRow:hover {
  background: var(--etop-row-hover);
}

.etop-componentIcon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--etop-icon-bg);
  border-radius: 4px;
  border: 2px solid var(--slot-color, var(--etop-chip-bg));
  box-sizing: border-box;
}

.etop-componentText {
  flex: 1;
  font-size: 12px;
  color: var(--etop-text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.etop-componentRawId {
  font-family: "Fira Code", "Consolas", "Menlo", monospace;
  font-size: 10px;
  opacity: 0.55;
  margin-left: 6px;
  white-space: nowrap;
}

/* Small screens - reduce model height */
@media (max-width: 600px) {
  .etop-modelSection {
    height: 200px;
  }
}

/* Empty state for behaviors panel */
.etop-emptyState {
  padding: 16px 12px;
  text-align: center;
}

.etop-emptyText {
  color: var(--etop-text-muted, #888);
  font-size: 13px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR HEADER STYLES - Minecraft "Chip" Style
   
   A chunky Minecraft-style outset header with pixelated beveled edges.
   Uses a 3x3 grid to create authentic Minecraft button corners.
   
   STRUCTURE:
   ┌─────────────────────────────────────────────────────────────────────┐
   │ .editor-header-chip                                                 │
   │   └── .chip-grid (3x3 grid for pixelated corners)                   │
   │         ├── corners (tl, tr, bl, br) - corner pixels                │
   │         ├── edges (top, right, bottom, left) - highlight/shadow     │
   │         └── .chip-content                                           │
   │               ├── .editor-header-bar (icon + title + badge)         │
   │               └── .editor-header-tabs-container (tab bar)           │
   └─────────────────────────────────────────────────────────────────────┘
   
   COLOR VARIABLES (set by EditorHeaderChip component):
   --chip-border: Outer border (darkest)
   --chip-highlight: Top/left edges (lightest) 
   --chip-main: Face background
   --chip-shadow: Bottom/right edges (darker)
   --chip-corner: Corner blend color
   --chip-text: Text color
   --type-color: Accent color for selected states
   
   See: docs/EditorHeaderStyleGuide.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pixel size - matches McButton for consistency */
:root {
  --chip-px: 2px;
}

/* =============================================================================
   CHIP CONTAINER - The outer wrapper
   ============================================================================= */

.editor-header-chip {
  /* Add outer border */
  border: var(--chip-px) solid var(--chip-border, #3a3a3a);
  border-radius: 0; /* Minecraft = no rounded corners */
  margin: 0; /* Fits flush against container edges */
}

/* =============================================================================
   CHIP GRID - 3x3 grid for pixelated Minecraft corners
   ============================================================================= */

.chip-grid {
  display: grid;
  grid-template-columns: var(--chip-px) 1fr var(--chip-px);
  grid-template-rows: var(--chip-px) auto var(--chip-px);
  background-color: var(--chip-main, #6b6b6b);
}

/* -----------------------------------------------------------------------------
   Corner pixels - The iconic Minecraft corner style
   ----------------------------------------------------------------------------- */

/* Top-left corner: highlight blend */
.chip-corner-tl {
  background-color: var(--chip-highlight, #8b8b8b);
  width: var(--chip-px);
  height: var(--chip-px);
}

/* Top-right corner: dark pixel (classic Minecraft corner) */
.chip-corner-tr {
  background-color: var(--chip-corner, #5a5a5a);
  width: var(--chip-px);
  height: var(--chip-px);
}

/* Bottom-left corner: dark pixel (classic Minecraft corner) */
.chip-corner-bl {
  background-color: var(--chip-corner, #5a5a5a);
  width: var(--chip-px);
  height: var(--chip-px);
}

/* Bottom-right corner: shadow blend */
.chip-corner-br {
  background-color: var(--chip-shadow, #4a4a4a);
  width: var(--chip-px);
  height: var(--chip-px);
}

/* -----------------------------------------------------------------------------
   Edge pixels - Highlight on top/left, shadow on bottom/right
   ----------------------------------------------------------------------------- */

/* Top edge: highlight (light comes from top-left) */
.chip-edge-top {
  background-color: var(--chip-highlight, #8b8b8b);
  height: var(--chip-px);
}

/* Left edge: highlight */
.chip-edge-left {
  background-color: var(--chip-highlight, #8b8b8b);
  width: var(--chip-px);
}

/* Right edge: shadow */
.chip-edge-right {
  background-color: var(--chip-shadow, #4a4a4a);
  width: var(--chip-px);
}

/* Bottom edge: shadow */
.chip-edge-bottom {
  background-color: var(--chip-shadow, #4a4a4a);
  height: var(--chip-px);
}

/* -----------------------------------------------------------------------------
   Content area - The main face of the chip
   ----------------------------------------------------------------------------- */

.chip-content {
  background-color: var(--chip-main, #6b6b6b);
  color: var(--chip-text, #ffffff);
}

/* =============================================================================
   HEADER BAR - Title row inside the chip
   ============================================================================= */

.editor-header-bar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  height: 42px;
  padding: 0 14px 0 10px;
  gap: 10px;
  overflow: visible;
}

.editor-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  opacity: 0.95;
}

.editor-header-thumbnail {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: auto;
  flex-shrink: 0;
  background-color: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
  padding: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  top: 2px;
}

.editor-header-title-group {
  display: flex;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  margin-left: -2px;
}

.editor-header-title {
  font-size: 14pt;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  min-width: 0;
}

.editor-header-badge {
  font-size: 9pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.editor-header-format-version {
  font-size: 9pt;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 3px 6px;
  white-space: nowrap;
  opacity: 0.7;
}

/* =============================================================================
   TABS CONTAINER - Tab bar inside the chip
   ============================================================================= */

.editor-header-tabs-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 6px;
  min-height: 34px;
  /* Add spacing above tabs (between header text and tabs) */
  margin-top: 6px;
  /* Subtle top separator */
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: transparent;
  /* Use relative positioning to push tabs down past the chip border */
  position: relative;
  top: 3px;
  z-index: 1;
  overflow-x: auto;
  flex-wrap: nowrap;
}

/* Reduce MUI Button padding for compact tab appearance */
.editor-header-tabs-container .MuiButton-root {
  padding: 2px 4px;
  min-width: unset;
  flex-shrink: 0;
}

.editor-header-tabs-container .MuiStack-root {
  gap: 2px;
}

/* =============================================================================
   AGGRESSIVE DOT/BULLET REMOVAL
   FluentUI Toolbar renders items as <li> elements which can show list markers.
   These rules aggressively hide any list styling or pseudo-element dots.
   ============================================================================= */

/* Remove list styling from ALL elements in the toolbar container */
.editor-header-tabs-container,
.editor-header-tabs-container *,
.editor-header-tabs-container *::before,
.editor-header-tabs-container *::after {
  list-style: none !important;
  list-style-type: none !important;
}

/* Hide any ::marker pseudo-elements (modern list bullet styling) */
.editor-header-tabs-container li::marker,
.editor-header-tabs-container button::marker,
.editor-header-tabs-container *::marker {
  content: none !important;
  display: none !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Override Fluent Toolbar styling for tabs inside chip */
.editor-header-tabs-container .ui-toolbar {
  gap: 4px;
  list-style: none !important;
  list-style-type: none !important;
}

.editor-header-tabs-container .ui-toolbar__item {
  margin: 0;
  padding: 0;
  list-style: none !important;
  list-style-type: none !important;
}

/* 
 * HIDE STRAY BULLET/DOT TEXT
 * FluentUI may insert text nodes (like bullet characters) as siblings of the itemicon.
 * Set font-size: 0 on the button to hide any stray text, then restore on the itemicon.
 */
.editor-header-tabs-container .ui-toolbar__item > button,
.editor-header-tabs-container button.ui-toolbar__item {
  font-size: 0 !important;
  line-height: 0 !important;
}

.editor-header-tabs-container .ui-toolbar__itemicon {
  font-size: 14px !important;
  line-height: normal !important;
}

/* Hide any dot/bullet that FluentUI might add to toolbar item icon wrapper */
.editor-header-tabs-container .ui-toolbar__itemicon {
  display: flex !important;
  align-items: center;
}

.editor-header-tabs-container .ui-toolbar__itemicon::before,
.editor-header-tabs-container .ui-toolbar__itemicon::after {
  content: none !important;
  display: none !important;
}

/* Hide list bullets/markers from toolbar items (li elements) */
.editor-header-tabs-container ul,
.editor-header-tabs-container li,
.editor-header-tabs-container .ui-toolbar,
.editor-header-tabs-container .ui-toolbar > * {
  list-style: none !important;
  list-style-type: none !important;
}

/* =============================================================================
   TAB STYLING - Minecraft inventory slot inspired
   
   Targets both .editor-tab classes AND the actual label-tab/label-deseltab
   classes used by CustomTabLabel component. Uses !important to override
   inline styles set by the component.
   
   IMPORTANT: Font weight is kept consistent (500) to prevent width shifts
   when switching tabs. Active state is indicated via underline instead.
   ============================================================================= */

/* Hide any FluentUI menu/toolbar indicators (dots) that appear on items */
.editor-header-tabs-container .ui-menu__itemIndicator,
.editor-header-tabs-container .ui-toolbar__itemIndicator,
.editor-header-tabs-container [class*="itemIndicator"],
.editor-header-tabs-container [class*="Indicator"],
.editor-header-tabs-container .ui-menu__itemIcon,
.editor-header-tabs-container .ui-toolbar__itemIcon {
  display: none !important;
}

/* Hide any bullet/list markers that might appear */
.editor-header-tabs-container .ui-toolbar__item,
.editor-header-tabs-container .ui-menu__item {
  list-style: none !important;
}

.editor-header-tabs-container .ui-toolbar__item::marker,
.editor-header-tabs-container .ui-menu__item::marker {
  content: none !important;
  display: none !important;
}

/* Also hide any ::before pseudo-elements that FluentUI might add */
.editor-header-tabs-container .ui-toolbar__item::before,
.editor-header-tabs-container .ui-menu__item::before {
  content: none !important;
  display: none !important;
}

/* Inactive tab - uses type color tint for theming harmony */
.editor-header-tabs-container .label-deseltab,
.editor-tab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 5px 10px 6px 8px !important;
  cursor: pointer;
  transition: all 0.1s ease-out;
  gap: 6px;
  position: relative;
  /* Tinted background that picks up type color */
  background-color: var(--chip-shadow, rgba(60, 60, 60, 0.9)) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 0 !important;
  /* Beveled edges matching chip style: dark top/left (inset), light bottom/right (outset) */
  border: none !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.4),
    inset -1px 0 0 var(--chip-highlight, rgba(255, 255, 255, 0.15)),
    0 1px 0 var(--chip-shadow, rgba(0, 0, 0, 0.3)) !important;
  margin-bottom: 0;
  text-decoration: none !important;
  font-weight: 500 !important;
}

/* Ensure inactive tabs have no pseudo-element indicators */
.editor-header-tabs-container .label-deseltab::before,
.editor-header-tabs-container .label-deseltab::after,
.editor-tab::before,
.editor-tab::after {
  content: none !important;
  display: none !important;
}

.editor-header-tabs-container .label-deseltab:hover,
.editor-tab:hover {
  background-color: var(--chip-main, rgba(80, 80, 80, 0.9)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.35),
    inset -1px 0 0 var(--chip-highlight, rgba(255, 255, 255, 0.2)),
    0 1px 0 var(--chip-shadow, rgba(0, 0, 0, 0.25)) !important;
}

/* Selected/active tab - pushed IN with type color accent and underline */
.editor-header-tabs-container .label-tab,
.editor-tab-selected {
  /* Match inactive tab layout exactly to prevent width shifts */
  display: inline-flex;
  align-items: center;
  padding: 5px 10px 6px 8px !important;
  gap: 6px;
  position: relative;
  /* Darker inset using chip border color */
  background-color: var(--chip-border, rgba(40, 40, 40, 0.95)) !important;
  color: #ffffff !important;
  /* Keep font weight same as inactive to prevent width shifts */
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: none !important;
  /* Inset shadow on top and sides only, open bottom */
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.55),
    inset -2px 0 0 rgba(0, 0, 0, 0.35),
    inset 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Add underline indicator for active tab via pseudo-element */
.editor-header-tabs-container .label-tab::after,
.editor-tab-selected::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  bottom: 2px;
  left: 8px;
  right: 8px;
  height: 2px;
  background-color: #52a535;
  border-radius: 1px;
}

/* IMPORTANT: Inactive tabs must NOT have the underline - this rule comes AFTER the active rule */
.editor-header-tabs-container .label-deseltab::after,
.editor-tab:not(.editor-tab-selected)::after {
  content: none !important;
  display: none !important;
}

.editor-tab-icon {
  font-size: 14px;
  opacity: 0.85;
}

.editor-tab-selected .editor-tab-icon {
  opacity: 1;
}

.editor-tab-label {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.editor-tab-selected .editor-tab-label {
  font-weight: 600;
}

.editor-tab-count {
  font-size: 10px;
  opacity: 0.6;
  padding-left: 2px;
  font-weight: 600;
}

/* =============================================================================
   LEGACY SUPPORT - Old header classes (backwards compatibility)
   ============================================================================= */

/* Old .editor-header class - basic styling */
.editor-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  height: 38px;
  padding: 0 14px 0 10px;
  gap: 10px;
  background-color: var(--chip-main, #6b6b6b);
  color: var(--chip-text, #ffffff);
}

/* Old divider - now just a small spacer */
.editor-header-divider-spacer {
  height: 2px;
}

/* Legacy divider classes - kept for backwards compat but minimized */
.editor-header-divider,
.editor-header-divider-block-edge,
.editor-header-divider-ore-scatter,
.editor-header-divider-inventory,
.editor-header-divider-pixel-dots,
.editor-header-divider-simple,
.editor-header-divider-brick {
  height: 2px;
  background-color: rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   COMPACT MODE (narrow screens)
   ============================================================================= */

@media (max-width: 800px) {
  .editor-header-bar {
    padding: 0 10px 0 8px;
    height: 34px;
    gap: 8px;
  }

  .editor-header-title {
    font-size: 12pt;
  }

  .editor-header-badge {
    display: none;
  }

  .editor-header-format-version {
    display: none;
  }

  .editor-header-tabs-container {
    padding: 0 6px 4px 6px;
    min-height: 32px;
  }

  .editor-tab {
    padding: 4px 8px 4px 6px;
  }

  .editor-tab-label {
    font-size: 10px;
  }
}

/* =============================================================================
   OLD EDITOR TABS CLASS (for backwards compatibility)
   ============================================================================= */

.editor-tabs {
  padding: 4px 12px 0 20px;
  min-height: 38px;
  display: flex;
  align-items: flex-end;
}

.editor-tabs .ui-toolbar {
  gap: 4px;
}

.editor-tabs .ui-toolbar__item {
  margin: 0;
  padding: 0;
  list-style: none !important;
}

/* Hide indicators in legacy editor-tabs too */
.editor-tabs .ui-toolbar__item::before,
.editor-tabs .ui-toolbar__item::marker,
.editor-tabs [class*="Indicator"] {
  content: none !important;
  display: none !important;
}

/* SimplifiedSpawnRulesEditor styles */

.ssre-outer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  box-sizing: border-box;
  font-size: 13px;
}

/* Native form controls (input, button, select, textarea) do not inherit the
   page font by default — they fall back to the OS UI font. The editor now
   uses MUI components (TextField, Button, IconButton, Chip, ButtonBase) for
   all form controls, but this safety net stays in case a child editor or
   embedded form renders raw HTML controls. See docs/ux/Components.md →
   Form Controls. */
.ssre-outer input,
.ssre-outer button,
.ssre-outer select,
.ssre-outer textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.ssre-search {
  display: flex;
  margin-bottom: 12px;
}

/* Default entry at top */
.ssre-defaultEntry {
  border: 1px solid #555;
  border-radius: 6px;
  margin-bottom: 16px;
  background: #2a2a2a;
  overflow: hidden;
  /* Establish a stacking context so descendant inputs always paint above
     this wrapper; without this, transient layout shifts during MUI focus
     animations could cause hit-tests to land on the wrapper instead of
     the actual input. See RoundTripPersistence F6. */
  position: relative;
  z-index: 0;
}

/* Form controls inside the default entry must always receive pointer
   events themselves, never have them swallowed by an animating wrapper. */
.ssre-defaultEntry input,
.ssre-defaultEntry textarea,
.ssre-defaultEntry button,
.ssre-defaultEntry select {
  position: relative;
  z-index: 1;
}

.ssre-defaultHeader {
  /* Rendered as MUI ButtonBase — reset its inline-flex defaults to a full-width
     row with left-aligned content so it visually matches the previous div. */
  display: flex !important;
  width: 100%;
  justify-content: flex-start !important;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  user-select: none;
  font-weight: 600;
  font-size: 13px;
  color: #ddd;
  background: #333;
  border-bottom: 1px solid #444;
  text-align: left;
}

.ssre-defaultHeader:hover {
  background: #3a3a3a;
}

.ssre-expandIcon {
  font-size: 10px;
  color: #888;
  transition: transform 0.15s ease;
  width: 12px;
  text-align: center;
}

.ssre-expandIconOpen {
  transform: rotate(180deg);
}

/* Category sections */
.ssre-category {
  margin-bottom: 14px;
}

.ssre-categoryName {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #555;
}

.ssre-categoryNameToggle {
  /* MUI ButtonBase — force full-width left-aligned layout so labels still
     occupy the row width like the original div did. */
  width: 100%;
  justify-content: flex-start !important;
  user-select: none;
  gap: 6px;
  padding: 4px 4px 4px 0 !important;
  border-radius: 3px;
  transition: background 0.1s ease;
  text-align: left;
}

.ssre-categoryNameToggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.ssre-categoryNameToggle:focus-visible {
  outline: 2px solid #5a7aaa;
  outline-offset: 2px;
}

.ssre-categoryNameDisabled {
  cursor: default;
  opacity: 0.6;
}

.ssre-categoryNameLabel {
  flex: 1;
}

.ssre-tagList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Multi-column layout for wider viewports — checkboxes flow into columns
   so the user can scan many biomes at a glance instead of scrolling a
   long single column. The biome row is kept intact via break-inside. */
@media (min-width: 900px) {
  .ssre-tagList {
    display: block;
    column-count: 2;
    column-gap: 16px;
  }
  .ssre-tagList > .ssre-biomeRow {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
  }
}

@media (min-width: 1300px) {
  .ssre-tagList {
    column-count: 3;
  }
}

@media (min-width: 1700px) {
  .ssre-tagList {
    column-count: 4;
  }
}

/* Individual biome row */
.ssre-biomeRow {
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.ssre-biomeRowSelected {
  border-color: #4a7a4a;
  background: #2a3a2a;
}

.ssre-biomeHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  user-select: none;
  font-size: 13px;
  color: #f0f0f0;
  transition: background 0.1s ease;
}

.ssre-biomeHeader:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ssre-checkbox {
  font-size: 14px;
  color: #bbb;
  width: 18px;
  text-align: center;
}

/* When the checkbox is rendered as a MUI ButtonBase (toggle) keep it square. */
.ssre-checkboxButton {
  height: 22px;
  border-radius: 3px !important;
  padding: 2px !important;
}

.ssre-checkboxChecked {
  color: #7fdc7f;
}

.ssre-biomeLabel {
  flex: 1;
  font-size: 13px;
  /* Rendered as MUI ButtonBase — left-align label text. */
  justify-content: flex-start !important;
  text-align: left;
  padding: 2px 4px !important;
  border-radius: 3px !important;
}

.ssre-biomeExpand {
  /* MUI IconButton — size override for the inline chevron. */
  font-size: 11px !important;
  color: #888 !important;
  padding: 4px !important;
  transition: transform 0.15s ease;
}

.ssre-biomeExpand:hover {
  color: #ddd !important;
}

.ssre-biomeExpandOpen {
  transform: rotate(180deg);
}

/* Expanded config panel for a biome */
.ssre-configPanel {
  padding: 8px 12px 10px 38px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid #3a3a3a;
}

.ssre-configRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: #ddd;
}

.ssre-configLabel {
  min-width: 110px;
  color: #f0f0f0;
  font-weight: 600;
}

.ssre-useDefault {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #aaa;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
  margin-bottom: 6px;
}

.ssre-useDefault:hover {
  color: #bbb;
}

/* Block filter chips — rendered as MUI <Chip>; the row is a flex container. */
.ssre-blockList {
  margin-top: 4px;
  margin-bottom: 4px;
}

.ssre-blockAdd {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

/* Summary at bottom */
.ssre-summary {
  margin-top: 12px;
  padding: 8px 12px;
  color: #e8e8e8;
  background: #2c2c2c;
  border-radius: 4px;
  border: 1px solid #555;
}

/* BlockPickerDialog styles */

.bpd-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px !important;
}

.bpd-closeBtn {
  margin-left: auto;
}

.bpd-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  max-height: 70vh;
}

.bpd-searchRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
  background: rgba(0, 0, 0, 0.15);
}

.bpd-searchIcon {
  color: #aaa;
  font-size: 14px;
}

.bpd-acceptTyped {
  margin: 10px 16px 0 !important;
  align-self: flex-start;
}

.bpd-loading,
.bpd-empty {
  padding: 24px;
  text-align: center;
  color: #aaa;
  font-size: 13px;
}

.bpd-sectionHeader {
  padding: 12px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fff;
}

.bpd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  padding: 4px 16px 12px;
  overflow-y: auto;
}

.bpd-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 4px;
  padding: 8px 6px !important;
  border: 1px solid rgba(128, 128, 128, 0.25) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 6px !important;
  text-align: center;
  font-family: inherit !important;
  color: inherit !important;
  transition:
    background 0.1s ease,
    border-color 0.1s ease;
}

.bpd-tile:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #5a7aaa !important;
}

.bpd-tileImage {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.3);
  /* Pixel-art preservation for vanilla 16x16 textures scaled up */
  image-rendering: pixelated;
}

.bpd-tileImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.bpd-tileLabel {
  font-size: 12px;
  font-weight: 600;
  color: #f0f0f0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bpd-tileId {
  font-size: 10px;
  color: #aaa;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEMA FORM STYLES - Minecraft Creator Tools
   
   Mirrors DataForm styling for consistency across the app.
   Design: blocky Minecraft aesthetic, green accents, card-based fields.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   FIELD WRAPPER - Card-style field containers
   ───────────────────────────────────────────────────────────────────────────── */

.sf-fieldWrap {
  padding: 16px 14px 20px 14px;
  margin: 4px 0;
  border-radius: 4px;
  border: 1px solid rgba(107, 101, 98, 0.2);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.sf-fieldWrap:hover {
  border-color: rgba(107, 101, 98, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.sf-fieldWrap:focus-within {
  border-color: #52a535;
  box-shadow: 0 0 0 2px rgba(82, 165, 53, 0.15);
}

.sf-fieldWrap label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.sf-fieldWrap .MuiInputLabel-shrink {
  font-size: 16px;
  font-weight: 700;
  left: -4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FIELD DESCRIPTION
   ───────────────────────────────────────────────────────────────────────────── */

.sf-fieldDescription {
  font-size: 11px;
  padding: 4px 0;
  margin: 4px 0;
  line-height: 1.4;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DEFAULT VALUE DISPLAY
   ───────────────────────────────────────────────────────────────────────────── */

.sf-defaultValue {
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 11px;
  font-style: italic;
  background: rgba(107, 101, 98, 0.08);
  border-radius: 3px;
  border-left: 2px solid rgba(107, 101, 98, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CHECKBOX / SWITCH ROW
   ───────────────────────────────────────────────────────────────────────────── */

.sf-checkboxRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-checkboxLabel {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SLIDER COMPONENT
   ───────────────────────────────────────────────────────────────────────────── */

.sf-sliderSet {
  display: grid;
  margin-top: 8px;
  grid-template-columns: 1fr 80px;
  gap: 12px;
  align-items: center;
}

.sf-sliderTitle {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 1;
  font-size: 14px;
  font-weight: 700;
  padding-top: 4px;
  padding-bottom: 8px;
  color: inherit;
}

.sf-slider {
  grid-column: 1;
  grid-row: 2;
  padding: 4px 0;
  padding-left: 0;
  padding-top: 12px;
}

.sf-sliderInput {
  grid-column: 2;
  grid-row: 2;
  padding: 4px 0;
}

.sf-sliderInput input {
  text-align: center;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEMENT BIN - Container for array items
   ───────────────────────────────────────────────────────────────────────────── */

.sf-elementBinTitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  margin-bottom: 6px;
}

.sf-elementBin {
  padding: 10px 12px;
  min-height: 60px;
  border: 1px solid rgba(107, 101, 98, 0.25);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ARRAY ITEM CARD
   ───────────────────────────────────────────────────────────────────────────── */

.sf-arrayItemCard {
  padding: 12px 14px 14px 14px;
  border: 2px solid rgba(107, 101, 98, 0.3);
  border-radius: 4px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: border-color 0.15s ease;
  position: relative;
}

.sf-arrayItemCard:hover {
  border-color: rgba(107, 101, 98, 0.5);
}

.sf-arrayItemHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sf-arrayItemIndex {
  font-size: 14px;
  font-weight: 700;
  color: inherit;
  opacity: 0.9;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADD BUTTON - Green Minecraft-style
   ───────────────────────────────────────────────────────────────────────────── */

.sf-addButton {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background-color: #3d7a2a;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease;
}

.sf-addButton:hover {
  background-color: #4a9432;
}

.sf-addButton:active {
  background-color: #2a641c;
}

/* Toolbar row at top of bin */
.sf-binToolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION ACCORDION - Compact header
   ───────────────────────────────────────────────────────────────────────────── */

.sf-sectionHeader {
  font-size: 12pt;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.sf-sectionHeaderSmall {
  font-size: 11pt;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCHEMA ROOT WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */

.sf-root {
  padding: 8px 12px;
}

.sf-description {
  font-size: 11px;
  padding: 8px 0 16px 0;
  line-height: 1.5;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOOT TABLE VISUAL EDITOR - Wrapper with Simple / Advanced sub-tabs
   ═══════════════════════════════════════════════════════════════════════════ */

.ltve-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ltve-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 12px;
  flex-shrink: 0;
}

.ltve-tab {
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s;
  position: relative;
  bottom: -1px;
}

.ltve-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}

.ltve-tab-active {
  color: #81c784;
  border-bottom-color: #66bb6a;
}

.ltve-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.ltve-simple-layout {
  display: flex;
  height: 100%;
  min-height: 0;
}

.ltve-picker-panel {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  /* The picker has its own scroll area; an outer overflow:auto here causes a
     second scrollbar when the inner panel is even a pixel too tall. */
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ltve-pool-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-width: 0;
}

.ltve-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

.ltve-error {
  margin: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOOT POOLS OVERVIEW - Multi-pool overview with collapsible pool cards
   ═══════════════════════════════════════════════════════════════════════════ */

.lpo-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lpo-pool-card {
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.lpo-pool-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}

.lpo-pool-card-header:hover {
  background: rgba(255, 255, 255, 0.07);
}

.lpo-pool-expand {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  width: 14px;
  text-align: center;
  transition: transform 0.15s;
}

.lpo-pool-expand-open {
  transform: rotate(90deg);
}

.lpo-pool-number {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.lpo-pool-summary {
  flex: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.lpo-pool-remove-btn {
  padding: 2px 8px;
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s;
}

.lpo-pool-card-header:hover .lpo-pool-remove-btn {
  opacity: 1;
}

.lpo-pool-remove-btn:hover {
  background: rgba(229, 57, 53, 0.15);
  color: #ef5350;
  border-color: rgba(229, 57, 53, 0.3);
}

.lpo-pool-body {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lpo-add-pool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
  width: 100%;
}

.lpo-add-pool-btn:hover {
  border-color: rgba(76, 175, 80, 0.4);
  color: #81c784;
  background: rgba(76, 175, 80, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOOT POOL VISUAL EDITOR - Visual editor for a single loot pool
   ═══════════════════════════════════════════════════════════════════════════ */

.lpve-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lpve-entries-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.lpve-entries-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lpve-entry-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.lpve-entries-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lpve-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  text-align: center;
}

.lpve-empty-icon {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DICE ROLL EDITOR - Visual explanation of loot pool roll mechanics
   ═══════════════════════════════════════════════════════════════════════════ */

.dre-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.dre-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.dre-header-icon {
  font-size: 16px;
  color: #66bb6a;
}

.dre-explanation {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid #66bb6a;
}

.dre-explanation-highlight {
  font-weight: 700;
  color: #81c784;
}

.dre-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dre-mode-toggle {
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dre-mode-btn {
  padding: 4px 12px;
  font-size: 11px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  transition:
    background 0.15s,
    color 0.15s;
}

.dre-mode-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dre-mode-btn-active {
  background: rgba(76, 175, 80, 0.25);
  color: #81c784;
  font-weight: 600;
}

.dre-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dre-input-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 30px;
}

.dre-input {
  width: 52px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  color: #e0e0e0;
  outline: none;
  transition: border-color 0.15s;
}

.dre-input:focus {
  border-color: #66bb6a;
}

.dre-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dre-range-separator {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  padding: 0 2px;
}

.dre-bonus-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dre-bonus-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.dre-bonus-input {
  width: 44px;
  padding: 3px 5px;
  font-size: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  color: #bdbdbd;
  outline: none;
  transition: border-color 0.15s;
}

.dre-bonus-input:focus {
  border-color: #66bb6a;
}

.dre-bonus-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dre-bonus-tooltip {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOOT ENTRY TILE - Visual card for a single loot table entry
   ═══════════════════════════════════════════════════════════════════════════ */

.let-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  min-height: 48px;
}

.let-container:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.let-container-selected {
  border-color: #66bb6a;
  background: rgba(76, 175, 80, 0.08);
}

.let-container-drag-over {
  border-color: #4caf50 !important;
  background: rgba(76, 175, 80, 0.15) !important;
}

.let-icon-area {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.let-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.let-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.let-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.let-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.let-probability {
  font-size: 13px;
  font-weight: 700;
  color: #81c784;
  min-width: 36px;
  text-align: right;
}

.let-quantity {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.let-modifiers-badge {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 5px;
  border-radius: 2px;
  cursor: help;
}

.let-empty-icon {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.25);
}

.let-loot-table-icon {
  font-size: 18px;
  color: #64b5f6;
}

.let-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: #e53935;
  color: #ffffff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1;
  padding: 0;
}

.let-container:hover .let-remove-btn {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ITEM SPRITE ICON - Minecraft-style item display
   
   Renders a single Minecraft item as a pixelated sprite in a slot-like frame.
   Used in recipe editors, item pickers, and crafting grids.
   ═══════════════════════════════════════════════════════════════════════════ */

.rcisi-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  image-rendering: pixelated;
}

.rcisi-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8b8b8b;
  border: 1px solid;
  border-color: #ffffff #373737 #373737 #ffffff;
  box-sizing: border-box;
  image-rendering: pixelated;
  overflow: hidden;
}

.rcisi-slot-dark {
  background: #585858;
  border-color: #7a7a7a #2a2a2a #2a2a2a #7a7a7a;
}

.rcisi-slot-small {
  width: 32px;
  height: 32px;
}

.rcisi-slot-medium {
  width: 48px;
  height: 48px;
}

.rcisi-slot-large {
  width: 64px;
  height: 64px;
}

.rcisi-image {
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

/* Atlas-based sprite: uses CSS background-position on the single atlas image */
.rcisi-atlas-sprite {
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.rcisi-slot-small .rcisi-image {
  width: 24px;
  height: 24px;
}

.rcisi-slot-medium .rcisi-image {
  width: 36px;
  height: 36px;
}

.rcisi-slot-large .rcisi-image {
  width: 48px;
  height: 48px;
}

.rcisi-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 0px #3f3f3f;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}

.rcisi-slot-small .rcisi-fallback {
  width: 24px;
  height: 24px;
  font-size: 8px;
}

.rcisi-slot-medium .rcisi-fallback {
  width: 36px;
  height: 36px;
  font-size: 10px;
}

.rcisi-slot-large .rcisi-fallback {
  width: 48px;
  height: 48px;
  font-size: 12px;
}

.rcisi-empty {
  background: #555555;
  border-color: #373737 #8b8b8b #8b8b8b #373737;
}

.rcisi-empty-dark {
  background: #3a3a3a;
  border-color: #2a2a2a #606060 #606060 #2a2a2a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOOT ENTRY EDITOR - Inline editor for a loot table entry's properties
   ═══════════════════════════════════════════════════════════════════════════ */

.lee-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid #66bb6a;
}

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

.lee-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lee-field-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lee-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.45);
}

.lee-input {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  color: #e0e0e0;
  outline: none;
  transition: border-color 0.15s;
}

.lee-input:focus {
  border-color: #66bb6a;
}

.lee-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lee-input-name {
  width: 200px;
}

.lee-input-number {
  width: 56px;
  text-align: center;
}

.lee-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  color: #e0e0e0;
  outline: none;
  cursor: pointer;
}

.lee-select:focus {
  border-color: #66bb6a;
}

.lee-probability-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.lee-quantity-section {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lee-quantity-separator {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.lee-done-btn {
  padding: 4px 14px;
  font-size: 11px;
  border: 1px solid rgba(76, 175, 80, 0.4);
  border-radius: 3px;
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-end;
}

.lee-done-btn:hover {
  background: rgba(76, 175, 80, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOOT ITEM DROP ZONE - Drag target for adding items to a loot pool
   ═══════════════════════════════════════════════════════════════════════════ */

.lidz-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
  min-height: 48px;
}

.lidz-drop-zone:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
}

.lidz-drop-zone-active {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.12);
  color: #81c784;
}

.lidz-drop-zone-icon {
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ITEM SPRITE PICKER - Searchable item selection panel
   ═══════════════════════════════════════════════════════════════════════════ */

.rcisp-container {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background: #f5f5f5;
  overflow: hidden;
}

.rcisp-container-dark {
  background: #2d2d2d;
  border-color: rgba(255, 255, 255, 0.12);
}

.rcisp-search-bar {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.rcisp-container-dark .rcisp-search-bar {
  background: #383838;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.rcisp-search-input {
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 12px;
  outline: none;
  background: #fafafa;
  color: #333333;
}

.rcisp-container-dark .rcisp-search-input {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

.rcisp-search-input:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.3);
}

.rcisp-scroll-area {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.rcisp-category {
  padding: 2px 0;
}

.rcisp-category-header {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888888;
  user-select: none;
}

.rcisp-container-dark .rcisp-category-header {
  color: #999999;
}

.rcisp-item-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 2px 6px;
  gap: 0px;
}

.rcisp-item-cell {
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.1s;
}

.rcisp-item-cell:hover {
  background: rgba(76, 175, 80, 0.15);
}

.rcisp-item-cell-selected {
  background: rgba(76, 175, 80, 0.3);
  outline: 2px solid #4caf50;
  outline-offset: -1px;
}

.rcisp-item-cell[draggable="true"] {
  cursor: grab;
}

.rcisp-item-cell[draggable="true"]:active {
  cursor: grabbing;
}

.rcisp-empty-message {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: #888888;
  font-style: italic;
}

.rcisp-container-dark .rcisp-empty-message {
  color: #999999;
}

.rcisp-raw-input-row {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rcisp-container-dark .rcisp-raw-input-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.rcisp-raw-input {
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: monospace;
  outline: none;
  background: #fafafa;
  color: #333333;
}

.rcisp-container-dark .rcisp-raw-input {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

.rcisp-raw-input:focus {
  border-color: #4caf50;
}

.rcisp-raw-button {
  padding: 3px 8px;
  font-size: 11px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: #e8e8e8;
  cursor: pointer;
  color: #333333;
}

.rcisp-container-dark .rcisp-raw-button {
  background: #484848;
  border-color: rgba(255, 255, 255, 0.2);
  color: #e0e0e0;
}

.rcisp-raw-button:hover {
  background: #4caf50;
  color: #ffffff;
  border-color: #4caf50;
}

.bte-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bte-loading {
  padding: 20px;
  color: #888;
}

.bte-message {
  padding: 20px;
  color: #888;
}

.bte-mainArea {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bte-contentArea {
  flex: 1;
  overflow: hidden;
  padding: 4px;
}

.bte-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.bte-header {
  font-size: 16pt;
  padding-top: 10px;
  padding-left: 15px;
  padding-bottom: 15px;
}

.bte-componentHeader {
  padding-top: 20px;
  font-size: 14pt;
  padding: 12px;
  padding-top: 40px;
  padding-bottom: 14px;
}

.bte-extraArea {
  margin-bottom: 5px;
}

.bte-commands {
  display: grid;
  padding: 3px;
  grid-template-columns: 200px 1fr;
}

.bte-toolBarArea {
  padding-bottom: 0px;
  height: 31px;
}

.bte-extraArea {
  grid-column: 2;
}

.bcose-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  padding-top: 2px;
  padding-bottom: 12px;
  padding-right: 12px;
  display: grid;
  max-width: 590px;
  grid-template-columns: 280px 1fr;
}

.bcose-loading {
  padding: 6px;
}

.bcose-header {
  font-size: 12pt;
  font-size: 17pt;
}

.bcose-componentForm {
  margin-bottom: 12px;
  padding: 3px;
  padding-left: 10px;
  display: inline-grid;
  min-height: 220px;
}

.bcose-addComponentDialog {
  min-width: 650px !important;
  max-width: 750px !important;
}

.bcose-addComponentDialog .ui-dialog__content {
  padding: 8px 4px !important;
}

.bcose-componentWrapper {
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 10px 6px 10px 6px;
  border: 2px outset;
  font-size: small;
}

.bcose-componentForm .ui-form__input {
  padding-top: 3px;
  margin-bottom: 4px;
}

.bcose-componentForm .ui-form__checkbox {
  padding-top: 3px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.bcose-componentForm .pu > :last-child {
  margin-top: 0px;
}

.bcose-componentForm .pt > :not(:last-child) {
  margin-bottom: 0px;
}

.bcose-componentHeader {
  padding-top: 20px;
  font-size: 11pt;
  padding-bottom: 14px;
}

.bcose-noeditor {
  padding: 10px;
}

.bcose-title {
  width: 200px;
}

.bcose-extraArea {
  margin-bottom: 5px;
}

.bcose-componentList {
  grid-column: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  border-left: solid 1px;
  border-bottom: solid 1px;
  border-top: solid 1px;
}

.bcose-componentList li {
  padding-left: 5px;
  padding-right: 2px;
}

.bcose-componentList .ui-list__itemcontent {
  margin-right: 3px;
}

.bcose-componentBin {
  padding: 4px;
  height: 100%;
  min-height: 200px;
  vertical-align: top;
  grid-column: 2;
  overflow-y: scroll;
  overflow-x: hidden;
  border-right: solid 1px;
  border-bottom: solid 1px;
  border-top: solid 1px;
}

.bcose-componentBin:first-child {
  margin-top: 1px;
}

.bcose-componentArea {
  display: grid;
  padding: 3px;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-template-columns: 190px 1fr 100px;
}

.bcose-titleArea {
  grid-column: 2;
  grid-row: 1;
  padding-top: 5px;
}

.bcose-toolBarArea {
  grid-column: 3;
  grid-row: 1;
}

.bcose-extraArea {
  grid-column: 1;
  grid-row: 1;
  padding-left: 5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT SLOT STYLING - Matching EntityTypeComponentSetEditor
   ═══════════════════════════════════════════════════════════════════════════ */

.bcose-componentSlot {
  --slot-color: #7b9fe0;
  padding: 4px 8px;
  margin: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  border: 2px solid transparent;
  background: transparent;
}

.bcose-componentSlot:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--slot-color);
}

.bcose-slotSelected {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--slot-color);
  border-left: 4px solid var(--slot-color);
}

.bcose-slotChip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bcose-slotChipHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bcose-slotIcon {
  --bcose-icon-bg: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--bcose-icon-bg);
  border: 2px solid var(--slot-color);
  flex-shrink: 0;
}

.bcose-slotIcon img {
  image-rendering: pixelated;
}

.bcose-slotLabel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.bcose-slotText {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bcose-slotSummary {
  font-size: 11px;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 36px;
  margin-top: 2px;
}

/* Category header styling */
.bcose-slotCategoryHeader {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 8px 4px 8px;
  opacity: 0.8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
}

/* Add slot button styling */
.bcose-addSlotWrapper {
  padding: 4px 8px;
  margin: 2px 4px 8px 4px;
}

.bcose-addSlot {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.7;
  transition: opacity 0.15s, border-color 0.15s;
}

.bcose-addSlot:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.5);
}

.bcose-addSlotIcon {
  font-size: 14px;
  font-weight: bold;
}

/* Component header with large icon in detail panel */
.bcose-componentHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.bcose-componentHeaderIcon {
  --bcose-icon-bg: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: var(--bcose-icon-bg);
  border: 3px solid var(--header-icon-color, #7b9fe0);
}

.bcose-componentHeaderIcon img {
  image-rendering: pixelated;
}

.bcose-componentHeaderInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bcose-componentHeaderName {
  font-size: 16px;
  font-weight: 600;
}

.bcose-componentHeaderCategory {
  font-size: 12px;
  opacity: 0.7;
}

.bcose-componentHeaderActions {
  margin-left: auto;
}

.bcose-componentToolBarArea {
  grid-column: 3;
  grid-row: 1;
}

.btac-area {
  padding-top: 8px;
  width: 100%;
}

.btac-mainArea {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.btac-list {
  max-height: calc(100vh - 280px);
  min-width: 550px;
  overflow-y: auto;
  overflow-x: hidden;
  border: solid 1px;
  border-radius: 4px;
}

.btac-description {
  padding: 8px 0;
  font-style: italic;
  opacity: 0.85;
}

/* Component chip styling */
.btac-chip {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  margin: 4px 8px;
  border-radius: 4px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--chip-color) 15%, transparent) 0%,
    color-mix(in srgb, var(--chip-color) 8%, transparent) 100%
  );
  border-left: 3px solid var(--chip-color);
  transition: background 0.15s ease;
}

.btac-chip:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--chip-color) 25%, transparent) 0%,
    color-mix(in srgb, var(--chip-color) 15%, transparent) 100%
  );
}

.btac-chipHeader {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btac-chipName {
  font-size: 14px;
  font-weight: 500;
}

.btac-chipDesc {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 4px;
  margin-left: 30px;
  line-height: 1.3;
  white-space: normal;
  word-wrap: break-word;
}

/* Make sure icons don't shrink */
.btac-chip svg,
.btac-chip img {
  flex-shrink: 0;
}

/* Remove default list item padding since we have chip padding */
.btac-list .ui-list__item {
  padding: 0 !important;
}

.btse-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  padding-bottom: 12px;
  padding-right: 12px;
  display: grid;
  max-width: 590px;
  grid-template-columns: 280px 1fr;
}

.btse-header {
  font-size: 12pt;
  font-size: 17pt;
}

.btse-loading {
  padding: 6px;
}

.btse-componentForm {
  margin-bottom: 12px;
  padding: 3px;
  padding-left: 10px;
  display: inline-grid;
  min-height: 220px;
}

.btse-componentWrapper {
  margin-top: 1px;
  margin-bottom: 1px;

  padding: 10px 6px 10px 6px;
  border: 2px outset;
  font-size: small;
}

.btse-componentForm .ui-form__input {
  padding-top: 3px;
  margin-bottom: 4px;
}

.btse-componentForm .ui-form__checkbox {
  padding-top: 3px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.btse-componentForm .pu > :last-child {
  margin-top: 0px;
}
.btse-componentForm .pt > :not(:last-child) {
  margin-bottom: 0px;
}

.btse-componentHeader {
  padding-top: 20px;
  font-size: 11pt;
  padding-bottom: 14px;
}

.btse-noeditor {
  padding: 10px;
}

.btse-title {
  width: 200px;
}

.btse-extraArea {
  margin-bottom: 5px;
}

.btse-componentList {
  grid-column: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  border-left: solid 1px;
  border-bottom: solid 1px;
  border-top: solid 1px;
}

.btse-componentList li {
  padding-left: 5px;
  padding-right: 2px;
}

.btse-componentList .ui-list__itemcontent {
  margin-right: 3px;
}

.btse-componentBin {
  padding: 4px;
  height: 100%;
  min-height: 200px;
  vertical-align: top;
  grid-column: 2;
  overflow-y: scroll;
  overflow-x: hidden;
  border-right: solid 1px;
  border-bottom: solid 1px;
  border-top: solid 1px;
}

.btse-componentBin:first-child {
  margin-top: 1px;
}

.btse-componentArea {
  display: grid;
  padding: 3px;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-template-columns: 190px 1fr 100px;
}

.btse-titleArea {
  grid-column: 2;
  grid-row: 1;
  padding-top: 5px;
}

.btse-toolBarArea {
  grid-column: 3;
  grid-row: 1;
}

.btse-extraArea {
  grid-column: 1;
  grid-row: 1;
  padding-left: 5px;
}

.btse-select {
  padding: 4px;
}

.btpe-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
}

.btpe-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.btpe-componentHeader {
  padding-top: 20px;
  font-size: 14pt;
  padding: 12px;
  padding-top: 40px;
  padding-bottom: 14px;
}

.btpe-extraArea {
  margin-bottom: 5px;
}

.btpe-extraArea {
  grid-column: 2;
}

.btpe-loading {
  padding: 4px;
}

.btpe-setsLabel {
  padding-top: 2px;
  padding-bottom: 10px;
}

.btpe-componentEditorInterior {
  grid-row: 2;
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 73px 1fr;
}

.btpe-componentListHeader {
  grid-column: 1;
  grid-row: 1;
  padding: 8px;
}

.btpe-itemBinHeader {
  grid-column: 2;
  grid-row: 1;
  padding-left: 14px;
  padding-top: 16px;
}

.btpe-componentList {
  grid-column: 1;
  grid-row: 2;
}

.btpe-listInterior {
  overflow-y: scroll;
  overflow-x: hidden;
}

.btpe-itemBin {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 3;
}

.btae-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
}

.btae-toolBarArea {
  padding: 5px;
  padding-left: 3px;
  display: grid;
  grid-template-columns: 120px 1fr;
}

.btae-dropdown {
  grid-column: 2;
}

.btae-tools {
  grid-column: 1;
}

.btae-error {
  padding: 8px;
}

/**
 * BlockTypeOverviewPanel.css
 *
 * Styles for the block type overview panel, which displays:
 * - A block viewer on the left
 * - Block configuration (states, components, permutations) on the right
 */

/* CSS Custom Properties for theming */
.btop-outer-dark {
  --btop-bg: #1e1e1e;
  --btop-panel-bg: #2a2a2a;
  --btop-text: #e0e0e0;
  --btop-text-muted: #a0a0a0;
  --btop-border: #3a3a3a;
  --btop-link: #6eb3f7;
  --btop-chip-bg: #333333;
  --btop-row-hover: rgba(255, 255, 255, 0.05);
  --btop-icon-bg: #1a1a1a;
}

.btop-outer-light {
  --btop-bg: #f5f5f5;
  --btop-panel-bg: #ffffff;
  --btop-text: #333333;
  --btop-text-muted: #666666;
  --btop-border: #dcdcdc;
  --btop-link: #0078d4;
  --btop-chip-bg: #f0f0f0;
  --btop-row-hover: rgba(0, 0, 0, 0.03);
  --btop-icon-bg: #2a2a2a;
}

.btop-outer {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  gap: 12px;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

.btop-previewSection {
  flex: 1;
  min-width: 300px;
  max-width: 50%;
  height: 100%;
  overflow: hidden;
}

.btop-blockViewer {
  width: 100%;
  height: calc(100% - 40px);
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btop-modelHint {
  text-align: center;
  font-size: 11px;
  opacity: 0.5;
  padding: 2px 0;
  letter-spacing: 0.3px;
}

/* Block preview info (placeholder for custom blocks) */
.btop-blockPreviewInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}

.btop-blockIcon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
  border-radius: 4px;
  box-shadow: var(--surface-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.btop-blockIconEmoji {
  font-size: 40px;
}

.btop-blockDetails {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btop-blockId {
  font-size: 16px;
  font-weight: 600;
  color: var(--btop-text);
  font-family: monospace;
}

.btop-blockGeometry {
  font-size: 12px;
  color: var(--btop-text-muted);
}

.btop-detailLabel {
  color: var(--btop-text);
  font-weight: 500;
}

.btop-blockStats {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--btop-text-muted);
}

.btop-stat {
  color: var(--btop-link);
}

.btop-statSep {
  color: var(--btop-border);
}

/* Details section - right side scrollable list */
.btop-detailsSection {
  flex: 1;
  min-width: 300px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.btop-detailsScroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

/* Section group styling */
.btop-sectionGroup {
  margin-bottom: 16px;
}

.btop-sectionGroup:last-child {
  margin-bottom: 0;
}

.btop-groupHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--btop-border);
  cursor: pointer;
}

.btop-groupHeader:hover .btop-groupLink {
  text-decoration: underline;
}

.btop-groupName {
  font-size: 13px;
  font-weight: 600;
  color: var(--btop-text);
}

.btop-groupLink {
  font-size: 11px;
  color: var(--btop-link);
  font-weight: 500;
}

/* State info */
.btop-stateInfo {
  padding: 8px;
  font-size: 12px;
  color: var(--btop-text-muted);
  font-style: italic;
}

/* Empty message */
.btop-emptyMessage {
  padding: 8px;
  font-size: 12px;
  color: var(--btop-text-muted);
  font-style: italic;
}

/* Component list */
.btop-componentList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btop-componentRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 0.1s ease;
}

.btop-componentRow:hover {
  background: var(--btop-row-hover);
}

.btop-componentIcon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btop-icon-bg);
  border-radius: 4px;
  border: 2px solid var(--slot-color, var(--btop-chip-bg));
  box-sizing: border-box;
}

.btop-componentText {
  flex: 1;
  font-size: 12px;
  color: var(--btop-text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Permutation section */
.btop-permutationSection {
  margin-top: 8px;
  padding-left: 8px;
  border-left: 2px solid var(--btop-border);
}

.btop-permutationHeader {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  margin-bottom: 4px;
}

.btop-permutationName {
  font-size: 12px;
  font-weight: 600;
  color: var(--btop-text);
}

.btop-permutationCondition {
  font-size: 11px;
  color: var(--btop-text-muted);
  font-family: monospace;
}

/* Responsive layout for smaller screens */
@media (max-width: 800px) {
  .btop-outer {
    flex-direction: column;
  }

  .btop-previewSection {
    max-width: 100%;
    max-height: 300px;
  }

  .btop-detailsSection {
    max-height: 400px;
  }
}

.aum-outer {
  image-rendering: pixelated;
}

.aum-image {
  padding: 6px;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: contain;
}

.aum-float {
  position: absolute;
  margin: 8px;
  z-index: 100;
}

.aum-status {
  padding-left: 7px;
  margin-top: 10px;
  min-height: 20px;
}

.aum-float BUTTON {
  padding-left: 0px;
  padding-right: 0px;
  width: 36px;
  min-width: inherit;
}

.playlist {
  margin: 5px 0px 5px 0px;
}

.playlist *,
.playlist ::after,
.playlist ::before {
  box-sizing: border-box;
}

.playlist .btn:not(:disabled) {
  cursor: pointer;
}

.playlist .fas {
  font-style: normal;
  font-size: 16pt;
}
.playlist .btn-group-lean {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.playlist .btn-group-lean button {
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 4px;
  height: 24px;
}

.playlist .fa-volume-up::before {
  content: "Vol";
  font-size: small;
  position: relative;
  top: -3px;
  font-family: inherit;
}

.playlist .fa-caret-up::before {
  content: "\25B2";
  font-size: small;
  position: relative;
  top: -3px;
  font-family: inherit;
}

.playlist .fa-caret-down::before {
  content: "\25BC";
  font-size: small;
  position: relative;
  top: -3px;
  font-family: inherit;
}

.playlist .fa-times::before {
  content: "\0078";
  font-family: inherit;
  line-height: 0;
  position: relative;
  top: -2px;
}

.playlist .btn {
  display: inline-block;
  width: 60px;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.playlist .btn-outline-dark {
  border-color: var(--wp-mute-solo-color);
}

.playlist .btn-outline-dark:hover {
  background-color: var(--wp-mute-solo-color);
  border-color: var(--wp-mute-solo-color);
}

.playlist .btn-outline-dark:active:focus,
.playlist .btn-outline-dark:focus {
  box-shadow: 0 0 0 0.2rem var(--wp-mute-solo-focus-color);
}

.playlist .btn-xs {
  padding: 0.25rem 0.4rem;
  font-size: 0.875rem;
  line-height: 0.5;
}

.playlist .btn-group {
  margin-top: 6px;
  margin-bottom: 6px;
}

.playlist .btn-group button {
  padding: 8px;
  margin-left: 4px;
  margin-right: 4px;
}

.playlist .btn-group > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.playlist .btn-group > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.playlist .playlist-time-scale {
  height: 30px;
}

.playlist .state-cursor,
.playlist .state-select {
  cursor: text;
}

.playlist .state-fadein {
  cursor: w-resize;
}

.playlist .state-fadeout {
  cursor: e-resize;
}

.playlist .state-shift {
  cursor: ew-resize;
}

.playlist .channel-wrapper.silent .channel {
  opacity: 0.3;
}

.playlist .controls {
  text-align: center;
}

.playlist .playlist-tracks {
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  padding: 4px;
}

.playlist .waveform {
  background-color: #3c8527;
}

.playlist-dark .controls {
  background-color: #312f2dd0;
}

.playlist .controls .track-header {
  overflow: hidden;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 4px 5px 4px;
  padding: 8px 0px 8px 0px;
  font-size: 0.75rem;
}

.playlist .controls .track-header button {
  width: 60px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playlist .controls .track-header span {
  margin: 10px;
  max-width: 70px;
}

.playlist .cursor {
  background: "purple";
}

.playlist .selection.point {
  background: "red";
}

.playlist .selection.segment {
  background: "red";
}

.playlist .channel {
  background: "red";
}

.playlist .channel-progress {
  background: "red";
}

.playlist .cursor {
  background: "red";
}

.playlist .controls label {
  width: 100%;
  display: flex;
  font-size: small;
  justify-content: space-between;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
  padding: 0 1rem;
  margin-bottom: 0.2rem;
}

.playlist .controls label:before {
  padding-right: 5px;
  -moz-osx-font-smoothing: grayscale;
}

.playlist .controls label:after {
  padding-left: 5px;
}

.playlist .controls label.volume:before {
  content: "-";
}

.playlist .controls label.volume:after {
  content: "+";
}

.playlist .controls label.stereopan:before {
  content: "L";
}

.playlist .controls label.stereopan:after {
  content: "R";
}

.playlist .controls input[type="range"] {
  display: inline-block;
  width: 75%;
  accent-color: #3c8527;
}

.playlist .controls input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border: none;
  border-radius: 0px;
}

.playlist .controls input[type="range"]::-moz-range-track {
  height: 5px;
  border: none;
  border-radius: 0px;
}

.playlist .controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  height: 12px;
  width: 12px;
  border-radius: 0%;
  margin-top: -5px;
  cursor: ew-resize;
}

.playlist .volume-lean {
  height: 30px;
}

.playlist .controls input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  height: 12px;
  width: 12px;
  border-radius: 0%;
  margin-top: -5px;
  cursor: ew-resize;
}

.playlist .controls input[type="range"]:focus {
  outline: none;
}

.aum-bin {
  overflow-y: auto;
}
.aum-propTitle {
  padding-left: 40px;
}

.aum-recordbutton {
  color: var(--record-button-color, #c92727);
}

.playlist .selection.point {
  background: #42932b;
}
.playlist .selection.segment {
  background: rgba(0, 0, 0, 0.1);
}

.playlist .channel {
  background: #3c8527;
}
.playlist .channel-progress {
  background: #55bf38;
}
.playlist .cursor {
  background: black;
}

.aipro-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.aipro-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.aipro-header {
  font-size: 16pt;
  padding-top: 10px;
  padding-left: 30px;
  padding-bottom: 13px;
}

.aipro-form {
  padding-top: 20px;
  padding-left: 20px;
}

.ite-area {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow-y: hidden;
}

.ite-loading {
  padding: 10px;
}

.ite-mainArea {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.ite-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.ite-attachableArea {
  margin-left: 11px;
  margin-top: 11px;
  margin-right: 11px;
  border: solid 1px;
}

.ite-componentHeader {
  padding-top: 20px;
  font-size: 14pt;
  padding: 12px;
  padding-top: 40px;
  padding-bottom: 14px;
}

.ite-commands {
  display: grid;
  padding: 3px;
  grid-template-columns: 200px 1fr;
}

.icose-area {
  width: 100%;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 10px;
  display: grid;
  grid-template-columns: 250px 1fr;
}

.icose-header {
  font-size: 12pt;
  font-size: 17pt;
}

.icose-loading {
  padding: 10px;
}

.icose-componentForm {
  margin-bottom: 12px;
  padding: 3px;
  padding-left: 10px;
  display: inline-grid;
  min-height: 220px;
}

.icose-componentWrapper {
  margin-top: 1px;
  margin-bottom: 1px;

  padding: 10px 6px 10px 6px;
  border: 2px outset;
  font-size: small;
}

.icose-componentForm .ui-form__input {
  padding-top: 3px;
  margin-bottom: 4px;
}

.icose-componentForm .ui-form__checkbox {
  padding-top: 3px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.icose-componentForm .pu > :last-child {
  margin-top: 0px;
}
.icose-componentForm .pt > :not(:last-child) {
  margin-bottom: 0px;
}

.icose-componentHeader {
  padding-top: 20px;
  font-size: 11pt;
  padding-bottom: 14px;
}

.icose-noeditor {
  padding: 10px;
}

.icose-title {
  width: 200px;
}

.icose-extraArea {
  margin-bottom: 5px;
}

.icose-componentList {
  grid-column: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Override entity slotGrid sizing to fill the item list panel fully */
.icose-componentList .etcse-slotGrid {
  margin: 0;
  border: none;
  min-height: 100%;
  box-sizing: border-box;
  background: #3a3a3a;
}

/* Reduce gaps between slots and fix chip filling slot fully */
.icose-componentList .etcse-componentSlot {
  margin-bottom: 2px;
  /* Match the inset bevel exactly: 2px on dark sides (top-left), 1px on light sides (bottom-right)
     so the outset chip fills flush against the groove */
  padding: 2px 1px 1px 2px;
}

.icose-componentList .etcse-componentSlot .etcse-slotChip {
  min-height: 32px;
}

.icose-componentList li {
  padding-left: 0px;
  padding-right: 0px;
}

.icose-componentList .MuiList-padding {
  padding-top: 0;
  padding-bottom: 0;
}

.icose-componentList .MuiListItem-gutters {
  padding-left: 0;
  padding-right: 0;
}

.icose-componentList .MuiListItemButton-gutters {
  padding-left: 0;
  padding-right: 0;
}

/* Override MUI selected blue highlight */
.icose-componentList .MuiListItemButton-root.Mui-selected {
  background-color: transparent;
}

.icose-componentList .MuiListItemButton-root.Mui-selected:hover {
  background-color: transparent;
}

.icose-componentList .MuiListItemButton-root:hover {
  background-color: transparent;
}

/* Remove MUI focus/selected outlines */
.icose-componentList .MuiListItemButton-root.Mui-selected,
.icose-componentList .MuiListItemButton-root.Mui-focusVisible {
  outline: none;
}

.icose-componentList .ui-list__itemcontent {
  margin-right: 3px;
}

.icose-componentBin {
  padding: 4px;
  height: 100%;
  min-height: 200px;
  vertical-align: top;
  grid-column: 2;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: solid 1px;
  border-bottom: solid 1px;
  border-top: solid 1px;
}

.icose-componentBin:first-child {
  margin-top: 1px;
}

.icose-binToolbar {
  display: flex;
  justify-content: flex-end;
  padding: 2px 4px;
}

.icose-componentArea {
  display: grid;
  padding: 3px;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-template-columns: 190px 1fr auto;
}

.icose-titleArea {
  grid-column: 2;
  grid-row: 1;
  padding-top: 5px;
}

.icose-toolBarArea {
  grid-column: 3;
  grid-row: 1;
}

.icose-extraArea {
  grid-column: 1;
  grid-row: 1;
  padding-left: 5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT SLOT STYLING
   Shared with EntityTypeComponentSetEditor.css (etcse-* classes)
   Theme variables come from etcse-area-dark / etcse-area-light
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT HEADER STYLING - Matching EntityTypeComponentSetEditor
   ═══════════════════════════════════════════════════════════════════════════ */

.icose-componentHeader {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 12px 16px;
  font-size: 14pt;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--header-icon-color, #e8a855) 12%, transparent) 0%,
    color-mix(in srgb, var(--header-icon-color, #e8a855) 4%, transparent) 60%,
    transparent 100%
  );
  border-bottom: 2px solid color-mix(in srgb, var(--header-icon-color, #e8a855) 30%, transparent);
  position: relative;
}

/* Large icon slot in header */
.icose-componentHeaderIcon {
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
  border: 3px solid;
  border-color: var(--header-icon-color, #e8a855);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px color-mix(in srgb, var(--header-icon-color, #e8a855) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.icose-componentHeaderIcon .item-component-icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.icose-componentHeaderIcon .item-component-icon img {
  image-rendering: pixelated;
}

/* Header text content */
.icose-componentHeaderText {
  flex: 1;
  min-width: 0;
}

.icose-componentHeaderTitle {
  font-size: 14pt;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.icose-componentHeaderSubtitle {
  font-size: 10px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Accent line effect */
.icose-componentHeader::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, var(--header-icon-color, #e8a855) 0%, transparent 100%);
}

/* Legacy header info styles - keep for compatibility */
.icose-componentHeaderInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.icose-componentHeaderName {
  font-size: 14pt;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.icose-componentHeaderCategory {
  font-size: 10px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.icose-componentHeaderActions {
  margin-left: auto;
}

.icose-componentToolBarArea {
  grid-column: 3;
  grid-row: 1;
}

/* Add component dialog wider */
.icose-addComponentDialog {
  min-width: 560px;
  max-width: 700px;
}

.itac-area {
  padding-top: 8px;
  width: 100%;
}

.itac-mainArea {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.itac-list {
  max-height: calc(100vh - 280px);
  min-width: 550px;
  overflow-y: auto;
  overflow-x: hidden;
  border: solid 1px;
  border-radius: 4px;
}

.itac-description {
  padding: 8px 0;
  font-style: italic;
  opacity: 0.85;
}

/* Component chip styling */
.itac-chip {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  margin: 4px 8px;
  border-radius: 4px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--chip-color) 15%, transparent) 0%,
    color-mix(in srgb, var(--chip-color) 8%, transparent) 100%
  );
  border-left: 3px solid var(--chip-color);
  transition: background 0.15s ease;
}

.itac-chip:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--chip-color) 25%, transparent) 0%,
    color-mix(in srgb, var(--chip-color) 15%, transparent) 100%
  );
}

.itac-chipHeader {
  display: flex;
  align-items: center;
  gap: 10px;
}

.itac-chipName {
  font-size: 14px;
  font-weight: 500;
}

.itac-chipDesc {
  font-size: 11px;
  opacity: 0.75;
  margin-top: 4px;
  margin-left: 30px;
  line-height: 1.3;
  white-space: normal;
  word-wrap: break-word;
}

/* Make sure icons don't shrink */
.itac-chip svg,
.itac-chip img {
  flex-shrink: 0;
}

/* Remove default list item padding since we have chip padding */
.itac-list .ui-list__item {
  padding: 0 !important;
}

.itac-form {
  padding: 10px;
  font-style: italic;
  opacity: 0.85;
}

.itae-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
}

.itae-toolBarArea {
  padding: 5px;
  padding-left: 3px;
  display: grid;
  grid-template-columns: auto 1fr;
}

.itae-dropdown {
  grid-column: 2;
}

.itae-tools {
  grid-column: 1;
}

.itae-error {
  padding: 8px;
}

.itae-area {
  overflow-y: auto;
}

.itae-toolBarArea {
  width: 100%;
  padding-top: 3px;
  padding-left: 29px;
  height: 34px;
}

.itae-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.itae-header {
  font-size: 16pt;
  padding-top: 10px;
  padding-left: 30px;
  padding-bottom: 13px;
}

.itae-form {
  padding-top: 10px;
  padding-left: 20px;
}

.itae-rc-header {
  padding-left: 20px;
  padding-top: 10px;
}

.itae-header-interior {
  font-size: large;
}

.itae-loading {
  padding: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECIPE EDITOR - Main shell and shared styles
   ═══════════════════════════════════════════════════════════════════════════ */

.rcre-area {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.rcre-loading {
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: #888888;
}

.rcre-main-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.rcre-content-area {
  padding: 0;
}

/* ─── Properties Panel ─── */
.rcre-properties-panel {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rcre-properties-panel-dark {
  color: #e0e0e0;
}

.rcre-prop-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rcre-prop-label {
  font-size: 12px;
  font-weight: 600;
  color: #555555;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rcre-prop-label-dark {
  color: #aaaaaa;
}

.rcre-prop-input {
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  font-size: 13px;
  background: #ffffff;
  color: #333333;
  outline: none;
  max-width: 400px;
}

.rcre-prop-input-dark {
  background: #383838;
  border-color: rgba(255, 255, 255, 0.15);
  color: #e0e0e0;
}

.rcre-prop-input:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.3);
}

.rcre-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rcre-tag-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #555555;
  cursor: pointer;
  user-select: none;
}

.rcre-tag-item-dark {
  color: #cccccc;
}

.rcre-tag-item input[type="checkbox"] {
  accent-color: #4caf50;
}

/* ─── Unsupported recipe type fallback ─── */
.rcre-unsupported {
  padding: 24px;
  text-align: center;
  color: #888888;
}

.rcre-unsupported-type {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.rcre-unsupported-hint {
  font-size: 12px;
  color: #aaaaaa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHAPED RECIPE EDITOR - Minecraft crafting table grid
   
   Visual layout:
   ┌──────────────────────────────────────────────────────────────────┐
   │  ┌─────────────────────┐          ┌──────────┐                  │
   │  │  [A] [B] [C]        │   ═══►   │ [Result] │                  │
   │  │  [D] [E] [F]        │          │  ×count   │                  │
   │  │  [G] [H] [I]        │          └──────────┘                  │
   │  └─────────────────────┘                                        │
   │                                                                  │
   │  ┌──────────────────────────────────────────────────────────┐   │
   │  │  Item Palette (search + drag items to grid)              │   │
   │  └──────────────────────────────────────────────────────────┘   │
   └──────────────────────────────────────────────────────────────────┘
   ═══════════════════════════════════════════════════════════════════════════ */

.rcsre-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

/* Crafting area: grid + arrow + result */
.rcsre-crafting-area {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 3x3 Crafting grid styled like Minecraft's crafting table */
.rcsre-grid-frame {
  background: #8b7355;
  border: 4px solid;
  border-color: #5e4a31 #c4a882 #c4a882 #5e4a31;
  padding: 8px;
  border-radius: 2px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}

.rcsre-grid-frame-dark {
  background: #6b5a45;
  border-color: #4a3d2a #9e8a6e #9e8a6e #4a3d2a;
}

.rcsre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

/* Arrow between grid and result */
.rcsre-arrow {
  display: flex;
  align-items: center;
  font-size: 32px;
  color: #8b7355;
  user-select: none;
}

.rcsre-arrow-dark {
  color: #c4a882;
}

/* Result slot area */
.rcsre-result-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rcsre-result-frame {
  background: #8b7355;
  border: 4px solid;
  border-color: #5e4a31 #c4a882 #c4a882 #5e4a31;
  padding: 8px;
  border-radius: 2px;
}

.rcsre-result-frame-dark {
  background: #6b5a45;
  border-color: #4a3d2a #9e8a6e #9e8a6e #4a3d2a;
}

.rcsre-count-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rcsre-count-label {
  font-size: 12px;
  color: #666666;
}

.rcsre-count-label-dark {
  color: #aaaaaa;
}

.rcsre-count-input {
  width: 48px;
  padding: 2px 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  background: #fafafa;
  color: #333333;
}

.rcsre-count-input-dark {
  background: #383838;
  border-color: rgba(255, 255, 255, 0.2);
  color: #e0e0e0;
}

/* Palette area */
.rcsre-palette-area {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px;
}

.rcsre-palette-area-dark {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.rcsre-palette-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888888;
  margin-bottom: 8px;
}

.rcsre-palette-label-dark {
  color: #999999;
}

/* Key legend (which characters map to which items) */
.rcsre-key-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.rcsre-key-entry {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #555555;
}

.rcsre-key-entry-dark {
  color: #bbbbbb;
}

.rcsre-key-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #e0d5c3;
  border: 1px solid #8b7355;
  border-radius: 2px;
  font-weight: bold;
  font-size: 11px;
  font-family: monospace;
}

.rcsre-key-char-dark {
  background: #5e4a31;
  border-color: #9e8a6e;
  color: #e0d5c3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRAFTING SLOT - Individual grid cell for shaped recipe editor
   ═══════════════════════════════════════════════════════════════════════════ */

.rccs-container {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.rccs-drop-target {
  border: 2px solid transparent;
  border-radius: 2px;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

.rccs-drop-target:hover {
  border-color: rgba(76, 175, 80, 0.4);
}

.rccs-drag-over {
  border-color: #4caf50 !important;
  background: rgba(76, 175, 80, 0.15);
}

.rccs-clear-button {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: #e53935;
  color: #ffffff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1;
  padding: 0;
}

.rccs-container:hover .rccs-clear-button {
  opacity: 1;
}

.rccs-clear-button:hover {
  background: #c62828;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHAPELESS RECIPE EDITOR - Ingredient list editor
   ═══════════════════════════════════════════════════════════════════════════ */

.rcslre-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.rcslre-crafting-area {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Ingredients list panel */
.rcslre-ingredients-frame {
  background: #8b7355;
  border: 4px solid;
  border-color: #5e4a31 #c4a882 #c4a882 #5e4a31;
  padding: 8px;
  border-radius: 2px;
  min-width: 220px;
}

.rcslre-ingredients-frame-dark {
  background: #6b5a45;
  border-color: #4a3d2a #9e8a6e #9e8a6e #4a3d2a;
}

.rcslre-ingredients-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #e0d5c3;
  padding: 2px 4px 6px 4px;
}

.rcslre-ingredient-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 2px;
  transition: background-color 0.1s;
}

.rcslre-ingredient-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.06);
}

.rcslre-ingredient-row:hover {
  background: rgba(0, 0, 0, 0.1);
}

.rcslre-ingredient-name {
  flex: 1;
  font-size: 12px;
  color: #e0d5c3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcslre-ingredient-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(229, 57, 53, 0.7);
  color: #ffffff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.rcslre-ingredient-row:hover .rcslre-ingredient-remove {
  opacity: 1;
}

.rcslre-ingredient-remove:hover {
  background: #c62828;
}

.rcslre-add-area {
  padding: 8px 4px 4px 4px;
}

.rcslre-add-button {
  width: 100%;
  padding: 6px 12px;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  background: transparent;
  color: #e0d5c3;
  font-size: 12px;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.rcslre-add-button:hover {
  background: rgba(76, 175, 80, 0.2);
  border-color: #4caf50;
  color: #ffffff;
}

.rcslre-add-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rcslre-drop-zone {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  transition:
    border-color 0.15s,
    background-color 0.15s;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcslre-drop-zone-active {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.15);
  color: #ffffff;
}

.rcslre-limit-warning {
  padding: 4px 8px;
  font-size: 10px;
  color: #ff9800;
  text-align: center;
}

/* Arrow */
.rcslre-arrow {
  display: flex;
  align-items: center;
  font-size: 32px;
  color: #8b7355;
  user-select: none;
  padding-top: 40px;
}

.rcslre-arrow-dark {
  color: #c4a882;
}

/* Result area */
.rcslre-result-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
}

.rcslre-result-frame {
  background: #8b7355;
  border: 4px solid;
  border-color: #5e4a31 #c4a882 #c4a882 #5e4a31;
  padding: 8px;
  border-radius: 2px;
}

.rcslre-result-frame-dark {
  background: #6b5a45;
  border-color: #4a3d2a #9e8a6e #9e8a6e #4a3d2a;
}

.rcslre-count-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rcslre-count-label {
  font-size: 12px;
  color: #666666;
}

.rcslre-count-label-dark {
  color: #aaaaaa;
}

.rcslre-count-input {
  width: 48px;
  padding: 2px 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  background: #fafafa;
  color: #333333;
}

.rcslre-count-input-dark {
  background: #383838;
  border-color: rgba(255, 255, 255, 0.2);
  color: #e0e0e0;
}

/* Palette area */
.rcslre-palette-area {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px;
}

.rcslre-palette-area-dark {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.rcslre-palette-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888888;
  margin-bottom: 8px;
}

.rcslre-palette-label-dark {
  color: #999999;
}

.gfe-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.gfe-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.gfe-loading {
  padding: 4px;
}

.gfe-header {
  font-size: 16pt;
  padding-top: 10px;
  padding-left: 30px;
  padding-bottom: 13px;
}

.gfe-form {
  padding-top: 20px;
  padding-left: 20px;
}

.gfe-loading {
  padding: 4px;
}

.bio-areaOuter {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
}

.bio-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
}

.bio-addResource {
  padding: 6px;
}

.bio-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.bio-componentHeader {
  padding-top: 20px;
  font-size: 14pt;
  padding: 12px;
  padding-top: 40px;
  padding-bottom: 14px;
}

.bio-extraArea {
  margin-bottom: 5px;
}

.bio-commands {
  display: grid;
  padding: 3px;
  grid-template-columns: 200px 1fr;
}

.bio-toolBarArea {
  padding-bottom: 0px;
  height: 31px;
}

.bio-extraArea {
  grid-column: 2;
}

.bio-loading {
  padding: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DataFormComponentAccordion — Accordion-style "show all components" editor

   Shows every available component for a definition type. Components that
   are present in the data are expanded; absent ones are collapsed/dimmed.
   Editing an absent component auto-adds it; clearing all values removes it.

   Good for types with ≤30 components (biome, client_biome, etc.).
   ═══════════════════════════════════════════════════════════════════════════ */

.dfca-outer {
  width: 100%;
  overflow-y: auto;
  padding: 0 4px 8px 4px;
}

.dfca-loading {
  padding: 12px;
  opacity: 0.6;
}

/* ── Individual component section ──────────────────────────────────── */

.dfca-section {
  margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.dfca-section.dfca-present {
  border-left: 3px solid #52a535;
}

.dfca-section.dfca-absent {
  opacity: 0.7;
}

.dfca-section.dfca-absent:hover {
  opacity: 0.9;
}

/* ── Section header (clickable) ────────────────────────────────────── */

.dfca-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
  font-size: 13px;
  font-weight: 600;
}

.dfca-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dfca-chevron {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  opacity: 0.6;
}

.dfca-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dfca-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 400;
  padding: 1px 6px;
  border-radius: 2px;
  opacity: 0.7;
}

.dfca-badge-present {
  background: rgba(82, 165, 53, 0.2);
  color: #7fcf60;
}

.dfca-badge-absent {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Section body (form content) ───────────────────────────────────── */

.dfca-body {
  padding: 4px 8px 8px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dfca-description {
  font-size: 11px;
  opacity: 0.6;
  margin-bottom: 6px;
  padding: 0 2px;
}

/* ── Remove button ─────────────────────────────────────────────────── */

.dfca-removeBtn {
  flex-shrink: 0;
  opacity: 0.4;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: inherit;
}

.dfca-removeBtn:hover {
  opacity: 0.9;
  color: #e05050;
}

.bior-areaOuter {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
}

.bior-area {
  width: calc(100% - 2px);
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  overflow-y: auto;
}

.bior-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.bior-header {
  font-size: 16pt;
  padding-top: 10px;
  padding-left: 15px;
  padding-bottom: 15px;
}

.bior-componentHeader {
  padding-top: 20px;
  font-size: 14pt;
  padding: 12px;
  padding-top: 40px;
  padding-bottom: 14px;
}

.bior-extraArea {
  margin-bottom: 5px;
}

.bior-commands {
  display: grid;
  padding: 3px;
  grid-template-columns: 200px 1fr;
}

.bior-toolBarArea {
  padding-bottom: 0px;
  height: 31px;
}

.bior-extraArea {
  grid-column: 2;
}

.bior-loading {
  padding: 6px;
}

/* Copyright (c) Microsoft Corporation. */
/* Licensed under the MIT License. */

/* 
 * FEATURE EDITOR STYLES
 * =====================
 * 
 * Styles for the Feature/Feature Rule editor component.
 * Uses a similar layout pattern to EntityTypeEditor.
 */

/* Main container */
.fe-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header with feature/rule identifier */
.fe-header {
  padding: 8px 12px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main content area below header */
.fe-mainArea {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* Toolbar area with mode buttons */
.fe-toolBarArea {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Content area for mode-specific views */
.fe-contentArea {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Loading state */
.fe-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-style: italic;
  opacity: 0.7;
}

/* Settings mode - full width editor */
.fe-settingsMode {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* ============================== */
/* TREE EDITOR STYLES             */
/* ============================== */

.fte-area {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

/* Left panel - tree list */
.fte-treePanel {
  width: 300px;
  min-width: 250px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.fte-treePanelHeader {
  padding: 8px 12px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.fte-treeList {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Tree node item */
.fte-treeNode {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease;
}

.fte-treeNode:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.fte-treeNode.fte-selected {
  background-color: rgba(0, 120, 212, 0.1);
  border-left-color: #0078d4;
}

.fte-treeNode.fte-unfulfilled {
  opacity: 0.6;
}

.fte-treeNode.fte-unfulfilled.fte-vanilla {
  opacity: 0.8;
}

/* Indentation for tree depth */
.fte-treeNodeIndent {
  display: inline-block;
  width: 16px;
  flex-shrink: 0;
}

/* Icon for node type */
.fte-treeNodeIcon {
  width: 20px;
  margin-right: 8px;
  text-align: center;
  flex-shrink: 0;
}

.fte-treeNodeIcon.fte-featureRule {
  color: #0078d4;
}

.fte-treeNodeIcon.fte-compositeFeature {
  color: #107c10;
}

.fte-treeNodeIcon.fte-terminalFeature {
  color: #8764b8;
}

.fte-treeNodeIcon.fte-unfulfilled {
  color: #d83b01;
}

/* Node content */
.fte-treeNodeContent {
  flex: 1;
  overflow: hidden;
}

.fte-treeNodeName {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fte-treeNodeType {
  font-size: 11px;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Warning icon for unfulfilled */
.fte-treeNodeWarning {
  margin-left: 8px;
  color: #d83b01;
  flex-shrink: 0;
}

/* Vanilla badge */
.fte-vanillaBadge {
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.1);
  margin-left: 6px;
  flex-shrink: 0;
}

/* Right panel - detail editor */
.fte-detailPanel {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fte-detailHeader {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.fte-detailHeaderTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.fte-detailHeaderSubtitle {
  font-size: 12px;
  opacity: 0.7;
}

.fte-detailContent {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Empty state */
.fte-emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 24px;
}

.fte-emptyStateIcon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 16px;
}

.fte-emptyStateTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.fte-emptyStateMessage {
  font-size: 13px;
  opacity: 0.7;
  max-width: 300px;
}

/* ============================== */
/* DIAGRAM EDITOR STYLES (xyflow) */
/* ================================ */

.fde-container {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.fde-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-style: italic;
}

/* ============================== */
/* COMPONENT EDITOR STYLES        */
/* ============================== */

.fce-area {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.fce-toolbar {
  padding: 4px 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.fce-content {
  flex: 1;
  overflow-y: auto;
}

.fce-section {
  margin-bottom: 24px;
}

.fce-sectionTitle {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.fce-field {
  margin-bottom: 16px;
}

.fce-fieldLabel {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}

.fce-fieldDescription {
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 6px;
}

.fce-fieldInput {
  width: 100%;
}

.fce-linkedFeature {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fce-linkedFeatureId {
  flex: 1;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}

.fce-linkedFeatureButton {
  flex-shrink: 0;
}

.fce-emptyState {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px;
}

.fce-emptyStateMessage {
  color: #888;
  font-style: italic;
  text-align: center;
}

.fce-loading {
  padding: 16px;
  color: #888;
  font-style: italic;
}

.fce-form {
  padding: 0;
}

.fce-noForm {
  padding: 16px;
  text-align: center;
}

.fce-noFormMessage {
  color: #888;
  font-style: italic;
  margin-bottom: 16px;
}

.fce-goToFileButton {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #0078d4;
  color: white;
  cursor: pointer;
  font-size: 13px;
}

.fce-goToFileButton:hover {
  background: #006cbd;
}

.fce-unfulfilled {
  padding: 24px;
  text-align: center;
}

.fce-unfulfilledIcon {
  font-size: 32px;
  color: #d4a800;
  margin-bottom: 12px;
}

.fce-unfulfilledTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.fce-unfulfilledId {
  font-family: monospace;
  font-size: 13px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 12px;
}

.fce-unfulfilledMessage {
  color: #666;
  font-size: 13px;
  margin-bottom: 16px;
}

.fce-unfulfilledActions {
  margin-top: 16px;
}

.fce-createButton {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #0078d4;
  color: white;
  cursor: pointer;
  font-size: 13px;
}

.fce-createButton:hover:not(:disabled) {
  background: #006cbd;
}

.fce-createButton:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE TYPE PICKER - Dialog for selecting feature types
   ═══════════════════════════════════════════════════════════════════════════ */

.ftp-content {
  max-height: 60vh;
  overflow-y: auto;
}

.ftp-nameSection {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(107, 101, 98, 0.3);
}

.ftp-nameLabel {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.ftp-nameInput {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid rgba(107, 101, 98, 0.5);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-family: "Noto Sans", sans-serif;
}

.ftp-nameInput:focus {
  outline: none;
  border-color: #0078d4;
}

.ftp-nameHint {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 4px;
}

.ftp-description {
  margin-bottom: 16px;
  opacity: 0.8;
}

.ftp-categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ftp-category {
  border: 1px solid rgba(107, 101, 98, 0.3);
  border-radius: 4px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.ftp-categoryHeader {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.ftp-categoryIcon {
  font-size: 20px;
  opacity: 0.7;
  margin-top: 2px;
}

.ftp-categoryInfo {
  flex: 1;
}

.ftp-categoryName {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}

.ftp-categoryDescription {
  font-size: 11px;
  opacity: 0.7;
}

.ftp-categoryTypes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ftp-typeButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid rgba(107, 101, 98, 0.4);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ftp-typeButtonText {
  white-space: nowrap;
}

.ftp-typeButton:hover {
  background: rgba(82, 165, 53, 0.3);
  border-color: #52a535;
}

.ftp-typeButton:active {
  background: rgba(82, 165, 53, 0.5);
}

.ftp-typeButtonSelected {
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3);
}

.ftp-typeButtonSelected:hover {
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE NODE STYLES - Minecraft-Inspired Design
   
   Design Philosophy:
   - Blocky, pixelated aesthetic (no rounded corners - max 2px for anti-aliasing)
   - Minecraft block-inspired textures and gradients
   - Stone, dirt, and ore color palettes
   - Subtle "pixel" borders for that 8-bit feel
   ═══════════════════════════════════════════════════════════════════════════ */

.fn-outer {
  min-width: 200px;
  max-width: 260px;
  border-radius: 2px; /* Minimal rounding for blocky feel */
  border: 3px solid;
  border-top-color: rgba(255, 255, 255, 0.3);
  border-left-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  border-right-color: rgba(0, 0, 0, 0.3);
  box-shadow: 
    0 4px 0 rgba(0, 0, 0, 0.3),
    0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: all 0.15s ease;
  image-rendering: pixelated;
}

.fn-outer:hover {
  filter: brightness(1.2);
}

.fn-selected {
  border-color: #5cff5c !important;
  box-shadow: 
    0 0 0 2px #5cff5c,
    0 0 20px rgba(92, 255, 92, 0.5),
    0 4px 0 rgba(0, 0, 0, 0.3) !important;
}

.fn-unfulfilled {
  border-style: dashed;
  opacity: 0.8;
  border-color: #aa6644 !important;
}

/* Header with block-style texture */
.fn-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  gap: 10px;
  color: white;
  font-weight: 700;
  font-family: 'Segoe UI', sans-serif;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5), 2px 2px 0 rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0) 30%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.fn-icon {
  font-size: 1.3em;
  opacity: 0.95;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4));
}

.fn-title {
  flex: 1;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Type label with stone-like appearance */
.fn-type {
  padding: 5px 12px;
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  border-top: 2px solid rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

/* Summary text area - the key content description */
.fn-summary {
  padding: 8px 10px;
  font-size: 0.72em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  max-height: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fn-weight {
  padding: 4px 12px 8px;
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  background: rgba(138, 106, 138, 0.2);
  border-top: 1px solid rgba(138, 106, 138, 0.3);
}

.fn-weight-icon {
  margin-right: 6px;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HANDLES - Styled as pipe connectors
   ───────────────────────────────────────────────────────────────────────────── */

/* Handle label showing connection type */
.fn-handle-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FEATURE TYPE COLOR SCHEMES - Minecraft Block Inspired
   ───────────────────────────────────────────────────────────────────────────── */

/* Aggregate - Cobblestone gray */
.fn-aggregate {
  background: linear-gradient(180deg, #6a6a70 0%, #5a5a60 50%, #4a4a50 100%);
}

/* Sequence - Oak wood brown */
.fn-sequence {
  background: linear-gradient(180deg, #8a7050 0%, #7a6040 50%, #6a5030 100%);
}

/* Weighted Random - Purple ore */
.fn-weighted {
  background: linear-gradient(180deg, #7a5a8a 0%, #6a4a7a 50%, #5a3a6a 100%);
}

/* Scatter - Grass green */
.fn-scatter {
  background: linear-gradient(180deg, #6a9a50 0%, #5a8a40 50%, #4a7a30 100%);
}

/* Search - Lapis blue */
.fn-search {
  background: linear-gradient(180deg, #4a6a9a 0%, #3a5a8a 50%, #2a4a7a 100%);
}

/* Tree - Dark oak */
.fn-tree {
  background: linear-gradient(180deg, #4a6a3a 0%, #3a5a2a 50%, #2a4a1a 100%);
}

/* Ore - Gold tint */
.fn-ore {
  background: linear-gradient(180deg, #9a8a4a 0%, #8a7a3a 50%, #7a6a2a 100%);
}

/* Single Block - Stone */
.fn-block {
  background: linear-gradient(180deg, #7a7a80 0%, #6a6a70 50%, #5a5a60 100%);
}

/* Geode - Amethyst */
.fn-geode {
  background: linear-gradient(180deg, #8a6a9a 0%, #7a5a8a 50%, #6a4a7a 100%);
}

/* Structure - Brick red */
.fn-structure {
  background: linear-gradient(180deg, #9a6a5a 0%, #8a5a4a 50%, #7a4a3a 100%);
}

/* Cave carver - Deepslate */
.fn-cave {
  background: linear-gradient(180deg, #4a4a50 0%, #3a3a40 50%, #2a2a30 100%);
}

/* Snap to surface - Gravel */
.fn-snap {
  background: linear-gradient(180deg, #6a6a6a 0%, #5a5a5a 50%, #4a4a4a 100%);
}

/* Vegetation - Moss */
.fn-vegetation {
  background: linear-gradient(180deg, #5a7a4a 0%, #4a6a3a 50%, #3a5a2a 100%);
}

/* Default - Andesite */
.fn-default {
  background: linear-gradient(180deg, #6a6a70 0%, #5a5a60 50%, #4a4a50 100%);
}

/* Unfulfilled - Terracotta warning */
.fn-unfulfilled-style {
  background: linear-gradient(180deg, #8a5a4a 0%, #7a4a3a 50%, #6a3a2a 100%);
}

/* Vanilla reference - End stone */
.fn-vanilla-style {
  background: linear-gradient(180deg, #8a8a6a 0%, #7a7a5a 50%, #6a6a4a 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE RULE NODE STYLES - Minecraft-Inspired Design
   
   Feature rules are the entry point for feature placement - styled like
   emerald/command blocks to indicate their special "controller" nature.
   ═══════════════════════════════════════════════════════════════════════════ */

.frn-outer {
  min-width: 220px;
  max-width: 300px;
  border-radius: 2px; /* Blocky Minecraft feel */
  border: 3px solid;
  border-top-color: rgba(255, 255, 255, 0.35);
  border-left-color: rgba(255, 255, 255, 0.25);
  border-bottom-color: rgba(0, 0, 0, 0.45);
  border-right-color: rgba(0, 0, 0, 0.35);
  /* Emerald block inspired gradient */
  background: linear-gradient(180deg, #3a7a4a 0%, #2a6a3a 50%, #1a5a2a 100%);
  box-shadow: 
    0 4px 0 rgba(0, 0, 0, 0.35),
    0 6px 12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all 0.15s ease;
  image-rendering: pixelated;
}

.frn-outer:hover {
  filter: brightness(1.2);
}

.frn-selected {
  border-color: #5cff5c !important;
  box-shadow: 
    0 0 0 2px #5cff5c,
    0 0 24px rgba(92, 255, 92, 0.6),
    0 4px 0 rgba(0, 0, 0, 0.35) !important;
}

.frn-header {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  color: white;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5), 2px 2px 0 rgba(0, 0, 0, 0.25);
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.12) 0%, 
    rgba(255, 255, 255, 0) 30%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.frn-icon {
  font-size: 1.3em;
  opacity: 0.95;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.4));
}

.frn-title {
  flex: 1;
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frn-type {
  padding: 6px 14px;
  font-size: 0.72em;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  border-top: 2px solid rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.1);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.frn-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.72em;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.frn-info:last-child {
  padding-bottom: 10px;
}

.frn-info-icon {
  opacity: 0.75;
  width: 14px;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
}

/* ─────────────────────────────────────────────────────────────────────────────
   HANDLES - Styled as pipe connectors
   ───────────────────────────────────────────────────────────────────────────── */

.frn-handle {
  width: 14px !important;
  height: 14px !important;
  border-radius: 2px !important; /* Blocky */
  border: 2px solid #5cff5c !important;
  background-color: #2a5a2a !important;
  transition: all 0.15s ease;
  cursor: crosshair;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

.frn-handle:hover {
  transform: scale(1.25);
  background-color: #5cff5c !important;
}

.frn-handle-places {
  bottom: -7px !important;
}

/* Handle label */
.frn-handle-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE DEPENDENCY EDGE STYLES - Water Pipe Metaphor
   
   Design Philosophy:
   - Edges represent "water pipes" flowing features through the pipeline
   - Animated dashes simulate water/data flow
   - Blocky, Minecraft-inspired label styling
   ═══════════════════════════════════════════════════════════════════════════ */

/* Edge label - styled like a blocky sign */
.fde-edge-label {
  position: absolute;
  pointer-events: all;
  background: linear-gradient(180deg, #2a4a3a 0%, #1a3a2a 100%);
  padding: 4px 10px;
  border-radius: 2px;
  border: 2px solid;
  border-top-color: rgba(255, 255, 255, 0.2);
  border-left-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  border-right-color: rgba(0, 0, 0, 0.3);
  color: #7affaa;
  font-size: 0.72em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.4);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.fde-edge-label-icon {
  opacity: 0.85;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
}

/* Warning state - redstone/lava inspired */
.fde-edge-label-warning {
  background: linear-gradient(180deg, #5a2a2a 0%, #4a1a1a 100%);
  border-top-color: rgba(255, 100, 100, 0.3);
  border-left-color: rgba(255, 100, 100, 0.2);
  color: #ffaaaa;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PIPE FLOW ANIMATION - Applied to edges via React Flow styles
   ───────────────────────────────────────────────────────────────────────────── */

@keyframes pipeFlow {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes pipeGlow {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(90, 180, 255, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(90, 180, 255, 0.7));
  }
}

/* These classes can be applied to edge paths for animation */
.fde-pipe-animated {
  animation: pipeFlow 1s linear infinite;
}

.fde-pipe-glow {
  animation: pipeGlow 2s ease-in-out infinite;
}

/* FeatureDiagramEditor.css */
/* ═══════════════════════════════════════════════════════════════════════════
   FEATURE DIAGRAM EDITOR - Minecraft-Inspired Design
   
   Design Philosophy:
   - Cave/underground environment aesthetic
   - Stone and deepslate color palette
   - Subtle grid pattern reminiscent of Minecraft block grid
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer container with split layout */
.fde-outerContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Left panel - diagram */
.fde-diagramPanel {
  flex: 1;
  min-width: 400px;
  height: 100%;
  overflow: hidden;
}

/* Right panel - form editor or preview */
.fde-rightPanel {
  width: 350px;
  min-width: 300px;
  max-width: 450px;
  height: 100%;
  border-left: 2px solid rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.08) 100%);
}

.fde-rightPanelContent {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.fde-rightPanelHeader {
  padding: 10px 12px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
}

.fde-rightPanelHeaderTitle {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

.fde-rightPanelHeaderSubtitle {
  font-size: 10px;
  opacity: 0.65;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.fde-rightPanelEditor {
  flex: 1;
  overflow: auto;
}

/* Reduce padding in DataForm when inside the right panel */
.fde-rightPanelEditor .df-wrapper {
  margin: 4px 6px 2px 6px;
}

.fde-rightPanelEditor .df-outer {
  padding: 0px;
}

.fde-rightPanelEditor .df-headerOuter {
  padding-bottom: 4px;
}

.fde-rightPanelEditor .df-headerTitle {
  font-size: 13pt;
  padding-bottom: 4px;
}

.fde-rightPanelEditor .df-fieldCardContainer {
  padding: 6px 8px;
  margin: 4px 0;
}

.fde-rightPanelEditor .df-fieldCard {
  padding: 8px 10px;
}

/* Unfulfilled feature panel */
.fde-unfulfilledPanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  text-align: center;
}

.fde-unfulfilledIcon {
  font-size: 28px;
  color: #d97706;
  margin-bottom: 12px;
}

.fde-unfulfilledMessage {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
}

/* Preview panel styles - Minecraft book/scroll aesthetic */
.fde-previewContent {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.fde-previewHeader {
  padding: 10px 12px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
}

.fde-previewHeaderTitle {
  font-size: 14px;
  font-weight: 700;
}

.fde-previewHeaderSubtitle {
  font-size: 10px;
  opacity: 0.65;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.fde-previewList {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.fde-previewItem {
  display: flex;
  align-items: flex-start;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease;
}

.fde-previewItem:hover {
  background: rgba(255, 255, 255, 0.03);
}

.fde-previewItem:last-child {
  border-bottom: none;
}

.fde-previewIcon {
  margin-right: 10px;
  margin-top: 2px;
  opacity: 0.8;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 12px;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
}

.fde-previewIconRule {
  color: #5cff5c;
}

.fde-previewIconWarning {
  color: #ffaa44;
}

.fde-previewText {
  flex: 1;
}

.fde-previewEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px;
}

.fde-previewEmptyMessage {
  font-style: italic;
  opacity: 0.6;
}

/* Legacy container (keep for backwards compat) */
.fde-container {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.fde-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REACTFLOW CONTROLS - Minecraft blocky style
   ───────────────────────────────────────────────────────────────────────────── */

.fde-container .react-flow__controls {
  box-shadow: 
    0 3px 0 rgba(0, 0, 0, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  background: linear-gradient(180deg, #5a5a60 0%, #4a4a50 100%);
  border: 2px solid;
  border-top-color: rgba(255, 255, 255, 0.25);
  border-left-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(0, 0, 0, 0.35);
  border-right-color: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.fde-container .react-flow__controls button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: #ddd;
  transition: background 0.15s ease;
}

.fde-container .react-flow__controls button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.05) 100%);
  color: #fff;
}

.fde-container .react-flow__controls button:last-child {
  border-bottom: none;
}

.fde-container .react-flow__controls button svg {
  fill: currentColor;
}

/* MiniMap styling - stone texture inspired */
.fde-container .react-flow__minimap {
  background: linear-gradient(180deg, #4a4a50 0%, #3a3a40 100%);
  border: 2px solid;
  border-top-color: rgba(255, 255, 255, 0.2);
  border-left-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.3);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Node selection styling */
.fde-container .react-flow__node.selected {
  box-shadow: 0 0 0 2px #52a535, 0 0 20px rgba(82, 165, 53, 0.4);
}

/* Edge styling - pipe appearance */
.fde-container .react-flow__edge-path {
  stroke-width: 4;
  stroke-linecap: square;
}

.fde-container .react-flow__edge.selected .react-flow__edge-path {
  stroke-width: 6;
}

/* Handle styling - square pipe connectors */
.fde-container .react-flow__handle {
  width: 12px !important;
  height: 12px !important;
  border-radius: 2px !important;
  border: 2px solid #5a8acc !important;
  background: #3a5a7a !important;
  transition: all 0.15s ease;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.fde-container .react-flow__handle:hover {
  transform: scale(1.2);
  background: #5a8acc !important;
  box-shadow: 0 0 8px rgba(90, 138, 204, 0.5);
}

.fde-container .react-flow__handle-top {
  top: -6px !important;
}

.fde-container .react-flow__handle-bottom {
  bottom: -6px !important;
}

/* Unused feature node styling - dimmed appearance */
.fde-unused-node {
  opacity: 0.55;
  filter: grayscale(30%);
}

.fde-unused-node:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Connection line styling when dragging - water-like */
.fde-container .react-flow__connection-line {
  stroke: #5ab4ff;
  stroke-width: 4;
  stroke-dasharray: 8, 8;
  animation: connectionFlow 0.5s linear infinite;
}

@keyframes connectionFlow {
  0% {
    stroke-dashoffset: 16;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* ReactFlow background - subtle grid */
.fde-container .react-flow__background {
  background-color: #2a2a30;
}

.fde-container .react-flow__background pattern line {
  stroke: rgba(255, 255, 255, 0.05) !important;
}

/* VoxelShapeEditor.css - Styles for the Voxel Shape Editor */

.vse-loading {
  padding: 20px;
  text-align: center;
}

.vse-areaOuter {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vse-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.vse-identifier {
  font-size: 14px;
  padding-right: 16px;
}

.vse-area {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  padding: 0;
}

/* Left panel - box list and editor */
.vse-leftPanel {
  width: 320px;
  min-width: 280px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(128, 128, 128, 0.3);
  overflow: hidden;
}

/* Right panel - 3D preview */
.vse-rightPanel {
  flex: 1;
  min-width: 300px;
  overflow: hidden;
  position: relative;
}

.vse-listArea {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.vse-listToolbar {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.vse-listContainer {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.vse-boxEditor {
  padding: 16px;
  border-top: 1px solid rgba(128, 128, 128, 0.3);
  background: rgba(0, 0, 0, 0.1);
}

.vse-boxEditor h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
}

.vse-coordRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.vse-coordLabel {
  width: 40px;
  font-weight: 500;
}

.vse-coordInput {
  width: 80px !important;
}

.vse-coordInput input {
  width: 100%;
  text-align: center;
}

.vse-previewArea {
  width: 100%;
  height: 100%;
}

.vse-noPreview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(128, 128, 128, 0.7);
  font-style: italic;
}

.vse-previewLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(128, 128, 128, 0.7);
}

.pmap-container {
  width: 100%;
  height: 100%;
}

.pmap-loading {
  padding: 4px;
}
.pmap-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1e1e1e;
}

.pmap-empty-message {
  text-align: center;
  color: #888;
  max-width: 400px;
  padding: 20px;
}

.pmap-empty-message p {
  margin: 8px 0;
  line-height: 1.5;
}

.pmap-empty-message p:first-child {
  font-size: 16px;
  color: #c0c0c0;
  font-weight: 500;
}
.pino-outer {
  width: 180px;
  height: 56px;
}

.pino-type {
  font-size: x-small;
  padding-left: 4px;
  padding-top: 1px;
  padding-bottom: 2px;
}

.pino-name {
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 4px;
}

.pino-inner-selected {
  border: solid 2px green;
}

.pire-label {
  font-size: x-small;
}
/* Disable edge interaction - edges should be display-only */
.react-flow__edge {
  pointer-events: none !important;
}

.react-flow__edge-path {
  pointer-events: none !important;
}

/* Hide edge interaction handles */
.react-flow__edgeupdater {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   TRADE TABLE VISUAL EDITOR - Wrapper with Simple / Advanced sub-tabs
   ═══════════════════════════════════════════════════════════════════════════ */

.ttve-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ttve-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 12px;
  flex-shrink: 0;
}

.ttve-tab {
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s;
  position: relative;
  bottom: -1px;
}

.ttve-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}

.ttve-tab-active {
  color: #81c784;
  border-bottom-color: #66bb6a;
}

.ttve-content {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ttve-simple-layout {
  display: flex;
  height: 100%;
  min-height: 0;
}

.ttve-picker-panel {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ttve-tier-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-width: 0;
}

.ttve-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

.ttve-error {
  margin: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRADE TIERS OVERVIEW - Multi-tier overview with collapsible tier cards
   ═══════════════════════════════════════════════════════════════════════════ */

.tto-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tto-tier-card {
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.tto-tier-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}

.tto-tier-card-header:hover {
  background: rgba(255, 255, 255, 0.07);
}

.tto-tier-expand {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  width: 14px;
  text-align: center;
  transition: transform 0.15s;
}

.tto-tier-expand-open {
  transform: rotate(90deg);
}

.tto-tier-number {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.tto-tier-summary {
  flex: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.tto-tier-remove-btn {
  padding: 2px 8px;
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s;
}

.tto-tier-card-header:hover .tto-tier-remove-btn {
  opacity: 1;
}

.tto-tier-remove-btn:hover {
  background: rgba(229, 57, 53, 0.15);
  color: #ef5350;
  border-color: rgba(229, 57, 53, 0.3);
}

.tto-tier-body {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tto-add-tier-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
  width: 100%;
}

.tto-add-tier-btn:hover {
  border-color: rgba(76, 175, 80, 0.4);
  color: #81c784;
  background: rgba(76, 175, 80, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRADE TIER VISUAL EDITOR - Visual editor for a single trade tier
   ═══════════════════════════════════════════════════════════════════════════ */

.ttv-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ttv-tier-meta {
  padding: 10px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #66bb6a;
}

.ttv-meta-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ttv-meta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55);
}

.ttv-meta-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  flex-basis: 100%;
}

.ttv-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ttv-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 4px 2px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.ttv-group-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ttv-group-num-to-select {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.ttv-group-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.ttv-group-remove {
  color: rgba(255, 255, 255, 0.4) !important;
}

.ttv-group-remove:hover {
  color: #ef5350 !important;
}

.ttv-trades-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ttv-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  text-align: center;
}

.ttv-empty-icon {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.2);
}

.ttv-add-group-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  cursor: pointer;
  width: 100%;
}

.ttv-add-group-btn:hover {
  border-color: rgba(76, 175, 80, 0.4);
  color: #81c784;
  background: rgba(76, 175, 80, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRADE TILE - Visual card showing one trade as Wants → Gives
   ═══════════════════════════════════════════════════════════════════════════ */

.ttile-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  min-height: 48px;
}

.ttile-container:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.ttile-container-selected {
  border-color: #66bb6a;
  background: rgba(76, 175, 80, 0.08);
}

.ttile-side {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ttile-wants {
  flex: 1;
  justify-content: flex-end;
}

.ttile-gives {
  flex: 1;
  justify-content: flex-start;
}

.ttile-side-empty {
  color: rgba(255, 255, 255, 0.3);
}

.ttile-stack {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ttile-qty {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  min-width: 20px;
}

.ttile-arrow {
  font-size: 12px;
  color: #81c784;
  flex-shrink: 0;
}

.ttile-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ttile-badge {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

.ttile-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  background: #e53935 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1;
  padding: 0 !important;
}

.ttile-container:hover .ttile-remove-btn {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRADE EDITOR - Inline editor for a single trade's wants/gives properties
   ═══════════════════════════════════════════════════════════════════════════ */

.te-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid #66bb6a;
}

.te-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.te-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.te-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #81c784;
}

.te-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.te-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.te-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.45);
}

.te-quantity-section {
  display: flex;
  align-items: center;
  gap: 6px;
}

.te-quantity-separator {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.te-done-btn {
  align-self: flex-end !important;
}

.te-itembin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
  transition:
    border-color 0.15s,
    background 0.15s;
}

.te-itembin-drag-over {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.12);
}

.te-itembin-sprite {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRADE ITEM DROP ZONE - Drag target for adding trades to a group
   ═══════════════════════════════════════════════════════════════════════════ */

.ttio-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
  min-height: 44px;
}

.ttio-drop-zone:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
}

.ttio-drop-zone-active {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.12);
  color: #81c784;
}

.ttio-drop-zone-icon {
  font-size: 16px;
}

@media only screen and (min-width: 860px) {
  .pe-meta {
    padding: 10px 4px 8px 11px;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    text-align: right;
    grid-row: 1;
    grid-column: 4;
  }
}
@media only screen and (max-width: 860px) {
  .pe-meta {
    display: none;
  }
}

.pe-shareProjectDialog {
  max-width: 700px;
  width: calc(95vw - 30px);
  max-height: calc(100vh - 30px);
  min-height: calc(100vh - 30px);
}

.pe-menuIcon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  position: relative;
  left: -2px;
  top: -1px;
  image-rendering: pixelated;
  max-width: 20px;
  min-height: 20px;
  max-height: 20px;
}

.pe-singleDragOver {
  position: fixed;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  background-color: rgba(48, 96, 48, 0.9);
  border: solid 3px rgba(48, 96, 48, 1);
  vertical-align: middle;
  text-align: center;
  margin: 10px;
  padding-top: calc(50vh - 20px);
  z-index: 10000;
  opacity: 0.9;
}

.pe-zoneDragOver {
  position: fixed;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  vertical-align: middle;
  text-align: center;
  margin: 10px;
  z-index: 10000;
  opacity: 0.9;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.pe-dragZone1 {
  grid-row: 1;
  background-color: rgba(48, 96, 48, 0.8);
  border: solid 6px rgba(48, 96, 48, 1);
  vertical-align: middle;
  margin: 10px;
  padding-top: calc(25vh - 20px);
}

.pe-dragZone1:hover {
  background-color: rgba(64, 112, 64, 0.8);
  border: solid 6px rgba(64, 112, 64, 1);
}

.pe-dragZone2 {
  grid-row: 2;
  background-color: rgba(48, 96, 48, 0.8);
  border: solid 6px rgba(48, 96, 48, 1);
  vertical-align: middle;
  padding-top: calc(25vh - 20px);
  margin: 10px;
}

.pe-dragZone2:hover {
  background-color: rgba(64, 112, 64, 0.8);
  border: solid 6px rgba(64, 112, 64, 1);
}

.pe-gridOuter {
  max-width: 100vw;
  min-width: 100vw;
  display: grid;
  overflow: hidden;
}

.pe-gridOuterCollapsed {
  grid-template-rows: 40px 1fr 40px;
}

.pe-gridOuterExpanded {
  grid-template-rows: 40px 1fr 240px;
}

@media only screen and (max-height: 600px) {
  .pe-gridOuterExpanded {
    grid-template-rows: 40px 1fr 150px;
  }
}

.pe-gridOuterNtbCollapsed {
  grid-template-rows: 0px 1fr 0px;
}

.pe-title {
  max-width: 275px;
  width: 275px;
  padding-top: 4px;
  overflow-y: hidden;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pe-metaProjectTitle {
  font-weight: bold;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pe-signin {
  width: 40px;
  padding-left: 4px;
  grid-column: 2;
}

.pe-toolbar-container {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  overflow: hidden;
  max-width: 100%;
}

/* Extended toolbar when tool pane is visible */
.pe-toolbar-container-extended {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  overflow: hidden;
  max-width: 100%;
}

.pe-toolbar {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 0px;
  padding-bottom: 0px;
  vertical-align: middle;
  /* Hide scrollbar while allowing scroll on mobile */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.pe-toolbar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.pe-toolbar-close {
  flex-shrink: 0;
  margin-left: 8px;
}

.pe-toolbar-right {
  flex-shrink: 0;
  margin-left: auto;
  padding-right: 4px;
}

.pe-toolbar-right-active {
  position: relative;
  z-index: 1;
  align-self: stretch;
  padding-left: 8px;
  background-color: var(--mct-bg-header, #252526);
}

.pe-toolbar-right-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px solid #111;
  border-right: 2px solid #555;
}

.pe-toolbar .label {
  max-width: 180px;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding-top: 1px;
  display: inline-block;
}
.pe-toolbar .label-arrowouter {
  padding-top: 4px;
  display: inline-block;
}

.pe-toolbar-compact {
  flex: 1;
  padding-top: 0px;
  padding-bottom: 0px;
  vertical-align: middle;
}

.pe-toolbar .al {
  height: 3rem;
}

.pe-toolbar-compact .al {
  height: 3rem;
}

.pe-itemeditor {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
  width: calc(100vw - 300px);
  max-width: calc(100vw - 300px);
  min-width: calc(100vw - 300px);
}

.pe-itemlist {
  grid-row-start: 2;
  grid-row-end: 3;
}

.pe-col1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.pe-col1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid #111;
  border-bottom: 2px solid #555;
  pointer-events: none;
}

.pe-col1and2 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}

.pe-col2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}

.pe-itemSplitter {
  cursor: ew-resize;
  font-size: 1pt;
  border-top: "2px outset";
  border-bottom: "2px outset";
}

.pe-col3and4 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}

.pe-colAll {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}

.pe-col3 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}

.pe-col4 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}

.pe-statusbar {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 5;
  min-height: 40px;
  z-index: 0;
}

/*
 * Forced-colors / Windows High Contrast.
 *
 * The statusbar's `background-color` and `color` are applied via inline
 * React styles (`style={{ backgroundColor: colors.background1, ... }}`).
 * Browsers reset inline `background-color` to `Canvas` under forced-colors
 * but leave the inline `color` untouched, which produces a near-white-on-
 * white contrast failure even though the rendered pixels in non-forced-
 * colors mode are perfectly legible. Pin to system color tokens so HC
 * users always see legible text on a real background.
 */
@media (forced-colors: active) {
  .pe-statusbar,
  .pe-statusbar-extended {
    background-color: Canvas !important;
    color: CanvasText !important;
  }
}

/* Extended status bar when tool pane is visible */
.pe-statusbar-extended {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 7;
  min-height: 40px;
  z-index: 0;
}

/* Tool pane splitter - inside grid */
.pe-toolpane-splitter {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row: 2;
  cursor: ew-resize;
  transition: background-color 0.2s ease;
}

.pe-toolpane-splitter:hover {
  background-color: var(--mct-accent, #0078d4) !important;
}

/* Tool pane - inside grid, contains Toolbox */
.pe-toolpane {
  grid-column-start: 6;
  grid-column-end: 7;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.pe-toolpane::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px solid #111;
  border-right: 2px solid #555;
  z-index: 1;
}

.pe-toolpane::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid #111;
  border-bottom: 2px solid #555;
  pointer-events: none;
  z-index: 1;
}

/* Mobile layout: collapse to single panel */
@media only screen and (max-width: 480px) {
  .pe-col1 {
    display: none;
  }

  .pe-col2 {
    grid-column-start: 1;
    grid-column-end: -1;
  }

  .pe-col3and4 {
    grid-column-start: 1;
    grid-column-end: -1;
  }

  .pe-col1and2 {
    grid-column-start: 1;
    grid-column-end: -1;
  }

  .pe-col3 {
    display: none;
  }

  .pe-col4 {
    grid-column-start: 1;
    grid-column-end: -1;
  }

  .pe-itemSplitter {
    display: none;
  }

  .pe-toolpane-splitter {
    display: none;
  }

  .pe-toolpane {
    display: none;
  }

  .pe-title {
    max-width: 140px;
    width: auto;
  }
}

.sa-outer {
  padding: 2px;
  padding-top: 0px;
  vertical-align: middle;
  padding-left: 10px;
  display: grid;
  grid-template-columns: 1fr 30px;
  grid-template-rows: auto 1fr;
  height: 100%;
  max-width: calc(100vw);
  overflow: hidden;
  margin-top: -1px;
}

.sa-singleline {
  padding-bottom: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: clip;
  max-width: calc(100vw - 42px);
  display: inline-block;
}

.sa-placeHolder {
  padding-top: 2px;
  padding-left: 2px;
  display: grid;
  grid-template-columns: 16px 1fr;
}

.sa-placeHolderIcon {
  padding-top: 3px;
  grid-column: 1;
}

.sa-placeHolderText {
  padding: 4px 0px 0px 5px !important;
  height: 24px !important;
  box-shadow: none !important;
  margin-left: 5px;
  text-align: left !important;
  justify-content: left !important;
  grid-column: 2;
}

.sa-searchPlaceHolder {
  border: solid 0px !important;
  background-color: transparent !important;
  padding: 3px 0px 0px 5px !important;
  height: 24px !important;
  box-shadow: none !important;
  margin-left: 12px;
  text-align: left !important;
  justify-content: left !important;
  grid-column: 2;
  color: #888 !important;
  opacity: 0.9;
}

.sa-inputArea {
  display: grid;
  width: 100%;
  grid-template-columns: 40px 1fr;
  margin-top: 3px;
}

.sa-loading {
  width: 16px;
  margin-top: 3px;
  margin-right: 6px;
}

.sa-message {
  position: relative;
  top: 6px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-inputButton {
  grid-column: 1;
  padding-top: 1px;
}

.sa-inputButton BUTTON {
  max-width: 38px;
  padding: 0px;
  min-width: 38px;
  height: 28px;
}

.sa-inputEditor {
  grid-column: 2;
}

.sa-messageOuter {
  grid-column: 1;
  vertical-align: top;
  cursor: pointer;
  padding-top: 2px;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: clip;
  white-space: nowrap;
  max-width: calc(100vw - 42px);
}

.sa-tools {
  grid-column: 2;
  vertical-align: middle;
  padding-top: 2px;
}

.sa-listOuter {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 2;
  overflow: hidden;
}

.sa-list {
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  max-width: calc(100vw - 43px);
}

.sa-list UL {
  max-width: calc(100vw - 44px);
}

.sa-list LI {
  min-height: 1rem;
  white-space: nowrap;
  padding-top: 1px;
  padding-bottom: 1px;
}

.sa-list .ui-list__itemcontent {
  font-size: 14px;
}

.sa-list li {
  padding-left: 3px;
}

.sa-progressOuter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 28px;
  padding-left: 8px;
  cursor: pointer;
  gap: 6px;
}

.sa-progressIcon {
  font-size: 12px;
  line-height: 1;
}

.sa-progressPickaxe {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  animation: mining 0.4s ease-in-out infinite;
  transform-origin: 15% 85%; /* Pivot at handle base (bottom-left) for realistic swing */
  position: relative;
  top: 2px;
  left: 2px;
}

@keyframes mining {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}

.sa-woodBlockBar {
  display: flex;
  gap: 2px;
  align-items: center;
}

.sa-woodBlock {
  width: 12px;
  height: 12px;
  image-rendering: pixelated;
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}

.sa-woodBlock img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.sa-woodBlockEmpty {
  opacity: 0.2;
  filter: grayscale(100%);
}

.sa-woodBlockFilled {
  opacity: 1;
  filter: none;
  animation: blockPop 0.2s ease-out;
}

@keyframes blockPop {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.sceed-interior {
  min-height: 47px;
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
}

.sceed-interior *:focus,
.sceed-interior *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.sceed-area,
.sceed-area *:focus,
.sceed-area *:focus-visible,
.sceed-area input,
.sceed-area input:focus,
.sceed-area input:focus-visible,
.sceed-input,
.sceed-input *:focus,
.sceed-input *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.sceed-area {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  height: 100%;
}

.sceed-input-area {
  display: grid;
}

.sceed-input {
  grid-column: 1;
}

.sceed-accessoryToolBar {
  grid-column: 2;
}

.sceed-toolBarArea {
  padding: 2px;
  display: grid;
  grid-template-columns: 1fr 117px;
}

/* NOTE: !important overrides are needed to override Fluent UI Northstar's
   inline styles on FormInput components. */
.sceed-text-large {
  font-size: 16pt !important;
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

.sceed-text {
  font-size: 11pt !important;
  vertical-align: middle;
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

.sceed-text LABEL {
  padding: 4px;
  padding-top: 6px;
}

.sceed-text INPUT {
  border-radius: 0px !important;
  padding: 5px !important;
}

.sceed-title {
  grid-column: 1;
  padding-top: 5px;
}

.sceed-toolBar {
  grid-column: 2;
}

.sceed-floatBox {
  position: fixed;
  min-width: 300px;
  max-width: 560px;
  width: max-content;
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  top: 100px;
  left: 10px;
  z-index: 100000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.sceed-floatListItem {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 4px;
}

@media only screen and (min-width: 916px) {
  .mts-outer .ui-dropdown__container {
    width: 220px;
  }

  .mts-label {
    position: relative;
    top: 1px;
    user-select: none;
    padding-right: 8px;
  }

  .mts-toolBar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .mts-typeLabel {
    padding-left: 4px;
    user-select: none;
    white-space: nowrap;
  }
}

@media only screen and (max-width: 915px) {
  .mts-outer .ui-dropdown__container {
    width: 130px;
  }

  .mts-toolBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .mts-label {
    display: none;
  }

  .mts-typeLabel {
    display: none;
  }
}

.mts-outer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mts-spacer {
  margin-top: 20px;
}

.mts-header {
  font-weight: bold;
}

.mts-toolPicker {
  flex-shrink: 0;
}

.mts-toolName {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mts-toolName input {
  width: 120px;
}

.mts-toolType {
  flex-shrink: 0;
}

.mts-typeIcon {
  font-family: monospace;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  text-transform: none;
}

.mts-interior {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mts-logArea {
  flex-shrink: 0;
  border-top: 1px solid rgba(128, 128, 128, 0.3);
}

.mts-logArea .lia-outer {
  height: auto;
}

.lia-outer {
  padding: 2px;
  vertical-align: middle;
  display: grid;
  grid-template-columns: 1fr 30px;
  height: 100%;
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.lia-message {
  grid-column: 1;
  vertical-align: top;
  padding-top: 6px;
  white-space: nowrap;
  overflow-x: hidden;
}

.lia-tools {
  grid-column: 2;
  vertical-align: middle;
}

.lia-list {
  height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

.lia-list LI {
  min-height: 1.25rem;
  white-space: nowrap;
}

.lia-list .ui-list__itemcontent {
  font-size: small;
}

.lia-list li {
  padding-left: 3px;
}

.cs-outer {
}

.cs-panelArea {
  padding-top: 20px;
}

.cs-header {
  font-size: 16pt;
  padding-top: 15px;
  padding-left: 18px;
  padding-bottom: 16px;
  margin: 0px;
}

.cs-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

@media only screen and (min-width: 1016px) {
  .csp-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    row-gap: 12px;
  }
}

@media only screen and (max-width: 1015px) {
}

.csp-grid {
  padding: 16px;
  padding-top: 16px;
  padding-bottom: 30px;
}

.csp-label {
  padding-left: 2px;
  user-select: none;
}

/* Row 3: Appearance - label left, dropdown right */
.csp-themelabel {
  grid-row: 3;
  grid-column: 1;
}

.csp-themeinput {
  grid-row: 3;
  grid-column: 2;
}

/* Row 4: Format before save - label left, toggle right */
.csp-formatbeforesavelabel {
  grid-row: 4;
  grid-column: 1;
}

.csp-formatbeforesave {
  grid-row: 4;
  grid-column: 2;
  display: flex;
  align-items: center;
  margin-left: -9px;
}

/* Row 5: Deployment Target - label left, dropdown right */
.csp-defaultDeployTargetlabel {
  grid-row: 5;
  grid-column: 1;
}

.csp-defaultDeployTarget {
  grid-row: 5;
  grid-column: 2;
}

.csp-defaultDeployTarget .ui-dropdown__container {
  width: 235px;
}

/* Row 1-2: Edit Experience - label in col 1, options in col 2 */
.csp-defaultEditlabel {
  grid-row: 1;
  grid-column: 1;
  padding-top: 8px;
  align-self: start;
}

.csp-defaultEditinput {
  grid-row: 1 / span 2;
  grid-column: 2;
  padding-bottom: 20px;
}

/* Radio button style options grid */
.csp-editOptionsGrid {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-bottom: 8px;
  max-width: 700px;
}

.csp-editOption {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: all 0.15s ease;
  position: relative;
}

.csp-editOption:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.csp-editOption:focus {
  outline: none;
  border-color: rgba(82, 165, 53, 0.6);
}

.csp-editOptionSelected {
  background: rgba(82, 165, 53, 0.15);
  border-color: rgba(82, 165, 53, 0.6);
}

.csp-editOptionSelected:hover {
  background: rgba(82, 165, 53, 0.2);
  border-color: rgba(82, 165, 53, 0.8);
}

.csp-editOptionIcon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(82, 165, 53, 0.2);
  border-radius: 4px;
  font-size: 0.9rem;
  color: #52a535;
}

.csp-editOptionContent {
  flex: 1;
  min-width: 0;
}

.csp-editOptionTitle {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.csp-editOptionDesc {
  font-size: 0.75rem;
  opacity: 0.7;
  line-height: 1.3;
}

.csp-editOptionCheck {
  position: absolute;
  top: 4px;
  right: 6px;
  color: #52a535;
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .csp-editOptionsGrid {
    flex-direction: column;
  }

  .csp-editOptionDesc {
    display: none;
  }
}

/* Row 6: Target Minecraft - label left, dropdown right */
.csp-tracklabel {
  grid-row: 6;
  grid-column: 1;
}

.csp-trackinput {
  grid-row: 6;
  grid-column: 2;
  margin-right: 4px;
}

.csp-trackinput .ui-dropdown__container {
  width: 235px;
}

/* Row 7: Show welcome panel - label left, toggle right */
.csp-showwelcomelabel {
  grid-row: 7;
  grid-column: 1;
}

.csp-showwelcome {
  grid-row: 7;
  grid-column: 2;
  display: flex;
  align-items: center;
  margin-left: -9px;
}

/* Row 8: Auto-start (if present) - label left, toggle right */
.csp-autostartlabel {
  grid-row: 8;
  grid-column: 1;
}

.csp-autostart {
  grid-row: 8;
  grid-column: 2;
  display: flex;
  align-items: center;
  margin-left: -9px;
}

/* Row 9: Dedicated Server Path (if present) - label left, input right */
.csp-dspathlabel {
  grid-row: 9;
  grid-column: 1;
}

.csp-dspathinput {
  grid-row: 9;
  grid-column: 2;
  margin-right: 4px;
}

.csp-dspathinput input {
  max-width: 200px;
  margin-top: 4px;
}

.csp-dspathinput button {
  margin-top: 4px;
}

.csp-dspathinput input {
  width: 300px;
}

/* 'Saved' confirmation toast — appears briefly when a setting is changed */
.csp-savedToast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: rgba(40, 40, 40, 0.95);
  color: #86d562;
  border: 1px solid rgba(134, 213, 98, 0.4);
  border-radius: 4px;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  animation: csp-savedToast-fade 1.5s ease-out forwards;
}

@keyframes csp-savedToast-fade {
  0% { opacity: 0; transform: translateY(6px); }
  15% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}


.pdisp-outer {
}

.pdisp-header {
  font-size: 16pt;
  padding-top: 35px;
  padding-left: 14px;
  padding-bottom: 42px;
}

.pdisp-headerTransition {
  background-position-x: left;
  background-repeat: repeat-x;
  height: 40px;
}

.pdisp-grid {
  display: grid;
  background-repeat: repeat;
  grid-template-columns: 160px 340px 140px 1fr;
  padding: 10px;
  padding-top: 30px;
  padding-bottom: 30px;
  overflow-y: auto;
}

.pdisp-link {
  margin-top: 14px;
  font-weight: bold;
}

.pdisp-toolArea {
  padding-top: 20px;
  padding-bottom: 30px;
  padding-left: 160px;
  grid-column-start: 1;
  grid-column-end: 4;
}

.pdisp-descriptionlabel {
  grid-row: 1;
  grid-column: 1;
  padding-bottom: 4px;
  padding-top: 0px;
}

.pdisp-descriptioninput {
  grid-row: 1;
  grid-column-start: 2;
  grid-column-end: 3;
  padding-bottom: 4px;
}

.pdisp-descriptioninput textarea {
  width: 400px;
  height: 120px;
}

.pdisp-versionlabel {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: 3;
  padding-bottom: 20px;
  padding-top: 6px;
}

.pdisp-versioninputline {
  display: inline;
}

.pdisp-versioninput {
  grid-row: 2;
  grid-column: 2;
  margin-top: 7px;
  padding-bottom: 20px;
}

.pdisp-additional {
  padding-top: 20px;
}

.pdisp-statusArea {
  grid-row: 3;
  grid-column-start: 1;
  grid-column-end: 5;
  padding-top: 30px;
}

.pdisp-advancedArea {
  grid-row: 4;
  grid-column-start: 1;
  grid-column-end: 5;
  padding-top: 30px;
}

.pdisp-bedrock {
  grid-row: 7;
  background-repeat: repeat-x;
  font-size: 2;
  line-height: 0.5;
  min-height: 16px;
  max-height: 16px;
}

.pdisp-advgrid {
  display: grid;
  grid-template-columns: 220px 340px 140px;
}

.pdisp-bpuniqueidlabel {
  grid-row: 1;
  grid-column: 1;
  padding-left: 20px;
  padding-bottom: 6px;
  padding-top: 7px;
}

.pdisp-bpuniqueidinput {
  grid-row: 1;
  grid-column: 2;
  padding-bottom: 6px;
  padding-top: 7px;
}

.pdisp-bpuniqueIdInputValue input {
  min-width: 310px;
  width: 310px;
}

.pdisp-rpuniqueidlabel {
  grid-row: 2;
  grid-column: 1;
  padding-left: 20px;
  padding-bottom: 6px;
  padding-top: 7px;
}

.pdisp-rpuniqueidinput {
  grid-row: 2;
  grid-column: 2;
  padding-bottom: 6px;
  padding-top: 7px;
}

.pdisp-rpuniqueIdInputValue input {
  min-width: 310px;
  width: 310px;
}

.pdisp-datauniqueidlabel {
  grid-row: 3;
  grid-column: 1;
  padding-bottom: 6px;
  padding-top: 7px;
  padding-left: 20px;
}

.pdisp-datauniqueidinput {
  grid-row: 3;
  grid-column: 2;
  padding-bottom: 6px;
  padding-top: 7px;
}

.pdisp-datauniqueIdInputValue input {
  min-width: 310px;
  width: 310px;
}

.pdisp-scriptuniqueidlabel {
  grid-row: 4;
  grid-column: 1;
  padding-left: 20px;
  padding-bottom: 6px;
  padding-top: 7px;
}

.pdisp-toolArea button {
  margin: 2px;
  width: 260px;
  display: inline-block;
}

.pdisp-scriptuniqueidinput {
  grid-row: 4;
  grid-column: 2;
  padding-bottom: 6px;
  padding-top: 7px;
}

.pdisp-scriptuniqueIdInputValue input {
  min-width: 310px;
  width: 310px;
}

.pdisp-scriptuniqueidcreatenew {
  grid-row: 4;
  grid-column: 3;
  padding-bottom: 6px;
  padding-top: 0px;
}

.mid-outer {
  display: grid;
  padding: 0;
  cursor: default;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.mid-main {
  overflow: hidden;
  min-height: 0;
}

/* New web server layout: map on left 2/3, sidebar on right 1/3 */
.mid-webserver-layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  gap: 0;
}

.mid-map-area {
  flex: 2;
  min-width: 0;
  height: 100%;
  position: relative;
}

/* Override WorldDisplay's inline height calc — let the flex parent control sizing */
.mid-map-area .wv-main {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

.mid-sidebar {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(128, 128, 128, 0.3);
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.mid-sidebar-tabs {
  display: flex;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.mid-sidebar-tab {
  flex: 1;
  padding: 10px 16px;
  text-align: center;
  cursor: pointer;
  background: transparent;
  border: none;
  color: #888;
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.mid-sidebar-tab:hover {
  background: rgba(128, 128, 128, 0.1);
  color: #aaa;
}

.mid-sidebar-tab.active {
  color: #fff;
  background: rgba(100, 149, 237, 0.2);
  border-bottom: 2px solid #6495ed;
}

.mid-sidebar-content {
  flex: 1;
  overflow: hidden;
  padding: 8px;
  min-height: 0; /* Allow flex item to shrink below content size */
  display: flex;
  flex-direction: column;
}

/* Messages panel */
.mid-messages-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mid-messages-list {
  flex: 1;
  overflow-y: auto;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  line-height: 1.4;
  min-height: 0; /* Allow flex item to shrink below content size */
}

.mid-message-item {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.mid-message-time {
  color: #666;
  margin-right: 8px;
  font-size: 11px;
}

.mid-message-text {
  color: #ccc;
}

.mid-message-text.info {
  color: #8bc34a;
}

.mid-message-text.warn {
  color: #ff9800;
}

.mid-message-text.error {
  color: #f44336;
}

.mid-message-text.player {
  color: #03a9f4;
}

/* Command input at bottom of messages */
.mid-command-input-area {
  border-top: 1px solid rgba(128, 128, 128, 0.3);
  padding: 4px 4px;
  background: rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
}

.mid-command-input-area .mcfe-area {
  margin: 0;
  padding: 0;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  min-height: 36px;
  max-height: 36px;
}

.mid-command-input-area .mcfe-contentSingle {
  margin: 0;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 4px;
  overflow: hidden;
  height: 34px;
  align-items: stretch;
}

.mid-command-input-area .mcfe-interiorSingle {
  padding-right: 0;
  height: 100%;
  min-height: 100%;
}

.mid-command-input-area .mcfe-interiorSingle .overflow-guard {
  height: 100% !important;
}

/* Unify all Monaco backgrounds to match in single-line command input */
.mid-command-input-area .monaco-editor,
.mid-command-input-area .monaco-editor .overflow-guard {
  border: none !important;
  outline: none !important;
}

.mid-command-input-area .monaco-editor-background,
.mid-command-input-area .monaco-editor .margin,
.mid-command-input-area .monaco-editor .monaco-scrollable-element {
  background-color: #1a1a1a !important;
}

/* Ensure Monaco widgets appear above other content */
.mid-command-input-area .monaco-editor .editor-widget {
  z-index: 1000 !important;
}

.mid-command-input-area .monaco-editor .suggest-widget,
.mid-command-input-area .monaco-editor .parameter-hints-widget,
.mid-command-input-area .monaco-editor .monaco-hover {
  z-index: 1001 !important;
}

.mid-command-input-wrapper {
  display: flex;
  gap: 4px;
}

.mid-command-input {
  flex: 1;
  background: #1e1e1e;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  padding: 8px 12px;
  color: #fff;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 13px;
}

.mid-command-input:focus {
  outline: none;
  border-color: #6495ed;
}

.mid-command-send-btn {
  padding: 8px 12px;
  background: #52a535;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.mid-command-send-btn:hover {
  background: #5cb85c;
}

/* Players panel */
.mid-players-panel {
  height: 100%;
}

/* Stats panel */
.mid-stats-panel {
  height: 100%;
  overflow-y: auto;
  padding: 8px;
}

.mid-players-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mid-player-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.mid-player-avatar {
  width: 24px;
  height: 24px;
  background: #666;
  border-radius: 4px;
}

.mid-player-name {
  flex: 1;
  color: #fff;
}

.mid-no-players {
  padding: 20px;
  text-align: center;
  color: #666;
  font-style: italic;
}

.mid-commander {
  border: solid 1px gray;
  margin-top: 30px;
  margin-right: 5px;
  margin-left: 10px;
}

.mid-toolBin {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 9px;
  padding-bottom: 10px;
}

/* Tool buttons in the host toolbar */
.mid-toolbar-tools {
  display: inline-flex;
  gap: 4px;
  margin-left: 16px;
  border-left: 1px solid rgba(128, 128, 128, 0.3);
  padding-left: 16px;
}

.mid-toolbar-tool-btn {
  padding: 6px 12px;
  background: rgba(128, 128, 128, 0.2);
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  color: #ccc;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.mid-toolbar-tool-btn:hover {
  background: rgba(128, 128, 128, 0.3);
  color: #fff;
}

.mid-slotSelector {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  margin-top: -2px;
}

.mid-slotSelector .ui-dropdown {
  min-width: 200px;
}

.mid-slotSelector .ui-dropdown__container {
  font-weight: normal;
  font-size: 14px;
}

.mid-slotSelector .ui-dropdown__selected-items {
  font-weight: normal;
}

.mid-slotSettingsButton {
  margin-top: -2px;
  margin-left: 6px;
}

.mid-worldsButton {
  margin-left: 8px;
  margin-top: -2px;
}

.mid-hostToolBarArea {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.35);
  background: rgba(0, 0, 0, 0.15);
}

/* Minecraft-styled bottom tab bar — stone slab look */
.mid-actionsToolBarArea {
  border-top: 2px solid #131313;
  background: #2a2a2a;
  box-shadow:
    inset 0 2px 0 #3e3e3e,
    inset 0 -2px 0 #1a1a1a;
  padding: 3px 4px 2px 4px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.mid-actionsToolBarArea button {
  border-width: 0px;
  text-transform: none;
}

/* Container for map and debug stats side by side */
.mid-map-debug-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 10px;
}

.mid-map-debug-container .mid-map {
  flex: 1;
  min-width: 0;
}

.mid-debug-stats {
  width: 280px;
  min-width: 200px;
  max-width: 350px;
  border: 1px solid var(--color-border, #444);
  border-radius: 6px;
  background: var(--color-surface, #1e1e1e);
  overflow: hidden;
}

/* When screen is narrow, stack vertically */
@media (max-width: 900px) {
  .mid-map-debug-container {
    flex-direction: column;
  }

  .mid-debug-stats {
    width: 100%;
    max-width: none;
    height: 200px;
  }
}

/* Slot settings button - styles are now defined with .mid-slotSelector */

/* Slot settings dialog content */
.mid-slotSettingsContent {
  padding: 8px 0;
  min-width: 550px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.mid-slotSettingsSection {
  margin-bottom: 16px;
}

.mid-slotSettingsSectionHeader {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.5);
}

.mid-slotSettingsRow {
  display: flex;
  padding: 6px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.mid-slotSettingsRow:last-child {
  border-bottom: none;
}

.mid-slotSettingsLabel {
  font-weight: bold;
  min-width: 140px;
}

.mid-slotSettingsValue {
  flex: 1;
}

.mid-slotSettingsWorldArea {
  padding: 12px;
  border-radius: 4px;
  margin-top: 8px;
}

.mid-slotSettingsNote {
  font-size: 12px;
  font-style: italic;
  color: #888;
  margin-top: 8px;
  padding: 8px;
  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
}

.mid-slotSettingsFooter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
}

/* Responsive layout for narrow screens */
@media (max-width: 900px) {
  .mid-main {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .mid-webserver-layout {
    flex-direction: column;
    overflow: visible;
    height: auto;
    min-height: 100%;
  }

  .mid-map-area {
    flex: none;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  /* Ensure map content is clipped within the map area */
  .mid-map-area > * {
    max-height: 280px;
  }

  .mid-map-area .wv-main {
    height: 280px !important;
    min-height: 0 !important;
    max-height: 280px !important;
  }

  .mid-sidebar {
    flex: none;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: 350px;
    border-left: none;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    overflow: visible;
    position: relative;
    z-index: 10;
    background: #1a1a1a;
  }

  .mid-sidebar-content {
    overflow: visible;
    max-height: none;
    height: auto;
  }

  .mid-messages-panel {
    min-height: 280px;
    height: auto;
  }

  .mid-messages-list {
    max-height: 200px;
    min-height: 120px;
  }

  .mid-command-input-area {
    min-height: 60px;
  }
}

/* Even narrower screens (portrait phone) */
@media (max-width: 500px) {
  .mid-map-area {
    height: 220px;
    min-height: 220px;
    max-height: 220px;
  }

  .mid-map-area > * {
    max-height: 220px;
  }

  .mid-sidebar {
    min-height: 300px;
  }

  .mid-messages-list {
    max-height: 150px;
    min-height: 100px;
  }
}

.migs-outer {
  padding: 12px;
  padding-top: 10px;
}

.migs-header {
  font-weight: bold;
  padding-left: 1px;
  padding-top: 6px;
  padding-bottom: 26px;
}

.migs-label {
  margin-bottom: 4px;
  user-select: none;
}

.migs-spacer {
  margin-top: 20px;
}

.migs-connectHeader {
  font-weight: bold;
  margin-top: 20px;
}

.migs-modeinput .ui-dropdown__container {
  width: 350px !important;
}

.migs-instruction {
  padding-top: 20px;
}

.migs-connString {
  padding-bottom: 12px;
  padding-top: 4px;
}

.migs-connString input {
  font-size: 14pt;
  width: 260px;
}

.tt-outer {
  margin-right: 17px;
  margin-bottom: 20px;
  width: 360px;
  height: 240px;
  display: inline-block;
}

.tt-grid {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 84px;
  grid-template-rows: 0.5fr 0.5fr 48px;
}

.tt-mainArea {
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 10px;
}

.tt-iconArea {
  grid-row: 1;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 10px;
}

.tt-descriptionArea {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: 3;
  padding-left: 10px;
  padding-right: 10px;
}

.tt-mini-toolbar {
  grid-row: 3;
  grid-column-start: 1;
  grid-column-end: 3;
  vertical-align: middle;
  text-align: right;
  padding-top: 8px;
  background-color: #aba09c;
  padding-bottom: 8px;
}

.tt-mini-toolbar button {
  width: 30px;
  margin-left: 4px;
  margin-right: 10px;
}

.tt-title {
  font-weight: bold;
  padding-bottom: 4px;
}

.tt-ghpath {
  padding-bottom: 10px;
}

.tt-ghlogo {
  margin-right: 4px;
  position: relative;
  top: 2px;
}

.tt-ghpath a {
  color: white;
}

.tts-outer {
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 8px;
  width: 128px;
  height: 72px;
  grid-template-columns: 1fr;
  text-overflow: ellipsis;
  border: solid 3px black;
  display: inline-block;
  font-size: small;
}

.tts-outer-selected {
  border: solid 3px #242425;
}

.tts-grid {
  display: grid;
  height: 100%;
  grid-template-rows: 1fr 48px;
}

.tts-mainArea {
  grid-row: 1;
  padding: 10px;
}

.tts-title {
  font-weight: bold;
  padding-bottom: 10px;
}

.tts-iconArea {
  grid-row: 1;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 10px;
}

.mcfe-contentSingle {
  display: grid;
  grid-template-columns: 1fr 36px;
  align-items: center;
}

.mcfe-interior {
  min-height: 47px;
  height: 47px;
  padding-top: 10px;
}

.mcfe-interiorSingle {
  min-height: 32px;
  height: 32px;
  padding-right: 8px;
  padding-top: 0;
  grid-column: 1;
  display: flex;
  align-items: center;
}

.mcfe-interiorSingle .overflow-guard {
  height: 24px !important;
}

.mcfe-area {
  min-width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  width: calc(100% - 2px);
  height: 100%;
}

.mcfe-toolBarArea {
  padding: 2px;
  padding-top: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.mcfe-accessoryToolBarAreaSingle {
  grid-column: 2;
}

.mcfe-acessoryToolBarArea {
  display: grid;
  grid-template-columns: 1fr 40px;
}

.mcfe-title {
  grid-column: 1;
  padding-top: 5px;
  padding-left: 10px;
}

.mcfe-toolBar {
  grid-column: 2;
}

.mcfe-bottomStats {
  grid-column: 1;
}

.mcfe-bottomToolBar {
  grid-column: 2;
}

.mcfe-glyphMarginRunningClass {
  background: gray;
}

.mcfe-glyphMarginSuccessClass {
}

.mcfe-glyphMarginFailClass {
  background: red;
}

.mcfe-glyphContentClass {
  background: #000000;
}

.mcfe-area .monaco-editor-background {
  background-color: #000000;
}
.mcfe-area .monaco-editor .margin {
  background-color: #000000;
}

/* Position parameter hints (signature help) above the suggest widget (autocomplete) */
/* The parameter-hints-widget shows overloads/signatures */
.mcfe-area .parameter-hints-widget {
  /* Move the signature help widget higher so it doesn't overlap with autocomplete */
  transform: translateY(-100%);
}

/* Ensure the suggest widget (autocomplete) stays below */
.mcfe-area .editor-widget.suggest-widget {
  /* Keep autocomplete widget at its normal position */
}

.rssp-outer {
  padding: 10px;
}

.rssp-header {
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 16px;
}

.rssp-namelabel {
  grid-row: 1;
  grid-column: 1;
}

.rssp-pclabel {
  grid-row: 2;
  grid-column: 1;
}

.rssp-portlabel {
  grid-row: 4;
  grid-column: 1;
}

.rssp-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
}

.rssp-serverStatus {
  display: inline-block;
  padding-left: 10px;
  position: relative;
  top: 2px;
}

.rssp-serverStatusCompact {
  padding-top: 10px;
  height: 40px;
  padding-bottom: 60px;
  max-width: 260px;
  word-wrap: normal;
}
.rssp-connectedStatus {
  padding-bottom: 10px;
}
.rssp-gridCompact {
  padding-top: 10px;
  padding-bottom: 30px;
  overflow-y: auto;
}

.rssp-passwordMessage {
  padding-top: 10px;
  max-width: 260px;
}

.rssp-label {
  padding-left: 2px;
  padding-bottom: 10px;
  padding-top: 5px;
  user-select: none;
}

.rssp-nameinput {
  grid-row: 1;
  grid-column: 2;
  padding-bottom: 20px;
  text-align: left;
}

.rssp-nameinput button {
  margin-left: 4px;
}

.rssp-nameinput input {
  width: 260px;
}

.rssp-pcinput {
  grid-row: 2;
  grid-column: 2;
  padding-bottom: 20px;
  text-align: left;
}

.rssp-pcinput button {
  margin-left: 4px;
}

.rssp-pcinput input {
  width: 110px;
}

.rssp-testConnect {
  grid-row: 3;
  grid-column: 2;
  padding-bottom: 20px;
  text-align: left;
}

/* Minecraft-styled green Connect button */
.rssp-testConnect .rssp-connectBtn {
  background-color: #52a535;
  color: #ffffff;
  border: 2px solid #1e4d14;
  box-shadow:
    inset -2px -2px 0 #3e8828,
    inset 2px 2px 0 #6fc24a;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  image-rendering: pixelated;
  padding: 4px 20px;
  font-size: 13px;
  cursor: pointer;
  transition: filter 0.05s;
}

.rssp-testConnect .rssp-connectBtn:hover {
  background-color: #5cb33e;
  box-shadow:
    inset -2px -2px 0 #4a9430,
    inset 2px 2px 0 #7dd056;
}

.rssp-testConnect .rssp-connectBtn:active {
  filter: brightness(0.85);
}

.rssp-portinput .ui-dropdown__container {
  width: 260px !important;
}

.rssp-portinput button {
  text-align: left;
}

.rssp-portinput {
  grid-row: 4;
  grid-column: 2;
  padding-bottom: 20px;
}

.rssp-portinput button {
  margin-left: 4px;
  display: inline-block;
}

.rssp-portinput input {
  width: 120px;
}

@media only screen and (min-width: 916px) {
  .dssp-namelabel {
    grid-row: 1;
    grid-column: 1;
  }

  .dssp-grid {
    display: grid;
    grid-template-columns: 80px 1fr;
  }

  .dssp-modeinput .ui-dropdown__container {
    width: 320px;
  }
}

@media only screen and (max-width: 915px) {
  .dssp-modeinput .ui-dropdown__container {
    width: 210px;
  }
}

.dssp-outer {
  padding: 16px 20px;
  padding-top: 12px;
}

.dssp-link {
  display: inline;
  text-decoration: none;
}

.dssp-link:hover {
  display: inline;
  text-decoration: underline;
}

.dssp-header {
  font-weight: bold;
  font-size: 15px;
  padding-left: 3px;
  padding-top: 6px;
  padding-bottom: 20px;
}

.dssp-grid {
  padding-top: 10px;
  padding-bottom: 30px;
  overflow-y: auto;
  display: grid;
}

.dssp-label {
  padding-left: 2px;
  padding-bottom: 10px;
  padding-top: 4px;
  user-select: none;
}

.dssp-modelabel {
  grid-row: 2;
  grid-column: 1;
  text-align: right;
  padding-right: 18px;
  padding-top: 5px;
}

.dssp-modeinput {
  grid-row: 2;
  grid-column: 2;
  padding-bottom: 20px;
}

.dssp-openfolderbutton {
  margin-left: 8px;
}

.dssp-iagreelabel {
  grid-row: 3;
  grid-column: 2;
  padding-top: 9px;
  padding-bottom: 9px;
}

.dssp-iagreeinput {
  grid-row: 3;
  grid-column: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 42px;
}

.dssp-usepreviewlabel {
  grid-row: 4;
  grid-column: 2;
  padding-top: 9px;
  padding-bottom: 20px;
}

.dssp-usepreviewinput {
  grid-row: 4;
  grid-column: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 42px;
}

.dssp-pathlabel {
  grid-row: 3;
  grid-column: 1;
  text-align: right;
  padding-bottom: 30px;
  padding-top: 5px;
  padding-right: 18px;
}

.dssp-pathinput {
  grid-row: 3;
  grid-column: 2;
  padding-top: 1px;
}

.dssp-pathinput input {
  width: 290px;
}

.dssp-slotcountlabel {
  grid-row: 5;
  grid-column: 1;
  padding-right: 20px;
  padding-top: 4px;
}

.dssp-slotcountinput {
  grid-row: 5;
  grid-column: 2;
  padding-bottom: 20px;
}

.dssp-slotcountinput input {
  width: 120px;
}

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
	will-change: opacity;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	will-change: transform;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(416d91365b44e4b4f477.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(8f2c4d11474275fbc161.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path {
	background-image: url(2b3e1faf89f94a483539.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 19px;
	line-height: 1.4;
	}
.leaflet-popup-content p {
	margin: 18px 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	border: none;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #999;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

.wm-spawnIcon {
  vertical-align: top;
  text-align: middle;
  padding-top: 2px;
  padding-bottom: 8px;
  padding-left: 2px;
  padding-right: 2px;
  background-color: #f0f0f030;
  border: solid 1px black;
  border-radius: 10px;
}
.wm-playerIcon {
  vertical-align: top;
  text-align: middle;
  padding-top: 1px;
  padding-bottom: 2px;
  padding-left: 1px;
  padding-right: 2px;
  background-color: blue;
  border: solid 1px black;
  border-radius: 10px;
}

/* Level/dimension display control */
.wm-level-control {
  background-color: rgba(40, 40, 40, 0.85);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Coordinate display control */
.wm-coords-control {
  background-color: rgba(40, 40, 40, 0.85);
  color: #aaffaa;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 120px;
}

/* Navigation buttons control */
.wm-nav-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wm-nav-btn {
  background-color: rgba(40, 40, 40, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.wm-nav-btn:hover {
  background-color: rgba(80, 80, 80, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
}

.wm-nav-btn:active {
  background-color: rgba(100, 100, 100, 0.9);
}

/* Override Leaflet scale control styling */
.leaflet-control-scale-line {
  background-color: rgba(40, 40, 40, 0.85) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 3px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  padding: 2px 6px !important;
}

/* Style the zoom control */
.leaflet-control-zoom a {
  background-color: rgba(40, 40, 40, 0.85) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.leaflet-control-zoom a:hover {
  background-color: rgba(80, 80, 80, 0.9) !important;
}

/* Dark background for the map */
.leaflet-container {
  background-color: #1a1a1a;
}

/* Y-Level Slider */
.wm-y-slider-container {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: rgba(30, 30, 30, 0.9);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  user-select: none;
}

.wm-tops-btn {
  background-color: rgba(60, 60, 60, 0.9);
  color: #8f8;
  border: 1px solid rgba(100, 255, 100, 0.3);
  border-radius: 4px;
  padding: 6px 14px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wm-tops-btn:hover {
  background-color: rgba(80, 100, 80, 0.95);
  border-color: rgba(100, 255, 100, 0.6);
}

.wm-bottoms-btn {
  background-color: rgba(60, 60, 60, 0.9);
  color: #f88;
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 4px;
  padding: 6px 12px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wm-bottoms-btn:hover {
  background-color: rgba(100, 80, 80, 0.95);
  border-color: rgba(255, 100, 100, 0.6);
}

.wm-y-slider-track {
  position: relative;
  width: 60px;
  height: 320px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.wm-y-slider-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: ns-resize;
}

.wm-y-slider-label {
  background-color: rgba(50, 50, 50, 0.9);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 13px;
  font-weight: 600;
  min-width: 55px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wm-y-slider-coords {
  background-color: rgba(40, 40, 60, 0.9);
  color: #aaf;
  padding: 4px 8px;
  border-radius: 3px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 9px;
  text-align: center;
  border: 1px solid rgba(150, 150, 255, 0.2);
  white-space: nowrap;
}

/* Entity Markers */
.wm-entityIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wm-entityIconInner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.wm-entityIconInner:hover {
  transform: scale(1.2);
  z-index: 1000;
}

.wm-entityIcon-hostile .wm-entityIconInner {
  border-color: #ff6666;
}

.wm-entityIcon-passive .wm-entityIconInner {
  border-color: #66ff66;
}

.wm-entityIcon-player .wm-entityIconInner {
  border-color: #6666ff;
}

.wm-entityIcon-item .wm-entityIconInner {
  border-color: #ffff66;
}

.wm-entityIcon-other .wm-entityIconInner {
  border-color: #aaaaaa;
}

/* Entity Popup */
.wm-entityPopup {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  min-width: 150px;
}

.wm-entityPopup strong {
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}

.wm-entityId {
  color: #888;
  font-size: 10px;
  margin-bottom: 4px;
}

.wm-entityCoords {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 11px;
  color: #aaffaa;
}

.wm-entityCustomName {
  margin-top: 4px;
  font-style: italic;
  color: #aaa;
}

/* Entity toggle button */
.wm-entity-toggle {
  background-color: rgba(60, 80, 60, 0.9) !important;
}

.wm-entity-toggle:hover {
  background-color: rgba(80, 120, 80, 0.95) !important;
}

.wm-entity-toggle-off {
  background-color: rgba(60, 60, 60, 0.9) !important;
  color: #888 !important;
}

.wm-entity-toggle-off:hover {
  background-color: rgba(80, 80, 80, 0.9) !important;
}

/* Camera marker on the map */
.wm-camera-icon {
  background: none !important;
  border: none !important;
  z-index: 1000 !important;
}

.wm-camera-arrow {
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 24px;
  color: #ff4444;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(255, 68, 68, 0.6);
  background: radial-gradient(circle, rgba(255,68,68,0.25) 0%, transparent 70%);
  border-radius: 50%;
  transition: transform 0.15s ease-out;
}

/* Track camera toggle button */
.wm-track-camera {
  background-color: rgba(60, 60, 80, 0.9) !important;
}

.wm-track-camera:hover {
  background-color: rgba(80, 80, 120, 0.95) !important;
}

.wm-track-camera-on {
  background-color: rgba(60, 100, 180, 0.9) !important;
  border-color: rgba(100, 160, 255, 0.6) !important;
}

.wm-track-camera-on:hover {
  background-color: rgba(80, 120, 200, 0.95) !important;
}

/* Loading overlay */
.wm-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(20, 20, 25, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  pointer-events: none;
}

.wm-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 36px;
  background-color: rgba(40, 40, 45, 0.95);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  min-width: 200px;
}

.wm-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #4da6ff;
  border-radius: 50%;
  animation: wm-spin 1s linear infinite;
}

@keyframes wm-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.wm-loading-message {
  color: #e0e0e0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

/* Chunk loading progress indicator */
.wm-chunk-progress {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-color: rgba(30, 30, 35, 0.9);
  border-radius: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  min-width: 180px;
  pointer-events: none;
}

.wm-chunk-progress-bar {
  width: 100%;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.wm-chunk-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4da6ff, #7bc7ff);
  border-radius: 3px;
  transition: width 0.1s ease-out;
}

.wm-chunk-progress-text {
  color: #c0c0c0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  text-align: center;
}

.wv-main {
  width: 100%;
  min-width: 300px;
  min-height: 300px;
  text-align: left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Floating block info overlay - bottom left */
.wv-detailsArea {
  position: absolute;
  bottom: 10px;
  left: 10px;
  min-width: 180px;
  max-width: 280px;
  padding: 8px 12px;
  background-color: rgba(30, 30, 30, 0.88);
  color: #fff;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  pointer-events: none;
}

/* Enhanced block info display */
.wv-blockInfo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wv-blockPreview {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.wv-blockColorSwatch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.wv-blockTexture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 4px;
}

.wv-blockDetails {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.wv-blockName {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wv-blockId {
  font-size: 11px;
  color: #8f8;
  font-family: "Consolas", "Monaco", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wv-blockCoords {
  font-size: 11px;
  color: #aaa;
  font-family: "Consolas", "Monaco", monospace;
}

.wv-rangeInfo {
  color: #aaa;
  font-family: "Consolas", "Monaco", monospace;
}

.wv-toolBar {
  display: grid;
  grid-template-columns: 490px 1fr;
  height: 36px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.wv-tools {
  grid-column: 1;
  padding-top: 3px;
  padding-bottom: 0px;
}

.wv-anchors {
  grid-column: 2;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Layout containers - now single row since details float */
.wv-mapOnly {
  width: 100%;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wv-mapOnlyMap {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-viewOnRight {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 450px;
  grid-template-rows: 1fr;
  position: relative;
  overflow: hidden;
}

.wv-viewOnRightMap {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-viewOnRightView {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-viewOnLeft {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 450px 1fr;
  grid-template-rows: 1fr;
  position: relative;
  overflow: hidden;
}

.wv-viewOnLeftMap {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-viewOnLeftView {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-worldViewer3D {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: 1fr;
  position: relative;
  overflow: hidden;
}

.wv-worldViewer3DView {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-worldViewer3DMap {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-worldViewerMapOnLeft {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 1fr;
  position: relative;
  overflow: hidden;
}

.wv-worldViewerMapOnLeftMap {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-worldViewerMapOnLeftView {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-viewOnBottom {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 400px;
  position: relative;
  overflow: hidden;
}

.wv-viewOnBottomMap {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.wv-viewOnBottomView {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}

/* Entity info display - side by side layout */
.wv-entityInfo {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  min-width: 280px;
  max-width: 400px;
  padding: 10px;
  pointer-events: auto; /* Allow interaction with model viewer */
}

.wv-entityPreviewContainer {
  width: 120px;
  min-width: 120px;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  background-color: rgba(20, 20, 20, 0.9);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.wv-entityPreview {
  width: 100%;
  height: 100%;
}

.wv-entityDetails {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.wv-entityHeader {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wv-entityEmoji {
  font-size: 18px;
}

.wv-entityName {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.wv-entityId {
  font-size: 11px;
  color: #8f8;
  font-family: "Consolas", "Monaco", monospace;
  word-break: break-all;
}

.wv-entityCoords {
  font-size: 11px;
  color: #aaa;
  font-family: "Consolas", "Monaco", monospace;
}

.wv-entityCustomName {
  font-size: 11px;
  color: #ff8;
  font-style: italic;
}

.wv-entityTags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.wv-entityTag {
  font-size: 10px;
  color: #fff;
  background-color: rgba(100, 100, 255, 0.4);
  padding: 2px 6px;
  border-radius: 3px;
}

.wvr-container {
  background-color: #1a1a2e;
  position: relative;
}

.wvr-canvas {
  display: block;
}

.wvr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ccc;
  gap: 16px;
  font-family: "Noto Sans", "Segoe UI", sans-serif;
}

.wvr-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #444;
  border-top: 3px solid #87ceeb;
  border-radius: 50%;
  animation: wvr-spin 1s linear infinite;
}

@keyframes wvr-spin {
  to { transform: rotate(360deg); }
}

.wvr-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ff6b6b;
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  padding: 20px;
}

.wvr-info {
  position: absolute;
  bottom: 8px;
  left: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-family: "Noto Sans", "Segoe UI", sans-serif;
  pointer-events: none;
}

@media only screen and (min-width: 916px) {
  .wms-projectUses {
    display: grid;
    grid-template-columns: 188px 1fr;
  }
}

@media only screen and (max-width: 915px) {
  .wms-projectUses {
    display: grid;
    grid-template-columns: 34px 1fr;
  }
}

.wms-outer .ui-checkbox__label {
  padding-top: 0px;
}

.wms-settingsAreaInner {
  margin-top: 10px;
  padding-top: 10px;
  margin-left: 10px;
  padding-left: 10px;
}

.wms-outer {
  padding: 10px;
}

.wms-header {
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 6px;
}

.wms-areaLabel {
  padding-bottom: 2px;
  font-weight: bold;
}

.wms-areasCompact {
  padding: 0px;
  padding-top: 10px;
  padding-bottom: 30px;
  overflow-y: auto;
}

.wms-projectUsesCheck {
  grid-column: 1;
  text-align: right;
}

.wms-projectUsesLabel {
  grid-column: 2;
  padding-top: 3px;
  padding-left: 14px;
}

.wms-settingsArea {
  padding-top: 20px;
}

.wsa-outer {
  padding-top: 10px;
}

.wsa-header {
  font-weight: bold;
  padding-left: 3px;
  padding-top: 6px;
  padding-bottom: 26px;
}

.wsa-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
}

.wsa-gridCompact {
  padding: 0px;
  padding-top: 10px;
  padding-bottom: 30px;
  overflow-y: auto;
}

.wsa-label {
  padding-left: 2px;
  padding-bottom: 10px;
  padding-top: 6px;
  user-select: none;
}

.wsa-nameinput {
  grid-row: 1;
  grid-column: 2;
  padding-bottom: 20px;
  text-align: left;
}

.wsa-nameinput button {
  margin-left: 4px;
}

.wsa-nameinput input {
  width: 260px;
}

.wsa-namelabel {
  grid-row: 1;
  grid-column: 1;
}

.wsa-backupinput {
  grid-row: 2;
  grid-column: 2;
  padding-bottom: 20px;
}

.wsa-backupinput .ui-dropdown__container {
  width: 220px !important;
}

.wsa-backupinput button {
  margin-left: 4px;
  display: inline-block;
}

.wsa-seedinput input {
  width: 120px;
}

.wsa-packlabel {
  grid-row: 3;
  grid-column: 1;
}

.wsa-packs {
  grid-row: 3;
  grid-column: 2;
  padding-bottom: 20px;
}

.wsa-worldsettingslabel {
  grid-row: 7;
  grid-column-start: 1;
  grid-column-end: 3;
  padding-top: 30px;
  padding-bottom: 20px;
  font-weight: 600;
}

.wsa-templatelabel {
  grid-row: 8;
  grid-column: 1;
}

.wsa-templates {
  grid-row: 8;
  grid-column: 2;
  padding-bottom: 20px;
}

.wsa-seedinput {
  grid-row: 10;
  grid-column: 2;
  padding-bottom: 20px;
  text-align: left;
}

.wsa-seedinput button {
  margin-left: 4px;
}

.wsa-seedinput input {
  width: 160px;
}

.wsa-seedlabel {
  grid-row: 10;
  grid-column: 1;
}

.wsa-iseditorinput {
  grid-row: 4;
  grid-column: 2;
  padding-bottom: 20px;
  text-align: left;
}

.wsa-transientworldinput {
  grid-row: 11;
  grid-column: 2;
  padding-bottom: 20px;
  text-align: left;
}

.wsa-transientworldlabel {
  grid-row: 11;
  grid-column: 1;
}

.wsa-iseditorlabel {
  grid-row: 4;
  grid-column: 2;
  padding-top: 2px;
}

.wsa-geninput {
  grid-row: 9;
  grid-column: 2;
  padding-bottom: 20px;
  text-align: left;
}

.wsa-genlabel {
  grid-row: 9;
  grid-column: 1;
}

.wsa-geninput button {
  margin-left: 4px;
}

.wsa-geninput .ui-dropdown__container {
  width: 220px !important;
}

.wsa-gametypelabel {
  grid-row: 5;
  grid-column: 1;
}

.wsa-gametypeinput .ui-dropdown__container {
  width: 220px !important;
}

.wsa-gametypeinput button {
  text-align: left;
}

.wsa-gametypeinput {
  grid-row: 5;
  grid-column: 2;
  padding-bottom: 20px;
}

.wsa-gametypeinput button {
  margin-left: 4px;
  display: inline-block;
}

.wsa-gametypeinput input {
  width: 120px;
}

.wsa-gamedifflabel {
  grid-row: 6;
  grid-column: 1;
}

.wsa-gamediffinput .ui-dropdown__container {
  width: 220px !important;
}

.wsa-gamediffinput button {
  text-align: left;
}

.wsa-gamediffinput {
  grid-row: 6;
  grid-column: 2;
  padding-bottom: 20px;
}

.wsa-gamediffinput button {
  margin-left: 4px;
  display: inline-block;
}

.wsa-gamediffinput input {
  width: 120px;
}

.wsa-backuplabel {
  grid-row: 2;
  grid-column: 1;
}

.pcmn-outer {
  padding: 0px;
}

.pcmn-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
}

.pcmn-list {
  width: 400px;
}

.tmmn-outer {
  padding: 0px;
}

.tmmn-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
}

.tmmn-list {
  width: 400px;
}

.mima-outer {
  padding: 10px;
}

.mima-header {
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 16px;
}

.mima-content {
  max-width: 700px;
}

.mima-contentCompact {
  padding-top: 10px;
  padding-bottom: 30px;
  overflow-y: auto;
}

.mima-modeButton-selected {
  background-color: green;
}

.mima-modeButton {
  text-align: left;
  max-width: inherit !important;
  overflow-wrap: break-word;
  max-height: 130px !important;
  height: 130px !important;
  padding-top: 1.2rem;
  margin-top: 10px;
  margin-bottom: 10px;
  vertical-align: top;
}

.mima-minecraftGameText,
.mima-hostedText,
.mima-remoteText {
  overflow-wrap: break-word !important;
  white-space: normal;
  font-weight: normal;
  vertical-align: top;
}

.mima-modeButton span .gm {
  font-weight: normal !important;
}

.mima-intro {
  margin-bottom: 30px;
}

.mima-hostedText {
  padding-top: 20px;
  padding-bottom: 24px;
}

.mima-optionHeader {
  font-weight: bold;
}

.mima-minecraftGameText {
  padding-top: 20px;
  padding-bottom: 24px;
}

.mima-nextButtonArea {
  margin-top: 20px;
}

.mima-remoteText {
  padding-top: 20px;
  padding-bottom: 24px;
}

.mima-link {
  display: inline;
  text-decoration: none;
}

.mima-link:hover {
  display: inline;
  text-decoration: underline;
}

.mima-code {
  display: inline;
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
  background-color: var(--mc-code-bg);
  color: var(--mc-code-fg);
  padding-left: 4px;
  padding-right: 4px;
}

@media only screen and (min-width: 916px) {
  .intp-projectUses {
    display: grid;
    grid-template-columns: 188px 1fr;
  }
}

@media only screen and (max-width: 915px) {
  .intp-projectUses {
    display: grid;
    grid-template-columns: 34px 1fr;
  }
}

.intp-outer .ui-checkbox__label {
  padding-top: 0px;
}

.intp-settingsAreaInner {
  margin-top: 10px;
  padding-top: 10px;
  margin-left: 10px;
  padding-left: 10px;
}

.intp-outer {
  padding: 10px;
}

.intp-header {
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 6px;
}

.dsp-outer {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  font-family: var(--default-font-family);
}

.dsp-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.dsp-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dsp-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dsp-status-dot.connected {
  background-color: #22c55e;
}

.dsp-status-dot.disconnected {
  background-color: #ef4444;
}

.dsp-status-dot.connecting {
  background-color: #f59e0b;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.dsp-tick {
  font-size: 0.85em;
  color: var(--color-text-secondary);
}

.dsp-controls {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.dsp-control-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.15s ease;
}

.dsp-control-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: var(--color-border-hover);
}

.dsp-control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dsp-control-btn.running {
  color: var(--color-text-primary);
}

.dsp-control-btn.paused {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  color: #22c55e;
}

.dsp-control-btn.profiler {
  color: var(--color-text-primary);
}

.dsp-control-btn.profiler.active {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

.dsp-content {
  flex: 1;
  overflow-y: auto;
}

.dsp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.dsp-stat-card {
  background: var(--color-surface-alt);
  border-radius: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
}

.dsp-stat-name {
  font-size: 0.8em;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
  text-transform: capitalize;
}

.dsp-stat-value {
  font-size: 1.4em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dsp-stat-value.warning {
  color: #f59e0b;
}

.dsp-stat-value.critical {
  color: #ef4444;
}

.dsp-stat-unit {
  font-size: 0.7em;
  font-weight: normal;
  color: var(--color-text-secondary);
  margin-left: 4px;
}

.dsp-category {
  margin-bottom: 16px;
}

.dsp-category-title {
  font-size: 0.9em;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.dsp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-text-secondary);
}

.dsp-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.dsp-empty-hint {
  margin-top: 12px;
  font-size: 0.8em;
  opacity: 0.6;
  text-align: center;
  line-height: 1.4;
}

.dsp-chart-container {
  height: 120px;
  margin-top: 8px;
}

/* Profiler Results Styles */
.dsp-profiler-results {
  margin-bottom: 20px;
  background: var(--color-surface-alt);
  border-radius: 4px;
  padding: 12px;
  border: 1px solid var(--color-border);
}

.dsp-profiler-table {
  font-size: 0.85em;
  overflow-x: auto;
}

.dsp-profiler-header {
  display: flex;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
}

.dsp-profiler-row {
  display: flex;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border-subtle, rgba(128, 128, 128, 0.2));
}

.dsp-profiler-row:hover {
  background: var(--color-surface-hover, rgba(128, 128, 128, 0.1));
}

.dsp-profiler-col {
  padding: 2px 8px;
}

.dsp-profiler-col.name {
  flex: 1;
  min-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
}

.dsp-profiler-col.time {
  width: 100px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dsp-profiler-col.time.warning {
  color: #f59e0b;
}

.dsp-profiler-col.time.critical {
  color: #ef4444;
}

.dsp-profiler-col.count {
  width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dsp-profiler-more {
  padding: 8px;
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
}

.eap-outer {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.eap-header {
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 16px;
  color: inherit;
}

.eap-content {
  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
  padding: 20px;
}

.eap-intro {
  margin-bottom: 20px;
  line-height: 1.5;
}

.eap-links {
  margin-bottom: 24px;
  padding: 12px;
  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
}

.eap-link-item {
  margin-bottom: 8px;
}

.eap-link-item:last-child {
  margin-bottom: 0;
}

.eap-link-label {
  display: block;
  font-size: 0.9em;
  margin-bottom: 2px;
}

.eap-link {
  text-decoration: none;
  word-break: break-all;
}

.eap-link:hover {
  text-decoration: underline;
}

.eap-admin-notice {
  padding: 16px;
  background-color: rgba(255, 165, 0, 0.15);
  border-left: 4px solid orange;
  border-radius: 4px;
}

.eap-admin-notice p {
  margin: 0;
}

.eap-acceptance {
  margin-top: 16px;
}

.eap-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.eap-checkbox-label {
  line-height: 1.4;
  padding-top: 2px;
}

.eap-error {
  color: #ff6b6b;
  background-color: rgba(255, 107, 107, 0.1);
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
  border-left: 4px solid #ff6b6b;
}

.eap-button-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eap-success {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: rgba(0, 200, 83, 0.1);
  border-radius: 4px;
  border-left: 4px solid #00c853;
}

.eap-success-icon {
  font-size: 2em;
  color: #00c853;
  font-weight: bold;
}

.eap-success-message {
  font-size: 1.1em;
  line-height: 1.4;
}

/* WorldsDialog.css - Styles for the Worlds Management Dialog */

/* Override FluentUI Dialog's max-width constraint for WorldsDialog */
.ui-dialog:has(.wdl-content) {
  max-width: 950px !important;
  width: 950px !important;
}

/* Fallback for browsers that don't support :has() */
.wdl-dialog-wrapper {
  max-width: 950px !important;
  width: 950px !important;
}

.wdl-content {
  min-width: 700px;
  width: 900px;
  max-width: 95vw;
  min-height: 500px;
  height: 600px;
  max-height: 80vh;
  overflow: hidden;
}

.wdl-loading,
.wdl-error,
.wdl-noSelection {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #888;
}

.wdl-error {
  color: #ff6b6b;
}

.wdl-mainContent {
  display: flex;
  gap: 20px;
  height: 100%;
  min-height: 450px;
}

/* Left panel - World list */
.wdl-worldListPanel {
  width: 280px;
  min-width: 220px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.wdl-worldList {
  flex: 1;
  min-height: 200px;
  max-height: none;
  overflow-y: auto;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
}

.wdl-worldList .ui-list__item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.wdl-worldList .ui-list__item:hover {
  background-color: rgba(128, 128, 128, 0.1);
}

.wdl-worldSelected {
  background-color: rgba(100, 149, 237, 0.2) !important;
}

.wdl-worldHeader {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wdl-worldName {
  font-weight: 500;
}

.wdl-currentSlotIndicator {
  font-size: 11px;
  color: #4caf50;
  background-color: rgba(76, 175, 80, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
}

.wdl-worldInfo {
  font-size: 12px;
  color: #888;
}

.wdl-noWorlds {
  padding: 20px;
  text-align: center;
  color: #888;
}

/* Right panel - Details */
.wdl-detailPanel {
  flex: 1;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.wdl-worldDetails {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wdl-description {
  color: #888;
  font-style: italic;
  word-wrap: break-word;
}

.wdl-metadata {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px;
  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
}

.wdl-metaRow {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.wdl-metaLabel {
  font-weight: 500;
  min-width: 100px;
  color: #888;
}

.wdl-worldId {
  font-family: monospace;
  font-size: 12px;
  color: #888;
}

/* Backups section */
.wdl-backupsSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow: hidden;
  min-height: 150px;
}

.wdl-backupList {
  flex: 1;
  min-height: 100px;
  max-height: none;
  overflow-y: auto;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
}

.wdl-backupList .ui-list__item {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.wdl-backupHeader {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wdl-backupDate {
  font-weight: 500;
}

.wdl-backupType {
  font-size: 11px;
  color: #666;
  background-color: rgba(128, 128, 128, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: capitalize;
}

.wdl-backupInfo {
  font-size: 12px;
  color: #888;
}

.wdl-backupActions {
  display: flex;
  gap: 4px;
}

.wdl-noBackups {
  padding: 20px;
  text-align: center;
  color: #888;
}

/* Confirmation dialog */
.wdl-confirmContent {
  text-align: center;
  padding: 16px;
}

.wdl-warningIcon {
  font-size: 48px;
  color: #ff9800;
  margin-bottom: 16px;
}

.wdl-confirmFooter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.shp-outer {
  max-height: calc(100vh - 240px);
  min-height: calc(100vh - 240px);
}
.shp-url .ui-box INPUT {
  max-width: calc(100vw - 30px);
  width: 500px;
  padding-right: 6px;
  padding-left: 6px;
  padding-bottom: 3px;
}

.shp-contentDisplay {
  height: 270px;
  max-height: calc(100vh - 450px);
}

.shp-contentAreaHeader {
  grid-column-start: 1;
  grid-column-end: 4;
  padding-top: 40px;
  padding-bottom: 10px;
}

.shp-contentArea {
  grid-column-start: 1;
  grid-column-end: 4;
  padding-top: 5px;
}

.shp-contentWarning {
  display: grid;
  grid-template-columns: 24px 1fr;
  padding-top: 4px;
  padding-bottom: 4px;
}

.shp-warningIcon {
  grid-column: 1;
}

.shp-warningText {
  grid-column: 2;
}

.shp-contentHeader {
  width: 100%;
  padding-bottom: 4px;
  font-size: medium;
}

.shp-optionsArea {
  padding-top: 20px;
  display: grid;
  grid-template-columns: 230px 1fr;
  max-width: 1100px;
}

.shp-summaryCell {
  grid-column: 1;
  padding-top: 4px;
}

.shp-contentCell {
  grid-column: 2;
  padding: 5px;
  cursor: pointer;
  padding-bottom: 2px;
  background-color: var(--surface-bg);
  color: var(--surface-text);
  overflow-x: hidden;
  white-space: nowrap;
}

.shp-copyButton {
  grid-column: 3;
}

/* VscProjectLanding.css - VS Code Extension Project Landing Page */

.vspl-outer {
  padding: 16px 20px;
  overflow-y: auto;
}

/* Back bar for navigation in narrow views */
.vspl-backBar {
  margin-bottom: 12px;
}

.vspl-backButton {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: inherit;
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.vspl-backButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Hero Section - subtle gradient with bottom accent */
.vspl-hero {
  background: linear-gradient(135deg, rgba(82, 165, 53, 0.12) 0%, rgba(82, 165, 53, 0.06) 50%, transparent 100%);
  border-radius: 2px;
  padding: 16px 20px;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(82, 165, 53, 0.5);
  position: relative;
}

/* Accent line effect */
.vspl-hero::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, #52a535 0%, transparent 100%);
}

.vspl-heroContent {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.vspl-heroImage {
  flex-shrink: 0;
}

.vspl-heroImage img {
  width: 64px;
  height: 64px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.2);
  object-fit: cover;
  image-rendering: pixelated;
  border: 2px solid #000;
}

.vspl-heroText {
  flex: 1;
  min-width: 0;
}

.vspl-titleRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.vspl-projectTitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
  letter-spacing: 0.3px;
  word-break: break-word;
}

.vspl-editButton {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 0.8rem;
  border-radius: 4px;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  margin-bottom: 6px;
}

.vspl-editButton:hover {
  opacity: 0.9;
  background-color: rgba(255, 255, 255, 0.1);
}

.vspl-projectCreator {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 8px;
}

.vspl-projectDescription {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 0;
  line-height: 1.4;
}

/* Stats Bar - compact for narrow panes */
.vspl-statsBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.vspl-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.75rem;
}

.vspl-statIcon {
  font-size: 0.8rem;
  opacity: 0.8;
}

.vspl-statCount {
  font-size: 0.9rem;
  font-weight: 700;
}

.vspl-statLabel {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Status message */
.vspl-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(82, 165, 53, 0.2);
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 0.85rem;
}

.vspl-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #52a535;
  border-radius: 50%;
  animation: vspl-spin 0.8s linear infinite;
}

@keyframes vspl-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Sections */
.vspl-section {
  margin-bottom: 20px;
}

.vspl-sectionHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.vspl-sectionHeader h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.vspl-sectionIcon {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Card Grid - vertical layout for narrow panes */
.vspl-cardGrid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Action Cards - full width for narrow panes */
.vspl-actionCard {
  width: 100%;
  height: auto !important;
  padding: 0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.vspl-actionCard:hover:not(.vspl-disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.vspl-actionCard.vspl-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.vspl-cardContent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
  min-height: 48px;
}

.vspl-cardContentCompact {
  gap: 8px;
}

.vspl-cardIcon {
  font-size: 1.2rem;
  opacity: 0.85;
  width: 24px;
  min-width: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vspl-cardIconLarge {
  font-size: 1.4rem;
  opacity: 0.9;
  width: 24px;
  min-width: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vspl-cardIconImage {
  width: 24px;
  min-width: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vspl-cardIconImage img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  border: 2px solid rgba(0, 0, 0, 0.4);
  border-radius: 2px;
}

.vspl-cardText {
  flex: 1;
  min-width: 0;
}

.vspl-cardTitle {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.vspl-cardDesc {
  font-size: 0.75rem;
  opacity: 0.85;
  line-height: 1.3;
}

/* Primary Card (Inspect) */
.vspl-cardPrimary {
  /* MinecraftButton handles its own styling */
}

/* Minecraft World Cards */
.vspl-cardMinecraft {
  /* MinecraftButton handles its own styling */
}

/* Responsive: wider panes can show cards side-by-side */
@media (min-width: 400px) {
  .vspl-cardGrid {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .vspl-actionCard {
    min-width: 180px;
    flex: 1;
    max-width: 300px;
  }
}

.pact-outer {
  padding: 24px 32px;
  overflow-y: auto;
}

/* Hero Section - subtle gradient with bottom accent */
.pact-hero {
  background: linear-gradient(135deg, rgba(82, 165, 53, 0.15) 0%, rgba(82, 165, 53, 0.08) 50%, transparent 100%);
  border-radius: 2px;
  padding: 24px 28px;
  margin-bottom: 28px;
  border-bottom: 3px solid rgba(82, 165, 53, 0.5);
  position: relative;
}

/* Accent line effect */
.pact-hero::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, #52a535 0%, transparent 100%);
}

.pact-heroContent {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.pact-heroImage {
  flex-shrink: 0;
}

.pact-heroImage img {
  width: 80px;
  height: 80px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.2);
  object-fit: cover;
  image-rendering: pixelated;
  border: 2px solid rgba(0, 0, 0, 0.3);
}

.pact-heroText {
  flex: 1;
  min-width: 0;
}

.pact-titleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 4px;
}

.pact-projectTitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 6px 0;
  line-height: 1.25;
  letter-spacing: 0.4px;
}

.pact-editButton {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.9rem;
  border-radius: 2px;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease;
  margin-bottom: 8px;
}

.pact-editButton:hover {
  opacity: 0.9;
  background-color: rgba(255, 255, 255, 0.1);
}

.pact-projectCreator {
  font-size: 1rem;
  opacity: 0.7;
  margin-bottom: 12px;
}

.pact-projectDescription {
  font-size: 1rem;
  opacity: 0.85;
  margin: 0;
  line-height: 1.5;
  max-width: 600px;
}

/* Stats Bar */
.pact-statsBar {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pact-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.pact-statIcon {
  font-size: 1.1rem;
  opacity: 0.8;
}

.pact-statCount {
  font-size: 1.4rem;
  font-weight: 700;
}

.pact-statLabel {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Sections */
.pact-section {
  margin-bottom: 28px;
}

/*
 * Beginner tip box rendered above the export cards in summarized edit
 * preference. The inline style applies a translucent green tint over the
 * pact-outer panel; under `forced-colors: active` the inline background
 * is reset to Canvas (white) while the inline foreground color survives,
 * which produces a near-white-on-white contrast failure even though the
 * rendered pixels in non-forced-colors mode are perfectly legible. Pin
 * to system color tokens so HC users always get a real background.
 */
@media (forced-colors: active) {
  .pact-beginnerTip {
    background-color: Canvas !important;
    color: CanvasText !important;
    border-left-color: LinkText !important;
  }
}

.pact-sectionHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-left: 10px;
  border-left: 3px solid rgba(82, 165, 53, 0.7);
}

.pact-sectionHeader h2 {
  font-family: "Noto Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pact-sectionIcon {
  font-size: 1rem;
  opacity: 0.85;
  color: #52a535;
}

/* Card Grid */
.pact-cardGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

/* Action Cards - preserve full MinecraftButton styling */
.pact-actionCard {
  min-width: 280px;
  max-width: 340px;
  flex: 1;
  padding: 0 !important;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease !important;
}

/* Ensure the MinecraftButton grid fills the card height */
.pact-actionCard .micb-grid {
  height: 100%;
}

.pact-actionCard:hover {
  filter: brightness(1.15);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.pact-actionCard:active {
  transform: translateY(0px);
  box-shadow: none;
}

.pact-cardContent {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 16px 10px 15px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  min-height: 60px;
}

.pact-cardContentCompact {
  gap: 8px;
}

.pact-cardIcon {
  font-size: 1.5rem;
  opacity: 0.85;
  width: 32px;
  min-width: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pact-cardIconLarge {
  font-size: 1.75rem;
  opacity: 0.9;
  width: 32px;
  min-width: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pact-cardIconImage {
  width: 32px;
  min-width: 32px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pact-cardIconImage img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.pact-cardText {
  flex: 1;
}

.pact-cardTitle {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.pact-cardDesc {
  font-size: 0.85rem;
  opacity: 0.85;
  line-height: 1.4;
}

/* Primary Card (Inspect) - uses theme colors from MinecraftButton */
.pact-cardPrimary {
  /* Let the MinecraftButton handle its own styling */
}

.pact-gettingStartedQuickAdd {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.pact-quickAddAction {
  min-width: 150px;
  flex: 1;
  max-width: 220px;
  height: auto !important;
  padding: 0 !important;
}

.pact-quickAddActionContent {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px 10px 11px;
  text-align: left;
  box-sizing: border-box;
}

.pact-quickAddActionIcon {
  font-size: 1rem;
  opacity: 0.9;
  width: 16px;
  min-width: 16px;
}

.pact-quickAddActionLabel {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Minecraft World Cards - uses theme colors from MinecraftButton */
.pact-cardMinecraft {
  /* Let the MinecraftButton handle its own styling */
}

/* Legacy classes kept for compatibility */
.pact-binHeader {
  font-size: large;
  font-weight: bold;
  padding-top: 4px;
  line-height: 1;
}

.pact-tileBin {
  width: 100%;
}


/* Compact action strip — used in Full / Raw modes (CreatorToolsEditPreference.editors / .raw)
 * to replace the large card grids with a one-row icon toolbar. Colors are pulled from
 * mcColors via theme-mode helper classes (.pact-compactStrip-dark / -light). */
.pact-compactStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 8px 12px;
  margin: 8px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.pact-compactStrip-dark {
  background-color: #262423; /* mcColors.gray6 */
  border-color: #484543; /* mcColors.gray5 */
}

.pact-compactStrip-light {
  background-color: #e5e3e1; /* mcColors.gray1 */
  border-color: #cecccb; /* mcColors.gray2 */
}

.pact-compactStripBtn {
  width: 32px;
  height: 32px;
  border-radius: 4px !important;
}

/* Compact action strip groups: each labeled cluster of icons sits inside a
 * .pact-compactGroup so users see *what* the icons do at a glance instead of
 * having to hover each one. Groups wrap onto new rows on narrow widths. */
.pact-compactGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid transparent;
}

.pact-compactStrip-dark .pact-compactGroup {
  border-right-color: #484543; /* mcColors.gray5 */
}

.pact-compactStrip-light .pact-compactGroup {
  border-right-color: #cecccb; /* mcColors.gray2 */
}

.pact-compactGroup:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.pact-compactGroupTitle {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
  margin-bottom: 2px;
  padding: 0 4px;
}

.pact-compactGroupButtons {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.cv-outer {
  padding: 20px;
}

.iitem-outer {
  padding: 8px;
  padding-top: 4px;
  width: 100%;
  min-height: 180px;
  overflow-x: hidden;
  box-sizing: border-box;
}

.iitem-optionsArea {
  display: grid;
  margin-top: 20px;
  grid-template-columns: 100px 1fr;
}

.iitem-nameLabel {
  grid-column: 1;
  padding-top: 5px;
}

.iitem-nameArea {
  grid-column: 2;
}

.iitem-folderArea {
  padding-top: 30px;
  max-width: 800px;
}

.iitem-nameArea input {
  min-width: 200px;
  max-width: 100%;
  box-sizing: border-box;
}

.iitem-contentInfo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-size: 0.92em;
}

.iitem-contentInfo-icon {
  font-size: 1.5em;
  flex-shrink: 0;
}

.iitem-contentInfo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.iitem-contentInfo-type {
  font-weight: 600;
  font-size: 1.05em;
}

.iitem-contentInfo-description {
  opacity: 0.8;
  font-size: 0.9em;
}

.newvar-outer {
  padding: 20px;
  max-width: 600px;
  min-height: 400px;
}

.newvar-options {
  display: grid;
  grid-template-columns: 140px 1fr;
}

.newvar-variantLabel {
  grid-column: 1;
  grid-row: 1;
  margin-top: 4px;
}

.newvar-variantDropdown {
  grid-column: 2;
  grid-row: 1;
}

.newvar-basedOnLabel {
  grid-column: 1;
  grid-row: 2;
  margin-top: 8px;
}

.newvar-basedOnDropdown {
  grid-column: 2;
  grid-row: 2;
  margin-top: 4px;
}

.et-outer {
  min-width: 100%;
  max-width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  background-color: black;
  display: grid;
}

.et-actionsHeader {
  background-color: #242425;
  color: white;
  font-size: 16pt;
  padding: 14px;
  margin-bottom: 12px;
  text-align: left;
}

.et-area {
  min-width: 650px;
  max-width: 650px;
  min-height: 450px;
  max-height: 450px;
  grid-column: 1;
  grid-row: 1;
  margin-left: calc(50vw - 325px);
  margin-top: calc(50vh - 225px);
  color: var(--mc-fg-1) !important;
  text-align: center;
  vertical-align: middle;
}

.et-area .ui-box {
  color: var(--mc-fg-1) !important;
}

.et-selectedProject {
  padding-top: 20px;
  padding-left: 30px;
}

.et-optionsGrid {
  display: grid;
  height: 330px;
}

.et-type-label {
  grid-row: 1;
  grid-column: 1;
  user-select: none;
}

.et-type-options {
  padding-bottom: 18px;
}

.et-import-label {
  grid-row: 2;
  grid-column: 1;
  padding-top: 7px;
  user-select: none;
}

.et-import-input {
  grid-row: 2;
  grid-column: 2;
  text-align: left;
  padding-bottom: 8px;
}

.et-export-label {
  grid-row: 3;
  grid-column: 1;
  padding-top: 7px;
  user-select: none;
}

.et-export-input {
  grid-row: 3;
  grid-column: 2;
  text-align: left;
  padding-bottom: 8px;
}

.et-export-input .ui-box {
  color: white !important;
}

.et-buttonArea {
  text-align: right;
  padding: 10px;
}

.et-buttonArea button {
  margin-left: 10px;
}

@media only screen and (min-width: 800px) {
  .pg-binWrap {
    margin: 10px;
    margin-top: 0px;
    padding: 8px;
    border-left: solid 1px;
    border-right: solid 1px;
    border-bottom: solid 1px;
    border-top: solid 0px;
    border-radius: 0 0 2px 2px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 0;
    justify-items: start;
  }

  .pg-tabArea {
    display: block;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 0px;
  }
}

@media only screen and (max-width: 800px) {
  .pg-binWrap {
    margin-top: 0px;
    padding: 8px;
    border-left: solid 0px;
    border-right: solid 0px;
    border-bottom: solid 1px;
    border-top: solid 0px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: 0;
    justify-items: center;
  }

  .pg-binWrap-small {
    border-top: solid 1px;
  }

  .pg-tabArea {
    display: block;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-left: 4px;
  }
}

.pg-binWrap-empty {
  padding: 16px;
  display: block;
}

.pg-outer {
  padding-bottom: 10px;
}

.pg-notFound {
  padding: 16px;
  opacity: 0.7;
  grid-column: 1 / -1;
}

.pg-tabButton-selected {
  border-top-left-radius: 2px !important;
  border-top-right-radius: 2px !important;
  display: inline-block;
  height: 42px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin: 0px;
  font-weight: 600;
  position: relative;
}

.pg-tabButton-selected::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: #52a535;
  border-radius: 1px;
}

.pg-tabButton {
  border-top-left-radius: 2px !important;
  border-top-right-radius: 2px !important;
  display: inline-block;
  height: 42px;
  padding: 10px 20px 10px 20px;
  margin: 0px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pg-tabButton:hover {
  background-color: rgba(82, 165, 53, 0.1) !important;
}

.pg-tabsTop {
  width: 100%;
  display: grid;
  margin-right: 28px;
  grid-template-columns: auto 1fr;
}

.pg-underline {
  display: inline-block;
  height: 32.5px;
  width: 6px;
  grid-column: 1;
  border-bottom: solid 1px;
}

.pg-tabsFiller {
  display: inline-block;
  height: 51px;
  margin-right: 10px;
  grid-column: 2;
  border-bottom: solid 1px;
}

@media only screen and (min-width: 800px) {
  .pt-outer {
    margin-left: 10px;
    margin-top: 12px;
    width: 280px;
    min-height: 140px;
    max-width: calc(100vw - 60px);
    display: inline-block;
    text-align: left;
    cursor: pointer;
    outline: none;
    border-radius: 2px;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    border: none;
  }

  .pt-outer:hover {
    transform: translateY(-2px);
  }

  .pt-outer:focus {
    box-shadow: 0 0 0 2px #52a535;
  }

  .pt-outer:active {
    transform: translateY(0px);
  }

  .pt-outer-selected {
    box-shadow: 0 0 0 2px #52a535;
  }

  .pts-outer {
    padding: 8px;
  }
}

@media only screen and (max-width: 800px) {
  .pt-outer {
    margin-top: 12px;
    width: 280px;
    margin-left: 6px;
    margin-right: 6px;
    min-height: 140px;
    max-width: calc(100vw - 60px);
    display: inline-block;
    text-align: left;
    cursor: pointer;
    outline: none;
    border-radius: 2px;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    border: none;
  }

  .pt-outer:hover {
    transform: translateY(-2px);
  }

  .pt-outer:focus {
    box-shadow: 0 0 0 2px #52a535;
  }

  .pt-outer-selected {
    box-shadow: 0 0 0 2px #52a535;
  }

  .pts-outer {
    padding: 8px;
  }
}

.pt-tile {
  border: solid 1px;
  border-radius: 2px;
  height: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pt-outer:hover .pt-tile {
  border-color: #52a535 !important;
}

@media only screen and (min-width: 280px) {
  .pt-grid {
    display: grid;
    height: 100%;
    grid-template-columns: 56px 1fr;
    grid-template-rows: 59px 1fr;
  }
}

@media only screen and (max-width: 280px) {
  .pt-grid {
    display: grid;
    height: 100%;
    grid-template-columns: 56px 1fr;
    min-height: 200px;
  }

  .pt-description {
    min-height: 150px;
  }
}

.pt-mainArea {
  grid-row: 1;
  grid-column-start: 2;
  grid-column-end: 3;
  padding-top: 7px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 6px;
}

.pt-mainArea-long {
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: 3;
  padding-top: 7px;
  padding-bottom: 2px;
  padding-left: 8px;
  padding-right: 6px;
}

.pt-iconArea {
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 6px;
}

.pt-iconBorder {
  border: inset 1px #848586;
  min-height: 50px;
  max-height: 50px;
  min-width: 50px;
  max-width: 50px;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
}

.pt-imageTile {
  width: 48px;
  height: 48px;
  opacity: 0.6;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
}

.pt-snapshotTile {
  width: 48px;
  height: 48px;
  opacity: 0.85;
  background-size: 200%;
  background-position: center 45%;
  background-repeat: no-repeat;
  border-radius: 4px;
}

.pts-imageTile {
  width: 32px;
  height: 32px;
  opacity: 0.6;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
}

.pt-descriptionArea {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end: 3;
  min-height: 50px;
  padding-left: 8px;
  padding-right: 6px;
}

.pt-mini-toolbar {
  grid-row: 3;
  grid-column-start: 1;
  grid-column-end: 3;
  vertical-align: middle;
  text-align: right;
  border-top: inset 1px #848586;
  vertical-align: top;
  padding: 0px;
}

.pt-mini-toolbar button {
  border: 0px;
  background-color: transparent;
  border-left: inset 1.5px #848586;
  box-shadow: none;
  width: 60px;
  height: 42px;
  padding: 0px;
  margin: 0px;
}

.pt-mini-toolbar button span {
  display: block;
  border-left: outset 2px #848586;
  width: 95px;
  height: 40px;
  padding-top: 11px;
}

.pt-mini-toolbar-interior {
  width: 100%;
  height: 100%;
  border-top: outset 2px #848586;
}

.pt-title {
  font-weight: bold;
  padding-top: 1px;
  display: inline;
  text-overflow: ellipsis;
  margin-top: 0px;
  margin-bottom: 0px;
  min-height: 22px;
  font-size: medium;
}

.pt-ghpath {
  padding-bottom: 8px;
}

.pt-ghlogo {
  margin-right: 4px;
  position: relative;
  top: 2px;
}

.pt-ghpath a {
  color: white;
  font-size: medium;
}

.pts-button {
  width: 400px;
  height: 168px;
  max-width: calc(100vw - 46px);
  border: solid 2px #202020;
}

/* Small tile styles (pts-) */
.pts-outer {
  display: inline-block;
  cursor: pointer;
  outline: none;
  border-radius: 2px;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  vertical-align: top;
}

.pts-outer:hover {
  transform: translateY(-2px);
}

.pts-outer:focus {
  box-shadow: 0 0 0 2px #52a535;
}

.pts-outer:active {
  transform: translateY(0px);
}

.pts-outer-selected {
  box-shadow: 0 0 0 3px #52a535;
  transform: translateY(-1px);
}

.pts-outer-selected .pts-tile {
  border-color: #52a535 !important;
  background: linear-gradient(180deg, rgba(82, 165, 53, 0.15) 0%, rgba(82, 165, 53, 0.05) 100%) !important;
}

.pts-tile {
  width: 200px;
  height: 148px;
  max-width: calc(100vw - 46px);
  border: solid 1px;
  border-radius: 2px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pts-outer:hover .pts-tile {
  border-color: #52a535 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pts-content {
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pts-grid {
  display: grid;
  height: 100%;
  text-align: left;
  grid-template-rows: 1fr;
}

.pts-tag {
  text-transform: uppercase;
  font-size: 9px;
  border: solid 1px;
  border-radius: 2px;
  padding: 2px 6px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-block;
}

.pts-mainArea {
  grid-row: 1;
  grid-column: 1;
  padding: 0;
  padding-top: 3px;
  vertical-align: middle;
  word-wrap: break-word;
}

.pts-code-line {
  white-space: nowrap;
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
  overflow-x: hidden;
  font-size: small;
}

.pts-titleRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.pts-title {
  font-weight: 600;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 0;
  padding-top: 0;
  font-size: 13px;
  line-height: 1.4;
  flex-shrink: 1;
  min-width: 0;
}

.pts-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}

.pts-iconArea {
  grid-column: 1;
  margin-top: 3px;
  margin-left: 3px;
  border-left: inset 1px #848586;
  border-top: inset 1px #848586;
  border-right: inset 1px #848586;
  border-bottom: inset 1px #848586;
}

.pts-descriptionArea {
  flex: 1;
  padding: 0;
  padding-top: 8px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.75;
}

.pt-docLink {
  display: inline-block;
}

.pts-code-topic {
  padding-left: 4px;
}

.etb-outer {
  display: block;
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-right: solid 1px black;
}

/* macOS-specific outer style - no borders, let macOS window frame handle it */
.etb-outer-mac {
  border: none;
}

.etb-grid {
  display: grid;
  grid-template-columns: 1fr 36px 36px 36px 36px 36px;
}

/* macOS grid: traffic light spacer on left, title on right */
.etb-grid-mac {
  display: grid;
  grid-template-columns: 80px 1fr;
}

/* Space for macOS traffic light buttons (close, minimize, maximize) */
.etb-trafficLightSpacer {
  -webkit-app-region: drag;
  height: 25px;
}

.etb-title {
  vertical-align: middle;
  padding: 3px 9px;
  height: 25px;
}

/* macOS title style - positioned for right side */
.etb-title-mac {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 16px;
}

.etb-titleInner {
  height: 12px;
  margin-top: 6px;
  margin-bottom: 0px;
  background-repeat: no-repeat;
  background-size: contain;
}

/* macOS title inner - logo on right */
.etb-titleInner-mac {
  height: 12px;
  width: 180px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
}

.etb-logo-d {
  background-image: url(d9b4c4643daafdc50115.png);
}

.etb-logo-l {
  background-image: url(132aa94fb0a62aaf4ac8.png);
}

.etb-moveDraggable {
  -webkit-app-region: drag;
}

.etb-mmrCell {
  width: 36px;
  -webkit-app-region: no-drag;
  height: 25px;
  min-width: 36px;
  max-width: 36px;
  min-height: 25px;
  max-height: 25px;
  padding: 4px;
}

.etb-windowSide1 {
  grid-column: 2;
}

.etb-windowSide2 {
  grid-column: 3;
}

.etb-windowMode1 {
  grid-column: 4;
}

.etb-windowMode2 {
  grid-column: 5;
}

.etb-close {
  grid-column: 6;
}

.hhdr {
  font-size: 30pt;
  height: 100%;
  border-bottom: outset 2px;
}

.hhdr-area {
  border-bottom: inset 2px;
  padding-bottom: 5px;
}

.hhdr-sublink {
  line-height: normal;
  padding-bottom: 10px;
  font-size: small;
  color: white;
  text-align: "right";
  vertical-align: middle;
  padding-right: 10px;
  padding-top: 18px;
  margin-left: auto;
}

.hhdr-sublink A {
  font-size: small;
  color: white;
  display: inline-block;
  padding: 6px 4px;
  min-height: 44px;
  line-height: 32px;
}

.hhdr-docsLink {
  color: white;
  background-color: transparent;
  border: 0px;
  text-decoration: underline;
  padding-right: 0px;
}

.hhdr-textArea {
  padding-left: 6px;
}

.hhdr-area {
  vertical-align: middle;
  text-align: center;
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: 3;
}

.hhdr-image-outer {
  display: inline-block;
  margin: 0px;
  padding-left: 10px;
  background-size: cover;
}

.hhdr-image {
  width: 192px;
  max-width: 45vw;
  padding-top: 18px;
  padding-right: 10px;
}

@media only screen and (max-width: 600px) {
  .hhdr-sublink {
    display: none;
  }
}

.hhdr-mobileLinks {
  display: none;
  margin-left: auto;
  padding-top: 14px;
  padding-right: 6px;
  gap: 2px;
  align-items: center;
}

.hhdr-mobileLinks a,
.hhdr-mobileLinks button {
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 8px 6px;
  min-width: 44px;
  min-height: 44px;
  text-align: center;
  text-decoration: underline;
  line-height: 28px;
}

@media only screen and (max-width: 600px) {
  .hhdr-mobileLinks {
    display: flex;
  }
}

.app-loadingArea {
  width: 100vw;
  max-height: 100vh;
  min-height: 100vh;
  vertical-align: middle;
  text-align: left;
  padding-top: calc(50vh - 50px);
}

.app-loading {
  padding-left: 10vw;
  max-width: 70vw;
  font-size: 14pt;
}

.app-subloading {
  padding-left: 10vw;
  max-width: 70vw;
  font-size: 10pt;
}

.app-editor {
  width: 100vw;
}

/*
 * Skip-to-main-content link (WCAG 2.4.1 — Bypass Blocks).
 *
 * This is the first focusable element on every page. It's visually hidden
 * off-screen by default but slides into view as soon as a keyboard user
 * tabs to it, giving them a one-Tab way to jump past the global header /
 * navigation rail to the page's main content.
 *
 * - `clip` + negative offset hides it from sighted users without removing
 *   it from the tab order or screen-reader output.
 * - On `:focus` / `:focus-visible` we promote it to the top-left corner with
 *   high contrast styling so sighted keyboard users see where focus has
 *   landed and can confirm the action.
 * - Solid background + border — survives forced-colors / high-contrast modes.
 */
.app-skipLink {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
  background: #000000;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid #ffffff;
  border-radius: 4px;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.app-skipLink:focus,
.app-skipLink:focus-visible {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  outline: 3px solid #ffd400;
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .app-skipLink {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
  }
  .app-skipLink:focus,
  .app-skipLink:focus-visible {
    outline: 3px solid Highlight;
  }
}

/*
 * Reduced-motion accessibility (WCAG 2.3.3 — Animation from Interactions).
 *
 * Users who set "Reduce motion" at the OS or browser level have explicitly
 * asked us NOT to animate. MUI's defaults (`MuiPaper` 0.3s background-color
 * transition, `MuiCollapse` 0.3s height transition, `MuiCardActionArea`
 * 0.25s focus-highlight transition, MUI ripples, etc.) do not inherently
 * honor this preference, so we install a belt-and-suspenders rule that
 * neutralizes every animation/transition on the page when the preference
 * is active. Durations are set to 0.01ms (rather than 0) because some
 * libraries still rely on `transitionend` firing — 0.01ms ensures the
 * event still fires synchronously without any visible motion.
 *
 * This is the WCAG-recommended pattern; it is intentionally global so a
 * page-level opt-in is impossible to forget when adding new components.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Session-ended view ("View session ended" / "Edit session ended")
 *
 * Shown after the user clicks Close on a `mct view` or `mct edit` session.
 * The on-disk content server has been shut down; the page is now a dead-end
 * for that session. We render a branded, theme-aware terminal screen with:
 *  - Minecrafter title + Noto Sans body (consistent with the rest of the app)
 *  - Theme-aware background that fills the entire viewport (no white band)
 *  - A clear next-action ("Close this tab") so the user has somewhere to go
 *
 * Theme tokens come from the host theme via inline style on `.app-sessionEnded`
 * so the page works in both light and dark mode.
 */
.app-sessionEnded {
  width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}

.app-sessionEnded-card {
  max-width: 480px;
  width: 100%;
  padding: 32px 36px;
  border: 1px solid rgba(82, 165, 53, 0.35);
  border-radius: 4px;
  text-align: center;
  background: rgba(82, 165, 53, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.app-sessionEnded-title {
  font-family: "Minecrafter", "Noto Sans", sans-serif;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: 1px;
  margin: 0 0 12px 0;
  color: #52a535;
  text-shadow: 2px 2px 0 rgba(42, 100, 28, 0.3);
}

.app-sessionEnded-message {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 20px 0;
  opacity: 0.92;
}

.app-sessionEnded-button {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 4px;
  border: 1px solid #52a535;
  background: #52a535;
  color: #ffffff;
  cursor: pointer;
  transition: background 120ms ease-in-out;
}

.app-sessionEnded-button:hover,
.app-sessionEnded-button:focus-visible {
  background: #2a641c;
  border-color: #2a641c;
  outline: 2px solid #86d562;
  outline-offset: 2px;
}

.ct-outer {
  min-width: 100%;
  max-width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  display: grid;
}

.ct-area {
  min-width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
  grid-column: 1;
  grid-row: 1;
  margin-left: 0px;
  margin-top: 0px;
  text-align: center;
  vertical-align: middle;
}

.ct-selectedProject {
  padding-top: 20px;
  padding-left: 30px;
}

.ct-optionsGrid {
  display: grid;
  height: 330px;
}

.ct-type-label {
  grid-row: 1;
  grid-column: 1;
  user-select: none;
}

.ct-type-options {
  padding-bottom: 18px;
}

.ct-import-label {
  grid-row: 2;
  grid-column: 1;
  padding-top: 7px;
  user-select: none;
}

.ct-import-input {
  grid-row: 2;
  grid-column: 2;
  text-align: left;
  padding-bottom: 8px;
}

.ct-export-label {
  grid-row: 3;
  grid-column: 1;
  padding-top: 7px;
  user-select: none;
}

.ct-export-input {
  grid-row: 3;
  grid-column: 2;
  text-align: left;
  padding-bottom: 8px;
}

.ct-buttonArea {
  text-align: right;
  padding: 10px;
}

.ct-buttonArea button {
  margin-left: 10px;
}

.ct-actionsToolBarArea {
  padding-left: 24px;
}
.ct-actionsToolBarArea .ui-toolbar__itemicon {
  color: green !important;
}

.ct-settingsArea {
  padding-left: 0px;
}

/**
 * CodeToolboxNoProjectLanding.css
 *
 * Styles for the welcome landing page shown in VS Code when no folder is open.
 * Uses Minecraft-inspired styling consistent with the rest of the app.
 */

/* CSS Custom Properties for theming */
.ctl-outer {
  --ctl-bg: #2d2d2d;
  --ctl-panel-bg: #3a3a3a;
  --ctl-border-outer: #1a1a1a;
  --ctl-border-inner: #4a4a4a;
  --ctl-text: #ffffff;
  --ctl-text-muted: #b0b0b0;
  /* Dimmed text token for body descriptions (.ctl-sectionDesc, .ctl-featureDesc).
   * Previously #aaaaaa which produces ~4.5:1 borderline on the panel surface.
   * #c4c4c4 yields ~5.7:1 on #3a3a3a panels, comfortably above WCAG 1.4.3 AA. */
  --ctl-text-dim: #c4c4c4;
  --ctl-accent: #52a535;
  --ctl-accent-light: #6bc74c;
  --ctl-feature-bg: rgba(255, 255, 255, 0.03);
  --ctl-feature-hover: rgba(255, 255, 255, 0.08);
  --ctl-icon-bg: rgba(82, 165, 53, 0.15);
  --ctl-shadow: rgba(0, 0, 0, 0.3);
}

/* Light theme overrides */
.ctl-light {
  --ctl-bg: #f5f5f5;
  --ctl-panel-bg: #ffffff;
  --ctl-border-outer: #d0d0d0;
  --ctl-border-inner: #e8e8e8;
  --ctl-text: #1a1a1a;
  --ctl-text-muted: #555555;
  /* See dark-theme comment on --ctl-text-dim. #888888 on white = 3.55:1 (FAILS
   * AA 4.5:1). #5e5e5e gives 6.7:1, AA-clean for body text. */
  --ctl-text-dim: #5e5e5e;
  --ctl-accent: #3d8a28;
  --ctl-accent-light: #52a535;
  --ctl-feature-bg: rgba(0, 0, 0, 0.02);
  --ctl-feature-hover: rgba(0, 0, 0, 0.05);
  --ctl-icon-bg: rgba(61, 138, 40, 0.12);
  --ctl-shadow: rgba(0, 0, 0, 0.1);
}

.ctl-outer {
  min-width: 100%;
  max-width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

/* Main panel container */
.ctl-panel {
  background: var(--ctl-panel-bg);
  border: 2px solid var(--ctl-border-outer);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--ctl-shadow);
  overflow: hidden;
}

/* Decorative accent bar at top */
.ctl-panel::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--ctl-accent) 0%, var(--ctl-accent-light) 50%, var(--ctl-accent) 100%);
}

/* Header section with logo and title */
.ctl-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 16px 20px;
  text-align: center;
}

.ctl-logoArea {
  margin-bottom: 12px;
}

.ctl-logo {
  width: 64px;
  height: 64px;
  image-rendering: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--ctl-shadow);
}

.ctl-headerText {
  text-align: center;
}

.ctl-title {
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: var(--ctl-text);
  letter-spacing: 0.3px;
}

.ctl-subtitle {
  font-size: 0.85rem;
  color: var(--ctl-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Getting Started section */
.ctl-gettingStarted {
  padding: 12px 20px 8px 20px;
  text-align: center;
  border-top: 1px solid var(--ctl-border-inner);
}

.ctl-sectionTitle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ctl-text);
  margin: 0 0 6px 0;
}

.ctl-sectionDesc {
  font-size: 0.8rem;
  color: var(--ctl-text-dim);
  margin: 0;
  line-height: 1.4;
}

/* Primary action button area */
.ctl-actionArea {
  padding: 12px 20px 16px 20px;
  display: flex;
  justify-content: center;
}

.ctl-newProjectButton {
  min-width: 140px;
  font-weight: 600;
}

/* Feature highlights grid */
.ctl-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ctl-border-inner);
  border-top: 1px solid var(--ctl-border-inner);
}

.ctl-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ctl-feature-bg);
  transition: background-color 0.15s ease;
}

.ctl-feature:hover {
  background: var(--ctl-feature-hover);
}

.ctl-featureIcon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ctl-icon-bg);
  border-radius: 4px;
  color: var(--ctl-accent);
  font-size: 0.85rem;
}

.ctl-featureText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ctl-featureTitle {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ctl-text);
  line-height: 1.2;
}

.ctl-featureDesc {
  font-size: 0.7rem;
  color: var(--ctl-text-dim);
  line-height: 1.3;
}

.rsm-outer {
  min-width: 100%;
  max-width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  background-color: var(--mc-bg-1);
  display: grid;
}

.rsm-actionsHeader {
  background-color: #242425;
  color: white;
  font-size: 16pt;
  padding: 14px;
  margin-bottom: 12px;
  text-align: left;
}

.rsm-area {
  min-width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
  grid-column: 1;
  grid-row: 1;
  margin-left: 0px;
  margin-top: 0px;
  color: var(--mc-fg-1) !important;
  text-align: center;
  vertical-align: middle;
}

.rsm-selectedProject {
  padding-top: 20px;
  padding-left: 30px;
}

.rsm-optionsGrid {
  display: grid;
  height: 330px;
}

.rsm-type-label {
  grid-row: 1;
  grid-column: 1;
  user-select: none;
}

.rsm-type-options {
  padding-bottom: 18px;
}

.rsm-import-label {
  grid-row: 2;
  grid-column: 1;
  padding-top: 7px;
  user-select: none;
}

.rsm-import-input {
  grid-row: 2;
  grid-column: 2;
  text-align: left;
  padding-bottom: 8px;
}

.rsm-export-label {
  grid-row: 3;
  grid-column: 1;
  padding-top: 7px;
  user-select: none;
}

.rsm-export-input {
  grid-row: 3;
  grid-column: 2;
  text-align: left;
  padding-bottom: 8px;
}

.rsm-buttonArea {
  text-align: right;
  padding: 10px;
}

.rsm-buttonArea button {
  margin-left: 10px;
}

.rsm-actionsToolBarArea {
  padding-left: 24px;
}
.rsm-actionsToolBarArea .ui-toolbar__itemicon {
  color: green !important;
}

.rsm-settingsArea {
  padding-left: 0px;
}

.csp-outer {
  min-width: 100%;
  max-width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(82, 165, 53, 0.08) 0%, transparent 200px);
}

.csp-header {
  padding: 16px 20px 8px 20px;
  border-bottom: 1px solid rgba(82, 165, 53, 0.2);
  background: linear-gradient(90deg, rgba(82, 165, 53, 0.12) 0%, transparent 50%);
}

.csp-header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.csp-title {
  font-family: "Minecrafter", "Noto Sans", sans-serif;
  font-size: 24px;
  font-weight: normal;
  margin: 0;
  color: #52a535;
  text-shadow: 2px 2px 0 rgba(42, 100, 28, 0.3);
  letter-spacing: 1px;
}

.csp-loading {
  flex-shrink: 0;
}

.csp-loading-main {
  font-size: 13px;
  opacity: 0.85;
}

.csp-loading-additional {
  font-size: 12px;
  opacity: 0.7;
}

.csp-projectDetails {
  display: grid;
  grid-template-columns: 280px auto 1fr;
  gap: 12px;
  align-items: end;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.csp-newProjectName {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csp-npnLabel {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  color: #86d562;
}

.csp-input {
  width: 100%;
}

.csp-input .MuiInputLabel-root {
  color: var(--mc-fg-1);
}

.csp-input input {
  border-radius: 2px !important;
  border: 1px solid rgba(82, 165, 53, 0.4) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

.csp-input input:focus {
  border-color: #52a535 !important;
  box-shadow: 0 0 0 1px rgba(82, 165, 53, 0.3) !important;
}

.csp-goButtonArea {
  align-self: end;
}

.csp-createButton {
  background: linear-gradient(180deg, #6fc24a 0%, #52a535 50%, #3e8828 100%) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 8px 24px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.csp-createButton:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

.csp-createButton:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.csp-createButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: linear-gradient(180deg, #6b6b6b 0%, #4a4a4a 100%) !important;
}

.csp-searchArea {
  justify-self: end;
  width: 240px;
}

.csp-search {
  width: 100%;
}

.csp-search input {
  border-radius: 2px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(0, 0, 0, 0.2) !important;
  padding: 8px 12px !important;
}

.csp-search input:focus {
  border-color: rgba(82, 165, 53, 0.5) !important;
}

.csp-gallery {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

.wbsrv-outer {
  min-width: 100%;
  max-width: 100%;
  min-height: calc(100vh - 36px);
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: 1fr;
}

.wbsrv-actionsHeader {
  background-color: #242425;
  color: white;
  display: grid;
  font-size: 12pt;
  padding: 8px;
  text-align: left;
}

.wbsrv-settingsArea {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.wbsrv-area {
  height: 100%;
  width: 100%;
  grid-column: 1;
  grid-row: 1;
  margin-left: 0px;
  margin-top: 0px;
  text-align: left;
  vertical-align: middle;
}

.wbsrv-motd {
  font-size: larger;
  text-align: left;
  padding-left: 16px;
}

.wbsrv-topTools {
  display: inline-block;
  grid-column: 1;
  padding-top: 2px;
}

.wbsrv-title {
  grid-column: 1;
  padding-top: 4px;
  display: inline-block;
}

.wbsrv-selectedProject {
  padding-top: 20px;
  padding-left: 30px;
}

.wbsrv-optionsGrid {
  display: grid;
  height: 330px;
}

.wbsrv-type-label {
  grid-row: 1;
  grid-column: 1;
  user-select: none;
}

.wbsrv-type-options {
  padding-bottom: 18px;
}

.wbsrv-buttonArea button {
  margin-left: 10px;
}

@media only screen and (min-width: 800px) {
  .ifu-outer {
    min-width: 100%;
    max-width: 100%;
    min-height: calc(100vh);
    max-height: calc(100vh);
    display: grid;
    grid-template-rows: 96px 1fr 54px;
    padding-bottom: 10px;
  }
}

@media only screen and (max-width: 800px) {
  .ifu-outer {
    min-width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
    display: grid;
    grid-template-rows: 96px 1fr 54px;
    padding-bottom: 10px;
  }
}

.ifu-loading {
  padding-top: 20px;
}

.ifu-header {
  height: 100%;
  border-bottom: outset 2px;
}

.ifu-header {
  grid-row: 1;
}

.ifu-main {
  grid-row: 2;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 8px;
}

.ifu-footer {
  grid-row: 3;
  width: 100%;
  line-height: normal;
}

.ifu-warning {
  padding: 10px;
  display: grid;
  padding-top: 17px;
  grid-template-columns: 30px 1fr;
}

.ifu-warningIcon {
  grid-column: 1;
}

.ifu-warningText {
  grid-column: 2;
}

.ifu-buttonBar {
  padding-top: 20px;
  text-align: right;
}

.ifu-button {
  margin-left: 10px;
}

.ifu-urlFormatsHelp {
  margin-top: 24px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.8;
}

.ifu-urlFormatsHelpTitle {
  font-weight: 600;
  margin-bottom: 6px;
}

.ifu-urlFormatsHelpList {
  margin: 0;
  padding-left: 20px;
}

.ifu-urlFormatsHelpList code {
  font-family: monospace;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(127, 127, 127, 0.15);
}

@media only screen and (min-width: 800px) {
  .hftr-usage {
    border-top: inset 2px;
  }
}

@media only screen and (max-width: 800px) {
  .hftr-legal {
    padding-bottom: 80px;
  }

  .hftr-usage-interior {
    font-size: 14px;
    line-height: 1.5;
    padding-top: 8px;
    padding-bottom: 4px;
  }
}

@media only screen and (max-width: 600px) {
  .hftr-sublink A,
  .hftr-docsLink,
  .hftr-docsLinkNoPad,
  .hftr-clickLink {
    display: inline-block;
    padding: 8px 6px;
    min-height: 44px;
    line-height: 28px;
  }
}

.hftr-clickLink {
  cursor: pointer;
  text-decoration: underline;
}

.hftr-footer {
  grid-row: 4;
  grid-column-start: 1;
  grid-column-end: 3;
  width: 100%;
  line-height: normal;
}

.hftr-legal {
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 1px;
}

.hftr-usage {
  width: 100%;
  padding-bottom: 4px;
}

.hftr-usage-interior {
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 4px;
  font-size: 13px;
  color: #e8a840;
}

.hftr-sublink {
  font-size: small;
  color: white;
}

.hftr-sublink A {
  font-size: small;
  color: white;
}

.hftr-docsLink {
  color: white;
  padding-left: 6px;
  background-color: transparent;
  border: 0px;
  text-decoration: underline;
  padding-right: 0px;
}

.hftr-docsLinkNoPad {
  color: white;
  padding-left: 0px;
  background-color: transparent;
  border: 0px;
  text-decoration: underline;
  padding-right: 0px;
}

@media only screen and (min-width: 800px) {
  .iff-outer {
    min-width: 100%;
    max-width: 100%;
    min-height: calc(100vh);
    max-height: calc(100vh);
    display: grid;
    grid-template-rows: 96px 1fr 54px;
    padding-bottom: 10px;
  }
}

@media only screen and (max-width: 800px) {
  .iff-outer {
    min-width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
    display: grid;
    grid-template-rows: 96px 1fr 54px;
    padding-bottom: 10px;
  }
}

.iff-loading {
  padding-top: 20px;
  text-align: center;
  color: #888;
}

.iff-header {
  height: 100%;
  border-bottom: outset 2px;
}

.iff-header {
  grid-row: 1;
}

.iff-main {
  grid-row: 2;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.iff-footer {
  grid-row: 3;
  width: 100%;
  line-height: normal;
}

.iff-content {
  padding: 10px;
  max-width: 900px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.iff-title {
  margin: 0 0 20px 0;
  font-size: 1.5em;
  font-weight: 500;
}

/* Layout for multiple files - two columns */
.iff-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

/* Layout for single file - single column, centered */
.iff-layout-single {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 500px;
  flex: 1;
  min-height: 0;
}

@media only screen and (max-width: 700px) {
  .iff-layout {
    grid-template-columns: 1fr;
  }
}

/* File List Panel */
.iff-fileList {
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  max-height: 100%;
}

.iff-fileListHeader {
  padding: 10px;
  background: rgba(100, 100, 100, 0.2);
  font-weight: 500;
  border-bottom: 1px solid #444;
  flex-shrink: 0;
}

.iff-fileListItems {
  flex: 1;
  overflow-y: auto;
}

.iff-fileListItem {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #333;
}

.iff-fileListItem:hover {
  background: rgba(100, 100, 100, 0.3);
}

.iff-fileListItemSelected {
  background: rgba(80, 120, 200, 0.3);
}

.iff-fileListItemSelected:hover {
  background: rgba(80, 120, 200, 0.4);
}

.iff-fileIcon {
  margin-right: 8px;
  opacity: 0.7;
}

.iff-filePreview {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 8px;
  border-radius: 2px;
  image-rendering: pixelated;
}

.iff-filePreviewIcon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iff-fileName {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iff-fileStatus {
  margin-left: 8px;
}

.iff-statusUpdate {
  color: #4caf50;
}

.iff-statusOverride {
  color: #ff9800;
}

.iff-statusNew {
  color: #2196f3;
}

/* Options Panel */
.iff-optionsPanel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* In single file mode, options panel takes full width */
.iff-layout-single .iff-optionsPanel {
  width: 100%;
}

.iff-selectFile {
  padding: 40px;
  text-align: center;
  color: #888;
  font-style: italic;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iff-fileOptions {
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.iff-fileOptionsHeader {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: rgba(100, 100, 100, 0.2);
  border-bottom: 1px solid #444;
}

.iff-fileOptionsName {
  font-weight: 500;
  margin-left: 10px;
  font-size: 1.1em;
}

.iff-fileOptionsContent {
  padding: 15px 20px;
  flex: 1;
  overflow-y: auto;
}

.iff-radioGroupScroll {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 10px;
}

.iff-optionSection {
  margin-bottom: 20px;
}

.iff-optionSection:last-child {
  margin-bottom: 0;
}

.iff-optionLabel {
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 0.95em;
  color: #ccc;
}

.iff-filesToUpdateSection {
  padding: 15px 20px;
  border-top: 1px solid #444;
  background: rgba(50, 50, 50, 0.3);
}

.iff-matchingFiles {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 0.85em;
  max-height: 80px;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-all;
}

.iff-matchingFile {
  padding: 3px 0;
  opacity: 0.8;
}

/* New Project Section */
.iff-newProjectSection {
  border: 1px solid #444;
  border-radius: 4px;
  padding: 20px;
  background: rgba(50, 50, 50, 0.2);
  flex-shrink: 0;
}

.iff-sectionHeader {
  font-weight: 500;
  font-size: 1.05em;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #444;
}

.iff-projectNameRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.iff-projectNameLabel {
  flex-shrink: 0;
  min-width: 100px;
}

.iff-projectNameInput {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #555;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  color: inherit;
  font-size: 1em;
}

.iff-projectNameInput:focus {
  outline: none;
  border-color: #2196f3;
}

.iff-newProjectInfo {
  font-size: 0.9em;
  opacity: 0.7;
  margin-top: 5px;
}

/* Error Display */
.iff-error {
  display: flex;
  align-items: center;
  padding: 20px;
  background: rgba(200, 50, 50, 0.2);
  border: 1px solid #c33;
  border-radius: 4px;
}

.iff-errorIcon {
  font-size: 2em;
  color: #f44336;
  margin-right: 15px;
}

.iff-errorText {
  flex: 1;
}

/* Legacy styles */
.iff-warning {
  padding: 10px;
  display: grid;
  padding-top: 17px;
  grid-template-columns: 30px 1fr;
}

.iff-warningIcon {
  grid-column: 1;
}

.iff-warningText {
  grid-column: 2;
}

.iff-buttonBar {
  padding-top: 20px;
  margin-top: auto;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #333;
  padding-bottom: 10px;
  flex-shrink: 0;
}

.iff-button {
  margin-left: 10px;
}