/* PDFlyHQ — tools/ocr-pdf/options.css — file card + quality select + actions.
   JS contract: #file-name, #file-size, #btn-remove-file, #opt-quality,
   #btn-ocr, #btn-back. */
.options-wrap { display: flex; flex-direction: column; gap: var(--space-6); }
.file-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--color-primary-500) 6%, var(--color-surface-alt)); border: 1px solid color-mix(in srgb, var(--color-primary-500) 18%, var(--color-border)); border-radius: var(--radius-md); font-size: var(--text-sm); }
.file-card__icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border-radius: var(--radius-sm); color: var(--color-primary-600); }
.file-card__icon svg { width: 20px; height: 20px; }
.file-card__meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.file-card__meta #file-name { font-weight: var(--font-semibold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-card__meta #file-size { font-size: var(--text-xs); color: var(--color-text-muted); }
#btn-remove-file { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-text-muted); transition: color var(--duration-base) var(--ease-default), background-color var(--duration-base) var(--ease-default); }
#btn-remove-file:hover { color: var(--color-danger-500); background: var(--color-danger-50); }
#btn-remove-file:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
#btn-remove-file svg { width: 14px; height: 14px; }
.options-group { display: flex; flex-direction: column; gap: var(--space-3); }
.options-group__label { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.select { height: 40px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); transition: border-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); }
.select:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--shadow-focus); }
.options-note { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); background: var(--color-surface-alt); border-radius: var(--radius-md); padding: var(--space-3); }
.options-note svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--color-text-muted); }
.options-actions { display: flex; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.options-actions .btn--primary { flex: 1; }