.qnr-shell { min-height: 100vh; padding: clamp(16px, 4vw, 42px); background: linear-gradient(145deg, #15363a, #2f6665); }
.qnr-card { width: min(840px, 100%); margin: 0 auto; padding: clamp(20px, 5vw, 44px); background: #fff; color: #17272b; border-radius: 16px; box-shadow: 0 12px 30px rgb(18 45 49 / 12%); min-width: 0; }
.qnr-card h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(26px, 5vw, 38px); line-height: 1.2; margin: 24px 0 14px; overflow-wrap: anywhere; }
.qnr-card h2, .qnr-preview h2 { font-size: 25px; line-height: 1.3; overflow-wrap: anywhere; }
.qnr-card h3, .qnr-preview h3 { overflow-wrap: anywhere; }
.qnr-identity { font-size: 14px; margin: 0 0 20px; color: #475f65; }
.qnr-instructions { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; padding: 14px 16px; background: #f0f6f4; border-left: 3px solid #397b73; margin: 16px 0 24px; }
.qnr-field { border: 0; padding: 0; min-width: 0; margin: 0 0 28px; }
.qnr-field-label, .qnr-field legend { display: block; font-size: 16px; font-weight: 700; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 10px; padding: 0; }
.qnr-field input:not([type="radio"]):not([type="checkbox"]), .qnr-field textarea { display: block; width: 100%; max-width: 100%; min-width: 0; font-size: 16px; line-height: 1.5; }
.qnr-field textarea { min-height: 144px; }
.qnr-field [aria-invalid="true"] { border-color: #a83e32; outline-color: #a83e32; }
.qnr-required, .qnr-optional { font-size: 13px; font-weight: 400; white-space: normal; }
.qnr-required { color: #813b31; }
.qnr-optional, .qnr-hint { color: #536a70; }
.qnr-hint { font-size: 14px; margin: 0 0 10px; }
.qnr-calculated-field output { display: block; padding: 14px 16px; margin-bottom: 10px; border: 1px solid #9cbfaf; border-radius: 8px; background: #edf6f2; color: #214d3d; font-size: 20px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.qnr-sum-status { padding: 12px 14px; border-left: 3px solid #397b73; background: #f0f6f4; line-height: 1.6; overflow-wrap: anywhere; }
.qnr-sum-status[data-state="invalid"] { background: #fff4ef; border-color: #963c2f; color: #81372c; }
.questionnaire-admin .questionnaire-arithmetic-rule { margin: 12px 0; padding: 14px; border: 1px solid #bdd5cc; border-radius: 8px; background: #edf6f3; line-height: 1.6; overflow-wrap: anywhere; }
.qnr-option { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; border: 1px solid #ccd9d5; background: #fff; border-radius: 8px; padding: 13px 14px; margin: 0 0 9px; cursor: pointer; }
.qnr-option:hover { background: #f2f8f6; }
.qnr-option:has(input:checked) { border-color: #327167; background: #edf6f2; }
.qnr-option input[type="checkbox"], .qnr-option input[type="radio"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; }
.qnr-option span { min-width: 0; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.qnr-section[hidden], .qnr-card [hidden], .qnr-preview [hidden] { display: none !important; }
.qnr-progress { border-top: 1px solid #d8dfdd; border-bottom: 1px solid #d8dfdd; padding: 16px 0; margin: 22px 0; display: grid; gap: 9px; }
.qnr-progress-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.qnr-progress-track { height: 7px; border-radius: 8px; background: #e6efeb; overflow: hidden; }
.qnr-progress-track span { display: block; height: 100%; background: #327167; transition: width .15s ease; }
.qnr-save-status { font-size: 14px; line-height: 1.45; color: #465e64; min-height: 21px; }
.qnr-save-status[data-state="saved"] { color: #286345; }
.qnr-save-status[data-state="pending"], .qnr-save-status[data-state="error"] { color: #854f07; }
.qnr-actions { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid #d8dfdd; padding-top: 18px; margin-top: 24px; }
.qnr-actions .btn { min-height: 46px; white-space: normal; }
.qnr-step-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.qnr-step-actions .btn { min-height: 46px; }
.qnr-error-summary, .qnr-conflict, .qnr-state-banner { border-radius: 8px; border: 1px solid #e5c1b7; background: #fff4ef; padding: 16px; margin: 18px 0; line-height: 1.55; overflow-wrap: anywhere; }
.qnr-error-summary h2, .qnr-conflict h2, .qnr-state-banner h2 { font-size: 20px; font-family: inherit; font-weight: 700; }
.qnr-error-summary ul { margin: 8px 0 0; padding-left: 22px; }
.qnr-error-summary button { border: 0; background: transparent; color: #8c392d; text-align: left; text-decoration: underline; cursor: pointer; padding: 6px 0; font: inherit; }
.qnr-field-error { color: #963c2f; line-height: 1.5; margin: 8px 0 0; font-size: 14px; }
.qnr-conflict details { margin-top: 15px; }
.qnr-conflict summary { cursor: pointer; font-weight: 700; }
.qnr-receipt { padding: 18px; background: #eaf5ef; border: 1px solid #9cbfaf; border-radius: 8px; margin: 22px 0; line-height: 1.6; }
.qnr-receipt h2 { font-size: 23px; margin-bottom: 8px; }
.qnr-receipt p:last-child { margin-bottom: 0; }
.qnr-record-section { border-top: 1px solid #d8dfdd; padding: 20px 0 0; margin-top: 24px; }
.qnr-record-answer { margin: 0 0 20px; }
.qnr-record-answer dt { font-weight: 700; white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.qnr-record-answer dd { margin: 8px 0 0; padding: 12px 14px; border-radius: 6px; background: #f3f6f4; white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere; }
.qnr-record-answer dd ul { padding-left: 20px; margin: 0; white-space: normal; }
.qnr-record-answer dd li { white-space: pre-wrap; }
.qnr-unanswered { color: #655b51; font-style: italic; }
.qnr-footer { border-top: 1px solid #d8dfdd; padding-top: 18px; margin-top: 26px; color: #526970; font-size: 13px; line-height: 1.55; }
.qnr-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.qnr-preview { min-width: 0; }
.qnr-preview-notice { background: #fff5d9; padding: 14px; border-radius: 8px; line-height: 1.5; }
.qnr-link-note { padding: 12px 14px; background: #edf6f3; border: 1px solid #bdd5cc; border-radius: 8px; margin: 14px 0; }
.questionnaire-admin { min-width: 0; }
.questionnaire-admin .btn, .questionnaire-admin button { min-height: 44px; white-space: normal; }
.questionnaire-admin .field, .questionnaire-admin .grid-2, .questionnaire-admin .grid-3 { min-width: 0; }
.questionnaire-admin label, .questionnaire-admin h3, .questionnaire-admin summary { overflow-wrap: anywhere; }
.questionnaire-admin .questionnaire-source, .questionnaire-admin .questionnaire-editor-sections details { min-width: 0; border: 1px solid #d8dfdd; border-radius: 8px; margin: 12px 0; padding: 14px; }
.questionnaire-admin .questionnaire-source summary, .questionnaire-admin .questionnaire-editor-sections summary { cursor: pointer; font-weight: 700; min-height: 32px; line-height: 1.5; }
.questionnaire-admin .questionnaire-source textarea { width: 100%; min-width: 0; min-height: 200px; white-space: pre-wrap; margin-top: 14px; font-size: 14px; line-height: 1.6; }
.questionnaire-admin .questionnaire-editor-field { border-top: 1px solid #d8dfdd; padding-top: 18px; margin-top: 18px; min-width: 0; }
.questionnaire-admin .questionnaire-editor-field textarea { min-width: 0; line-height: 1.55; }
.questionnaire-admin .questionnaire-card-list { display: grid; gap: 14px; min-width: 0; }
.questionnaire-admin .questionnaire-answer-record { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .qnr-shell { padding: 10px; }
  .qnr-card { border-radius: 11px; padding: 20px 16px; }
  .qnr-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .qnr-actions .btn { width: 100%; }
  .qnr-step-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qnr-step-actions .btn { width: 100%; padding-left: 10px; padding-right: 10px; }
  .qnr-instructions { padding: 12px; }
  .questionnaire-admin .grid-2, .questionnaire-admin .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .questionnaire-admin .button-row { align-items: stretch; }
  .questionnaire-admin .button-row .btn { flex: 1 1 100%; }
  .questionnaire-admin .questionnaire-source, .questionnaire-admin .questionnaire-editor-sections details { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .qnr-progress-track span { transition: none; } }
@media print {
  .qnr-shell { background: white; padding: 0; }
  .qnr-card { width: 100%; box-shadow: none; padding: 0; }
  .qnr-actions, .qnr-step-actions, .qnr-footer a, .qnr-save-status { display: none; }
  .qnr-record-answer { break-inside: avoid; }
}