:root {
  --bg: #edf4f4;
  --panel: #ffffff;
  --ink: #14242b;
  --muted: #64767d;
  --line: #d8e4e6;
  --soft: #f6faf9;
  --blue: #0b6f8e;
  --teal: #15989d;
  --green: #2f8a4c;
  --orange: #e58419;
  --red: #cc3535;
  --shadow: 0 14px 34px rgba(25, 61, 68, 0.11);
}

body [hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, #e7f3f2 0, #f7faf9 360px),
    var(--bg);
  color: var(--ink);
  font-family: Arial, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 34px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(41, 78, 84, 0.06);
}

.brandLine {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.brandText {
  min-width: 0;
}

.logo {
  display: block;
  object-fit: contain;
}

.logoLongevity {
  width: 248px;
  max-height: 84px;
}

.partnerLogos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.partnerTextLogo {
  display: grid;
  gap: 3px;
  max-width: 320px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
  text-align: right;
}

.partnerTextLogo span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.partnerTextLogo small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.logoHospital {
  width: 116px;
  height: 82px;
  border-radius: 8px;
  background: #ffffff;
}

.logoMinistry {
  width: 220px;
  max-height: 76px;
  border-radius: 8px;
  background: #ffffff;
}

.eyebrow,
.sectionKicker {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

h1 {
  font-size: 32px;
  line-height: 1.1;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 17px;
}

.subtitle {
  margin: 8px 0 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 22px;
  padding: 28px;
  max-width: 1480px;
  margin: 0 auto;
}

.panel,
.resultPanel {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel {
  padding: 24px;
}

.resultPanel {
  align-self: start;
  padding: 22px;
}

.resultLogoWrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.resultLogoWrap img {
  width: 250px;
  max-width: 100%;
}

.section {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.section:first-child {
  padding-top: 0;
}

.introSection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
  border: 1px solid #cfe7e6;
  border-radius: 8px;
  padding: 20px;
  background: linear-gradient(135deg, #effafa 0%, #ffffff 72%);
}

.introSection h2 {
  color: #0b6f8e;
}

.introSection p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.introBenefits {
  display: grid;
  gap: 9px;
}

.introBenefits span {
  display: block;
  border: 1px solid #d8eeee;
  border-radius: 6px;
  background: #ffffff;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.patientQuickPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
  border: 1px solid #cfe7e6;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(25, 61, 68, 0.06);
}

.patientQuickPanel h3 {
  color: var(--blue);
}

.patientQuickPanel p:not(.sectionKicker) {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.patientQuickActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.quickActionButton,
.scrollSubmitButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid #b8dfe0;
  border-radius: 6px;
  background: #f4fbfa;
  color: var(--blue);
  padding: 9px 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.quickActionButton.accent {
  border-color: #b7d7c2;
  background: #f4fbf6;
  color: var(--green);
}

.patientSection {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 20px 20px;
  background: #ffffff;
}

.tone-base {
  --test-color: #0b6f8e;
  --test-soft: #edf8fb;
  --test-tint: rgba(11, 111, 142, 0.1);
}

.patientSection .sectionBadge {
  border-color: color-mix(in srgb, var(--test-color) 34%, white);
  background: var(--test-soft);
  color: var(--test-color);
}

.patientSection .sectionKicker,
.patientSection h2 {
  color: var(--test-color);
}

.sectionNote {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.45;
}

.baseGroup {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.baseGroup:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.baseGroup h3 {
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--test-color) 48%, var(--ink));
}

.baseGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.baseField {
  display: grid;
  gap: 7px;
}

.baseLabel {
  color: var(--muted);
  font-size: 14px;
}

.baseRadio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wideField {
  grid-column: 1 / -1;
}

.testSection {
  position: relative;
  margin: 22px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 20px 20px;
  background: #ffffff;
  overflow: hidden;
}

.testSection::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--test-color);
}

.testSection::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--test-tint), rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

.testSection > * {
  position: relative;
  z-index: 1;
}

.tone-stress {
  --test-color: #d96c2c;
  --test-soft: #fff4ed;
  --test-tint: rgba(217, 108, 44, 0.12);
}

.tone-mood {
  --test-color: #7b5fc9;
  --test-soft: #f4f0ff;
  --test-tint: rgba(123, 95, 201, 0.12);
}

.tone-sleep {
  --test-color: #2677b8;
  --test-soft: #edf6ff;
  --test-tint: rgba(38, 119, 184, 0.12);
}

.tone-nutrition {
  --test-color: #3a9b5f;
  --test-soft: #eef9f1;
  --test-tint: rgba(58, 155, 95, 0.12);
}

.tone-san {
  --test-color: #b06f18;
  --test-soft: #fff7e8;
  --test-tint: rgba(176, 111, 24, 0.12);
}

.tone-quality {
  --test-color: #0f8d7e;
  --test-soft: #edf9f7;
  --test-tint: rgba(15, 141, 126, 0.12);
}

.tone-profile {
  --test-color: #496f25;
  --test-soft: #f2f8eb;
  --test-tint: rgba(73, 111, 37, 0.12);
}

.sectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.sectionBadge {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  background: var(--soft);
  font-size: 13px;
  font-weight: 700;
}

.testSection .sectionBadge {
  border-color: color-mix(in srgb, var(--test-color) 34%, white);
  background: var(--test-soft);
  color: var(--test-color);
}

.testSection .sectionKicker {
  color: var(--test-color);
}

.testSection h2 {
  color: color-mix(in srgb, var(--test-color) 42%, var(--ink));
}

.testIntro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 14px;
}

