.j3d-font-picker { max-width: 100%; }
.j3d-font-picker .j3d-fpc__intro { margin: 0 0 22px; font-size: 18px; line-height: 1.55; }
.j3d-font-picker .j3d-fpc__text-label { display: block; margin: 0 0 7px; font-weight: 700; }
.j3d-font-picker .j3d-fpc__text-input { display: block; box-sizing: border-box; width: 100%; min-height: 86px; padding: 12px; resize: vertical; border: 1px solid #cbd2d9; border-radius: 6px; font: inherit; }
.j3d-fp__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 12px; }
.j3d-fp__fields label { display: flex; min-width: 0; flex-direction: column; gap: 6px; font-weight: 600; }
.j3d-fp__fields select { box-sizing: border-box; width: 100%; min-height: 40px; padding: 7px 9px; border: 1px solid #cbd2d9; border-radius: 5px; background: #fff; font: inherit; }
.j3d-fp__fields .j3d-fp__check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.j3d-fpc__note { margin: 12px 0; color: #58616b; font-size: 13px; line-height: 1.5; }
.j3d-font-picker #fp-reset { margin: 4px 0 8px; }
.j3d-font-picker #fp-status { min-height: 22px; margin: 8px 0; color: #424a52; }
.j3d-font-picker .j3d-fpc__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.j3d-font-picker .j3d-fpc__card { min-width: 0; overflow: hidden; padding: 16px; border: 1px solid #dce1e6; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgb(25 40 55 / 5%); }
.j3d-font-picker .j3d-fpc__card h2 { margin: 0; font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.j3d-font-picker .j3d-fpc__style { margin: 4px 0 10px; color: #66717c; font-size: 13px; }
.j3d-font-picker .j3d-picker__sample { box-sizing: border-box; min-height: 82px; overflow: hidden; padding: 12px; border-radius: 5px; background: #f5f7f9; color: #20232a; font-size: 32px; line-height: 1.25; overflow-wrap: anywhere; white-space: pre-wrap; }
.j3d-font-picker .j3d-fpc__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.j3d-font-picker .j3d-fpc__badge { display: inline-block; padding: 3px 8px; border-radius: 99px; background: #eef3f8; color: #364452; font-size: 12px; }
.j3d-font-picker .j3d-picker__why { margin: 9px 0; color: #58616b; font-size: 13px; line-height: 1.45; }
.j3d-font-picker .j3d-picker__font-error { margin: 5px 0; color: #965b00; font-size: 13px; }
.j3d-picker__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.j3d-picker__actions button { padding: 7px 10px; border: 1px solid #cbd2d9; border-radius: 5px; background: #f7f9fb; cursor: pointer; }
.j3d-picker__actions button:hover { background: #e9f0f6; }
.j3d-fp__pair { margin: 18px 0; padding: 16px; border: 1px solid #cbd2d9; border-radius: 8px; background: #f7f9fb; }
.j3d-fp__pair h2 { margin: 0 0 12px; }
.j3d-fp__pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.j3d-fp__pair-grid > div { min-width: 0; padding: 12px; border-radius: 5px; background: #fff; }
.j3d-fp__pair-grid .j3d-picker__sample { margin: 8px 0; }
@media (max-width: 767px) {
  .j3d-fp__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .j3d-font-picker .j3d-fpc__results { grid-template-columns: 1fr; }
  .j3d-font-picker .j3d-picker__sample { min-height: 70px; font-size: 26px; }
}
@media (max-width: 420px) {
  .j3d-fp__fields { grid-template-columns: 1fr; }
  .j3d-fp__pair-grid { grid-template-columns: 1fr; }
}