.props-body{ display:flex; flex-direction:column; gap: var(--sp-4); }
.prop-group{ display:flex; flex-direction:column; gap: var(--sp-2); }
.prop-group h3{ font-size: var(--fs-200); text-transform:uppercase; letter-spacing:.06em; color: var(--c-text-subtle); margin:0 0 var(--sp-1); }
.prop-row{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap: var(--sp-2); }
.prop-row label{ font-size: var(--fs-300); color: var(--c-text-muted); }
.prop-row--stack{ display:flex; flex-direction:column; align-items:stretch; gap: var(--sp-1); }

.prop-input,
.prop-select,
.prop-textarea{
  width:100%; padding: 7px 10px;
  background: var(--c-bg); color: var(--c-text);
  border:1px solid var(--c-border-strong); border-radius: var(--r-2);
  font-family: inherit; font-size: var(--fs-300);
}
.prop-input:focus, .prop-select:focus, .prop-textarea:focus{ outline:2px solid var(--c-primary); outline-offset:1px; border-color: var(--c-primary); }

.prop-color{ padding:2px; height:32px; width:44px; cursor:pointer; border:1px solid var(--c-border-strong); border-radius: var(--r-2); background: var(--c-bg); }

.prop-segment{ display:flex; gap:2px; background: var(--c-surface-2); border-radius: var(--r-2); padding:2px; }
.prop-segment button{
  flex:1; padding: 6px 4px; border:0; background:transparent;
  border-radius: var(--r-1); cursor:pointer; font-size: var(--fs-200);
  color: var(--c-text-muted); display:flex; align-items:center; justify-content:center;
}
.prop-segment button[aria-pressed="true"]{ background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-1); }

.prop-range{ width:100%; }

.prop-actions{ display:flex; gap: var(--sp-2); }
.prop-actions .btn{ flex:1; }

@media (max-width: 900px){
  .editor-properties{ display:none; }
}