.oqr-wrapper { background-color: #f9f9f9; border: 1px solid #ccc; padding: 1rem 1.5rem; border-radius: 5px; max-width: 800px; margin: 2rem auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.oqr-wrapper h2 { border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-top: 1.5rem; margin-bottom: 1rem; font-size: 1.2rem; }
.oqr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 1rem; }
.oqr-field { display: flex; flex-direction: column; }
.oqr-field.oqr-full-width { grid-column: 1 / -1; }
.oqr-field > label { font-weight: bold; margin-bottom: 8px; }
.oqr-field input[type="text"], .oqr-field input[type="datetime-local"], .oqr-field textarea { padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; font-size: 1rem; }
.oqr-checkbox-group { background-color: #fff; border: 1px solid #ccc; padding: 10px; height: 150px; overflow-y: auto; border-radius: 4px; }
.oqr-checkbox-group label { display: block; font-weight: normal; margin-bottom: 5px; }
.oqr-mode-switcher { margin: 1rem 0; }
.oqr-mode-switcher label { margin-right: 20px; font-size: 1rem; }
.oqr-panel { display: none; padding: 1rem; border: 1px dashed #ccc; margin-bottom: 1.5rem; border-radius: 4px; }
.oqr-panel.is-active { display: block; }
.oqr-recorder-controls { display: flex; align-items: center; gap: 15px; }
.oqr-timer { font-size: 1.5rem; font-family: monospace; background-color: #333; color: #fff; padding: 5px 10px; border-radius: 4px; }
.oqr-confirmation-controls { display: none; margin-top: 1rem; }
#oqr-audio-preview { display: none; width: 100%; margin-top: 1rem; }
.oqr-button { padding: 10px 15px; border: 1px solid #8c8f94; background-color: #f3f5f6; color: #2271b1; cursor: pointer; border-radius: 3px; font-size: 14px; text-decoration: none; vertical-align: top; }
.oqr-button:disabled { cursor: not-allowed; opacity: 0.5; }
.oqr-button-primary { background-color: #2271b1; color: white; border-color: #2271b1; font-weight: bold; width: 100%; font-size: 1rem; padding: 12px; }
.oqr-status-bar { padding: 1rem; margin-bottom: 1.5rem; border-radius: 4px; font-weight: bold; text-align: center; transition: all 0.3s ease; }
.oqr-status-bar.is-loading { background-color: #fff8e1; color: #f57f17; }
.oqr-status-bar.is-success { background-color: #e8f5e9; color: #2e7d32; }
.oqr-status-bar.is-error { background-color: #ffebee; color: #c62828; }
/* Styles for Progress Bar and Result Message */
.oqr-progress-container { width: 100%; background-color: #e0e0e0; border-radius: 4px; margin-top: 1rem; display: none; }
.oqr-progress-bar { width: 0%; height: 10px; background-color: #4caf50; border-radius: 4px; text-align: center; line-height: 10px; color: white; transition: width 0.1s ease; }
.oqr-result-message { margin-top: 1rem; padding: 1rem; border-radius: 4px; display: none; font-weight: bold; text-align: center; }
.oqr-result-message.is-success { background-color: #e8f5e9; color: #2e7d32; }
.oqr-result-message.is-error { background-color: #ffebee; color: #c62828; }