.font-controls {
  display: grid;
  gap: 9px;
  margin-bottom: 6px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.font-controls .field { margin: 0; }
.font-family-row { display: flex; align-items: stretch; gap: 7px; }
.font-family-row input { flex: 1; width: 100%; min-width: 0; min-height: 34px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel-2); color: var(--text); }
.font-family-row input::placeholder { color: var(--muted); }
.font-family-row button { flex: 0 0 auto; }
.font-file-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.font-file-name { color: var(--text); font-size: 11px; overflow-wrap: anywhere; }
.font-status { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.font-status[data-kind="loading"] { color: var(--accent); }
.font-status[data-kind="success"] { color: var(--success); }
.font-status[data-kind="error"] { color: var(--danger); }
.font-sample {
  margin: 0;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
}
.font-controls .help-text { margin: 0; }
.font-controls [hidden] { display: none; }