.utility-section {
  min-width: 0;
  border-top: 1px solid var(--border);
}
.utility-section:first-child { border-top: 0; }
.utility-section-header { padding-block: 4px; }
.utility-section-header.has-state-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 120px);
  align-items: center;
  gap: 6px;
}
.utility-section-toggle {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  width: 100%;
  min-height: 30px;
  padding: 0 2px;
  align-items: center;
  gap: 5px;
  color: #263340;
  background: transparent;
  border: 0;
  text-align: left;
}
.utility-section-state-select {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 0 22px 0 7px;
  color: #263340;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
}
.utility-section-state-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.utility-section-toggle:hover { color: var(--accent); }
.utility-section-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.utility-section-chevron {
  width: 6px;
  height: 6px;
  margin-left: 1px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 120ms ease;
}
.utility-section.is-collapsed .utility-section-chevron {
  transform: translate(-2px, 0) rotate(-45deg);
}
.utility-section-label {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.utility-section-active-count {
  display: flex;
  grid-column: 2;
  flex-wrap: wrap;
  justify-self: start;
  gap: 2px;
  min-width: 0;
  padding-bottom: 4px;
  font-size: 9px;
  font-weight: 700;
}
.utility-section-active-count[hidden] { display: none; }
.utility-section-active-state {
  padding: 1px 4px;
  color: #fff;
  background: #5f6b76;
  border-radius: 3px;
  line-height: 14px;
  white-space: nowrap;
}
.utility-section-active-state[data-utility-state="base"] { background: #5f6b76; }
.utility-section-active-state[data-utility-state="hover"] { background: #087f5b; }
.utility-section-active-state[data-utility-state="active"] { background: #bd3f35; }
.utility-section-active-state[data-utility-state="selected"] { background: #2563a6; }
.utility-section-active-state[data-utility-state="before"] { background: #946200; }
.utility-section-active-state[data-utility-state="after"] { background: #7651a6; }
.utility-section-body {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding-bottom: 8px;
}
.utility-section:last-child .utility-section-body { padding-bottom: 0; }
.utility-section[data-utility-group="anchor"] .utility-section-body {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.utility-state-relation-control {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) 72px 72px;
  gap: 4px;
  min-width: 0;
}
.utility-state-relation-control.has-activation-toggle {
  grid-template-columns: max-content max-content minmax(0, 1fr) 72px max-content 72px;
}
.utility-state-relation-control.has-ling-relation {
  grid-template-columns: max-content minmax(0, 1fr) repeat(4, 72px);
}
.utility-state-relation-self { flex: 0 0 auto; }
.utility-state-relation-role {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--panel);
}
.utility-state-relation-role select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 24px 0 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 11px;
}
.utility-color-control {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
}
.utility-color-control.has-relation-control {
  grid-template-columns: minmax(0, 1fr);
}
.utility-color-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
}
.utility-color-context-modifiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}
.utility-color-context-modifiers > .utility-state-relation-control {
  grid-column: 1 / -1;
}
.utility-color-activation-toggle {
  display: block;
  height: 24px;
  cursor: pointer;
}
.utility-color-activation-group {
  display: flex;
  gap: 4px;
  min-width: 0;
}
.utility-color-modifier-group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 72px) repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 4px;
  min-width: 0;
}
.utility-color-modifier-group > .component-prop-value {
  min-width: 0;
  overflow: hidden;
}
.utility-color-modifier-group select { min-width: 0; }
.utility-fade-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}
.utility-fade-control > .component-prop-value {
  min-width: 0;
  overflow: hidden;
}
.utility-fade-control select,
.utility-fade-control input { min-width: 0; }
.utility-fade-control .component-prop-value:has(:disabled) {
  cursor: default;
  opacity: .5;
  pointer-events: none;
}
.utility-preset-custom-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}
.utility-preset-custom-control > .component-prop-value {
  min-width: 0;
  overflow: hidden;
}
.utility-preset-custom-control select,
.utility-preset-custom-control input { min-width: 0; }
.utility-preset-custom-control .utility-animation-variable {
  grid-column: 1 / -1;
}
.utility-color-activation-toggle input {
  margin: 0;
}
.utility-color-activation-toggle:has(input:disabled) {
  cursor: default;
  opacity: .5;
  pointer-events: none;
}
.utility-state-relation-control .component-prop-value:has(select:disabled),
.utility-state-relation-role:has(select:disabled) {
  cursor: default;
  opacity: .5;
  pointer-events: none;
}
.utility-section.is-collapsed .utility-section-control:not(.has-active-utility),
.utility-section.is-collapsed .utility-section-control:not(.utility-section-control-show-all) .utility-control-item:not(.has-active-utility) {
  display: none;
}
.utility-section.is-collapsed:not(.has-active-utilities) .utility-section-body { display: none; }

