.component-options {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.component-options-intro {
  padding: 10px;
  color: #fff;
  background: linear-gradient(135deg, #263340, #34495b);
  border-radius: 5px;
}
.component-options-intro strong { font-size: 13px; }
.component-options-intro p,
.component-options-heading span,
.component-options-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.component-options-intro p { color: #c7d2dc; }
.component-options-section {
  padding: 9px;
  background: #f8fafb;
  border: 1px solid var(--border);
  border-radius: 5px;
}
.component-options-heading { min-width: 0; }
.component-options-heading > div:first-child { min-width: 0; }
.component-options-action {
  min-height: 27px;
  padding: 3px 8px;
  color: #273442;
  background: #fff;
  border: 1px solid #cbd3da;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.component-options-action:hover { color: #075f9f; border-color: #74a9cc; background: #f3faff; }
.component-options-action:focus-visible,
.component-options-name:focus-visible,
.component-options-picker select:focus-visible,
.component-options-state select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.component-options-action:disabled { cursor: default; opacity: .35; }
.component-options-action.is-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.component-options-action.is-primary:hover { background: var(--accent-hover); }
.component-options-action.is-danger { color: #a52222; }
.component-options-action.is-danger:hover { color: #fff; background: #b52c32; border-color: #b52c32; }
.component-options-action.is-icon { width: 27px; padding: 0; }
.component-options-action.is-add { width: 100%; border-style: dashed; }
.component-options-add-actions { flex-wrap: wrap; }
.component-options-picker {
  padding: 7px;
  background: #fff;
  border-radius: 4px;
}
.component-options-picker > span { color: #425160; font-size: 11px; font-weight: 700; }
.component-options-picker select,
.component-options-state select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  color: #263340;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.component-options-row,
.component-options-card-header,
.component-options-bundle {
  grid-template-columns: minmax(0, 1fr);
  padding: 7px;
  background: #fff;
  border: 1px solid #e0e5e9;
  border-radius: 4px;
}
.component-options-row.is-active { border-color: #70acd4; box-shadow: inset 3px 0 var(--accent); }
.component-options-row.is-editing { border-color: #70acd4; box-shadow: inset 3px 0 var(--accent); }
.component-options-condition {
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.component-options-condition select,
.component-options-condition input {
  width: 100%;
  min-width: 0;
  height: 29px;
  padding: 3px 7px;
  color: #263340;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.conditional-utility-legend { margin-top: 7px; flex-wrap: wrap; }
.conditional-utility-legend > span {
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.component-options-details { min-width: 0; }
.component-options-name {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 3px 6px;
  color: #263340;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
}
.component-options-name:hover,
.component-options-name:focus { border-color: var(--border); }
.component-options-id { color: #7a8793; font-size: 10px; }
.component-options-row-actions { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.component-options-badge,
.component-options-type {
  padding: 3px 6px;
  color: #075f9f;
  background: #e5f2fb;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.component-options-type { color: #52606d; background: #e9edf0; }
.component-options-bundle-group {
  padding: 8px;
  background: #fff;
  border: 1px solid #d8e0e6;
  border-radius: 5px;
}
.component-options-card-header { padding: 0 0 8px; border: 0; border-bottom: 1px solid #e5eaed; border-radius: 0; }
.component-options-state {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 7px;
  color: #344250;
  background: #eef5f8;
  border-radius: 4px;
  font-size: 11px;
}
.component-options-checkbox {
  display: grid;
  width: 18px;
  height: 18px;
  padding: 3px;
  place-items: center;
  color: #fff;
  background: #fff;
  border: 1px solid #9eabb5;
  border-radius: 3px;
  cursor: pointer;
}
.component-options-checkbox::before {
  content: "";
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(15% 40%, 35% 60%, 85% 10%, 100% 25%, 35% 90%, 0 55%);
  opacity: 0;
}
.component-options-checkbox:checked { background: var(--accent); border-color: var(--accent); }
.component-options-checkbox:checked::before { opacity: 1; }
.component-options-state select { grid-column: 1 / -1; }
.component-options-bundle { background: #f8fafb; }
.component-options-bundle.is-editing { border-color: #69a8d1; box-shadow: inset 3px 0 var(--accent); }
.component-option-dialog-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.component-definition { align-content: start; }
.component-definition[hidden] { display: none !important; }
.definition-section { padding: 8px; border: 1px solid var(--border); border-radius: 4px; }
.definition-tree { max-height: 190px; overflow: auto; }
.definition-tree-button { min-height: 26px; color: #263340; background: transparent; border: 0; border-radius: 3px; text-align: left; }
.definition-tree-button:hover { background: #eef2f5; }
.definition-tree-button.active { color: #fff; background: var(--accent); }
.definition-field { min-width: 0; }
.definition-field input,
.definition-field select,
.definition-field textarea {
  width: 100%;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.definition-field textarea { min-height: 58px; resize: vertical; }
.definition-source textarea { min-height: 220px; font-family: Consolas, "Courier New", monospace; tab-size: 2; white-space: pre; }
.definition-source p { margin: 0; color: var(--muted); line-height: 1.45; }
.definition-source summary { cursor: pointer; }
.definition-prop-row { padding: 7px; background: #f6f8fa; border-radius: 3px; }
.definition-mini-button { min-height: 28px; padding: 0 8px; color: #273442; background: #eef2f5; border: 1px solid var(--border); border-radius: 3px; }
.definition-danger { color: #a52222; }
.component-prop-group,
.component-prop-fields,
.component-prop-value {
  min-width: 0;
}
.component-prop-fields[hidden] { display: none; }
.component-prop-value select { cursor: pointer; }
.component-prop-tracking-row > :first-child { flex: 1 1 auto; min-width: 0; }
.component-prop-tracking { flex: 0 0 auto; }
.component-prop.boolean {
  grid-template-columns: minmax(0, 1fr) auto;
}
.component-props-heading {
  margin-top: 4px;
  padding-top: 14px;
  color: #263340;
  border-top: 1px solid var(--border);
}
.component-attributes {
  min-width: 0;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.component-attributes-summary {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  min-height: 30px;
  padding: 0 2px;
  align-items: center;
  gap: 5px;
  color: #263340;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}
.component-attributes-summary::-webkit-details-marker { display: none; }
.component-attributes-summary:hover { color: var(--accent); }
.component-attributes-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.component-attributes-chevron {
  width: 6px;
  height: 6px;
  margin-left: 1px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(-2px, 0) rotate(-45deg);
  transition: transform 120ms ease;
}
.component-attributes[open] .component-attributes-chevron {
  transform: translateY(-2px) rotate(45deg);
}
.component-attributes-body { padding-top: 4px; }
.component-attributes:not([open]) > .component-attributes-body { display: none; }
.component-slot { min-height: 24px; }
.component-props-empty { color: var(--muted); line-height: 1.5; }