/* Theme previewer controls. They use palette tokens so they restyle with each preview. */
.theme-preview-controls{position:sticky;top:.75rem;z-index:5;margin:1.5rem 0;padding:1rem 1.1rem;border:2px solid var(--color-accent);border-radius:var(--radius-panel);background:var(--color-surface);box-shadow:0 12px 32px -18px #0006}
.theme-preview-title{margin:0 0 .75rem!important;font-weight:700;color:var(--color-ink)}
.theme-preview-fields{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:end}
.theme-preview-fields label{display:grid;gap:.3rem;font-size:.78rem;font-weight:650;color:var(--color-section-heading)}
.theme-preview-fields select{min-width:9rem;min-height:2.5rem;padding:.4rem .6rem;border:1px solid var(--color-field-border);border-radius:var(--radius-small);background:var(--color-field-surface);color:var(--color-text);font:inherit;font-size:.85rem}
.theme-preview-controls button{min-height:2.5rem;padding:.4rem .9rem;border:1px solid var(--color-field-border);border-radius:var(--radius-small);background:var(--color-surface);color:var(--color-ink);font-size:.82rem;font-weight:650}
.theme-preview-controls button:hover{background:var(--color-nav-hover)}
.theme-preview-config{display:flex;gap:.75rem;align-items:center;margin-top:.9rem}
.theme-preview-config pre{flex:1;min-width:0;margin:0!important;padding:.65rem .85rem!important;font-size:.78rem!important;line-height:1.6!important}
.theme-preview-status{margin:.6rem 0 0!important;min-height:1.2em;font-size:.78rem;color:var(--color-muted)}
@media(max-width:48rem){
  .theme-preview-controls{position:static}
  .theme-preview-fields label,.theme-preview-fields select{flex:1 1 8rem;min-width:0}
  .theme-preview-config{flex-direction:column;align-items:stretch}
}
@media print{.theme-preview-controls{display:none}}