:root {
  --background: #F7F4ED;
  --card: #FFFFFF;
  --primary-blue: #082A63;
  --success-green: #0B8F3F;
  --accent-gold: #D9A81E;
  --bg: var(--background);
  --blue: var(--primary-blue);
  --green: var(--success-green);
  --yellow: var(--accent-gold);
  --muted: #5F6F7E;
  --shadow: 0 22px 46px rgba(8, 42, 99, 0.15);
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html,
body {
  background: #F7F4ED;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  padding: 14px;
}

.app-shell {
  width: 393px;
  height: 852px;
  max-height: calc(100vh - 28px);
  border: 0;
  border-radius: 32px;
  background: #F7F4ED;
  box-shadow: 0 26px 70px rgba(8, 42, 99, 0.16);
}

.app-shell::before {
  display: none;
}

.phone.patient-home-phone {
  background: #F7F4ED;
}

.phone.patient-home-phone .status {
  height: 44px;
  padding: 14px 18px 0;
  color: #111111;
  font-size: 15px;
  font-weight: 850;
}

.phone.patient-home-phone .battery {
  border-color: #111111;
}

.screen.patient-home-screen {
  height: 100%;
  padding: 0 18px 112px;
  background:
    linear-gradient(90deg, rgba(217, 168, 30, 0.16) 0 1px, transparent 1px),
    #F7F4ED;
  background-size: 24px 24px, auto;
}

.screen.patient-home-screen::before,
.screen.patient-home-screen::after {
  top: 272px;
  bottom: 92px;
  width: 34px;
  opacity: 0.25;
  background:
    linear-gradient(135deg, transparent 38%, rgba(217, 168, 30, 0.33) 39% 44%, transparent 45%),
    linear-gradient(45deg, transparent 38%, rgba(8, 42, 99, 0.18) 39% 44%, transparent 45%);
  background-size: 28px 28px;
}

.home-page {
  min-height: 100%;
  padding-bottom: 4px;
}

.home-hero-panel {
  position: relative;
  min-height: 342px;
  margin: 0 -18px;
  padding: 62px 24px 92px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(247, 244, 237, 0.62) 0%, rgba(247, 244, 237, 0.5) 46%, rgba(247, 244, 237, 0.12) 84%),
    url("assets/home-hut-woman-clean.jpeg"),
    radial-gradient(circle at 78% 15%, rgba(255, 232, 150, 0.7) 0 18px, transparent 19px),
    linear-gradient(160deg, transparent 0 58%, rgba(139, 180, 121, 0.42) 59% 67%, transparent 68%),
    linear-gradient(145deg, transparent 0 48%, rgba(111, 158, 105, 0.34) 49% 61%, transparent 62%),
    linear-gradient(180deg, #EAF7FB 0%, #F8F0D9 56%, #EDE6C9 100%);
  background-position: center, center top, center, center, center, center;
  background-repeat: no-repeat;
  background-size: auto, cover, auto, auto, auto, auto;
}

.home-hero-panel::after {
  z-index: 1;
  height: 78px;
  background: linear-gradient(180deg, transparent 0%, #F7F4ED 92%);
}

.home-hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 80%, rgba(72, 126, 68, 0.24) 81% 83%, transparent 84%),
    linear-gradient(90deg, rgba(247, 244, 237, 0.18), transparent 62%);
}

.home-hero-row {
  z-index: 2;
  grid-template-columns: 135px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 150px;
}

.home-hero-logo {
  width: 135px;
  height: 135px;
}

.home-hero-logo img {
  mix-blend-mode: multiply;
  filter: drop-shadow(0 14px 22px rgba(8, 42, 99, 0.2));
}

.home-hero-copy {
  max-width: 145px;
  color: #082A63;
}

.home-hero-copy .small {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 650;
}

.home-hero-copy .name {
  font-size: 23px;
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: 0;
}

.home-hero-copy .name span {
  display: block;
}

.home-health-badge {
  display: none;
  margin-top: 10px;
  border-color: rgba(11, 143, 63, 0.15);
  padding: 6px 9px;
  color: #0B8F3F;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(8, 42, 99, 0.1);
  font-size: 10px;
}

.home-welcome-sign {
  right: 17px;
  bottom: 82px;
  z-index: 2;
  width: 106px;
  border-color: rgba(116, 85, 33, 0.24);
  border-radius: 10px;
  background: rgba(245, 221, 169, 0.84);
  box-shadow: 0 14px 24px rgba(77, 55, 23, 0.17);
}