.testDescription,
.legendCard {
  border: 1px solid color-mix(in srgb, var(--test-color) 18%, var(--line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  padding: 14px;
}

.testDescription {
  box-shadow: inset 4px 0 0 var(--test-color);
}

.testDescription p,
.legendCard p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.legendCard h3 {
  margin-bottom: 10px;
  color: var(--ink);
}

.patientHelp {
  margin: 0 0 16px;
  border: 1px solid color-mix(in srgb, var(--test-color) 24%, #cde8e5);
  border-radius: 8px;
  background: var(--test-soft);
  padding: 14px;
}

.patientHelp h3 {
  margin-bottom: 10px;
  color: var(--ink);
}

.helpScale {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.helpScale span {
  display: block;
  border: 1px solid color-mix(in srgb, var(--test-color) 18%, #d8ece9);
  border-radius: 6px;
  background: #ffffff;
  padding: 9px 10px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.legendRows {
  display: grid;
  gap: 8px;
}

.legendRow {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 9px;
  align-items: start;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 3px;
}

.dot.green {
  background: var(--green);
}

.dot.orange {
  background: var(--orange);
}

.dot.red {
  background: var(--red);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 11px;
  color: var(--ink);
  background: #ffffff;
  font-size: 16px;
  font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(11, 111, 142, 0.14);
}

textarea {
  resize: vertical;
}

.questionList {
  display: grid;
  gap: 10px;
}

.questionGroup {
  margin-top: 18px;
}

.questionGroup h3 {
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--test-color) 48%, var(--ink));
}

.question {
  display: grid;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  border: 1px solid #e4ecee;
  border-radius: 8px;
  background: #ffffff;
}

.testSection .question {
  border-color: color-mix(in srgb, var(--test-color) 14%, #e4ecee);
}

.testSection .question:hover {
  background: color-mix(in srgb, var(--test-soft) 48%, white);
}

.questionText {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
}

.scaleQuestionText {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.scaleQuestionText span:last-child {
  text-align: right;
}

.questionNumber {
  color: color-mix(in srgb, var(--test-color) 72%, var(--ink));
}

.options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.options.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.options.wide {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.options.sanScale {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.option {
  display: block;
}

.option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option span {
  display: grid;
  min-height: 46px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  color: var(--ink);
  background: #f9fbfc;
  text-align: center;
  font-size: 13px;
  line-height: 1.25;
  cursor: pointer;
}

.option b {
  font-size: 14px;
}

.option small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}

.option input:checked + span {
  border-color: var(--test-color, var(--blue));
  background: var(--test-soft, #e6f4f8);
  box-shadow: inset 0 0 0 1px var(--test-color, var(--blue));
  font-weight: 700;
}

.option input:checked + span small {
  color: color-mix(in srgb, var(--test-color) 72%, var(--ink));
}

.primary,
.download {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.primary {
  margin-top: 24px;
  box-shadow: 0 10px 20px rgba(11, 111, 142, 0.2);
}

.scrollSubmitButton {
  width: 100%;
  margin-top: 20px;
  background: #ffffff;
}

.consentSection {
  margin-top: 22px;
  border: 1px solid #cfe7e6;
  border-radius: 8px;
  background: #f6fbfb;
  padding: 16px;
}

.consentCheck {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

.consentCheck + .consentCheck {
  margin-top: 14px;
  border-top: 1px solid #dceced;
  padding-top: 14px;
}

.consentCheck input {
  width: 20px;
  min-height: 20px;
  margin-top: 2px;
  accent-color: var(--blue);
}

.download {
  display: grid;
  place-items: center;
  margin-top: 16px;
  text-decoration: none;
}

.completionLayout {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px;
}

.completionPanel {
  display: grid;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  padding: 26px;
}

.completionLogoWrap {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.completionLogoWrap img {
  width: 260px;
  max-width: 100%;
}

.completionHero {
  display: grid;
  gap: 10px;
  border: 1px solid #cfe7e6;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #effafa 0%, #ffffff 76%);
  padding: 22px;
}

.completionBadge {
  justify-self: start;
  border-radius: 999px;
  background: #e7f6f5;
  color: var(--green);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.completionHero h2 {
  color: var(--blue);
  font-size: 26px;
  line-height: 1.18;
}

.completionHero p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.completionActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.completionDownload {
  margin-top: 0;
}

.bookingNotice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: center;
  border: 2px solid #bfdcde;
  border-radius: 8px;
  background: #fbfefe;
  padding: 18px;
}

.bookingNotice ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding-left: 22px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.bookingNotice li::marker {
  color: var(--blue);
}

.bookingNotice a {
  color: var(--blue);
  font-weight: 800;
}

.bookingQrBox {
  display: grid;
  justify-items: center;
  gap: 6px;
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

.bookingQrBox img {
  width: 118px;
  height: 118px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.bookingQrBox span {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.completionInfo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.completionInfo div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbfb;
  padding: 12px;
}

.completionInfo span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.completionInfo strong,
.completionInfo a {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}

.nextVisitPanel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #cfe7e6;
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: #f6fbfb;
}

.nextVisitPanel h3 {
  margin: 0 0 6px;
  color: var(--ink);
}

.nextVisitPanel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.qrPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #d8e4e6;
  border-radius: 8px;
  background: #f8fbfb;
}

.qrPanel h3 {
  margin: 0 0 6px;
  color: var(--ink);
}

.qrPanel img {
  width: 132px;
  height: 132px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: #ffffff;
}

.qrGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.compactQr {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr) 108px;
}

.compactQr img {
  width: 108px;
  height: 108px;
}

.qrLink {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
  border-radius: 6px;
  color: var(--blue);
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.detailActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.smallDownload {
  display: inline-grid;
  min-height: 38px;
  place-items: center;
  border-radius: 6px;
  background: var(--blue);
  color: #ffffff;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.passportDownload {
  background: var(--green);
}

.prepDownload {
  background: #edf8fb;
  color: var(--blue);
  border: 1px solid #b9d9dc;
}

.internalNumberLine {
  margin: 6px 0 0;
  font-weight: 700;
  color: var(--blue);
}

.dangerButton {
  min-height: 38px;
  border: 1px solid #edb7b7;
  border-radius: 6px;
  background: #fff0f0;
  color: #9d2222;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.dangerButton:hover {
  background: #ffe5e5;
  border-color: #cc3535;
}

.ghostButton {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.muted {
  color: var(--muted);
  line-height: 1.45;
}

.warning {
  border: 1px solid #f0c27a;
  border-radius: 6px;
  padding: 12px;
  background: #fff7e8;
  color: #6d4300;
}

.miniLegend {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.miniLegend div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary {
  display: grid;
  gap: 12px;
}

.resultMetaLine {
  margin: 0;
}

.patientResultOverview {
  display: grid;
  gap: 12px;
  border: 1px solid #cfe1e4;
  border-left: 6px solid var(--blue);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.patientResultOverview.zoneOverview-green {
  border-left-color: var(--green);
  background: linear-gradient(135deg, #f2fbf5 0%, #ffffff 74%);
}

.patientResultOverview.zoneOverview-orange {
  border-left-color: var(--orange);
  background: linear-gradient(135deg, #fff7ea 0%, #ffffff 74%);
}

.patientResultOverview.zoneOverview-red {
  border-left-color: var(--red);
  background: linear-gradient(135deg, #fff3f3 0%, #ffffff 74%);
}

.patientResultHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 14px;
  align-items: center;
}

.patientResultHero h3 {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.18;
}

.patientResultHero p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.resultZoneBadge {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 112px;
  border: 1px solid #d8e4e6;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.resultZoneBadge span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.resultZoneBadge strong {
  color: var(--ink);
  font-size: 34px;
  line-height: 1;
}

.resultZoneBadge small {
  color: var(--muted);
  font-size: 12px;
}

.resultMetricGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.resultMetric {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.resultMetric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.resultMetric strong {
  font-size: 24px;
  line-height: 1;
}

.metric-green strong {
  color: var(--green);
}

.metric-orange strong {
  color: var(--orange);
}

.metric-red strong {
  color: var(--red);
}

.resultPriorityBox,
.resultNextSteps {
  display: grid;
  gap: 8px;
  border: 1px solid #d8e4e6;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.resultPriorityBox b,
.resultNextSteps b {
  color: var(--ink);
}

.resultPriorityBox p,
.resultNextSteps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.priorityScaleList {
  display: grid;
  gap: 7px;
}

.priorityScale {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange);
  border-radius: 8px;
  background: #fffaf2;
  padding: 9px 10px;
}

.priorityScale.priority-red {
  border-left-color: var(--red);
  background: #fff6f6;
}

.priorityScale span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.priorityScale strong {
  color: var(--ink);
  font-size: 14px;
}

.priorityScale small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.scaleCardsSection {
  display: grid;
  gap: 12px;
}

.resultSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.resultSectionHead h3 {
  color: var(--blue);
}

.resultSectionHead span {
  border-radius: 999px;
  background: #edf8fb;
  color: var(--blue);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.scaleCardsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.scaleCard {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.scaleCard-orange {
  border-left-color: var(--orange);
  background: #fffaf2;
}

.scaleCard-red {
  border-left-color: var(--red);
  background: #fff6f6;
}

.scaleCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.scaleCardTop span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.scaleCardTop strong {
  color: var(--ink);
  font-size: 14px;
}

.scaleCard h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.scaleCard p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.scaleCardBar {
  height: 9px;
}

.zone {
  border-radius: 6px;
  padding: 14px;
  color: #ffffff;
  font-weight: 700;
}

.zone.green {
  background: var(--green);
}

.zone.orange {
  background: var(--orange);
}

.zone.red {
  background: var(--red);
}

.scale {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.scaleHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-weight: 700;
}

.bar {
  height: 12px;
  border-radius: 999px;
  background: #e7edf0;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
}

.bar .green {
  background: var(--green);
}

.bar .orange {
  background: var(--orange);
}

.bar .red {
  background: var(--red);
}

.recommendationPanel {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.recommendationPanel h3 {
  color: var(--blue);
}

.compactRecommendationPanel {
  border-top: 0;
  padding-top: 0;
}

.recommendationCard {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.recommendationCard.zoneMarker-orange {
  border-left-color: var(--orange);
  background: #fffaf2;
}

.recommendationCard.zoneMarker-red {
  border-left-color: var(--red);
  background: #fff6f6;
}

.recommendationHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.recommendationHead span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}

.recommendationCard.zoneMarker-orange .recommendationHead span {
  background: #fff0dc;
  color: #9c5107;
}

.recommendationCard.zoneMarker-red .recommendationHead span {
  background: #ffe5e5;
  color: #9d2222;
}

.recommendationCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.recommendationDirection {
  display: grid;
  gap: 5px;
}

.recommendationDirection b {
  color: var(--ink);
  font-size: 13px;
}

.recommendationDirection ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.generalLifestylePanel {
  border-radius: 8px;
  border: 1px solid #cfe7e6;
  background: linear-gradient(135deg, #f4fbfa 0%, #ffffff 84%);
  padding: 14px;
}

.lifestyleCategory {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.lifestyleCategory:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.lifestyleCategory b {
  color: var(--blue);
  font-size: 13px;
}

.lifestyleCategory ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.doctorLayout {
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px;
}

.doctorLayout.loginOnly {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
}

.doctorLogin {
  max-width: 520px;
  margin: 28px auto;
  padding: 24px;
}

.doctorLayout.loginOnly .doctorLogin {
  width: min(420px, 100%);
  margin: 0;
  padding: 32px;
  box-shadow: 0 22px 60px rgba(38, 71, 78, .12);
}

.doctorLogin h2 {
  margin-bottom: 20px;
  text-align: center;
}

.loginForm {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.loginForm label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
}

.loginForm input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 14px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}

.loginForm input:focus {
  outline: 3px solid rgba(30, 134, 143, .15);
  border-color: var(--teal);
}

.loginHelpButton {
  justify-self: center;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 4px;
}

.loginHelpButton:hover,
.loginHelpButton:focus-visible {
  color: var(--blue);
  text-decoration: underline;
}

.loginHelpContacts {
  display: grid;
  gap: 4px;
  justify-items: center;
  margin-top: -4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f2fbf8;
  color: var(--ink);
}

.loginHelpContacts a {
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;
}

.calculatedClinicalField input[readonly] {
  background: #eef8f6;
  color: var(--ink);
  font-weight: 800;
}

.smallText {
  font-size: 13px;
}

.doctorCabinet {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
}

.doctorSidebar {
  display: grid;
  align-self: start;
  gap: 16px;
}

.recordsPanel,
.detailPanel {
  padding: 20px;
}

.recordsList {
  display: grid;
  gap: 10px;
  max-height: 510px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #9ccfd1 #ecf5f5;
}

.recordsList::-webkit-scrollbar {
  width: 8px;
}

.recordsList::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #ecf5f5;
}

.recordsList::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #9ccfd1;
}

.statsPanel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.doctorSidebar .feedbackInbox,
.doctorSidebar .statsPanel {
  margin-top: 0;
}

.doctorSidebar .statsPanel {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.statsHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.statsHeadActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.statsHead h3 {
  color: var(--ink);
}

.statsDateLabel {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid #c8e5e4;
  border-radius: 999px;
  background: #f3fbfa;
  color: var(--blue);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.statsPanelBody {
  display: grid;
  gap: 12px;
}

.statHero {
  position: relative;
  display: grid;
  gap: 3px;
  overflow: hidden;
  border: 1px solid #cbe8e5;
  border-radius: 8px;
  background:
    radial-gradient(circle at right top, rgba(47, 138, 76, 0.17), transparent 42%),
    linear-gradient(135deg, #f0fbfa 0%, #ffffff 72%);
  padding: 15px;
}

.statHero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--teal), var(--green));
}

.statHero span,
.statTile span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.statHero strong {
  color: var(--ink);
  font-size: 36px;
  line-height: 1;
}

.statHero small,
.statTile small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.statGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.statTile {
  display: grid;
  gap: 4px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 11px;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
}

button.statTile {
  appearance: none;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

button.statTile:hover,
button.statTile:focus-visible {
  transform: translateY(-1px);
  border-color: #8fcfd0;
  box-shadow: 0 8px 20px rgba(42, 77, 87, 0.12);
  outline: none;
}

.statTile strong {
  font-size: 25px;
  line-height: 1;
}

.urgentMetric {
  box-shadow: inset 0 0 0 1px rgba(195, 57, 57, 0.18);
}

.stat-red {
  border-color: #f0c4c4;
  background: #fff7f7;
}

.stat-red strong {
  color: var(--red);
}

.stat-orange {
  border-color: #f2d1a4;
  background: #fff8ee;
}

.stat-orange strong {
  color: var(--orange);
}

.stat-green {
  border-color: #bfdfc9;
  background: #f5fbf6;
}

.stat-green strong {
  color: var(--green);
}

.stat-blue {
  border-color: #bdd9e1;
  background: #f3f9fb;
}

.stat-blue strong {
  color: var(--blue);
}

.zoneDistribution {
  display: grid;
  gap: 9px;
  border: 1px solid #d7e6e8;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.zoneDistributionHead,
.zoneLegend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.zoneDistributionHead b {
  font-size: 13px;
}

.zoneDistributionHead span,
.zoneLegend {
  color: var(--muted);
  font-size: 12px;
}

.zoneBarStack {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eff0;
}

.zonePart {
  display: block;
  min-width: 0;
  height: 100%;
}

.zonePart.green,
.zoneLegend i.green {
  background: var(--green);
}

.zonePart.orange,
.zoneLegend i.orange {
  background: var(--orange);
}

.zonePart.red,
.zoneLegend i.red {
  background: var(--red);
}

.zoneLegend {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.zoneLegend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.zoneLegend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.statNotice {
  display: grid;
  gap: 4px;
  border: 1px solid #cbe4d2;
  border-radius: 8px;
  background: #f5fbf6;
  padding: 11px;
  color: #245f38;
  font-size: 13px;
  line-height: 1.35;
}

.statNotice.hasBlocked {
  border-color: #efc4c4;
  background: #fff7f7;
  color: #913232;
}

.statNotice span {
  color: inherit;
  opacity: 0.86;
}

.statsDrilldown {
  display: grid;
  gap: 8px;
  border: 1px solid #d7e6e8;
  border-radius: 8px;
  background: #ffffff;
  padding: 11px;
}

.statsDrilldownHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.statsDrilldownHead b {
  color: var(--ink);
  font-size: 13px;
}

.statsDrilldownHead span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.statsPatientList {
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
}

.statsPatientButton {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid #d7e6e8;
  border-radius: 8px;
  background: #f8fbfb;
  padding: 8px;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.statsPatientButton:hover,
.statsPatientButton:focus-visible {
  border-color: #9ccfd1;
  background: #eef9f7;
  outline: none;
}

.statsPatientButton strong {
  font-size: 13px;
}

.statsPatientButton span {
  color: var(--muted);
  font-size: 12px;
}

.scrollTopButton {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid #9ccfd1;
  border-radius: 999px;
  background: #0b6f8e;
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(42, 77, 87, 0.22);
  font-family: inherit;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}

.scrollTopButton.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scrollTopButton:hover,
.scrollTopButton:focus-visible {
  background: #095a73;
  box-shadow: 0 14px 30px rgba(42, 77, 87, 0.28);
  outline: none;
}

.workflowGuide {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.workflowHead,
.workflowProgressText {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workflowHead h3 {
  color: var(--ink);
}

.miniGhostButton {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.miniGhostButton:hover {
  border-color: #8fcdd1;
  color: var(--blue);
}

.workflowProgress {
  display: grid;
  gap: 7px;
  border: 1px solid #cfe7e6;
  border-radius: 8px;
  background: linear-gradient(135deg, #f4fbfa 0%, #ffffff 82%);
  padding: 11px;
}

.workflowProgressText span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.workflowProgressText b {
  color: var(--blue);
  font-size: 13px;
}

.workflowProgressBar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2edef;
}

.workflowProgressBar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--green));
  transition: width 0.2s ease;
}

.workflowStage {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.workflowStage summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 11px;
  cursor: pointer;
  list-style: none;
}

.workflowStage summary::-webkit-details-marker {
  display: none;
}

.workflowStage summary::after {
  content: "+";
  margin-left: auto;
  color: var(--blue);
  font-size: 18px;
  font-weight: 700;
}

.workflowStage[open] summary::after {
  content: "-";
}

.workflowStage summary > span:last-of-type {
  font-weight: 700;
}

.workflowBadge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e7f6f5;
  color: var(--blue);
  font-weight: 700;
}

.workflowBadge.accent {
  background: #fff0dc;
  color: #9c5107;
}

.workflowSteps {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 11px;
}

.workflowSteps label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-height: auto;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.workflowSteps input {
  width: 17px;
  height: 17px;
  min-height: auto;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--teal);
}

.workflowSteps label:has(input:checked) {
  color: var(--green);
  font-weight: 700;
}

.workflowHint {
  display: grid;
  gap: 4px;
  border: 1px solid #f2c58b;
  border-radius: 8px;
  background: #fff7ea;
  padding: 10px 11px;
  color: #744006;
  font-size: 13px;
  line-height: 1.35;
}

.workflowHint b {
  color: #744006;
}

.searchBox {
  margin-bottom: 14px;
}

.recordFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 12px;
}

.recordFilter {
  min-height: 30px;
  border: 1px solid #cfe1e4;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  padding: 5px 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.recordFilter:hover,
.recordFilter.active {
  border-color: #9ccfd1;
  background: #eef9f7;
  color: var(--blue);
}

.recordItem {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.recordItem.zoneMarker-green {
  border-left-color: var(--green);
}

.recordItem.zoneMarker-orange {
  border-left-color: var(--orange);
}

.recordItem.zoneMarker-red {
  border-left-color: var(--red);
  background: #fff6f6;
}

.recordItem.zoneMarker-red strong::after {
  content: "  Красная зона";
  display: inline-block;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--red);
  color: #ffffff;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}

.recordItem:hover,
.recordItem.active {
  background: #eef9f7;
  border-color: #acdeda;
}

.recordItem span,
.recordItem em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.recordBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}

.recordBadge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.badge-red {
  background: #ffe5e5;
  color: #9d2222;
}

.badge-orange {
  background: #fff1d8;
  color: #8c4c08;
}

.badge-green {
  background: #e5f6eb;
  color: #226d3a;
}

.badge-blue {
  background: #e7f6f8;
  color: var(--blue);
}

.badge-gray {
  background: #eef3f7;
  color: #53666f;
}

.emptyDetail {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 24px;
  background: var(--soft);
}

.patientCardHead {
  position: relative;
  margin: -4px -4px 16px;
  border: 1px solid #cfe1e4;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(11, 111, 142, 0.11), rgba(255, 255, 255, 0.92) 54%),
    #ffffff;
  padding: 16px;
}

.patientCardHead h2 {
  margin-bottom: 4px;
  color: var(--ink);
}

.doctorSectionMap {
  position: sticky;
  top: 10px;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  border: 1px solid #d7e6e8;
  border-radius: 8px;
  background: #f7fbfb;
  padding: 10px;
}

.patientStatusStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.mapChip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--chip-line, #cfe1e4);
  border-radius: 999px;
  background: var(--chip-bg, #ffffff);
  color: var(--chip-color, var(--ink));
  padding: 5px 10px;
  appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mapChip:hover,
.mapChip:focus-visible {
  border-color: var(--chip-color, var(--ink));
  box-shadow: 0 6px 18px rgba(42, 77, 87, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.sectionPulse {
  animation: sectionPulse 1.8s ease;
}

.chip-admission {
  --chip-bg: #edf8f0;
  --chip-line: #badfc6;
  --chip-color: #226d3a;
}

.chip-results {
  --chip-bg: #edf8fb;
  --chip-line: #b9d9dc;
  --chip-color: var(--blue);
}

.chip-form {
  --chip-bg: #eef9f7;
  --chip-line: #b9d9dc;
  --chip-color: #0f7f78;
}

.chip-tests {
  --chip-bg: #fff7ea;
  --chip-line: #f2c58b;
  --chip-color: #9a520e;
}

.chip-bioage {
  --chip-bg: #edf8f0;
  --chip-line: #badfc6;
  --chip-color: var(--green);
}

.chip-stage2 {
  --chip-bg: #fff0f0;
  --chip-line: #edb7b7;
  --chip-color: var(--red);
}

.chip-conclusion {
  --chip-bg: #eef3f7;
  --chip-line: #c9d8df;
  --chip-color: #314b5a;
}

.doctorSection {
  --section-accent: var(--blue);
  --section-soft: #f7fbfb;
  --section-line: #d7e6e8;
  position: relative;
  margin-top: 18px;
  border: 1px solid var(--section-line);
  border-left: 6px solid var(--section-accent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--section-soft) 0, #ffffff 82px),
    #ffffff;
  padding: 16px;
}

.doctorActionPanel {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  border: 1px solid #cfe7e6;
  border-left: 6px solid var(--blue);
  border-radius: 8px;
  background:
    linear-gradient(135deg, #f4fbfa 0%, #ffffff 78%),
    #ffffff;
  padding: 14px;
}

.doctorActionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.doctorActionHead span,
.routeAssistantBox span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.doctorActionHead strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 18px;
}

.doctorActionHead small {
  border-radius: 999px;
  background: #e7f6f5;
  color: var(--blue);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.doctorActionList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.doctorActionItem {
  display: grid;
  gap: 4px;
  min-height: 70px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.doctorActionItem:hover {
  border-color: #9ccfd1;
  box-shadow: 0 8px 18px rgba(25, 61, 68, 0.1);
}

.doctorActionItem span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.doctorActionItem.action-red {
  border-left-color: var(--red);
  background: #fff7f7;
}

.doctorActionItem.action-orange {
  border-left-color: var(--orange);
  background: #fffaf1;
}

.doctorActionItem.action-green {
  border-left-color: var(--green);
  background: #f3fbf5;
}

@keyframes sectionPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(11, 111, 142, 0.28);
  }
  45% {
    box-shadow: 0 0 0 6px rgba(11, 111, 142, 0.16);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(11, 111, 142, 0);
  }
}

.doctorSection:first-child {
  margin-top: 0;
}

.section-results {
  --section-accent: #0b6f8e;
  --section-soft: #f1f9fb;
  --section-line: #c7dde3;
}

.section-documents {
  --section-accent: #576c7a;
  --section-soft: #f3f7f8;
  --section-line: #d4e0e4;
}

.section-recommendations {
  --section-accent: #6d7d2f;
  --section-soft: #f5f9ef;
  --section-line: #d6e4bf;
}

.section-form {
  --section-accent: #0f8d7e;
  --section-soft: #eff9f7;
  --section-line: #c9e5e0;
}

.section-tests {
  --section-accent: #b06f18;
  --section-soft: #fff8ed;
  --section-line: #efd2a0;
}

.section-bioage {
  --section-accent: #2f8a4c;
  --section-soft: #f0f8f2;
  --section-line: #c8e1cf;
}

.section-stage2 {
  --section-accent: #cc3535;
  --section-soft: #fff4f0;
  --section-line: #edc1b7;
}

.section-mechanisms {
  --section-accent: #6c5b9f;
  --section-soft: #f5f3fb;
  --section-line: #d7cee9;
}

.section-plan {
  --section-accent: #2d6f8a;
  --section-soft: #f1f8fb;
  --section-line: #c8dfe7;
}

.section-conclusion {
  --section-accent: #314b5a;
  --section-soft: #f3f7f8;
  --section-line: #cbd8dd;
}

.doctorSectionTitle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin-bottom: 14px;
}

.doctorSectionTitle > span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--section-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.doctorSectionTitle h3 {
  margin: 0;
  color: color-mix(in srgb, var(--section-accent) 54%, var(--ink));
  font-size: 20px;
  line-height: 1.2;
}

.doctorSectionTitle p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.curtainSection {
  padding: 0;
  overflow: hidden;
}

.curtainSection summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, var(--section-soft) 0%, #ffffff 82%);
  color: var(--ink);
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.curtainSection summary::-webkit-details-marker {
  display: none;
}

.curtainSection summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--section-accent);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.curtainSection[open] summary::after {
  content: "-";
}

.curtainSection summary span {
  font-size: 16px;
  font-weight: 700;
  color: color-mix(in srgb, var(--section-accent) 48%, var(--ink));
}

.curtainSection summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.curtainBody {
  border-top: 1px solid var(--section-line);
  padding: 14px 15px 15px;
}

.doctorScale {
  margin-top: 10px;
  border: 1px solid #d8e4e6;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  padding: 12px;
}

.kvGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kvGrid div,
.bioCard div {
  border: 1px solid #d9e5e7;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
}

.kvGrid div.yesAlertCell {
  border-color: #edb7b7;
  border-left: 5px solid var(--red);
  background: #fff0f0;
}

.kvGrid div.yesAlertCell span {
  color: #9d2222;
}

.kvGrid div.yesAlertCell strong {
  color: #9d2222;
}

.kvGrid span,
.bioCard span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

.kvGrid strong,
.bioCard strong {
  color: var(--ink);
  font-size: 15px;
  word-break: break-word;
}

.clinicalForm {
  display: grid;
  gap: 10px;
}

.clinicalForm .baseGroup {
  margin-top: 4px;
  border: 1px solid #d9e5e7;
  border-left: 5px solid color-mix(in srgb, var(--section-accent, var(--teal)) 72%, #ffffff);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  padding: 14px;
}

.clinicalForm .baseGroup + .baseGroup {
  margin-top: 10px;
}

.clinicalForm .baseGroup h3 {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: var(--section-soft, #f4fbfa);
  color: color-mix(in srgb, var(--section-accent, var(--blue)) 56%, var(--ink));
  padding: 5px 10px;
  font-size: 15px;
}

.bioCard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-radius: 8px;
  padding: 12px;
}

.bioCard p {
  grid-column: 1 / -1;
  margin: 0;
  line-height: 1.45;
}

.bioCard.zone-green {
  background: #edf8f0;
  border: 1px solid #badfc6;
}

.bioCard.zone-orange {
  background: #fff5e8;
  border: 1px solid #f2c58b;
}

.bioCard.zone-red {
  background: #fff0f0;
  border: 1px solid #edb7b7;
}

.clinicalField {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.clinicalFieldLabel {
  display: inline;
  gap: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.autoSourceNote {
  display: inline-block;
  border: 1px solid #f2c58b;
  border-radius: 999px;
  background: #fff7ea;
  color: #744006;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.bmiCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--muted);
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 10px;
}

.bmiCard span {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.bmiCard strong {
  color: #ffffff;
  font-size: 19px;
  line-height: 1;
}

.bmiCard small,
.bmiCard em {
  color: rgba(255, 255, 255, 0.94);
  font-style: normal;
  line-height: 1.25;
}

.bmiCard small {
  font-size: 12px;
  font-weight: 700;
}

.bmiCard em {
  grid-column: 1 / -1;
  font-size: 12px;
}

.bmi-empty {
  background: #f6faf9;
  border-left-color: var(--muted);
}

.bmi-empty span,
.bmi-empty strong,
.bmi-empty small,
.bmi-empty em {
  color: var(--muted);
}

.bmi-underweight {
  background: #aabd24;
  border-left-color: #899b0d;
}

.bmi-normal {
  background: #61bf23;
  border-left-color: #3f8d16;
}

.bmi-overweight {
  background: #f2b600;
  border-left-color: #c58b00;
}

.bmi-obesity1 {
  background: #f58200;
  border-left-color: #bd5f00;
}

.bmi-obesity2 {
  background: #f24b00;
  border-left-color: #b83500;
}

.bmi-obesity3 {
  background: #d7333f;
  border-left-color: #9d2222;
}

.fieldLabelRow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.tooltipWrap {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
}

.normTooltip {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #b9d9dc;
  border-radius: 50%;
  background: #eef9f7;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  font-family: inherit;
}

.tooltipBubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: none;
  width: min(340px, 78vw);
  transform: translateX(-50%);
  border: 1px solid #b9d9dc;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(25, 61, 68, 0.16);
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
}

.tooltipBubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -5px) rotate(45deg);
  border-right: 1px solid #b9d9dc;
  border-bottom: 1px solid #b9d9dc;
  background: #ffffff;
}

.tooltipBubble span {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.tooltipBubble span + span {
  margin-top: 5px;
}

.tooltipWrap.open .tooltipBubble {
  display: block;
}

.smartSupportGrid {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
  gap: 10px;
  margin: 10px 0;
}

.smartSupportGrid.section-admission {
  border: 1px solid #c8e1cf;
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #f3faf5 0, #ffffff 58px),
    #ffffff;
  padding: 10px;
}

.smartCard {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.compactEligibilityCard,
.compactMissingCard {
  align-content: start;
}

.smart-green {
  border-left-color: var(--green);
  background: #f2fbf5;
}

.smart-orange {
  border-left-color: var(--orange);
  background: #fff8ec;
}

.smart-red {
  border-left-color: var(--red);
  background: #fff3f3;
}

.smartCardHead {
  display: grid;
  gap: 1px;
}

.smartCardHead span,
.carePlanCard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.smartCardHead b {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.smartCard p,
.smartCard ul,
.draftConclusionBox p,
.mechanismCard p,
.mechanismCard em,
.carePlanCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.compactSupportText {
  font-size: 13px;
}

.eligibilityAlertList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.eligibilityAlertList span {
  border: 1px solid #edb7b7;
  border-radius: 999px;
  background: #fff8f8;
  color: #9f2f2f;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.smartCard ul,
.carePlanCard ul,
.careTasks {
  padding-left: 18px;
}

.missingActionList {
  display: grid;
  gap: 7px;
}

.eligibilityChecklist {
  display: grid;
  gap: 7px;
}

.eligibilityChecklist .muted {
  margin: 0;
  font-size: 13px;
}

.eligibilityCompactList {
  display: grid;
  gap: 4px;
}

.eligibilityCheck {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  padding: 6px 7px;
  color: var(--ink);
  cursor: pointer;
}

.eligibilityCheck:hover {
  border-color: #b9d9dc;
  background: #f8fcfc;
}

.eligibilityCheck.checkedRisk {
  border-color: #edb7b7;
  background: #fff0f0;
}

.eligibilityCheck input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--red);
}

.eligibilityCheck span {
  font-size: 13px;
  line-height: 1.25;
}

.eligibilityNotes {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.eligibilityNotes summary {
  width: max-content;
  color: var(--blue);
  cursor: pointer;
}

.eligibilityNotes textarea {
  margin-top: 6px;
  resize: vertical;
}

.compactSaveButton {
  min-height: 38px;
  padding: 8px 12px;
}

.dataControlSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.dataControlSummary span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  padding: 4px 8px;
}

.dataControlSummary .summaryWarn {
  border-color: #efc779;
  background: #fff4df;
  color: #9a5709;
  font-weight: 900;
}

.dataControlSummary .summaryOk {
  border-color: #bddfca;
  background: #eefaf2;
  color: #207944;
  font-weight: 900;
}

.missingDataTable {
  display: grid;
  gap: 3px;
}

.missingTableHead,
.missingTableRow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 82px 108px 78px;
  gap: 8px;
  align-items: center;
}

.missingTableHead {
  padding: 0 9px 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.missingJump {
  width: 100%;
  border: 1px solid #efd2a0;
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  padding: 7px 9px;
  text-align: left;
  cursor: pointer;
}

.missingJump:hover {
  border-color: var(--orange);
  box-shadow: 0 8px 18px rgba(229, 132, 25, 0.12);
}

.missingJump small {
  color: var(--muted);
}

.missingTitle {
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missingTag,
.missingReason,
.missingActionText {
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missingTag {
  background: #eef8fa;
  color: var(--blue);
  padding: 4px 7px;
}

.missingReason {
  color: var(--muted);
  text-align: left;
}

.missingActionText {
  color: var(--blue);
}

.missingMoreRows {
  display: grid;
  gap: 3px;
}

.missingMoreRows summary {
  width: max-content;
  margin: 3px 0 0 9px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.fieldPulse {
  outline: 3px solid rgba(0, 151, 167, 0.24);
  box-shadow: 0 0 0 7px rgba(0, 151, 167, 0.12);
}

.carePlanGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.carePlanCard,
.draftConclusionBox {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.carePlanCard strong {
  color: var(--ink);
  font-size: 18px;
}

.routeAssistantBox {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid #cfe7e6;
  border-left: 5px solid var(--teal);
  border-radius: 8px;
  background: #f7fbfb;
  padding: 12px;
}

.routeAssistantBox strong {
  display: block;
  margin-top: 3px;
  color: var(--blue);
  font-size: 18px;
}

.routeAssistantBox p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.wideCareCard {
  grid-column: 1 / -1;
}

.careTasks {
  display: grid;
  gap: 5px;
  margin: 12px 0;
  color: var(--muted);
}

.draftConclusionBox {
  border-color: #cfe7e6;
  background: #f7fbfb;
}

.draftConclusionBox b {
  color: var(--blue);
}

.draftActionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auditTimeline {
  display: grid;
  gap: 8px;
}

.auditEvent {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-left: 4px solid #9ccfd1;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 12px;
}

.auditEvent span {
  color: var(--muted);
  font-size: 12px;
}

.auditEvent b {
  color: var(--ink);
  font-size: 14px;
}

.mechanismGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mechanismCard {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.mechanism-orange {
  border-left-color: var(--orange);
  background: #fff8ec;
}

.mechanism-red {
  border-left-color: var(--red);
  background: #fff3f3;
}

.mechanismHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mechanismHead b {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  border-radius: 999px;
  background: var(--blue);
  color: #ffffff;
  padding: 5px 8px;
}

.mechanismHead span,
.mechanismCard small {
  color: var(--muted);
  font-size: 12px;
}

.mechanismCard strong {
  color: var(--ink);
}

.mechanismCard em {
  font-style: normal;
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.stage2Panel {
  display: grid;
  gap: 14px;
}

.stage2Banner {
  display: grid;
  gap: 4px;
  border: 1px solid transparent;
  border-left: 6px solid currentColor;
  border-radius: 8px;
  padding: 14px;
}

.stage2Banner strong {
  font-size: 20px;
}

.stage2-required .stage2Banner {
  border-color: #edb7b7;
  background: #fff6f6;
  color: #9d2222;
}

.stage2-incomplete .stage2Banner {
  border-color: #f2c58b;
  background: #fff7ea;
  color: #8c4c08;
}

.stage2-not_required .stage2Banner {
  border-color: #badfc6;
  background: #edf8f0;
  color: #226d3a;
}

.stage2Missing {
  border: 1px solid #f2c58b;
  border-radius: 8px;
  background: #fff7ea;
  padding: 12px;
}

.stage2Missing ul,
.stage2Package ul {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.45;
}

.stage2Criteria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stage2Criterion {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--muted);
  border-radius: 8px;
  background: #ffffff;
  padding: 11px;
}

.stage2Criterion.met {
  border-left-color: var(--red);
  background: #fff6f6;
}

.stage2Criterion span {
  color: var(--muted);
  font-size: 13px;
}

.stage2Criterion p,
.stage2Package p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.stage2Packages {
  display: grid;
  gap: 10px;
}

.stage2Packages h4 {
  margin: 0;
}

.stage2Suggested {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #f2c58b;
  border-radius: 8px;
  background: #fff7ea;
  padding: 10px 12px;
  color: #744006;
}

.stage2Suggested span {
  font-weight: 700;
}

.stage2Package {
  border: 1px solid #edb7b7;
  border-radius: 8px;
  background: #fffafa;
  padding: 12px;
}

.stage2PackageDrawer {
  border: 1px solid #cfe7e6;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.stage2PackageDrawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(135deg, #f4fbfa 0%, #ffffff 82%);
}

.stage2PackageDrawer summary::-webkit-details-marker {
  display: none;
}

.stage2PackageDrawer summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e7f6f5;
  color: var(--blue);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.stage2PackageDrawer[open] summary::after {
  content: "-";
}

.stage2PackageDrawer summary span {
  font-weight: 700;
}

.stage2PackageDrawer summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.stage2ManualSelectionNote {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: #f0fbfa;
  color: var(--blue);
  padding: 10px 14px;
  font-size: 13px;
}

.stage2ManualSelectionNote span {
  font-weight: 700;
}

.stage2PackagePicker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.stage2PackagePicker.manualFiltered .stage2Choice.notSelectedManual {
  display: none;
}

.stage2PackagePicker.manualFiltered.showAll .stage2Choice.notSelectedManual {
  display: grid;
}

.stage2Choice {
  display: grid;
  grid-template-columns: 18px 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  color: var(--ink);
  cursor: pointer;
}

.stage2Choice:has(input:checked) {
  border-color: #8fcdd1;
  background: #f0fbfa;
  box-shadow: inset 0 0 0 1px rgba(21, 152, 157, 0.18);
}

.stage2Choice.recommended {
  border-left: 5px solid var(--orange);
}

.stage2Choice input {
  min-height: auto;
  width: 18px;
  height: 18px;
  padding: 0;
}

.stage2ChoiceCode {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border-radius: 6px;
  background: #e7f6f5;
  color: var(--blue);
  font-weight: 700;
}

.stage2ChoiceText {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.stage2ChoiceText b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.stage2ChoiceText small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.stage2SelectedStudies {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.stage2SelectedPackage {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 12px;
}

.stage2SelectedPackage strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
}

.stage2SelectedPackage ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.45;
}

.stage2LabGrid {
  display: grid;
  gap: 8px;
}

.stage2LabRow {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(105px, 150px) minmax(100px, 130px) minmax(140px, 220px);
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 7px 8px;
  border-radius: 6px;
}

.stage2LabRow.lab-green {
  background: #edf8f0;
}

.stage2LabRow.lab-orange {
  background: #fff3dc;
}

.stage2LabRow.lab-red {
  background: #fde8e8;
}

.stage2LabRow:first-child {
  border-top: 0;
  padding-top: 0;
}

.stage2LabName {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.stage2LabRow input,
.stage2LabRow select {
  min-height: 38px;
  font-size: 14px;
}

.stage2LabIndicator {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--ink);
  font-size: 12px;
}

.stage2LabIndicator small {
  color: var(--muted);
}

.stage2IndicatorDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #b8c4c8;
  flex: 0 0 auto;
}

.stage2IndicatorDot.green {
  background: #2f8a4c;
}

.stage2IndicatorDot.orange {
  background: #e58419;
}

.stage2IndicatorDot.red {
  background: #cc3535;
}

.stage2LabEvalDrawer {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.stage2LabEvalDrawer summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
}

.stage2LabEvalSummary {
  margin: 0 14px 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.stage2LabEvalSummary.green {
  background: #edf8f0;
  color: #226d3a;
}

.stage2LabEvalSummary.orange {
  background: #fff3dc;
  color: #9a520e;
}

.stage2LabEvalSummary.red {
  background: #fde8e8;
  color: #9b2525;
}

.stage2LabEvalCard {
  margin: 0 14px 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 4px solid #e58419;
  background: #fffaf1;
}

.stage2LabEvalCard.red {
  border-left-color: #cc3535;
  background: #fff5f5;
}

.stage2LabEvalCard b,
.stage2LabEvalCard span {
  display: block;
}

.stage2LabEvalCard span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.stage2LabEvalCard ul {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.45;
}

.stage2PickerActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 0 14px 14px;
}

.smallAction {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 14px;
}

.centerInfoCard,
.feedbackForm,
.feedbackInbox {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.centerInfoCard {
  background: linear-gradient(180deg, #ffffff 0%, #f1fbfa 100%);
}

.centerInfoCard h3,
.feedbackForm h3 {
  color: var(--blue);
  line-height: 1.25;
}

.centerInfoLine {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e6f0f1;
  font-size: 14px;
  line-height: 1.35;
}

.centerInfoLine span {
  color: var(--muted);
}

.centerInfoLine a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.bookingBox {
  margin-top: 14px;
  border-radius: 8px;
  background: #f7fbfb;
  padding: 12px;
  font-size: 13px;
  line-height: 1.45;
}

.bookingBox ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.feedbackForm {
  display: grid;
  gap: 10px;
}

.feedbackForm label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.feedbackForm input,
.feedbackForm textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.secondaryButton {
  border: 0;
  border-radius: 8px;
  background: #0b6f8e;
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
  padding: 11px 14px;
}

.secondaryButton:disabled {
  cursor: wait;
  opacity: 0.65;
}

.feedbackStatus {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.feedbackStatus.success {
  color: var(--green);
}

.feedbackStatus.error {
  color: var(--red);
}

.contactAfterResult {
  margin-top: 16px;
}

.feedbackInbox {
  background: #f7fbfb;
}

.feedbackInboxHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.feedbackInboxList {
  display: grid;
  gap: 8px;
}

.feedbackItem {
  display: grid;
  gap: 5px;
  width: 100%;
  border: 1px solid var(--line);
  border-left: 4px solid #b7c9ce;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
}

.feedbackItem.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11, 111, 142, 0.12);
}

.feedbackItem.feedback-new {
  border-left-color: var(--orange);
  background: #fffaf1;
}

.feedbackItem.feedback-replied {
  border-left-color: var(--green);
}

.feedbackItem strong {
  font-size: 14px;
}

.feedbackItem span,
.feedbackItem small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.feedbackHiddenNotice {
  border: 1px dashed #c9dcdf;
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.feedbackStatusPill {
  justify-self: start;
  border-radius: 999px;
  background: #edf4f4;
  padding: 3px 8px;
  color: var(--blue) !important;
  font-weight: 800;
}

.feedbackDetailCard {
  background: #f8fbfb;
}

.feedbackMessageBody {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.feedbackMessageBody span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.feedbackMessageBody p {
  margin: 8px 0 0;
  white-space: pre-wrap;
  line-height: 1.5;
}

.feedbackActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 1120px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .partnerLogos {
    justify-content: flex-start;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .completionInfo,
  .completionActions,
  .bookingNotice {
    grid-template-columns: 1fr;
  }

  .bookingQrBox {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 14px 0 0;
  }

  .doctorCabinet {
    grid-template-columns: 1fr;
  }

  .resultPanel {
    position: static;
  }

  .recordsPanel {
    position: static;
  }
}

@media (max-width: 820px) {
  .topbar {
    padding: 18px;
  }

  .brandLine {
    align-items: flex-start;
    flex-direction: column;
  }

  .logoLongevity {
    width: min(100%, 320px);
  }

  .logoMinistry {
    width: 190px;
  }

  .layout {
    padding: 12px;
  }

  .panel {
    padding: 16px;
  }

  .sectionHead,
  .introSection,
  .patientQuickPanel,
  .testIntro {
    grid-template-columns: 1fr;
  }

  .patientQuickActions {
    justify-content: stretch;
  }

  .quickActionButton {
    flex: 1 1 150px;
  }

  .sectionHead {
    display: grid;
  }

  .grid,
  .baseGrid,
  .baseRadio,
  .bioCard,
  .patientResultHero,
  .resultMetricGrid,
  .scaleCardsGrid,
  .smartSupportGrid,
  .carePlanGrid,
  .mechanismGrid,
  .stage2Criteria,
  .stage2PackagePicker,
  .stage2LabRow,
  .kvGrid,
  .helpScale,
  .qrPanel,
  .qrGrid,
  .options,
  .options.compact,
  .options.sanScale,
  .options.wide {
    grid-template-columns: 1fr;
  }

  .scaleQuestionText {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .scaleQuestionText span:last-child {
    grid-column: 2;
    text-align: left;
    color: var(--muted);
  }

  .missingTableHead {
    display: none;
  }

  .missingTableRow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
  }

  .missingTitle {
    white-space: normal;
  }

  .missingTag,
  .missingReason {
    justify-self: start;
  }

  .missingActionText {
    grid-column: 2;
    grid-row: 1;
  }

  .doctorSectionTitle {
    grid-template-columns: 1fr;
  }

  .doctorSectionTitle > span {
    width: fit-content;
    min-width: 38px;
  }

  .scrollTopButton {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    font-size: 22px;
  }
}