.questionnaire-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(24,184,198,.09), transparent 24rem),
    radial-gradient(circle at 92% 38%, rgba(138,63,252,.07), transparent 26rem),
    #f4f8fd;
}

.questionnaire-header .header-main { min-height: 92px; }
.back-menu {
  display:grid; place-items:center; width:48px; height:48px; padding:0;
  border-right:1px solid rgba(255,255,255,.25);
}
.back-menu svg { width:27px; fill:none; stroke:white; stroke-width:2.3; }

.header-progress { width:min(410px, 34vw); align-self:center; color:white; }
.progress-copy { display:flex; justify-content:space-between; gap:20px; margin-bottom:8px; font-size:.88rem; }
.progress-copy strong { color:#8beaf2; }
.progress-track { height:8px; border-radius:20px; background:rgba(255,255,255,.22); overflow:hidden; }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#73e6ef,#fff); transition:width .28s ease; }
.save-button svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; }

.questionnaire-main { width:min(1450px, calc(100% - 38px)); margin:20px auto 34px; }
.course-context {
  min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:10px 18px; border:1px solid #d9e7f3; border-radius:14px; background:rgba(255,255,255,.88);
  box-shadow:0 7px 20px rgba(11,48,72,.06);
}
.course-context div { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.context-label { color:#6d7d91; font-size:.82rem; }
.course-context strong { color:#0b4fa6; }
.course-context a { color:#287fc1; font-weight:750; font-size:.84rem; }

.domain-navigation {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:16px 0;
}
.domain-tab {
  min-height:62px; border:1px solid #dce6f2; border-radius:15px; padding:10px 13px;
  display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
  background:white; color:#465b73; transition:.18s ease; position:relative;
}
.domain-tab:hover { transform:translateY(-2px); box-shadow:0 10px 18px rgba(11,48,72,.08); }
.domain-tab.is-active {
  color:white; border-color:var(--domain-color); background:var(--domain-color);
  box-shadow:0 10px 24px color-mix(in srgb, var(--domain-color) 28%, transparent);
}
.domain-tab.is-active::after {
  content:""; position:absolute; left:50%; bottom:-7px; width:14px; height:14px;
  transform:translateX(-50%) rotate(45deg); background:var(--domain-color);
}
.domain-tab-icon {
  width:34px; height:34px; min-width:34px; display:grid; place-items:center;
  border-radius:10px; color:var(--domain-color); background:color-mix(in srgb,var(--domain-color) 13%,white);
  font-weight:900; font-size:.8rem;
}
.domain-tab.is-active .domain-tab-icon { color:var(--domain-color); background:white; }
.domain-tab-copy { min-width:0; }
.domain-tab-copy strong { display:block; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.domain-tab-copy span { display:block; margin-top:2px; font-size:.7rem; opacity:.8; }

.question-workspace {
  --panel-height: clamp(610px, calc(100vh - 315px), 700px);
  display:grid; grid-template-columns:minmax(0,1.62fr) minmax(320px,.68fr); gap:18px;
  align-items:stretch;
}
.question-panel, .insight-panel {
  height:var(--panel-height);
  border:1px solid #dce6f2; border-radius:22px; background:rgba(255,255,255,.96);
  box-shadow:0 18px 45px rgba(11,48,72,.09);
}
.question-panel { padding:22px 26px 18px; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }
.question-heading { display:flex; gap:16px; align-items:flex-start; padding-bottom:14px; border-bottom:1px solid #e3ebf4; }
.question-icon {
  width:58px; height:58px; min-width:58px; display:grid; place-items:center; border-radius:20px;
  color:white; background:var(--current-domain,#287fc1); box-shadow:0 11px 22px color-mix(in srgb,var(--current-domain,#287fc1) 25%,transparent);
  font-size:1.4rem; font-weight:900;
}
.question-domain-label {
  display:inline-block; color:var(--current-domain,#287fc1); font-size:.76rem; font-weight:850;
  text-transform:uppercase; letter-spacing:.11em;
}
.question-heading h1 { margin:4px 0 1px; font-size:clamp(1.45rem,2vw,2.1rem); letter-spacing:-.035em; line-height:1.12; }
.question-heading p { margin:4px 0 0; color:#5d6d83; font-size:.93rem; }

.option-list { display:grid; gap:9px; margin-top:14px; flex:1; }
.option-card {
  width:100%; min-height:0; border:1px solid #dce6f2; border-radius:16px;
  padding:9px 14px 9px 10px; display:grid; grid-template-columns:48px 1fr 28px; gap:14px;
  align-items:center; text-align:left; background:white; cursor:pointer; transition:.16s ease;
}
.option-card:hover { border-color:var(--current-domain,#287fc1); transform:translateX(2px); box-shadow:0 8px 18px rgba(11,48,72,.07); }
.option-card.is-selected {
  border:2px solid var(--current-domain,#287fc1);
  background:color-mix(in srgb,var(--current-domain,#287fc1) 7%,white);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--current-domain,#287fc1) 10%,transparent);
}
.option-letter {
  width:39px; height:39px; display:grid; place-items:center; border-radius:12px;
  color:var(--current-domain,#287fc1); background:color-mix(in srgb,var(--current-domain,#287fc1) 12%,white);
  font-weight:900;
}
.option-card.is-selected .option-letter { color:white; background:var(--current-domain,#287fc1); }
.option-text { font-weight:680; line-height:1.3; }
.option-radio {
  width:23px; height:23px; border:2px solid #b7c7d9; border-radius:50%; position:relative;
}
.option-card.is-selected .option-radio { border-color:var(--current-domain,#287fc1); }
.option-card.is-selected .option-radio::after {
  content:""; position:absolute; inset:4px; border-radius:50%; background:var(--current-domain,#287fc1);
}

.answer-guidance {
  display:flex; gap:13px; align-items:flex-start; margin-top:11px; padding:10px 14px;
  border-radius:14px; background:color-mix(in srgb,var(--current-domain,#287fc1) 7%,white);
  color:#3f566e;
}
.answer-guidance svg { width:25px; min-width:25px; fill:none; stroke:var(--current-domain,#287fc1); stroke-width:1.8; }
.answer-guidance strong, .answer-guidance span { display:block; }
.answer-guidance strong { color:var(--current-domain,#287fc1); font-size:.88rem; }
.answer-guidance span { margin-top:2px; font-size:.79rem; }

.question-controls {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-top:13px;
}
.navigation-button { min-height:50px; }
.navigation-button:first-child { justify-self:start; background:white; border-color:#cfdbea; color:#35516f; }
.navigation-button:last-child { justify-self:end; min-width:170px; }
.navigation-button svg { width:19px; fill:none; stroke:currentColor; stroke-width:2.4; }
.review-link { border:0; background:transparent; color:#287fc1; font-weight:750; cursor:pointer; }

.insight-panel { position:sticky; top:112px; padding:20px 22px; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; }
.insight-heading { display:flex; gap:12px; align-items:center; padding-bottom:17px; border-bottom:1px solid #e3ebf4; }
.insight-heading > svg { width:27px; fill:none; stroke:#287fc1; stroke-width:1.8; }
.insight-heading span { display:block; color:#287fc1; font-size:.72rem; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.insight-heading h2 { margin:1px 0 0; font-size:1.1rem; }
.insight-card {
  display:grid; grid-template-columns:43px 1fr; gap:12px; align-items:start; padding:11px 0;
  border-bottom:1px solid #e6edf5;
}
.insight-icon {
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  color:var(--current-domain,#287fc1); background:color-mix(in srgb,var(--current-domain,#287fc1) 12%,white);
}
.insight-icon svg { width:23px; fill:none; stroke:currentColor; stroke-width:1.8; }
.purpose-icon { color:#18a8b8; background:#e8fbfc; }
.role-icon { color:#8a3ffc; background:#f2ebff; }
.growth-icon { color:#ff8500; background:#fff2df; }
.insight-label { display:block; color:#78879a; font-size:.72rem; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.insight-card strong { display:block; margin-top:2px; color:#193959; }
.insight-card p { margin:4px 0 0; color:#5d6d83; font-size:.82rem; line-height:1.42; }

.support-note {
  display:flex; gap:12px; margin-top:16px; padding:14px; border-radius:14px;
  color:#2f6c23; background:#effae9; border:1px solid #d5efc9;
}
.support-note svg { width:27px; min-width:27px; fill:none; stroke:#62a93b; stroke-width:1.8; }
.support-note strong { font-size:.86rem; }
.support-note p { margin:3px 0 0; font-size:.76rem; color:#4b6d45; }

.save-status {
  display:flex; justify-content:space-between; gap:16px; padding:11px 5px 0;
  color:#6d7d91; font-size:.78rem;
}
#saveIndicator::before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#62bf35; }

.review-dialog { width:min(900px,calc(100% - 28px)); max-height:88vh; }
.review-dialog-header p { margin:3px 0 0; color:#6d7d91; }
.review-summary {
  display:flex; justify-content:space-around; gap:15px; padding:18px 24px; background:#f5f9fd; border-bottom:1px solid #dce6f2;
}
.review-summary div { text-align:center; }
.review-summary strong { display:block; color:#0b4fa6; font-size:1.45rem; }
.review-summary span { color:#6d7d91; font-size:.76rem; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:22px; max-height:52vh; overflow:auto; }
.review-question {
  border:1px solid #dce6f2; border-left:5px solid var(--item-color,#287fc1); border-radius:13px;
  padding:12px; background:white; text-align:left; cursor:pointer;
}
.review-question:hover { box-shadow:0 7px 15px rgba(11,48,72,.08); }
.review-question span { display:block; color:#77879a; font-size:.7rem; }
.review-question strong { display:block; margin:3px 0; font-size:.84rem; }
.review-question em { font-style:normal; font-size:.74rem; color:#c06a00; }
.review-question.is-answered em { color:#39852a; }
.dialog-footer {
  display:flex; justify-content:space-between; gap:15px; padding:18px 22px; border-top:1px solid #dce6f2;
}

.message-dialog {
  width:min(470px,calc(100% - 28px)); border:0; border-radius:22px; padding:30px; text-align:center;
  box-shadow:0 30px 90px rgba(11,48,72,.28);
}
.message-dialog::backdrop, .review-dialog::backdrop { background:rgba(5,27,48,.56); backdrop-filter:blur(4px); }
.message-icon {
  width:58px; height:58px; margin:0 auto 13px; display:grid; place-items:center; border-radius:18px;
  background:#eaf5ff; color:#287fc1; font-size:1.5rem; font-weight:900;
}
.message-dialog h2 { margin:0; }
.message-dialog p { color:#5d6d83; }
.message-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:20px; }

@media (max-width:1100px) {
  .header-progress { width:300px; }
  .question-workspace { grid-template-columns:1fr; }
  .insight-panel { position:static; }
}
@media (max-width:850px) {
  .questionnaire-header .brand-box { min-width:100px; }
  .header-progress { position:absolute; left:18px; right:120px; bottom:-21px; width:auto; color:#284a69; }
  .header-progress .progress-track { background:#d8e5f2; }
  .questionnaire-main { margin-top:42px; width:min(100% - 24px,1450px); }
  .domain-navigation { grid-template-columns:repeat(5,180px); overflow:auto; padding-bottom:9px; }
  .review-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .questionnaire-header .product-title div span { display:none; }
  .save-button { display:none; }
  .course-context { align-items:flex-start; }
  .question-panel { padding:20px; }
  .question-heading { gap:13px; }
  .question-icon { width:50px; height:50px; min-width:50px; border-radius:15px; }
  .option-card { grid-template-columns:42px 1fr 23px; gap:10px; padding-right:12px; }
  .option-letter { width:39px; height:39px; }
  .question-controls { grid-template-columns:1fr 1fr; }
  .review-link { grid-column:1/-1; grid-row:1; }
  .navigation-button:first-child { grid-column:1; grid-row:2; }
  .navigation-button:last-child { grid-column:2; grid-row:2; min-width:0; }
  .review-grid { grid-template-columns:1fr; }
  .dialog-footer { flex-direction:column; }
}


@media (min-width:1101px) {
  .questionnaire-main { margin-top:14px; margin-bottom:18px; }
  .domain-navigation { margin:12px 0; }
  .course-context { min-height:50px; }
  .insight-heading { padding-bottom:12px; }
  .insight-card p { line-height:1.35; }
  .support-note { margin-top:11px; padding:11px; }
}
@media (max-width:1100px) {
  .question-workspace { --panel-height:auto; align-items:start; }
  .question-panel, .insight-panel { height:auto; overflow:visible; }
}

/* Stage 9.2 desktop/laptop refinement: keep all question controls visible and
   remove unnecessary depth from the section and question panels. */
@media (min-width:1101px) and (min-height:700px) {
  .questionnaire-header .header-main { min-height: 76px; height: 76px; }
  .questionnaire-header .brand-box { min-width: 170px; padding: 6px 18px; }
  .questionnaire-header .brand-box img { width: 92px; max-height: 54px; }
  .questionnaire-header .header-actions .button { min-height: 40px; padding: 0 16px; }
  .questionnaire-header .header-progress { width: min(410px, 32vw); }

  .questionnaire-main {
    width: min(1450px, calc(100% - 28px));
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .course-context {
    min-height: 44px;
    padding: 7px 14px;
    border-radius: 11px;
  }

  .question-workspace {
    --panel-height: calc(100vh - 208px);
    gap: 14px;
  }
  .question-panel, .insight-panel { border-radius: 18px; }
  .question-panel { padding: 16px 20px 13px; }
  .question-heading { gap: 13px; padding-bottom: 10px; }
  .question-icon {
    width: 50px; height: 50px; min-width: 50px; border-radius: 16px;
    font-size: 1.25rem;
  }
  .question-heading h1 { font-size: clamp(1.35rem, 1.75vw, 1.8rem); }
  .question-heading p { margin-top: 2px; font-size: .88rem; }

  .option-list { gap: 7px; margin-top: 10px; }
  .option-card {
    padding: 7px 12px 7px 9px;
    grid-template-columns: 43px 1fr 25px;
    gap: 11px;
    border-radius: 13px;
  }
  .option-letter { width: 35px; height: 35px; border-radius: 10px; }
  .option-radio { width: 21px; height: 21px; }

  .answer-guidance { margin-top: 8px; padding: 8px 12px; border-radius: 11px; }
  .question-controls { margin-top: 9px; }
  .navigation-button { min-height: 44px; }

  .insight-panel { top: 88px; padding: 16px 18px; }
  .insight-heading { padding-bottom: 10px; }
  .insight-card { grid-template-columns: 38px 1fr; gap: 10px; padding: 8px 0; }
  .insight-icon { width: 37px; height: 37px; border-radius: 10px; }
  .insight-card p { margin-top: 2px; font-size: .78rem; line-height: 1.28; }
  .support-note { margin-top: 8px; padding: 9px; }
  .save-status { padding-top: 6px; }
}
@media (min-width:1101px) and (min-height:700px) {
  .save-status { display: none; }
}