.font-picker { margin: 0 0 22px; border: 1px solid #c8bfae; border-radius: 7px; background: #fffef9; }
.font-picker summary { min-height: 52px; padding: 12px; cursor: pointer; color: #294a6d; font-size: 16px; }
.font-picker summary strong { display: block; margin: 7px 0 0 18px; color: #1d3854; font-size: 23px; line-height: 1.3; font-weight: 600; }
.font-picker summary:focus-visible { outline: 3px solid #245db5; outline-offset: 3px; border-radius: 5px; }
.font-picker>.inspector-tip { margin: 0; padding: 4px 12px 12px; }
.font-samples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0 10px 12px; }
.builder-workspace .font-sample { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; min-width: 0; min-height: 112px; padding: 12px 8px; border: 2px solid #d9d1c2; border-radius: 5px; background: #fff; color: #203b59; text-align: left; white-space: normal; box-shadow: 1px 2px 0 #d7ccb544; }
.builder-workspace .font-sample:hover { background: #f2f7fc; border-color: #86a9cf; }
.builder-workspace .font-sample[aria-pressed=true] { background: #edf5ff; border-color: #316aac; color: #203b59; }
.font-sample-letters { font-size: 22px; line-height: 1.3; font-weight: 400; overflow-wrap: anywhere; }
.font-sample strong { font: 650 15px/1.25 var(--rocode-font-family); overflow-wrap: anywhere; }
.font-sample small { font: 400 13px/1.3 var(--rocode-font-family); color: #53687b; }
.font-sample-check { display: none; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: #316aac; color: #fff; text-align: center; font: 750 12px/18px var(--rocode-font-family); }
.font-sample[aria-pressed=true] .font-sample-check { display: block; }

.text-style-fields { margin: 0 0 20px; }
.text-style-fields .font-picker { margin-bottom: 16px; }
.text-style-fields .font-picker summary strong { font-size: 20px; }
html:root .builder-workspace .block-font-picker .font-sample { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-height: 76px; padding: 12px; }
html:root .builder-workspace .block-font-picker .font-sample .font-sample-letters { width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 18px; line-height: 1.3; }
.text-style-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.text-style-grid .builder-field { min-width: 0; }
.text-style-grid select { width: 100%; min-width: 0; }
.text-size-input { display: flex; align-items: center; gap: 6px; }
.text-size-input input { width: 100%; min-width: 0; }
.text-size-input>span { color: #64768a; font-size: 14px; }
.text-italic { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 16px; cursor: pointer; }
.text-italic input { width: 20px; height: 20px; accent-color: #3267ed; }
.text-italic span { display: flex; align-items: center; gap: 10px; }
.text-italic i { font: italic 700 24px Georgia,serif; }
.text-color-field { min-width: 0; padding: 0; border: 0; margin: 0 0 16px; }
.text-color-field legend { font-weight: 650; margin-bottom: 8px; }
.text-color-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.builder-workspace .text-color-swatch { display: grid; place-items: center; flex: 0 0 40px; width: 40px; min-height: 40px; padding: 5px; border: 1px solid #bfd3e8; border-radius: 5px; background: #f5faff; box-shadow: none; }
.text-color-swatch>span { width: 24px; height: 24px; border-radius: 3px; background: var(--swatch); border: 1px solid #0002; }
.builder-workspace .text-color-swatch[aria-pressed=true] { border: 2px solid #3267ed; padding: 4px; }
.text-custom-color { display: flex; align-items: center; gap: 6px; min-height: 40px; font-size: 13px; }
.text-custom-color input { width: 40px; height: 36px; padding: 3px; border: 1px solid #bfd3e8; border-radius: 5px; background: white; cursor: pointer; }
.text-spacing { margin: 0 0 12px; border-top: 1px solid #d8e4ef; }
.text-spacing summary { padding: 12px 0; min-height: 44px; cursor: pointer; font-weight: 650; }
.text-style-fields .text-style-reset { min-height: 40px; }
@media(max-width:720px){.text-style-grid { grid-template-columns: minmax(0,1fr); }.text-color-swatches { gap: 5px; }}
@media(any-pointer:coarse) {
  html:root .builder-workspace .text-color-swatch { flex-basis:44px; width:44px; min-height:44px; }
  html:root .builder-workspace .text-custom-color input { width:44px; height:44px; min-height:44px; }
  html:root .builder-workspace .text-style-reset { min-height:44px; }
}