.home-welcome-sign strong {
  color: #14110A;
  font-size: 15px;
  line-height: 1.1;
}

.home-welcome-sign span {
  color: #2D261A;
  font-size: 10px;
}

.home-card {
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 18px 36px rgba(8, 42, 99, 0.13);
  backdrop-filter: none;
}

.home-summary-card {
  position: relative;
  z-index: 4;
  margin: -48px 0 12px;
  padding: 22px 14px 16px;
  background: #FFFFFF;
}

.home-summary-header {
  margin-bottom: 10px;
}

.home-summary-header h2 {
  color: #082A63;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
}

.trend-button {
  min-height: 36px;
  border: 1px solid rgba(11, 143, 63, 0.24);
  padding: 8px 13px;
  color: #0B8F3F;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(11, 143, 63, 0.08), 0 7px 16px rgba(8, 42, 99, 0.08);
  font-size: 12px;
  font-weight: 950;
}

.home-summary-card .dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-summary-card .dashboard-card {
  min-height: 0;
  height: 178px;
  border: 1px solid rgba(8, 42, 99, 0.04);
  border-radius: 20px;
  padding: 13px 6px 8px;
  background: #FFFFFF;
  box-shadow: 0 13px 28px rgba(8, 42, 99, 0.09);
}

.home-summary-card .dashboard-card::before {
  right: 0;
  left: 0;
  height: 6px;
  border-radius: 20px 20px 0 0;
}

.home-summary-card .dashboard-card.glucose::before {
  background: #082A63;
}

.home-summary-card .dashboard-card.screening::before {
  background: #D9A81E;
}

.home-summary-card .dashboard-card.medicine::before {
  background: #0B8F3F;
}

.home-summary-card .dashboard-card .flat-icon-sm {
  width: 42px;
  height: 42px;
  margin: 1px auto 5px;
}

.home-summary-card .dashboard-card h3 {
  margin-bottom: 4px;
  color: #082A63;
  font-size: 14px;
  font-weight: 950;
}

.home-summary-card .dashboard-card .dash-value {
  color: #082A63;
  font-size: 25px;
  font-weight: 950;
}

.home-summary-card .dashboard-card .dash-unit {
  min-height: 23px;
  color: #34465A;
  font-size: 12px;
  line-height: 1.16;
}

.home-summary-card .glucose-status-pill,
.home-summary-card .gold-tag {
  width: auto;
  min-width: 74px;
  max-width: 100%;
  min-height: 28px;
  margin: 5px auto 0;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.08;
}

.home-summary-card .glucose-status-pill.green,
.home-summary-card .gold-tag {
  color: #0B8F3F;
  background: #E7F6EC;
}

.home-summary-card .glucose-status-pill.orange {
  color: #9A6400;
  background: #FFF3D3;
}

.home-summary-card .glucose-status-pill.red {
  color: #B42318;
  background: #FDECEC;
}