.utility-box-grid {
  display: grid;
  grid-template-columns: minmax(48px, 1fr) 64px minmax(48px, 1fr);
  grid-template-rows: auto 64px auto;
  grid-template-areas:
    ". top ."
    "left center right"
    ". bottom .";
  gap: 8px;
  align-items: center;
}
.utility-box-side { min-width: 0; text-align: center; }
.utility-box-select { min-width: 0; }
.utility-box-side select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 24px 0 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.utility-box-top { grid-area: top; }
.utility-box-right { grid-area: right; }
.utility-box-bottom { grid-area: bottom; }
.utility-box-left { grid-area: left; }
.utility-box-center {
  grid-area: center;
  width: 64px;
  height: 64px;
  color: var(--muted);
  background: #f7f9fa;
  border: 1px dashed var(--border);
}
.utility-box-output {
  min-height: 27px;
  color: #263340;
  background: #f7f9fa;
  overflow-wrap: anywhere;
}

.utility-spacing-control { min-width: 0; }
.utility-box-model {
  min-width: 0;
  color: #31363b;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  overflow-x: auto;
}
.utility-model-layer,
.utility-model-border {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(38px, 1fr) max-content;
  grid-template-rows: minmax(17px, auto) auto minmax(17px, auto);
  grid-template-areas:
    "empty-start top empty-top"
    "left inner right"
    "empty-bottom bottom empty-end";
  gap: 2px;
  min-width: max-content;
  padding: 2px;
  box-sizing: border-box;
  align-items: center;
}
.utility-model-margin {
  background: #fff7c7;
  border: 1px dashed #d6b726;
}
.utility-model-position {
  background: #e3edf2;
  border: 1px dashed #6f96a8;
}
.utility-model-border {
  background: #787878;
}
.utility-model-radius {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(38px, 1fr) max-content;
  grid-template-rows: minmax(17px, auto) auto minmax(17px, auto);
  grid-template-areas:
    "top-left empty-top top-right"
    "empty-left inner empty-right"
    "bottom-left empty-bottom bottom-right";
  gap: 2px;
  min-width: max-content;
  padding: 2px;
  box-sizing: border-box;
  align-items: center;
  background: #b9c8ce;
}
.utility-model-padding {
  background: #ded4ff;
}
.utility-model-content {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  min-width: 56px;
  min-height: 28px;
  gap: 2px;
  padding: 3px;
  place-items: center;
  justify-content: center;
  color: #22546a;
  background: #cdefff;
  border: 1px dashed #52aeca;
  overflow: hidden;
}
.utility-dimension-field {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(20px, max-content);
  min-height: 18px;
  padding: 0 2px;
  box-sizing: border-box;
  align-items: center;
  gap: 3px;
  color: #22546a;
  background: rgb(255 255 255 / 55%);
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.utility-dimension-field:hover { border-color: rgb(34 84 106 / 35%); }
.utility-dimension-field:focus-within {
  border-color: #2774c7;
  outline: 1px solid #2774c7;
}
.utility-dimension-name { font-weight: 700; }
.utility-dimension-value {
  overflow: hidden;
  line-height: 16px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.utility-dimension-value.is-empty { color: #6e8792; }
.utility-dimension-field select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.utility-dimension-flexBasis { grid-column: 1 / -1; justify-self: center; }
.utility-model-name {
  position: absolute;
  top: 2px;
  left: 4px;
  z-index: 1;
  line-height: 14px;
}
.utility-model-value {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 20px;
  height: 17px;
  padding: 0 2px;
  box-sizing: border-box;
  place-items: center;
  color: #263340;
  background: rgb(255 255 255 / 72%);
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.utility-model-value:hover { border-color: rgb(38 51 64 / 32%); }
.utility-model-value:focus-within {
  border-color: #2774c7;
  outline: 1px solid #2774c7;
}
.utility-model-value-text {
  display: block;
  line-height: 15px;
  white-space: nowrap;
}
.utility-model-value-text.is-empty { color: #7f878d; }
.utility-model-value select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.utility-model-top { grid-area: top; justify-self: center; }
.utility-model-right { grid-area: right; justify-self: end; }
.utility-model-bottom { grid-area: bottom; justify-self: center; }
.utility-model-left { grid-area: left; justify-self: start; }
.utility-border-fields {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 2px;
  align-items: center;
}
.utility-border-width { min-width: 20px; }
.utility-border-style { min-width: 38px; }
.utility-model-position > .utility-model-margin,
.utility-model-margin > .utility-model-border,
.utility-model-border > .utility-model-radius,
.utility-model-radius > .utility-model-padding,
.utility-model-padding > .utility-model-content { grid-area: inner; }
.utility-model-position > .utility-model-name { color: #3d6070; }
.utility-model-radius > .utility-model-name {
  left: 50%;
  transform: translateX(-50%);
  color: #3c4b52;
}
.utility-radius-topLeft { grid-area: top-left; justify-self: start; }
.utility-radius-topRight { grid-area: top-right; justify-self: end; }
.utility-radius-bottomRight { grid-area: bottom-right; justify-self: end; }
.utility-radius-bottomLeft { grid-area: bottom-left; justify-self: start; }
.utility-model-border > .utility-model-name {
  z-index: 2;
  padding: 0 3px;
  color: #fff;
}
.utility-model-border .utility-model-value {
  color: #fff;
  background: #686868;
}
.utility-model-border .utility-model-value select {
  color: #fff;
  background: #2f3337;
  color-scheme: dark;
}
.utility-model-border .utility-model-value option {
  color: #fff;
  background: #2f3337;
}
.utility-radius-fields {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 2px;
  align-items: center;
}
.utility-radius-value { min-width: 20px; }
.utility-radius-mod { min-width: 30px; }
.utility-radius-mod-label {
  color: #3c4b52;
  font-size: 9px;
  font-weight: 700;
}
.utility-model-outputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 6px;
}
.utility-model-outputs .utility-box-output { min-height: 23px; }
.utility-model-outputs .utility-box-output::before {
  content: attr(data-utility-label) ": ";
  color: var(--muted);
}
.utility-pair-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.utility-pair-fields .component-prop-value {
  flex: 1 1 96px;
  min-width: 0;
  overflow: hidden;
}
.utility-pair-fields select { min-width: 0; }
.utility-pseudo-content-control {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.utility-pseudo-content-control > .component-prop-value {
  flex: 1 1 150px;
  min-width: 0;
  overflow: hidden;
}
.utility-pseudo-content-text input { min-width: 0; }
.utility-pseudo-content-text input:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.utility-group-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 4px;
}
.utility-group-grid > .utility-control-item {
  flex: 1 1 120px;
  min-width: 0;
}
.utility-group-grid .component-prop-value { overflow: hidden; }
.utility-group-grid select { min-width: 0; }
.utility-section-control[hidden] { display: none !important; }
.utility-section-control.is-conditionally-disabled { opacity: .5; }

.utility-alignment-control {
  min-width: 0;
}
.utility-alignment-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.utility-alignment-grid > .component-prop-value {
  flex: 0 0 calc(50% - 2px);
  min-width: 0;
  overflow: hidden;
}
.utility-alignment-outputs {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 4px;
  background: #f7f9fa;
  border-top: 1px solid var(--border);
  overflow-x: auto;
}
.utility-alignment-output {
  flex: none;
  color: #52616e;
  font-size: 9px;
  white-space: nowrap;
}
.utility-alignment-output::before {
  content: attr(data-utility-label) ": ";
  color: #263340;
}