.home-summary-card .progress-ring {
  width: 52px;
  height: 52px;
  margin: 1px auto 2px;
  background:
    radial-gradient(circle, #FFFFFF 58%, transparent 60%),
    conic-gradient(#0B8F3F calc(var(--progress) * 1%), rgba(8, 42, 99, 0.12) 0);
  color: #082A63;
  font-size: 15px;
}

.home-screening-card {
  grid-template-columns: 38% minmax(0, 1fr);
  gap: 16px;
  min-height: 154px;
  margin-bottom: 12px;
  padding: 16px 18px;
}

.home-screening-art {
  min-height: 104px;
}

.home-screening-art::before {
  inset: 7px;
  background: #E8F4EA;
}

.home-screening-art::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 16px;
  z-index: 2;
  width: 28px;
  height: 38px;
  border-radius: 20px 20px 5px 5px;
  background:
    radial-gradient(ellipse at 33% 38%, #42B86B 0 9px, transparent 10px),
    radial-gradient(ellipse at 70% 45%, #6CCB83 0 8px, transparent 9px),
    linear-gradient(#0B8F3F, #0B8F3F) 50% 44% / 3px 27px no-repeat,
    linear-gradient(#C9A368, #B78C48) bottom / 22px 12px no-repeat;
}

.home-screening-art .flat-icon-lg {
  width: 84px;
  height: 84px;
  border-radius: 24px;
}

.home-screening-art .screening-shield {
  right: 3px;
  bottom: 12px;
  width: 42px;
  height: 42px;
  border-radius: 16px;
}

.home-screening-copy h2 {
  margin-bottom: 5px;
  color: #082A63;
  font-size: 23px;
  font-weight: 950;
}

.home-screening-copy p {
  margin-bottom: 10px;
  color: #34465A;
  font-size: 13px;
  line-height: 1.32;
}

.home-screening-copy .btn {
  min-height: 48px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0FA34B, #0B8F3F);
  box-shadow: 0 12px 24px rgba(11, 143, 63, 0.28);
  font-size: 16px;
}

.home-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
  margin-bottom: 20px;
}

.home-action-card {
  display: block;
  overflow: hidden;
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(8, 42, 99, 0.11);
  cursor: pointer;
  line-height: 0;
}

.home-action-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.home-action-card:focus-visible {
  outline: 3px solid rgba(11, 143, 63, 0.35);
  outline-offset: 3px;
}

.home-action-card:active {
  transform: translateY(1px);
}

.patient-home-phone .nav {
  right: 16px;
  bottom: 16px;
  left: 16px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 25px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 36px rgba(8, 42, 99, 0.16);
  backdrop-filter: blur(18px);
}

.patient-home-phone .nav button {
  min-width: 68px;
  height: 62px;
  border-radius: 19px;
  gap: 4px;
  color: #566574;
  font-size: 12px;
  font-weight: 750;
}

.patient-home-phone .nav button span {
  width: 28px;
  height: 28px;
  border: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: 19px;
}

.patient-home-phone .nav button.active {
  color: #FFFFFF;
  background: linear-gradient(180deg, #0FA34B, #0B8F3F);
  box-shadow: 0 10px 22px rgba(11, 143, 63, 0.27);
}

.patient-home-phone .nav button.active span {
  color: #FFFFFF;
  background: transparent;
}

.screen.screening-premium-screen {
  padding: 0 24px 108px;
  background:
    linear-gradient(90deg, rgba(217, 168, 30, 0.13) 0 1px, transparent 1px),
    #F7F4ED;
  background-size: 24px 24px, auto;
  color: #082A63;
}

.screening-premium-page {
  min-height: 100%;
}

.screening-premium-hero {
  position: relative;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 286px;
  margin: 0 -24px;
  padding: 42px 24px 76px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(247, 244, 237, 0.96) 0%, rgba(247, 244, 237, 0.78) 48%, rgba(247, 244, 237, 0.2) 84%),
    url("assets/home-hut-woman-clean.jpeg"),
    radial-gradient(circle at 79% 17%, rgba(255, 232, 150, 0.72) 0 18px, transparent 19px),
    linear-gradient(160deg, transparent 0 58%, rgba(139, 180, 121, 0.42) 59% 67%, transparent 68%),
    linear-gradient(145deg, transparent 0 48%, rgba(111, 158, 105, 0.32) 49% 61%, transparent 62%),
    linear-gradient(180deg, #EAF7FB 0%, #F8F0D9 56%, #F7F4ED 100%);
  background-position: center, right -6px top 18px, center, center, center, center;
  background-repeat: no-repeat;
  background-size: auto, 178px auto, auto, auto, auto, auto;
}

.screening-premium-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 70px;
  background: linear-gradient(180deg, transparent, #F7F4ED 88%);
  pointer-events: none;
}

.screening-premium-logo,
.screening-premium-title {
  position: relative;
  z-index: 1;
}

.screening-premium-logo {
  width: 130px;
  height: 130px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 12px 20px rgba(8, 42, 99, 0.18));
}

.screening-premium-title h1 {
  margin: 0 0 12px;
  color: #082A63;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: 0;
}

.screening-premium-title p {
  max-width: 190px;
  margin: 0;
  color: #26394B;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.screening-progress-card,
.screening-question-card,
.screening-notes-card,
.screening-warning-card {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: 0 18px 36px rgba(8, 42, 99, 0.12);
}

.screening-progress-card {
  display: grid;
  grid-template-columns: 1fr 50px;
  gap: 10px;
  align-items: center;
  margin: -42px 0 12px;
  padding: 12px 16px;
  border-radius: 22px;
}

.screening-progress-card h2 {
  margin: 0 0 8px;
  color: #082A63;
  font-size: 13px;
  font-weight: 950;
}

.screening-progress-card p {
  margin: 7px 0 0;
  color: #082A63;
  font-size: 11px;
  font-weight: 650;
}

.screening-premium-screen .screening-progress {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}

.screening-premium-screen .progress-segment {
  height: 5px;
  border-radius: 999px;
  background: #DFE2EA;
}

.screening-premium-screen .progress-segment.done {
  background: #0B8F3F;
}

.screening-progress-icon {
  width: 48px;
  height: 48px;
}

.screening-question-card {
  padding: 22px 18px 18px;
  margin-bottom: 14px;
}

.screening-question-head {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.screening-question-icon {
  width: 76px;
  height: 76px;
  border: 3px solid #2D9CDB;
  border-radius: 50%;
  overflow: hidden;
  background: #DFF1FF;
}

.screening-question-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screening-question-head h2 {
  margin: 0 0 8px;
  color: #082A63;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0;
}

.screening-question-head h2 span {
  font-size: 17px;
}

.screening-question-head p {
  margin: 0;
  color: #4A5C6E;
  font-size: 13px;
  line-height: 1.25;
}

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

.screening-choice-grid.compact {
  gap: 9px 10px;
}

.screening-choice-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 74px;
  border: 1px solid rgba(8, 42, 99, 0.08);
  border-radius: 15px;
  padding: 8px 30px 8px 8px;
  color: #082A63;
  background: #FFFFFF;
  box-shadow: 0 9px 18px rgba(8, 42, 99, 0.06);
  text-align: left;
}

.screening-choice-grid.compact .screening-choice-card {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 70px;
  padding: 7px 28px 7px 7px;
}

.screening-choice-card.selected {
  border-color: rgba(11, 143, 63, 0.75);
  background: #F4FBF6;
  box-shadow: 0 11px 22px rgba(11, 143, 63, 0.12);
}

.screening-choice-card strong {
  display: block;
  min-width: 0;
  padding-right: 2px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.screening-choice-icon {
  width: 40px;
  height: 40px;
  border: 2px solid #D7EEF9;
  border-radius: 50%;
  overflow: hidden;
  background: #E8F5FF;
}

.screening-choice-grid.compact .screening-choice-icon {
  width: 34px;
  height: 34px;
}

.screening-choice-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.screening-choice-check {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid #DFE2E8;
  border-radius: 6px;
  color: #FFFFFF;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 950;
}

.screening-choice-card.selected .screening-choice-check {
  border-color: #0B8F3F;
  background: #0B8F3F;
}

.screening-step-hyperglycaemia .screening-choice-grid.compact {
  gap: 8px;
}

.screening-step-hyperglycaemia .screening-choice-grid.compact .screening-choice-card {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 70px;
  padding: 7px 28px 7px 7px;
}

.screening-step-hyperglycaemia .screening-choice-grid.compact .screening-choice-icon {
  width: 34px;
  height: 34px;
}

.screening-step-hyperglycaemia .screening-choice-grid.compact .screening-choice-card strong {
  font-size: 8.5px;
  line-height: 1.08;
}

.screening-step-hyperglycaemia .screening-choice-grid.compact .screening-choice-check {
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  font-size: 12px;
}

.screening-step-hyperglycaemia .screening-question-head {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
}

.screening-step-hyperglycaemia .screening-question-icon {
  width: 76px;
  height: 76px;
}

.screening-step-hyperglycaemia .screening-question-head h2 {
  font-size: 21px;
  line-height: 1.1;
}

.screening-step-hyperglycaemia .screening-question-head h2 span {
  font-size: 17px;
}

.screening-step-hyperglycaemia .screening-question-head p {
  font-size: 13px;
  line-height: 1.25;
}

.screening-step-wound .screening-choice-card {
  min-height: 74px;
}

.screening-step-wound .screening-choice-card strong {
  font-size: 10px;
  line-height: 1.1;
}

.screening-step-cardiac .screening-choice-card:last-child {
  grid-column: 1 / -1;
}

.screening-step-admission .screening-premium-title h1 {
  font-size: 23px;
}

.screening-step-admission .screening-premium-title p {
  max-width: 210px;
}

.admission-panel {
  padding: 20px 14px 16px;
  text-align: center;
}

.admission-panel > h2 {
  margin: 0 0 8px;
  color: #082A63;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.05;
}

.admission-panel > p {
  margin: 0 0 18px;
  color: #172B45;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 650;
}

.admission-image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.admission-image-choice {
  position: relative;
  overflow: hidden;
  min-height: 232px;
  border: 1.5px solid rgba(8, 42, 99, 0.12);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 9px 18px rgba(8, 42, 99, 0.07);
}

.admission-image-choice.yes {
  border-color: rgba(195, 34, 43, 0.52);
}

.admission-image-choice.no {
  border-color: rgba(11, 143, 63, 0.52);
}

.admission-image-choice.selected {
  box-shadow: 0 0 0 3px rgba(11, 143, 63, 0.18), 0 12px 24px rgba(8, 42, 99, 0.12);
  transform: translateY(-1px);
}

.admission-image-choice img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.admission-notes-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  border: 1px solid rgba(8, 42, 99, 0.1);
  border-radius: 15px;
  padding: 12px;
  text-align: left;
  background: #FFFFFF;
}

.admission-note-icon {
  width: 42px;
  height: 42px;
}

.admission-notes-card label {
  display: block;
  color: #082A63;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.admission-notes-card label span {
  font-weight: 650;
}

.admission-notes-card p {
  margin: 4px 0 10px;
  color: #44566A;
  font-size: 11px;
  line-height: 1.25;
}

.admission-note-box {
  grid-column: 1 / -1;
  position: relative;
}

.admission-note-box textarea {
  width: 100%;
  min-height: 66px;
  border: 1px solid rgba(8, 42, 99, 0.1);
  border-radius: 12px;
  padding: 12px 52px 12px 12px;
  color: #082A63;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.3;
  resize: vertical;
}

.admission-note-box span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: #6A7787;
  font-size: 11px;
  font-weight: 650;
}

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

.admission-info-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-radius: 14px;
  padding: 12px;
  text-align: left;
}

.admission-info-card.warning {
  background: #FFF8E7;
}

.admission-info-card.safe {
  background: #F1F8F1;
}

.admission-info-icon {
  width: 28px;
  height: 28px;
}

.admission-info-card h3 {
  margin: 0 0 6px;
  color: #082A63;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 950;
}

.admission-info-card p {
  margin: 0;
  color: #1F2D3A;
  font-size: 10px;
  line-height: 1.26;
}

.screen.alert-screen {
  padding: 28px 24px 108px;
  background:
    linear-gradient(90deg, rgba(217, 168, 30, 0.13) 0 1px, transparent 1px),
    #F7F4ED;
  background-size: 24px 24px, auto;
  color: #082A63;
}

.result-page {
  min-height: 100%;
  padding-top: 10px;
  background:
    linear-gradient(180deg, rgba(247, 244, 237, 0.16) 0%, #F7F4ED 34%),
    url("assets/home-hut-woman-clean.jpeg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.result-hero-card,
.result-card {
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 24px;
  box-shadow: 0 18px 36px rgba(8, 42, 99, 0.13);
}

.result-hero-card {
  display: flex;
  min-height: 272px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 28px 28px 20px;
  padding: 26px 24px;
  text-align: center;
}

.result-red .result-hero-card {
  color: #FFFFFF;
  background: linear-gradient(180deg, #D92932, #C82029);
}

.result-yellow .result-hero-card {
  color: #082A63;
  background: linear-gradient(180deg, #E7AA06, #D49A00);
}

.result-green .result-hero-card {
  min-height: 326px;
  border-color: rgba(11, 143, 63, 0.8);
  color: #082A63;
  background: rgba(255, 255, 255, 0.72);
}

.result-symbol {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 22px;
  border: 5px solid currentColor;
  border-radius: 50%;
  font-size: 58px;
  font-weight: 950;
  line-height: 1;
}

.result-yellow .result-symbol {
  border: 0;
  background: rgba(255, 225, 117, 0.72);
  box-shadow: inset 10px 12px 24px rgba(255, 255, 255, 0.28), 0 12px 26px rgba(8, 42, 99, 0.12);
}

.result-green .result-symbol {
  width: 98px;
  height: 98px;
  border: 6px solid #FFFFFF;
  color: #FFFFFF;
  background: linear-gradient(180deg, #55B957, #0B8F3F);
  box-shadow: 0 12px 24px rgba(8, 42, 99, 0.15);
}

.result-hero-card h1 {
  margin: 0 0 14px;
  font-size: 32px;
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0;
}

.result-green .result-hero-card h1 {
  font-size: 40px;
}

.result-hero-card p {
  max-width: 280px;
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
}

.result-card {
  margin-bottom: 18px;
  padding: 24px 22px;
  background: #FFFFFF;
}

.result-card h2 {
  margin: 0 0 18px;
  color: #082A63;
  font-size: 24px;
  font-weight: 950;
  line-height: 1.08;
}

.result-actions-card ul {
  display: grid;
  gap: 18px;
  margin: 0;
  padding-left: 22px;
  color: #44566A;
  font-size: 16px;
  line-height: 1.45;
}

.result-actions-card li::marker {
  color: var(--result-accent, #0B8F3F);
  font-size: 16px;
}

.result-red {
  --result-accent: #D92932;
}

.result-yellow {
  --result-accent: #D49A00;
}

.result-green {
  --result-accent: #0B8F3F;
}

.result-selected-card p,
.result-emergency-card p {
  margin: 0;
  color: #5F6F7E;
  font-size: 15px;
  line-height: 1.45;
}

.result-emergency-card {
  border-color: rgba(217, 41, 50, 0.45);
  background: rgba(255, 255, 255, 0.9);
}

.result-whatsapp-button,
.result-outline-button,
.result-find-button {
  width: 100%;
  border: 0;
  border-radius: 14px;
  min-height: 58px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 950;
}

.result-whatsapp-button,
.result-outline-button {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  padding: 10px 16px;
  text-align: left;
}

.result-whatsapp-button {
  color: #FFFFFF;
  background: linear-gradient(180deg, #D92932, #C82029);
}

.result-whatsapp-button span,
.result-outline-button span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 28px;
}

.result-outline-button {
  border: 1.5px solid #C82029;
  color: #C82029;
  background: #FFFFFF;
  text-align: center;
}

.result-find-button {
  margin: 22px 0 18px;
  color: #082A63;
  background: linear-gradient(180deg, #E7AA06, #D49A00);
  box-shadow: 0 14px 26px rgba(212, 154, 0, 0.22);
}

.screening-notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.screening-notes-card,
.screening-warning-card {
  border-radius: 18px;
  padding: 14px;
}

.screening-notes-card label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #082A63;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 950;
}

.screening-notes-card label span {
  color: #0B8F3F;
}

.screening-notes-card textarea {
  width: 100%;
  min-height: 70px;
  border: 1px solid rgba(8, 42, 99, 0.1);
  border-radius: 12px;
  padding: 10px;
  color: #082A63;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.28;
  resize: vertical;
}

.screening-warning-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-color: rgba(217, 168, 30, 0.22);
  background: #FFF8E7;
}

.warning-symbol {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #082A63;
  background: #FDB913;
  font-size: 18px;
  font-weight: 950;
}

.screening-warning-card h3 {
  margin: 0 0 7px;
  color: #082A63;
  font-size: 12px;
  line-height: 1.18;
  font-weight: 950;
}

.screening-warning-card p {
  margin: 0;
  color: #1F2D3A;
  font-size: 10.5px;
  line-height: 1.28;
}

.screening-premium-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.screening-premium-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 56px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 950;
}

.screening-premium-actions .btn:not(.secondary) {
  justify-content: space-between;
  padding-right: 24px;
  padding-left: 36px;
  background: linear-gradient(180deg, #0FA34B, #0B8F3F);
}

.screening-premium-screen .nav {
  right: 24px;
  bottom: 16px;
  left: 24px;
  height: 80px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 25px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 36px rgba(8, 42, 99, 0.16);
  backdrop-filter: blur(18px);
}

.screening-premium-screen .nav button {
  min-width: 68px;
  height: 62px;
  border-radius: 19px;
  gap: 4px;
  color: #082A63;
  font-size: 12px;
  font-weight: 750;
}

.screening-premium-screen .nav button span {
  width: 28px;
  height: 28px;
  border: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: 19px;
}

.screening-premium-screen .nav button.active,
.screening-premium-screen .nav button[data-nav="patientHome"] {
  color: #FFFFFF;
  background: linear-gradient(180deg, #0FA34B, #0B8F3F);
  box-shadow: 0 10px 22px rgba(11, 143, 63, 0.27);
}

.screening-premium-screen .nav button.active span,
.screening-premium-screen .nav button[data-nav="patientHome"] span {
  color: #FFFFFF;
  background: transparent;
}

@media (max-width: 430px) {
  body {
    padding: 0;
  }

  .app-shell {
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
  }
}