:root {
  --ink: #101c25;
  --muted: #6d7b82;
  --faint: #e9f0f1;
  --paper: #fbfbf8;
  --white: #ffffff;
  --mist: #dbe9ee;
  --blue: #c8e9f4;
  --blue-strong: #9ed4e4;
  --teal: #063e52;
  --teal-soft: #0a5269;
  --peach: #f2d6c9;
  --danger: #ee3e4c;
  --theme-page: #ffffff;
  --theme-page-soft: #f7fcfd;
  --theme-surface: #ffffff;
  --theme-surface-strong: #ffffff;
  --theme-surface-soft: #f8fbfc;
  --theme-panel: rgba(255, 255, 255, 0.92);
  --theme-panel-soft: #f2fbfd;
  --theme-primary: #063e52;
  --theme-primary-2: #0a5269;
  --theme-primary-contrast: #ffffff;
  --theme-accent: #9ed4e4;
  --theme-accent-soft: #dff5fb;
  --theme-accent-muted: #e8f8fc;
  --theme-border: #e5ecef;
  --theme-border-strong: #d8edf3;
  --theme-ring: rgba(10, 82, 105, 0.25);
  --theme-success: #0d6f91;
  --theme-text: #101c25;
  --theme-text-strong: #101c25;
  --theme-muted: #6d7b82;
  --theme-icon: #122f3c;
  --theme-shadow-color: rgba(17, 38, 47, 0.08);
  --theme-shadow-strong: rgba(6, 62, 82, 0.2);
  --theme-gradient: linear-gradient(135deg, #dff5fb, #eef8fa 52%, #d9eef4);
  --theme-page-gradient: radial-gradient(circle at 80% 8%, rgba(223, 245, 251, 0.78), transparent 32%), #fff;
  --shadow: 0 26px 70px rgba(24, 47, 57, 0.16);
  --soft-shadow: 0 15px 40px rgba(18, 36, 44, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: #dfe9ed;
  font-family: "Avenir Next", Avenir, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

body.is-authenticated {
  background: #dfe9ed;
  overflow: hidden;
}

body.sheet-open {
  overscroll-behavior: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  touch-action: manipulation;
}

input,
textarea,
select {
  touch-action: auto;
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(10, 82, 105, 0.25);
  outline-offset: 3px;
}

textarea {
  resize: vertical;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon,
.mini-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon {
  width: 22px;
  height: 22px;
}

.mini-icon {
  width: 14px;
  height: 14px;
}

.login-page {
  min-height: 100dvh;
  padding: 48px min(7vw, 72px) 34px;
  background:
    radial-gradient(circle at 18% 22%, rgba(200, 233, 244, 0.72), transparent 36%),
    linear-gradient(135deg, #eef9fd, #fff 52%, #f2fbfe);
}

.login-page.is-hidden,
.signup-page.is-hidden,
.legal-page.is-hidden,
.app-stage.is-auth-hidden {
  display: none;
}

.login-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
}

.login-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: #23313a;
  font-size: 34px;
  line-height: 1;
  font-weight: 850;
}

.login-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.login-logo span {
  letter-spacing: 0.03em;
}

.login-topline p,
.login-topline button,
.login-terms,
.login-terms button {
  color: #0f2230;
  font-size: 16px;
  font-weight: 560;
}

.login-topline button,
.login-terms button {
  padding: 0;
  background: transparent;
  color: #006f98;
  font-weight: 750;
}

.login-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1fr);
  align-items: start;
  gap: 54px;
}

.login-story h1 {
  margin: 38px 0 26px;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.14;
  font-weight: 820;
}

.login-story > p {
  max-width: 420px;
  margin: 0;
  color: #63727c;
  font-size: 22px;
  line-height: 1.55;
}

.login-hero-art {
  position: relative;
  min-height: 540px;
  margin-top: 50px;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(160deg, #dff5fb, #f9fdff);
}

.login-hero-art > img:first-child {
  position: absolute;
  left: -34px;
  bottom: -8px;
  width: 62%;
  height: 94%;
  object-fit: contain;
  object-position: center bottom;
}

.login-hero-art > img:nth-child(2) {
  position: absolute;
  right: -46px;
  bottom: -18px;
  width: 58%;
  height: 82%;
  object-fit: contain;
  object-position: center bottom;
}

.login-hero-art article {
  position: absolute;
  left: 34px;
  bottom: 34px;
  width: min(390px, calc(100% - 68px));
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 55px rgba(17, 38, 47, 0.12);
  backdrop-filter: blur(16px);
}

.login-hero-art article span,
.login-privacy span,
.login-benefits span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #0a5269;
  background: #e3f6fb;
}

.login-hero-art article strong,
.login-privacy strong {
  font-size: 17px;
}

.login-hero-art article p,
.login-privacy p {
  margin: 7px 0 0;
  color: #63727c;
  font-size: 15px;
  line-height: 1.45;
}

.login-card {
  display: grid;
  gap: 23px;
  padding: 66px 48px 50px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 25px 80px rgba(17, 38, 47, 0.11);
  backdrop-filter: blur(18px);
}

.doctor-login-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 2px auto 0;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(138, 199, 214, 0.52);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(229, 247, 251, 0.96), rgba(255, 255, 255, 0.78));
  color: #0a5f78;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(8, 73, 91, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.doctor-login-link::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.82) 44%, transparent 62% 100%);
  transform: translateX(-120%);
  animation: authSwitchSheen 3.2s ease-in-out infinite;
  pointer-events: none;
}

.doctor-login-link:hover {
  transform: translateY(-1px);
  border-color: rgba(66, 158, 181, 0.58);
  box-shadow: 0 18px 42px rgba(8, 73, 91, 0.16);
}

.auth-switch-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0a4c5f;
  color: #fff;
  box-shadow: 0 10px 24px rgba(10, 76, 95, 0.22);
}

.auth-switch-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(10, 76, 95, 0.18);
  border-radius: inherit;
  animation: authSwitchPulse 2.4s ease-out infinite;
}

.auth-role-switch .mini-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.auth-switch-arrow {
  position: relative;
  font-size: 18px;
  line-height: 1;
  transition: transform 180ms ease;
}

.doctor-login-link:hover .auth-switch-arrow {
  transform: translateX(3px);
}

@keyframes authSwitchSheen {
  0%,
  58% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes authSwitchPulse {
  0% {
    opacity: 0.72;
    transform: scale(0.82);
  }
  100% {
    opacity: 0;
    transform: scale(1.32);
  }
}

.is-doctor-auth .login-card {
  border-color: #c7e5ec;
  box-shadow: 0 28px 90px rgba(6, 72, 90, 0.16);
}

.is-doctor-auth .login-mobile-art {
  display: none;
}

.signup-card {
  gap: 17px;
  padding-top: 48px;
}

.signup-hero .login-story h1 {
  margin-top: 18px;
}

.signup-role {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  border: 1px solid #dce6ea;
  border-radius: 16px;
  background: #f7fbfc;
}

.signup-role button {
  min-height: 44px;
  border-radius: 12px;
  background: transparent;
  color: #64737b;
  font-weight: 760;
}

.signup-role button.is-selected {
  background: #063e52;
  color: #fff;
  box-shadow: 0 12px 24px rgba(6, 62, 82, 0.14);
}

.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #63727c;
  font-size: 13px;
  line-height: 1.35;
}

.signup-consent input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: #063e52;
}

.signup-consent button {
  padding: 0;
  background: transparent;
  color: #006f98;
  font-weight: 780;
}

.signup-verification-panel {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  color: #111827;
  box-shadow: 0 18px 42px rgba(17, 24, 39, 0.08);
}

.signup-verification-panel.is-hidden {
  display: none;
}

.signup-verification-head {
  display: grid;
  gap: 7px;
  text-align: center;
}

.signup-verification-head strong {
  color: #111827;
  font-size: 22px;
  font-weight: 850;
}

.signup-verification-head span {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.45;
}

.signup-otp-control {
  position: relative;
  display: grid;
  justify-items: center;
}

.signup-otp-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0.02;
  color: transparent;
  caret-color: transparent;
  background: transparent;
}

.signup-otp-slots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.signup-otp-slots span {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 48px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #111827;
  font-size: 20px;
  font-weight: 850;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  animation: otpSlotIn 260ms ease both;
}

.signup-otp-slots span:nth-child(2) {
  animation-delay: 35ms;
}

.signup-otp-slots span:nth-child(3) {
  animation-delay: 70ms;
}

.signup-otp-slots span:nth-child(5) {
  animation-delay: 105ms;
}

.signup-otp-slots span:nth-child(6) {
  animation-delay: 140ms;
}

.signup-otp-slots span:nth-child(7) {
  animation-delay: 175ms;
}

.signup-otp-slots span.is-active {
  z-index: 1;
  border-color: #111827;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.signup-otp-slots span.is-active::after {
  content: "";
  width: 1px;
  height: 22px;
  background: #111827;
  animation: otpCaret 1s ease-in-out infinite;
}

.signup-otp-slots span.is-filled {
  transform: scale(1.04);
  border-color: #9ca3af;
  background: #fff;
}

.signup-otp-slots em {
  display: block;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: #9ca3af;
}

.signup-otp-hint {
  margin: -4px 0 0;
  color: #6b7280;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}

.signup-verification-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.signup-verification-actions .chip {
  justify-content: center;
  min-height: 42px;
  border-radius: 12px;
}

@keyframes otpSlotIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.86);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes otpCaret {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.login-mobile-art {
  display: none;
}

.login-heading {
  text-align: center;
  margin-bottom: 22px;
}

.login-heading h2 {
  margin: 0 0 12px;
  font-size: 38px;
  line-height: 1;
  font-weight: 820;
}

.login-heading p {
  margin: 0;
  color: #63727c;
  font-size: 19px;
}

.login-field {
  display: grid;
  gap: 14px;
  color: #101c25;
  font-size: 16px;
  font-weight: 750;
}

.login-field[hidden] {
  display: none;
}

.login-field div {
  min-height: 64px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 0 22px;
  border: 1px solid #dce6ea;
  border-radius: 14px;
  background: #fff;
}

.login-field input,
.login-field select {
  width: 100%;
  border: 0;
  outline: 0;
  color: #101c25;
  background: transparent;
  font-size: 17px;
}

.login-field select {
  min-width: 0;
}

.login-field input::placeholder {
  color: #7a8791;
}

.signup-measure-field div {
  grid-template-columns: 26px minmax(0, 1fr) 84px;
}

.login-field button,
.forgot-button {
  padding: 0;
  background: transparent;
}

.forgot-button {
  justify-self: end;
  margin-top: -7px;
  color: #0072a0;
  font-size: 15px;
  font-weight: 720;
}

.login-submit {
  min-height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, #06475c, #006078);
  color: #fff;
  font-size: 20px;
  font-weight: 780;
  box-shadow: 0 18px 34px rgba(6, 62, 82, 0.22);
}

.login-error {
  min-height: 18px;
  margin: -10px 0 0;
  color: #b8323f;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  color: #6f7c86;
  font-size: 15px;
}

.login-divider span {
  height: 1px;
  background: #dfe7ea;
}

.login-divider em {
  font-style: normal;
}

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

.social-login button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #dde7eb;
  border-radius: 12px;
  background: #fff;
  font-weight: 750;
}

.social-login b {
  color: #0a77d5;
  font-size: 20px;
}

.login-privacy {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 42px;
  color: #63727c;
}

.login-privacy span {
  width: 42px;
  height: 42px;
}

.login-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 42px;
  padding-top: 40px;
  border-top: 1px solid rgba(10, 82, 105, 0.1);
}

.login-benefits article {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 0 26px;
  text-align: center;
  border-right: 1px solid #dce6ea;
}

.login-benefits article:last-child {
  border-right: 0;
}

.login-benefits h3 {
  margin: 0;
  font-size: 17px;
}

.login-benefits p {
  margin: 0;
  color: #63727c;
  font-size: 15px;
  line-height: 1.45;
}

.login-terms {
  margin: 42px 0 0;
  color: #63727c;
  text-align: center;
}

.mobile-auth-switch {
  display: none;
}

.legal-page {
  min-height: 100dvh;
  padding: 40px min(6vw, 66px);
  background:
    radial-gradient(circle at 16% 10%, rgba(200, 233, 244, 0.78), transparent 34%),
    radial-gradient(circle at 94% 4%, rgba(158, 212, 228, 0.34), transparent 30%),
    linear-gradient(135deg, #f2fbfe, #fff 56%, #eef8fb);
}

.legal-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.legal-header {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 34px;
}

.legal-back {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(10, 82, 105, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: #101c25;
  box-shadow: var(--soft-shadow);
}

.legal-badge {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: #e3f6fb;
  color: #0a5269;
  font-size: 14px;
  font-weight: 820;
}

.legal-hero-card,
.legal-footer-card,
.legal-section {
  border: 1px solid rgba(10, 82, 105, 0.09);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 70px rgba(17, 38, 47, 0.08);
  backdrop-filter: blur(18px);
}

.legal-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 32px;
  align-items: end;
  padding: 42px;
  border-radius: 30px;
  margin-bottom: 24px;
}

.legal-kicker {
  margin: 0 0 12px;
  color: #006f98;
  font-size: 16px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: 0;
}

.legal-hero-card h1 {
  max-width: 760px;
  margin: 0 0 20px;
  color: #101c25;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.05;
  font-weight: 860;
}

.legal-hero-card p,
.legal-footer-card p,
.legal-section p {
  margin: 0;
  color: #63727c;
  font-size: 17px;
  line-height: 1.65;
}

.legal-hero-card aside {
  padding: 24px;
  border-radius: 20px;
  background: #e8f8fc;
}

.legal-hero-card aside strong,
.legal-footer-card strong {
  display: block;
  margin-bottom: 8px;
  color: #063e52;
  font-size: 18px;
}

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

.legal-section {
  min-height: 220px;
  padding: 28px;
  border-radius: 24px;
}

.legal-section h2 {
  margin: 0 0 14px;
  color: #101c25;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 840;
}

.legal-warning {
  background: linear-gradient(150deg, #e8f8fc, rgba(255, 255, 255, 0.92));
  border-color: rgba(0, 111, 152, 0.18);
}

.legal-footer-card {
  margin-top: 22px;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #063e52, #0a5269);
}

.legal-footer-card strong,
.legal-footer-card p {
  color: #fff;
}

.app-stage {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  overscroll-behavior: none;
}

.phone-shell {
  position: relative;
  width: min(390px, calc(100vw - 28px));
  height: min(844px, calc(100dvh - 28px));
  min-height: min(720px, calc(100dvh - 28px));
  max-height: 900px;
  overflow: hidden;
  border-radius: 36px;
  background: var(--paper);
  box-shadow: var(--shadow);
  isolation: isolate;
  contain: layout paint;
}

.screen {
  display: none;
  height: 100%;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;
}

.screen::-webkit-scrollbar {
  display: none;
}

.screen.is-active {
  display: block;
}

.screen-home {
  padding: 28px 20px 104px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 28%),
    var(--paper);
}

.topbar,
.topbar-actions,
.hero-top-actions,
.section-heading,
.section-tools,
.booking-row,
.month-switch,
.contact-glass,
.call-controls {
  display: flex;
  align-items: center;
}

.topbar {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  padding: 0;
  background: transparent;
  color: #14222b;
  font-size: 23px;
  line-height: 1;
  font-weight: 800;
}

.brand-mark img {
  display: block;
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain;
}

.topbar-actions {
  gap: 10px;
}

.icon-button,
.avatar-button,
.round-action,
.plain-icon,
.call-control {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.icon-button {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.glass-button,
.soft-button {
  background: rgba(255, 255, 255, 0.78);
  color: #15242c;
  box-shadow: 0 12px 26px rgba(25, 42, 50, 0.06);
  backdrop-filter: blur(18px);
}

.soft-button {
  width: 58px;
  height: 58px;
  background: #f7f8f7;
}

.has-dot {
  position: relative;
}

.has-dot::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e05a62;
  box-shadow: 0 0 0 2px var(--white);
}

.avatar-button {
  width: 54px;
  height: 54px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}

.avatar-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-grid {
  display: flex;
  gap: 16px;
  height: 286px;
  margin-inline: -20px;
  padding: 0 20px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  touch-action: auto;
  user-select: none;
}

.featured-grid::-webkit-scrollbar {
  display: none;
}

.featured-grid.is-dragging {
  cursor: grabbing;
}

.doctor-card {
  position: relative;
  flex: 0 0 155px;
  overflow: hidden;
  border-radius: 27px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  scroll-snap-align: start;
  cursor: pointer;
}

.doctor-card .round-action,
[data-public-doctor],
[data-care-doctor] {
  cursor: pointer;
}

.doctor-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctor-card-primary {
  flex-basis: 205px;
  background: #bcdce7;
}

.doctor-card-primary > img {
  height: 78%;
  padding: 8px 4px 0;
  object-fit: contain;
  object-position: center bottom;
}

.doctor-card-sarah > img {
  padding-inline: 12px;
}

.doctor-card-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 94px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 13px 13px;
  border-radius: 21px;
  background: rgba(243, 250, 251, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
}

.doctor-card h2 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.12;
  font-weight: 780;
}

.verified-doctor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dff6ed;
  color: #11623a;
  font-size: 11px;
  font-weight: 900;
  vertical-align: middle;
}

.doctor-card p {
  margin: 0;
  color: #4f6871;
  font-size: 9px;
  line-height: 1.2;
}

.micro-icons {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.micro-icons span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: #1d3038;
  background: rgba(255, 255, 255, 0.82);
}

.round-action {
  width: 58px;
  height: 58px;
  align-self: end;
  border-radius: 50%;
}

.round-action.dark {
  color: #e7f7fb;
  background: var(--teal);
}

.doctor-card-secondary {
  flex-basis: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 13px 20px;
  border-radius: 27px 27px 0 0;
  box-shadow: none;
}

.secondary-photo {
  height: 170px;
  margin: -6px -6px 0;
  overflow: hidden;
  border-radius: 24px;
  background: #f9f8f5;
}

.secondary-photo img {
  object-fit: contain;
  object-position: center bottom;
}

.doctor-card-sarah .secondary-photo {
  background: #bcdce7;
}

.secondary-copy {
  padding-top: 15px;
}

.secondary-copy .micro-icons {
  margin-top: 16px;
}

.pull-handle {
  width: 42px;
  height: 4px;
  margin: 19px auto 13px;
  border-radius: 999px;
  background: #101b22;
}

.find-area {
  padding-bottom: 4px;
}

.section-heading {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 500;
}

.section-heading strong {
  font-weight: 820;
}

.section-tools {
  gap: 14px;
}

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

.service-card {
  position: relative;
  min-height: 140px;
  padding: 22px 20px 18px;
  overflow: hidden;
  text-align: left;
  border: 1px solid #edf1f1;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(29, 47, 55, 0.035);
}

.service-title,
.service-price,
.service-card small {
  display: block;
}

.service-title {
  min-height: 38px;
  font-size: 18px;
  line-height: 1.08;
  font-weight: 760;
}

.service-price {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
}

.service-card small {
  margin-top: 6px;
  color: #78858a;
  font-size: 10px;
}

.service-arrow {
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: #1b2b33;
  border-radius: 50%;
  background: #f8f9f8;
}

.service-card.is-selected {
  color: #fff;
  background: var(--teal);
}

.service-card.is-selected small {
  color: rgba(255, 255, 255, 0.66);
}

.service-card.is-selected .service-arrow {
  background: #d6f1f6;
  color: #12333f;
}

.health-guide-links {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--theme-border, #edf1f1);
  border-radius: 26px;
  background: var(--theme-card, #fff);
  box-shadow: 0 12px 30px rgba(29, 47, 55, 0.035);
}

.health-guide-links > span {
  display: block;
  margin-bottom: 7px;
  color: var(--theme-muted, #78858a);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.health-guide-links h2 {
  margin: 0 0 14px;
  color: var(--theme-text, #111b22);
  font-size: 18px;
  line-height: 1.15;
}

.health-guide-links nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.health-guide-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--theme-soft, #e9f8fb);
  color: var(--theme-teal, #12333f);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.health-guide-blog-button {
  justify-content: center;
  margin-top: 14px;
  width: 100%;
  background: var(--theme-primary, var(--teal)) !important;
  color: var(--theme-primary-contrast, #fff) !important;
}

.screen-mindfulness {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  color: #fff;
  background: #f5c8ae;
}

.mindfulness-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mindfulness-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.mindfulness-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 22, 35, 0.2) 0%, rgba(26, 22, 35, 0.04) 38%, rgba(19, 21, 28, 0.36) 70%, rgba(12, 17, 24, 0.72) 100%),
    radial-gradient(circle at 28% 56%, rgba(255, 240, 226, 0.18), transparent 24%);
  z-index: 1;
}

.mindfulness-face {
  position: absolute;
  left: 16%;
  top: 16%;
  width: min(50vw, 310px);
  height: min(70vw, 440px);
  border-radius: 58% 42% 45% 55% / 35% 46% 54% 65%;
  background:
    linear-gradient(108deg, transparent 0 24%, rgba(255, 246, 228, 0.92) 25% 56%, transparent 57%),
    linear-gradient(145deg, rgba(78, 53, 84, 0.88), rgba(240, 164, 149, 0.36));
  opacity: 0.72;
  mix-blend-mode: screen;
  transform: rotate(-5deg);
  display: none;
}

.mindfulness-face::before {
  content: "";
  position: absolute;
  right: 12%;
  top: 23%;
  width: 36%;
  height: 44%;
  border-radius: 50%;
  border-right: 4px solid rgba(255, 255, 255, 0.65);
  transform: rotate(12deg);
}

.mindfulness-wave {
  position: absolute;
  left: -12%;
  right: -12%;
  height: 28%;
  border-radius: 50%;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  filter: blur(0.2px);
  display: none;
}

.mindfulness-wave.one {
  bottom: 21%;
  transform: rotate(-8deg);
}

.mindfulness-wave.two {
  bottom: 13%;
  transform: rotate(5deg);
  opacity: 0.64;
}

.mindfulness-moon {
  position: absolute;
  right: 13%;
  top: 17%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 237, 205, 0.3);
  filter: blur(8px);
  display: none;
}

.mindfulness-status,
.mindfulness-top,
.mindfulness-middle,
.mindfulness-copy,
.mindfulness-bottom,
.mindfulness-notch {
  position: relative;
  z-index: 2;
}

.mindfulness-status {
  display: flex;
  justify-content: space-between;
  padding: 18px 28px 0;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.mindfulness-notch {
  width: 116px;
  height: 24px;
  margin: -4px auto 0;
  border-radius: 0 0 18px 18px;
  background: #080a0c;
}

.mindfulness-top,
.mindfulness-middle,
.mindfulness-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 28px;
}

.mindfulness-top {
  margin-top: 20px;
}

.mind-glass-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 34px rgba(21, 38, 55, 0.18);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.mind-glass-button.is-active {
  color: #2a1743;
  background: rgba(255, 255, 255, 0.82);
}

.vertical-dots {
  font-size: 28px;
  line-height: 1;
}

.mindfulness-middle {
  margin-top: clamp(74px, 13vh, 132px);
}

.mind-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.mind-floating-actions {
  display: grid;
  gap: 20px;
}

.mind-glass-button.has-badge span {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 36px;
  padding: 4px 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  background: #7d5bd9;
}

.mindfulness-copy {
  max-width: 520px;
  margin: clamp(68px, 11vh, 130px) 28px 0;
  text-shadow: 0 8px 28px rgba(24, 30, 42, 0.3);
}

.mindfulness-copy h1 {
  margin: 0;
  font-size: clamp(46px, 8.8vw, 74px);
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 780;
}

.mindfulness-copy em {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-style: italic;
}

.mindfulness-copy p {
  max-width: 490px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  line-height: 1.65;
}

.mindfulness-bottom {
  position: absolute;
  right: 0;
  bottom: 34px;
  left: 0;
  gap: 16px;
}

.mindfulness-bottom > div {
  display: flex;
  gap: 14px;
}

.mind-play-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 176px;
  height: 62px;
  padding: 0 12px 0 26px;
  color: #121c25;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(25, 32, 42, 0.2);
  font-size: 18px;
  font-weight: 850;
}

.mind-play-button i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: #142e3d;
}

.mind-play-button.is-playing i {
  background: #7d5bd9;
}

.screen-mindfulness::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  z-index: 3;
  width: 120px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  transform: translateX(-50%);
}

.screen-mindfulness-diary {
  position: relative;
  min-height: 100%;
  overflow-y: auto;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(234, 249, 253, 0.72), rgba(255, 255, 255, 0.94)),
    radial-gradient(circle at 12% 12%, rgba(228, 189, 215, 0.35), transparent 36%),
    radial-gradient(circle at 86% 28%, rgba(111, 190, 204, 0.25), transparent 34%);
}

.diary-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.diary-backdrop span {
  position: absolute;
  right: -8%;
  top: 4%;
  width: min(48vw, 320px);
  height: min(48vw, 320px);
  border-radius: 48% 52% 44% 56%;
  background: linear-gradient(135deg, rgba(247, 185, 194, 0.38), rgba(176, 225, 236, 0.52));
  filter: blur(3px);
}

.diary-header,
.diary-sound-card,
.reflection-prompt-card,
.diary-form,
.diary-streak-card,
.diary-history {
  position: relative;
  z-index: 1;
}

.diary-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.diary-header p {
  margin: 0 0 4px;
  color: #69777e;
  font-size: 14px;
  font-weight: 700;
}

.diary-header h1 {
  margin: 0;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1;
}

.diary-sound-card,
.reflection-prompt-card,
.diary-form,
.diary-streak-card,
.diary-history {
  border: 1px solid rgba(208, 225, 230, 0.9);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 44px rgba(26, 49, 62, 0.06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.diary-sound-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.diary-thumbnail {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  color: #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 242, 214, 0.9), transparent 34%),
    linear-gradient(145deg, #c2879b, #6db8cc);
  overflow: hidden;
}

.diary-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diary-sound-card span,
.diary-sound-card small,
.diary-streak-card span,
.diary-history small {
  color: #75848b;
}

.diary-sound-card strong {
  display: block;
  margin: 4px 0;
}

.reflection-prompt-card {
  margin-top: 18px;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(235, 248, 252, 0.9), rgba(255, 243, 231, 0.86)),
    rgba(255, 255, 255, 0.82);
}

.reflection-prompt-card span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2f7790;
  font-size: 13px;
  font-weight: 850;
}

.reflection-prompt-card p {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.45;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.reflection-prompt-card p.is-fading {
  opacity: 0;
  transform: translateY(8px);
}

.diary-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 20px;
}

.diary-form label span {
  display: block;
  margin-bottom: 10px;
  font-weight: 850;
}

.diary-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #dce8ec;
  border-radius: 22px;
  padding: 18px;
  font: inherit;
  line-height: 1.5;
  color: #10202a;
  background: rgba(255, 255, 255, 0.72);
}

.primary-action {
  min-height: 58px;
  color: #fff;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 18px 36px rgba(0, 76, 94, 0.18);
  font-size: 17px;
  font-weight: 850;
}

.diary-streak-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 20px;
}

.diary-streak-card strong {
  display: block;
  margin-top: 5px;
  font-size: 28px;
}

.diary-streak-card p {
  max-width: 430px;
  margin: 0;
  color: #65747c;
  line-height: 1.5;
}

.diary-history {
  margin-top: 18px;
  padding: 20px;
}

.diary-history header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.diary-history h2 {
  margin: 0;
  font-size: 22px;
}

.diary-entry-card {
  padding: 16px 0;
  border-top: 1px solid #e8f0f2;
}

.diary-entry-card time {
  color: #2f7790;
  font-size: 13px;
  font-weight: 800;
}

.diary-entry-card p {
  margin: 8px 0 0;
  color: #23343d;
  line-height: 1.55;
}

.diary-entry-card.is-empty {
  color: #75848b;
}

.screen-mindfulness-diary {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(16, 25, 35, 0.1), rgba(9, 22, 31, 0.72) 56%, rgba(7, 18, 27, 0.9)),
    url("./assets/diary-background.png"),
    radial-gradient(circle at 18% 18%, rgba(255, 205, 174, 0.72), transparent 31%),
    radial-gradient(circle at 78% 28%, rgba(189, 148, 219, 0.62), transparent 32%),
    linear-gradient(145deg, #2f4154 0%, #c88b95 48%, #f5c99b 100%);
  background-position: center;
  background-size: cover;
}

.screen-mindfulness-diary::after {
  content: "";
  position: fixed;
  bottom: 8px;
  left: 50%;
  z-index: 4;
  width: 118px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  transform: translateX(-50%);
}

.diary-backdrop::before {
  content: "";
  position: absolute;
  inset: -8%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(10, 27, 38, 0.42) 55%, rgba(8, 20, 30, 0.8)),
    radial-gradient(ellipse at 42% 24%, rgba(255, 238, 204, 0.5), transparent 24%),
    radial-gradient(ellipse at 52% 52%, rgba(255, 176, 158, 0.25), transparent 38%);
  filter: blur(0.4px);
}

.diary-backdrop span {
  right: auto;
  left: 8%;
  top: 12%;
  width: min(52vw, 380px);
  height: min(68vw, 520px);
  border-radius: 58% 42% 45% 55% / 35% 46% 54% 65%;
  background:
    linear-gradient(108deg, transparent 0 25%, rgba(255, 246, 228, 0.72) 26% 55%, transparent 56%),
    linear-gradient(145deg, rgba(69, 47, 79, 0.76), rgba(239, 154, 148, 0.22));
  opacity: 0.68;
  mix-blend-mode: screen;
  filter: none;
  transform: rotate(-4deg);
}

.diary-backdrop i {
  position: absolute;
  right: -12%;
  bottom: 8%;
  width: 70%;
  height: 30%;
  border-top: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  transform: rotate(7deg);
}

.diary-status {
  position: relative;
  z-index: 2;
  padding: 0 0 16px;
}

.diary-header,
.diary-hero-card,
.diary-sound-card,
.reflection-prompt-card,
.diary-form,
.diary-streak-card,
.diary-history {
  color: #fff;
}

.diary-header {
  justify-content: space-between;
  margin-bottom: 24px;
}

.diary-header > div {
  flex: 1;
}

.diary-header p,
.diary-sound-card span,
.diary-sound-card small,
.diary-streak-card span,
.diary-history small {
  color: rgba(255, 255, 255, 0.72);
}

.diary-header h1 {
  color: #fff;
  text-shadow: 0 14px 32px rgba(12, 22, 31, 0.36);
}

.diary-hero-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  max-width: 620px;
  margin: 42px 0 24px;
  text-shadow: 0 14px 34px rgba(11, 21, 31, 0.34);
}

.diary-hero-card h2 {
  max-width: 560px;
  margin: 0;
  font-size: clamp(34px, 7vw, 62px);
  line-height: 0.98;
  letter-spacing: 0;
  font-weight: 820;
}

.diary-hero-card p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.6;
}

.diary-tag {
  width: fit-content;
  background: rgba(255, 255, 255, 0.18);
}

.diary-sound-card,
.reflection-prompt-card,
.diary-form,
.diary-streak-card,
.diary-history {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.17);
  box-shadow: 0 24px 54px rgba(8, 21, 31, 0.24);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.diary-sound-card {
  grid-template-columns: 84px 1fr;
  padding: 16px;
}

.diary-thumbnail {
  width: 84px;
  height: 84px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 26px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 242, 214, 0.92), transparent 35%),
    linear-gradient(145deg, rgba(201, 128, 151, 0.9), rgba(91, 164, 190, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 16px 30px rgba(8, 21, 31, 0.2);
  overflow: hidden;
}

.diary-sound-card strong {
  color: #fff;
  font-size: 18px;
}

.diary-sound-main {
  min-width: 0;
}

.diary-player-controls {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.diary-player-controls .soft-button {
  width: 52px;
  height: 52px;
  color: #10202a;
  background: rgba(255, 255, 255, 0.86);
}

.diary-player-controls .soft-button.is-playing {
  color: #fff;
  background: #7d5bd9;
}

.diary-player-track {
  display: grid;
  gap: 7px;
}

.diary-player-track input {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(90deg, #fff 0 var(--progress, 0%), rgba(255, 255, 255, 0.25) var(--progress, 0%) 100%);
  outline: none;
}

.diary-player-track input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #7d5bd9;
  box-shadow: 0 8px 18px rgba(22, 19, 36, 0.28);
}

.diary-player-track input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #7d5bd9;
}

.diary-player-track p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.reflection-prompt-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 236, 220, 0.18)),
    rgba(255, 255, 255, 0.13);
}

.reflection-prompt-card span {
  color: rgba(255, 255, 255, 0.78);
}

.reflection-prompt-card p {
  color: #fff;
  font-size: 20px;
}

.diary-form label span {
  color: #fff;
}

.diary-form textarea {
  min-height: 190px;
  color: #10202a;
  border-color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.diary-streak-card strong,
.diary-history h2 {
  color: #fff;
}

.diary-streak-card p,
.diary-entry-card p {
  color: rgba(255, 255, 255, 0.82);
}

.diary-entry-card {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.diary-entry-card time {
  color: #fff2d1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-mindfulness-diary.is-active {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100%;
  padding: 42px 28px 34px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(16, 22, 32, 0.1), rgba(3, 7, 10, 0.64) 58%, rgba(0, 0, 0, 0.82)),
    url("./assets/diary-background.png") center / cover no-repeat;
}

.screen-mindfulness-diary .mindfulness-status,
.screen-mindfulness-diary .diary-backdrop {
  display: none;
}

.diary-topbar,
.diary-tabs,
.diary-write-panel,
.diary-history-panel,
.diary-bottom-grid,
.diary-share-card {
  position: relative;
  z-index: 2;
}

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

.diary-icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.diary-date-pill,
.diary-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.diary-date-pill strong {
  font-size: 21px;
}

.diary-streak-pill span {
  font-size: 30px;
}

.diary-streak-pill strong {
  display: grid;
  font-size: 20px;
  line-height: 1.05;
}

.diary-streak-pill small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 650;
}

.diary-tabs {
  display: flex;
  gap: 8px;
  width: fit-content;
}

.diary-tabs button {
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.12);
  font-size: 17px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.diary-tabs button.is-active {
  color: #111820;
  background: rgba(255, 255, 255, 0.94);
}

.diary-write-panel {
  flex: 1;
  display: flex;
  align-items: flex-start;
  min-height: 360px;
}

.diary-write-panel .diary-form {
  position: relative;
  width: 100%;
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.diary-write-panel textarea {
  min-height: 220px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font-size: clamp(40px, 9vw, 66px);
  line-height: 1.06;
  font-weight: 360;
  letter-spacing: 0;
  resize: none;
}

.diary-write-panel textarea::placeholder {
  color: rgba(255, 255, 255, 0.94);
}

.diary-floating-submit {
  position: absolute;
  right: 4px;
  bottom: -92px;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.diary-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.diary-save-row p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.35;
}

.diary-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  color: #111820;
  background: rgba(255, 255, 255, 0.96);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

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

.diary-bottom-grid .diary-sound-card,
.diary-bottom-grid .reflection-prompt-card,
.diary-share-card,
.diary-history-panel {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.diary-bottom-grid .diary-sound-card,
.diary-bottom-grid .reflection-prompt-card {
  display: grid;
  min-height: 235px;
  padding: 24px;
}

.diary-bottom-grid .diary-sound-card {
  grid-template-columns: 1fr;
}

.diary-bottom-grid .diary-sound-card span {
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.diary-bottom-grid .diary-sound-card strong,
.diary-bottom-grid .reflection-prompt-card strong {
  color: #fff;
  font-size: 20px;
  line-height: 1.18;
}

.diary-sound-actions {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.diary-round-button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.diary-round-button.is-primary {
  width: 66px;
  height: 66px;
  color: #111820;
  background: rgba(255, 255, 255, 0.94);
}

.diary-bottom-grid .reflection-prompt-card {
  align-content: start;
}

.diary-bottom-grid .reflection-prompt-card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 19px;
  line-height: 1.32;
}

.diary-share-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
}

.diary-share-card label {
  display: grid;
  gap: 7px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 800;
}

.diary-share-card label small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.diary-share-card select {
  min-height: 44px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.diary-share-card option {
  color: #101820;
}

.diary-share-card .primary-action {
  min-height: 44px;
  padding: 0 18px;
  color: #111820;
  background: #fff;
  box-shadow: none;
  font-size: 14px;
}

.diary-history-panel {
  max-height: 440px;
  overflow-y: auto;
  padding: 20px;
}

.diary-entry-card {
  display: grid;
  gap: 8px;
}

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

.diary-entry-actions button {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
}

.doctor-diary-group {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid #e8f0f2;
}

.doctor-diary-group h3 {
  margin: 0;
  color: #0f3442;
  font-size: 16px;
}

.doctor-diary-group p {
  margin: 0;
  color: #5f6f78;
  line-height: 1.5;
}

.doctor-diary-entry {
  padding: 12px;
  border-radius: 14px;
  background: #f6fafb;
}

@media (max-width: 560px) {
  .screen-mindfulness-diary {
    padding: 34px 20px 28px;
  }

  .diary-topbar {
    grid-template-columns: 1fr auto;
  }

  .diary-icon-button {
    display: none;
  }

  .diary-date-pill strong {
    font-size: 18px;
  }

  .diary-write-panel {
    min-height: 330px;
  }

  .diary-bottom-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .diary-bottom-grid .diary-sound-card,
  .diary-bottom-grid .reflection-prompt-card {
    min-height: 205px;
    padding: 18px;
  }

  .diary-share-card {
    grid-template-columns: 1fr;
  }

  .diary-save-row {
    align-items: stretch;
    flex-direction: column;
  }

  .diary-save-button {
    width: 100%;
  }
}

.mind-library-sheet {
  display: grid;
  gap: 12px;
}

.mind-library-sheet button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  text-align: left;
  border: 1px solid #e3eef2;
  border-radius: 18px;
  background: #fff;
}

.mind-library-sheet svg {
  color: #2f7790;
}

.mind-library-sheet strong,
.mind-library-sheet small {
  display: block;
}

.mind-library-sheet small {
  margin-top: 2px;
  color: #77878e;
}

.pregnancy-service-card {
  color: #111;
  border-color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 85% 20%, rgba(216, 79, 199, 0.22), transparent 34%),
    linear-gradient(145deg, #fff7f5 0%, #fce8e5 48%, #f8d3cc 100%);
}

.pregnancy-service-card.is-selected {
  color: #111;
  background:
    radial-gradient(circle at 86% 18%, rgba(216, 79, 199, 0.28), transparent 32%),
    linear-gradient(145deg, #fff7f5 0%, #fce8e5 45%, #f8d3cc 100%);
}

.pregnancy-service-card.is-selected small,
.pregnancy-service-card small {
  color: rgba(17, 17, 17, 0.62);
}

.pregnancy-service-card::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #fff 0 26%, transparent 27%),
    linear-gradient(135deg, #f8d3cc, #d84fc7);
  opacity: 0.72;
}

.pregnancy-service-card .service-arrow,
.pregnancy-service-card.is-selected .service-arrow {
  background: rgba(255, 255, 255, 0.76);
  color: #111;
  box-shadow: 0 12px 24px rgba(216, 79, 199, 0.14);
}

.screen-pregnancy-care {
  --preg-bg: #fff7f5;
  --preg-peach: #f8d3cc;
  --preg-blush: #fce8e5;
  --preg-pink: #d84fc7;
  --preg-purple: #8b5cf6;
  --preg-green: #55c878;
  --preg-text: #111;
  --preg-muted: #8a7f82;
  --preg-surface: rgba(255, 255, 255, 0.72);
  --preg-surface-strong: rgba(255, 255, 255, 0.86);
  --preg-surface-soft: rgba(255, 255, 255, 0.6);
  --preg-border: rgba(255, 255, 255, 0.8);
  --preg-input: rgba(255, 255, 255, 0.78);
  --preg-input-text: #111;
  --preg-primary: #111;
  --preg-primary-contrast: #fff;
  --preg-shadow: rgba(216, 79, 199, 0.12);
  min-height: 100%;
  padding: 22px 20px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  color: var(--preg-text);
  background:
    radial-gradient(circle at 76% 6%, rgba(216, 79, 199, 0.14), transparent 28%),
    linear-gradient(180deg, #fff 0%, var(--preg-bg) 48%, #ffd6cc 100%);
}

.pregnancy-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(100%, 430px);
  min-height: min(100%, 760px);
  margin: 0 auto;
}

.pregnancy-glass {
  border: 1px solid var(--preg-border);
  background: var(--preg-surface-soft);
  box-shadow: 0 22px 48px var(--preg-shadow);
  backdrop-filter: blur(18px);
}

.pregnancy-status,
.pregnancy-topbar,
.pregnancy-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pregnancy-status {
  padding: 2px 10px 0;
  color: var(--preg-text);
  font-size: 14px;
  font-weight: 800;
}

.pregnancy-pill,
.pregnancy-profile-pill,
.pregnancy-pill-button {
  border: 1px solid var(--preg-border);
  border-radius: 20px;
  background: var(--preg-surface-strong);
  box-shadow: 0 14px 28px rgba(70, 42, 50, 0.08);
  backdrop-filter: blur(18px);
}

.pregnancy-pill {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 22px;
  font-size: 20px;
  font-weight: 780;
}

.pregnancy-pill-button {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
}

.pregnancy-pill-button .icon,
.pregnancy-profile-pill .icon {
  width: 22px;
  height: 22px;
}

.pregnancy-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 18px 8px 8px;
  font-size: 17px;
}

.pregnancy-mini-avatar,
.pregnancy-baby-avatar {
  display: inline-block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #fff 0 22%, transparent 23%),
    radial-gradient(circle at 48% 60%, #8b5cf6 0 14%, transparent 15%),
    linear-gradient(135deg, #ffdce8, #f2b7db);
}

.pregnancy-onboarding-card {
  min-height: calc(100vh - 170px);
  padding: 18px;
  overflow: hidden;
  border-radius: 36px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.58) 42%, rgba(248, 211, 204, 0.96));
  box-shadow: 0 28px 70px rgba(216, 79, 199, 0.16);
}

.pregnancy-onboarding-visual {
  height: min(48vh, 440px);
  margin: 12px 0 24px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 30px;
  background: linear-gradient(135deg, #fff, #fce8e5);
  box-shadow: 0 20px 42px rgba(70, 42, 50, 0.1);
}

.pregnancy-onboarding-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pregnancy-onboarding-copy {
  display: grid;
  gap: 18px;
  text-align: center;
}

.pregnancy-onboarding-copy h1,
.pregnancy-growth-title,
.pregnancy-setup-hero h1 {
  margin: 0;
  color: var(--preg-text);
  font-size: clamp(40px, 7vw, 62px);
  line-height: 1;
  font-weight: 880;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.pregnancy-onboarding-copy p,
.pregnancy-setup-hero p,
.pregnancy-disclaimer,
.pregnancy-week-card p,
.pregnancy-tracker-card p {
  margin: 0;
  color: var(--preg-muted);
  font-size: 14px;
  line-height: 1.45;
}

.pregnancy-outline-cta,
.pregnancy-primary,
.pregnancy-secondary,
.pregnancy-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 850;
}

.pregnancy-outline-cta {
  color: var(--preg-text);
  border: 2px solid var(--preg-border);
  background: var(--preg-surface-soft);
}

.pregnancy-primary {
  color: var(--preg-primary-contrast);
  background: var(--preg-primary);
}

.pregnancy-secondary {
  color: var(--preg-text);
  background: var(--preg-surface-strong);
}

.pregnancy-danger {
  color: #8c2437;
  background: var(--preg-surface-soft);
}

.pregnancy-setup-hero,
.pregnancy-setup-form,
.pregnancy-profile-card {
  display: grid;
  gap: 14px;
  padding: 24px;
  border-radius: 30px;
  background: var(--preg-surface);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--preg-shadow) 80%, transparent);
}

.pregnancy-setup-hero span {
  display: block;
  margin-bottom: 12px;
  color: var(--preg-pink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pregnancy-setup-form {
  display: grid;
  gap: 14px;
}

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

.pregnancy-setup-form label,
.pregnancy-reminder-form label {
  display: grid;
  gap: 8px;
  color: var(--preg-text);
  font-size: 13px;
  font-weight: 850;
}

.pregnancy-setup-form small,
.pregnancy-reminder-form small {
  color: var(--preg-muted);
  font-weight: 700;
}

.pregnancy-setup-form input,
.pregnancy-setup-form select,
.pregnancy-reminder-form input,
.pregnancy-reminder-form select,
.pregnancy-reminder-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--preg-border);
  border-radius: 16px;
  color: var(--preg-input-text);
  background: var(--preg-input);
  font: inherit;
  font-weight: 750;
}

.pregnancy-setup-form input.is-hidden {
  display: none;
}

.pregnancy-reminder-form textarea {
  min-height: 106px;
  padding: 14px;
  resize: vertical;
}

.pregnancy-error {
  min-height: 20px;
  margin: 0;
  color: #a42938;
  font-size: 13px;
  font-weight: 850;
}

.pregnancy-week-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border-radius: 28px;
}

.pregnancy-week-card h1,
.pregnancy-tracker-card h2,
.pregnancy-profile-card h1,
.pregnancy-profile-card h2 {
  margin: 0 0 4px;
  color: #050505;
  font-size: 28px;
  line-height: 1;
  font-weight: 880;
}

.pregnancy-baby-avatar {
  width: 58px;
  height: 58px;
}

.pregnancy-days-ring {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:
    conic-gradient(var(--preg-pink) 0 74%, rgba(255, 255, 255, 0.72) 74% 100%);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.72);
}

.pregnancy-days-ring strong {
  font-size: 20px;
  line-height: 1;
}

.pregnancy-days-ring span {
  margin-top: -10px;
  font-size: 11px;
  font-weight: 800;
}

.pregnancy-tracker-card {
  padding: 24px;
  text-align: center;
  border-radius: 30px;
}

.pregnancy-progress-wrap {
  position: relative;
  width: min(100%, 260px);
  margin: 8px auto 0;
}

.pregnancy-progress {
  width: 100%;
  filter: drop-shadow(0 16px 22px rgba(139, 92, 246, 0.12));
}

.pregnancy-progress circle {
  fill: none;
  stroke-linecap: round;
  stroke-width: 14;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.pregnancy-progress .ring-bg {
  stroke: rgba(255, 255, 255, 0.78);
}

.pregnancy-progress .ring {
  stroke-dasharray: 390;
  stroke-dashoffset: calc(390 - (390 * var(--progress, 0)) / 100);
  transition: stroke-dashoffset 260ms ease;
}

.ring-water {
  stroke: var(--preg-pink);
}

.ring-sleep {
  stroke: var(--preg-purple);
}

.ring-meals {
  stroke: var(--preg-green);
}

.pregnancy-day-chip {
  position: absolute;
  left: 50%;
  bottom: 10px;
  min-width: 72px;
  padding: 5px 10px;
  border: 1px solid rgba(216, 79, 199, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
}

.pregnancy-line-art {
  height: 34px;
  margin: -12px 12px 0;
  border-bottom: 3px solid rgba(216, 79, 199, 0.28);
  border-radius: 50%;
}

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

.pregnancy-quick-actions button {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 80px;
  padding: 10px 6px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 12px 26px rgba(70, 42, 50, 0.07);
  font-size: 10px;
  font-weight: 850;
}

.pregnancy-quick-actions .mini-icon {
  width: 22px;
  height: 22px;
  color: var(--preg-pink);
}

.pregnancy-bottom-nav {
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 3px;
  min-height: 58px;
  margin-top: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 18px 32px rgba(70, 42, 50, 0.12);
  backdrop-filter: blur(18px);
}

.screen-pregnancy-care.is-active ~ .app-nav {
  display: none;
}

.screen-mindfulness.is-active ~ .app-nav,
.screen-mindfulness-diary.is-active ~ .app-nav,
.screen-message-thread.is-active ~ .app-nav {
  display: none;
}

.pregnancy-bottom-nav button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 44px;
  border-radius: 999px;
  color: rgba(17, 17, 17, 0.6);
  font-size: 9px;
  font-weight: 850;
}

.pregnancy-bottom-nav button.is-active {
  color: #fff;
  background: var(--preg-pink);
}

.pregnancy-bottom-nav .icon {
  width: 18px;
  height: 18px;
}

.pregnancy-growth-shell {
  min-height: calc(100vh - 160px);
  overflow: visible;
  padding-bottom: 76px;
}

.pregnancy-week-kicker {
  margin: 4px 0 -8px;
  font-size: 18px;
  font-weight: 760;
}

.pregnancy-growth-title {
  z-index: 2;
  max-width: 390px;
  font-size: clamp(42px, 8vw, 58px);
  line-height: 1;
}

.pregnancy-fetus-visual {
  position: relative;
  min-height: 340px;
  margin-top: -10px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 54% 44%, rgba(255, 56, 56, 0.78), rgba(255, 108, 90, 0.26) 24%, transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(248, 211, 204, 0.64));
  box-shadow: inset 0 -70px 90px rgba(248, 211, 204, 0.72);
}

.pregnancy-fetus-visual::before {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 28px;
  width: 220px;
  height: 285px;
  border-radius: 54% 46% 46% 54% / 48% 54% 46% 52%;
  background:
    radial-gradient(circle at 46% 22%, #e7393a 0 25%, transparent 26%),
    radial-gradient(circle at 37% 34%, rgba(255, 255, 255, 0.28) 0 5%, transparent 6%),
    radial-gradient(circle at 50% 54%, #fb6a5f 0 28%, transparent 29%);
  filter: blur(0.2px);
  opacity: 0.9;
}

.pregnancy-fetus-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.pregnancy-floating-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: -90px;
  z-index: 2;
}

.pregnancy-metric-card {
  min-height: 110px;
  padding: 18px;
  border-radius: 24px;
}

.pregnancy-metric-card span,
.pregnancy-profile-row span {
  display: block;
  color: rgba(17, 17, 17, 0.52);
  font-size: 13px;
  font-weight: 780;
}

.pregnancy-metric-card strong {
  display: block;
  margin-top: 8px;
  color: #111;
  font-size: 22px;
  line-height: 1.08;
  font-weight: 880;
}

.pregnancy-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 10px;
  border-radius: 24px;
  background: rgba(252, 212, 232, 0.76);
}

.pregnancy-tabs button {
  min-height: 52px;
  border-radius: 16px;
  color: #111;
  font-size: 16px;
  font-weight: 760;
}

.pregnancy-tabs button.is-active {
  color: #fff;
  background: var(--preg-pink);
  box-shadow: 0 14px 24px rgba(216, 79, 199, 0.2);
}

.pregnancy-symptom-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 24px;
  border-radius: 30px;
}

.pregnancy-symptom-card h2 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 24px;
}

.pregnancy-symptom-chart {
  width: 190px;
  max-width: 100%;
}

.pregnancy-symptom-chart circle {
  fill: none;
  stroke-linecap: round;
  stroke-width: 18;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.pregnancy-legend {
  display: grid;
  align-content: center;
  gap: 24px;
}

.pregnancy-legend-item {
  display: grid;
  grid-template-columns: 7px 1fr;
  gap: 14px;
  align-items: center;
}

.pregnancy-legend-item i {
  width: 7px;
  height: 56px;
  border-radius: 999px;
}

.pregnancy-legend-item strong,
.pregnancy-action-card strong {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.pregnancy-legend-item span,
.pregnancy-action-card span {
  display: block;
  margin-top: 4px;
  color: var(--preg-muted);
  font-size: 14px;
}

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

.pregnancy-action-card,
.pregnancy-log-button,
.pregnancy-reminder-card,
.pregnancy-profile-row {
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 16px 32px rgba(216, 79, 199, 0.08);
}

.pregnancy-action-card {
  display: grid;
  gap: 16px;
  min-height: 150px;
  padding: 20px;
}

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

.pregnancy-log-button {
  min-height: 74px;
  padding: 12px;
  color: #111;
  font-weight: 850;
}

.pregnancy-log-button.is-selected {
  background: rgba(216, 79, 199, 0.16);
  border-color: rgba(216, 79, 199, 0.38);
  color: #111;
}

.pregnancy-note-field {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: #111;
  font-weight: 850;
}

.pregnancy-note-field textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.58);
  padding: 16px;
  color: #111;
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.pregnancy-reminder-form {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 28px;
}

.pregnancy-reminders-list {
  display: grid;
  gap: 12px;
}

.pregnancy-reminder-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 18px;
}

.pregnancy-reminder-card strong,
.pregnancy-profile-row strong {
  display: block;
  color: #111;
  font-size: 18px;
}

.pregnancy-reminder-card small {
  color: var(--preg-muted);
  font-weight: 760;
}

.pregnancy-reminder-actions {
  display: flex;
  gap: 8px;
}

.pregnancy-reminder-actions button {
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
  background: #fff;
  font-weight: 900;
}

.pregnancy-profile-card {
  display: grid;
  gap: 14px;
}

.pregnancy-profile-summary {
  display: grid;
  gap: 10px;
}

.pregnancy-profile-row {
  padding: 16px;
}

@media (min-width: 900px) {
  .screen-pregnancy-onboarding,
  .screen-pregnancy-setup {
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 34px 34px 72px;
  }

  .screen-pregnancy-onboarding.is-active,
  .screen-pregnancy-setup.is-active {
    display: flex;
  }

  .screen-pregnancy-onboarding .pregnancy-shell,
  .screen-pregnancy-setup .pregnancy-shell {
    width: min(100%, 1040px);
    min-height: auto;
  }

  .pregnancy-onboarding-card {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(420px, 1.15fr);
    align-items: center;
    gap: clamp(26px, 3vw, 42px);
    min-height: min(680px, calc(100vh - 112px));
    padding: 38px;
  }

  .pregnancy-onboarding-card .pregnancy-status {
    display: none;
  }

  .pregnancy-onboarding-visual {
    height: min(560px, calc(100vh - 190px));
    min-height: 360px;
    margin: 0;
    border-radius: 34px;
  }

  .pregnancy-onboarding-copy {
    max-width: 520px;
    min-width: 0;
    text-align: left;
  }

  .pregnancy-onboarding-copy h1 {
    font-size: clamp(52px, 4.2vw, 66px);
    line-height: 0.98;
  }

  .pregnancy-onboarding-copy p {
    max-width: 390px;
    font-size: 16px;
  }

  .pregnancy-outline-cta {
    width: min(100%, 360px);
  }

  .screen-pregnancy-setup .pregnancy-shell {
    width: min(100%, 980px);
  }

  .pregnancy-setup-hero,
  .pregnancy-setup-form {
    padding: 30px;
  }

  .pregnancy-setup-hero h1 {
    max-width: 850px;
    font-size: clamp(48px, 4.6vw, 68px);
    line-height: 1.02;
  }

  .pregnancy-setup-hero p {
    max-width: 780px;
    font-size: 16px;
  }

  .screen-pregnancy-growth .pregnancy-shell {
    width: min(100%, 920px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    align-items: start;
    gap: 18px 32px;
    padding-bottom: 92px;
  }

  .screen-pregnancy-growth .pregnancy-topbar,
  .screen-pregnancy-growth .pregnancy-week-kicker,
  .screen-pregnancy-growth .pregnancy-growth-title {
    grid-column: 1;
  }

  .screen-pregnancy-growth .pregnancy-topbar {
    grid-column: 1 / -1;
  }

  .screen-pregnancy-growth .pregnancy-growth-title {
    max-width: 430px;
    font-size: clamp(46px, 4.8vw, 64px);
  }

  .screen-pregnancy-growth .pregnancy-fetus-visual {
    grid-column: 2;
    grid-row: 2 / span 3;
    min-height: 430px;
    margin-top: 0;
  }

  .screen-pregnancy-growth .pregnancy-floating-metrics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
  }

  .screen-pregnancy-growth .pregnancy-metric-card {
    min-height: 120px;
  }

  .screen-pregnancy-growth .pregnancy-disclaimer,
  .screen-pregnancy-growth .pregnancy-bottom-nav {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .screen-pregnancy-care {
    padding-inline: 16px;
  }

  .pregnancy-form-grid,
  .pregnancy-floating-metrics,
  .pregnancy-action-grid {
    grid-template-columns: 1fr;
  }

  .pregnancy-quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pregnancy-symptom-card {
    grid-template-columns: 1fr;
  }

  .pregnancy-legend {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .pregnancy-legend-item {
    grid-template-columns: 1fr;
  }

  .pregnancy-legend-item i {
    width: 100%;
    height: 7px;
  }
}

.screen-health-questions,
.screen-question-detail,
.screen-ask-question {
  padding: 28px 20px 116px;
  background:
    radial-gradient(circle at 85% 0%, rgba(210, 242, 249, 0.8), transparent 30%),
    linear-gradient(180deg, #f7fcfd, #fff 42%);
}

.screen-depression-screening {
  --depression-page-bg:
    radial-gradient(circle at 88% 4%, rgba(236, 210, 231, 0.92), transparent 34%),
    radial-gradient(circle at 8% 12%, rgba(221, 232, 245, 0.86), transparent 32%),
    linear-gradient(180deg, #fff7fb, #f8f1f8 48%, #fff);
  --depression-text: #321b35;
  --depression-text-strong: #35183b;
  --depression-muted: #755d78;
  --depression-primary: #59245d;
  --depression-primary-contrast: #ffffff;
  --depression-accent: #8b4a83;
  --depression-accent-2: #c778a4;
  --depression-surface: rgba(255, 255, 255, 0.82);
  --depression-surface-strong: #ffffff;
  --depression-surface-soft: #fff9fd;
  --depression-option: #ffffff;
  --depression-option-selected: #fbf1f8;
  --depression-chip-bg: rgba(255, 255, 255, 0.72);
  --depression-border: rgba(126, 65, 121, 0.12);
  --depression-border-strong: rgba(89, 36, 93, 0.18);
  --depression-progress-bg: #eadde9;
  --depression-number-bg: #f3e5f0;
  --depression-danger: #9f3046;
  --depression-danger-bg: #fff7f8;
  --depression-danger-chip: #ffe5e9;
  --depression-shadow: rgba(76, 32, 77, 0.11);
  padding: 28px 20px 116px;
  color: var(--depression-text);
  background: var(--depression-page-bg);
}

.depression-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.depression-header > div {
  flex: 1;
}

.depression-header span,
.depression-kicker,
.depression-alert-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--depression-primary);
  background: var(--depression-chip-bg);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
}

.depression-header h1 {
  margin: 10px 0 8px;
  color: var(--depression-text-strong);
  font-size: clamp(30px, 6vw, 50px);
  line-height: 1;
  font-weight: 900;
}

.depression-header p {
  margin: 0;
  color: var(--depression-muted);
  font-size: 15px;
}

.depression-card {
  overflow: hidden;
  border: 1px solid var(--depression-border);
  border-radius: 8px;
  padding: 22px;
  background: var(--depression-surface);
  box-shadow: 0 18px 44px var(--depression-shadow);
}

.depression-card h2 {
  margin: 12px 0 12px;
  color: var(--depression-text-strong);
  font-size: 26px;
  line-height: 1.08;
  font-weight: 890;
}

.depression-card p {
  margin: 0;
  color: var(--depression-muted);
  font-size: 15px;
  line-height: 1.55;
}

.depression-disclaimer,
.depression-result-notes,
.depression-pattern {
  margin-top: 18px;
  border: 1px solid var(--depression-border);
  border-radius: 8px;
  padding: 14px;
  background: var(--depression-surface-soft);
}

.depression-disclaimer strong {
  display: block;
  margin-bottom: 6px;
  color: var(--depression-text-strong);
}

.depression-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  margin: 18px 0;
  color: var(--depression-text);
  font-size: 15px;
  line-height: 1.45;
}

.depression-consent input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--depression-primary);
}

.depression-primary,
.depression-secondary,
.depression-help-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 8px;
  font-weight: 850;
  text-decoration: none;
}

.depression-primary {
  width: 100%;
  border: 0;
  color: var(--depression-primary-contrast);
  background: var(--depression-primary);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--depression-primary) 28%, transparent);
}

.depression-secondary {
  border: 1px solid var(--depression-border-strong);
  padding: 0 18px;
  color: var(--depression-primary);
  background: var(--depression-surface-strong);
}

.depression-secondary:disabled {
  opacity: 0.55;
}

.depression-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--depression-muted);
  font-size: 13px;
  font-weight: 800;
}

.depression-progress strong {
  color: var(--depression-primary);
}

.depression-progress-bar {
  overflow: hidden;
  height: 8px;
  margin: 12px 0 18px;
  border-radius: 999px;
  background: var(--depression-progress-bg);
}

.depression-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--depression-accent), var(--depression-accent-2));
}

.depression-timeframe {
  font-weight: 760;
}

.depression-options {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.depression-options button {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  border: 1px solid var(--depression-border);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--depression-text);
  background: var(--depression-option);
  text-align: left;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--depression-shadow) 62%, transparent);
}

.depression-options button strong {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--depression-primary);
  background: var(--depression-number-bg);
}

.depression-options button.is-selected,
.depression-options button:hover {
  border-color: var(--depression-border-strong);
  background: var(--depression-option-selected);
}

.depression-actions,
.depression-result-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.depression-result-actions .depression-primary,
.depression-result-actions .depression-secondary {
  flex: 1;
}

.depression-safety-card,
.depression-result-card.has-safety-flag {
  border-color: color-mix(in srgb, var(--depression-danger) 30%, var(--depression-border));
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--depression-danger-bg) 88%, transparent), transparent 36%),
    var(--depression-surface-strong);
}

.depression-alert-label {
  color: var(--depression-danger);
  background: var(--depression-danger-chip);
}

.depression-help-grid {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.depression-help-grid a {
  border: 1px solid color-mix(in srgb, var(--depression-danger) 22%, var(--depression-border));
  color: var(--depression-danger);
  background: var(--depression-danger-bg);
}

.depression-score-ring {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin: 4px auto 18px;
  border: 10px solid var(--depression-progress-bg);
  border-radius: 50%;
  background: var(--depression-surface-strong);
}

.depression-score-ring span {
  color: var(--depression-text-strong);
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
}

.depression-score-ring small {
  color: var(--depression-muted);
  font-size: 12px;
  font-weight: 820;
}

.depression-severity {
  font-weight: 800;
}

.depression-result-safety {
  margin-bottom: 20px;
  border-radius: 8px;
  padding: 16px;
  background: var(--depression-danger-bg);
}

.depression-pattern summary {
  color: var(--depression-primary);
  font-weight: 850;
  cursor: pointer;
}

.depression-pattern p {
  margin-top: 10px;
}

html:not([data-app-theme]) .screen-depression-screening {
  --depression-page-bg:
    radial-gradient(circle at 85% 0%, rgba(210, 242, 249, 0.8), transparent 30%),
    linear-gradient(180deg, #f7fcfd, #fff 42%);
  --depression-text: var(--theme-text, #101c25);
  --depression-text-strong: var(--theme-text-strong, #101c25);
  --depression-muted: var(--theme-muted, #6d7b82);
  --depression-primary: var(--theme-primary, #063e52);
  --depression-primary-contrast: var(--theme-primary-contrast, #ffffff);
  --depression-accent: var(--theme-primary-2, #0a5269);
  --depression-accent-2: var(--theme-accent, #9ed4e4);
  --depression-surface: var(--theme-surface, #ffffff);
  --depression-surface-strong: var(--theme-surface-strong, #ffffff);
  --depression-surface-soft: var(--theme-surface-soft, #f8fbfc);
  --depression-option: #ffffff;
  --depression-option-selected: var(--theme-accent-muted, #e8f8fc);
  --depression-chip-bg: var(--theme-accent-soft, #dff5fb);
  --depression-border: var(--theme-border, #e5ecef);
  --depression-border-strong: var(--theme-border-strong, #d8edf3);
  --depression-progress-bg: var(--theme-accent-muted, #e8f8fc);
  --depression-number-bg: var(--theme-accent-soft, #dff5fb);
  --depression-shadow: var(--theme-shadow-color, rgba(17, 38, 47, 0.08));
}

html[data-app-theme="apyva"] .screen-depression-screening {
  --depression-page-bg:
    radial-gradient(circle at 80% 5%, rgba(220, 207, 232, 0.62), transparent 28%),
    linear-gradient(180deg, #faf6f3, #fff 46%, #fbf0f2);
  --depression-text: var(--theme-text);
  --depression-text-strong: var(--theme-text-strong);
  --depression-muted: var(--theme-muted);
  --depression-primary: var(--theme-primary);
  --depression-primary-contrast: var(--theme-primary-contrast);
  --depression-accent: var(--theme-primary-2);
  --depression-accent-2: var(--theme-accent);
  --depression-surface: var(--theme-surface);
  --depression-surface-strong: var(--theme-surface-strong);
  --depression-surface-soft: var(--theme-panel-soft);
  --depression-option: var(--theme-surface-strong);
  --depression-option-selected: var(--theme-accent-muted);
  --depression-chip-bg: var(--theme-accent-soft);
  --depression-border: var(--theme-border);
  --depression-border-strong: var(--theme-border-strong);
  --depression-progress-bg: var(--theme-accent-soft);
  --depression-number-bg: var(--theme-accent-soft);
  --depression-shadow: var(--theme-shadow-color);
}

html[data-app-theme="dark"] .screen-depression-screening,
html[data-app-theme="apyva-dark"] .screen-depression-screening {
  --depression-page-bg: var(--theme-page-gradient);
  --depression-text: var(--theme-text);
  --depression-text-strong: var(--theme-text-strong);
  --depression-muted: var(--theme-muted);
  --depression-primary: var(--theme-primary);
  --depression-primary-contrast: var(--theme-primary-contrast);
  --depression-accent: var(--theme-primary-2);
  --depression-accent-2: var(--theme-accent);
  --depression-surface: var(--theme-surface);
  --depression-surface-strong: var(--theme-surface-strong);
  --depression-surface-soft: var(--theme-panel-soft);
  --depression-option: color-mix(in srgb, var(--theme-surface-strong) 92%, #000 8%);
  --depression-option-selected: var(--theme-accent-soft);
  --depression-chip-bg: var(--theme-accent-soft);
  --depression-border: var(--theme-border);
  --depression-border-strong: var(--theme-border-strong);
  --depression-progress-bg: var(--theme-accent-muted);
  --depression-number-bg: var(--theme-accent-soft);
  --depression-danger: #ff9cab;
  --depression-danger-bg: color-mix(in srgb, #9f3046 18%, var(--theme-surface));
  --depression-danger-chip: color-mix(in srgb, #9f3046 26%, var(--theme-surface));
  --depression-shadow: var(--theme-shadow-color);
}

.questions-header,
.question-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.questions-header > div,
.question-detail-header > div {
  flex: 1;
}

.questions-header h1,
.question-detail-header h1 {
  margin: 0;
  color: #111e28;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 0.98;
  font-weight: 880;
}

.questions-header p,
.question-detail-header p {
  margin: 8px 0 0;
  color: #6f7d85;
  font-size: 15px;
}

.questions-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-bottom: 18px;
}

.questions-toolbar label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid #e2edf1;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(18, 52, 66, 0.05);
}

.questions-toolbar input {
  width: 100%;
  border: 0;
  outline: 0;
  font: inherit;
  background: transparent;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 22px;
  color: #12333f;
  background: #e8f7fb;
  font-weight: 850;
}

.question-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 12px;
  scrollbar-width: none;
}

.question-tabs::-webkit-scrollbar {
  display: none;
}

.question-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 11px 14px;
  border: 1px solid #e0edf2;
  border-radius: 999px;
  color: #53646d;
  background: #fff;
  font-weight: 800;
}

.question-tabs button.is-active {
  color: #0d6f91;
  border-color: #bfe8f1;
  background: #e8f8fc;
}

.question-tabs b {
  min-width: 26px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  background: #14708b;
  font-size: 11px;
}

.question-list {
  display: grid;
  gap: 16px;
}

.question-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2edf1;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(18, 52, 66, 0.06);
}

.question-card.is-unanswered {
  background: linear-gradient(135deg, rgba(232, 248, 252, 0.9), rgba(255, 255, 255, 0.96));
}

.question-card.is-pending-review {
  border-style: dashed;
  background: linear-gradient(135deg, rgba(255, 248, 224, 0.7), rgba(255, 255, 255, 0.96));
}

.question-card-main {
  min-width: 0;
  padding: 0;
  text-align: left;
  background: transparent;
}

.question-card header,
.question-detail-card header,
.answer-card header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.question-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  color: #0e5468;
  border-radius: 50%;
  background: #dff5fb;
  font-weight: 900;
}

.question-card header div,
.question-detail-card header div,
.answer-card header {
  min-width: 0;
  flex: 1;
}

.question-card strong,
.question-detail-card strong,
.answer-card strong {
  display: block;
  color: #11202a;
  font-size: 16px;
  font-weight: 880;
}

.question-card small,
.question-detail-card small,
.answer-card small {
  color: #69777e;
}

.question-card time,
.answer-card time {
  color: #7b8990;
  font-size: 12px;
  white-space: nowrap;
}

.question-card-copy h2,
.question-detail-card h2 {
  margin: 16px 0 8px;
  color: #101d27;
  font-size: 21px;
  line-height: 1.1;
}

.question-card-copy p,
.question-detail-card p,
.answer-card p {
  margin: 0;
  color: #52636d;
  line-height: 1.48;
}

.question-card-copy p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.question-tags span {
  padding: 7px 10px;
  border-radius: 999px;
  color: #0e5468;
  background: #e4f7fb;
  font-size: 12px;
  font-weight: 800;
}

.question-card footer,
.question-detail-card footer,
.answer-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: #7b8990;
  font-size: 13px;
}

.answered-by {
  margin: 12px 0 0;
  color: #445862;
  font-size: 13px;
  font-weight: 700;
}

.question-card aside {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 10px;
}

.question-bookmark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #12333f;
  background: #f3f8fa;
}

.question-bookmark.is-active,
[data-question-bookmark].is-active {
  color: #0c5870;
  background: #d9f4fb;
}

.status-badge,
.priority-badge {
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.status-badge.is-answered {
  color: #14643c;
  background: #dbf8e8;
}

.status-badge.is-unanswered,
.priority-badge {
  color: #985100;
  background: #fff0db;
}

.status-badge.is-pending {
  color: #876300;
  background: #fff4cf;
}

.answer-now {
  padding: 10px 12px;
  border-radius: 999px;
  color: #fff;
  background: #0c4b5e;
  font-weight: 850;
}

.question-floating-cta,
.question-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(135deg, #e4f8fd, #fff);
  box-shadow: 0 18px 36px rgba(18, 52, 66, 0.06);
}

.question-floating-cta strong,
.question-bottom-cta strong {
  display: block;
  color: #11202a;
  font-size: 17px;
}

.question-floating-cta span,
.question-bottom-cta p {
  color: #6d7c83;
  margin: 4px 0 0;
}

.question-floating-cta button,
.question-bottom-cta button {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  background: var(--teal);
  font-weight: 850;
}

.floating-plus {
  position: fixed;
  right: max(24px, calc((100vw - 390px) / 2 + 24px));
  bottom: 112px;
  z-index: 12;
  width: 58px;
  height: 58px;
  color: #fff;
  border-radius: 50%;
  background: #1976d2;
  box-shadow: 0 18px 38px rgba(25, 118, 210, 0.32);
  font-size: 30px;
  font-weight: 500;
}

.question-detail-card,
.answers-section,
.doctor-answer-form,
.ask-question-form {
  padding: 18px;
  border: 1px solid #e2edf1;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(18, 52, 66, 0.06);
}

.question-review-notice {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed #ead28c;
  border-radius: 18px;
  background: #fff9e8;
}

.question-review-notice strong {
  color: #795900;
}

.question-review-notice p {
  margin-top: 4px;
  color: #685b35;
  font-size: 14px;
}

.answers-section,
.doctor-answer-form,
.ask-question-form {
  margin-top: 16px;
}

.answers-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.answers-section h2 {
  margin: 0;
  font-size: 22px;
}

.answers-section select,
.ask-question-form select,
.ask-question-form input,
.ask-question-form textarea,
.doctor-answer-form textarea {
  border: 1px solid #dce8ec;
  border-radius: 18px;
  padding: 14px;
  font: inherit;
  background: #fbfdfe;
}

.answer-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid #edf3f5;
}

.answer-card img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  background: #dff5fb;
}

.answer-disclaimer {
  margin-top: 12px !important;
  padding: 10px;
  color: #0e5468 !important;
  border-radius: 14px;
  background: #e8f8fc;
  font-size: 13px;
}

.answer-card footer button {
  color: #0d6f91;
  font-weight: 800;
}

.doctor-answer-form {
  display: grid;
  gap: 12px;
}

.doctor-answer-form label span,
.ask-question-form label span,
.ask-question-form legend {
  display: block;
  margin-bottom: 8px;
  color: #13242e;
  font-weight: 850;
}

.field-requirement,
.onboarding-field small {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-left: 8px;
  border-radius: 999px;
  background: #e8f8fc;
  color: #0b617a;
  padding: 3px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  vertical-align: middle;
}

.doctor-answer-form textarea,
.ask-question-form textarea,
.ask-question-form input,
.ask-question-form select {
  width: 100%;
}

.doctor-answer-form > p {
  color: #6d7c83;
  font-size: 13px;
}

.doctor-answer-form > div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.doctor-answer-form button,
.ask-question-form .primary-action {
  padding-inline: 18px;
}

.doctor-answer-form button[type="submit"] {
  color: #fff;
  border-radius: 999px;
  background: var(--teal);
  font-weight: 850;
}

.ask-question-form {
  display: grid;
  gap: 16px;
}

.ask-question-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

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

.question-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.question-category-dropdown {
  display: none;
  position: relative;
  width: 100%;
}

.question-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.question-category-chips label,
.ask-privacy label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dce8ec;
  border-radius: 999px;
  background: #fff;
  font-weight: 760;
}

.question-category-trigger,
.question-category-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-weight: 850;
  text-align: left;
}

.question-category-trigger {
  justify-content: space-between;
  min-height: 56px;
  padding: 0 16px;
  color: #f7fcfd;
  border: 1px solid rgba(13, 63, 79, 0.12);
  border-radius: 20px;
  background: #102f3c;
  box-shadow: 0 16px 34px rgba(16, 47, 60, 0.18);
}

.question-category-trigger > span:not(.category-chevron) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.category-chevron {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #102f3c;
  border-radius: 50%;
  background: #dff5fb;
  transition: transform 180ms ease;
}

.question-category-dropdown.is-open .category-chevron {
  transform: rotate(180deg);
}

.category-orb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #76c2d1;
  box-shadow: 0 0 0 5px rgba(118, 194, 209, 0.18);
}

.question-category-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 6px;
  border: 1px solid rgba(13, 63, 79, 0.12);
  border-radius: 22px;
  opacity: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 46px rgba(18, 52, 66, 0.16);
  transform: translateY(-8px) scale(0.98);
  transition: max-height 240ms ease, opacity 180ms ease, transform 220ms ease, padding 220ms ease;
  backdrop-filter: blur(18px);
}

.question-category-dropdown.is-open .question-category-menu {
  max-height: 330px;
  overflow-y: auto;
  padding: 6px;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.question-category-option {
  min-height: 46px;
  padding: 0 12px;
  color: #13242e;
  border-radius: 16px;
  background: transparent;
}

.question-category-option:hover,
.question-category-option.is-selected {
  color: #0b5268;
  background: #e6f8fc;
}

.question-category-option.is-selected::after {
  content: "Selected";
  margin-left: auto;
  color: #4f97a9;
  font-size: 11px;
  font-weight: 850;
}

.ask-privacy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.apyva-file-upload {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px dashed #bfdde6;
  border-radius: 18px;
  background: #f7fcfd;
}

.file-upload-heading {
  display: block;
  margin: 0;
  color: #13242e;
  font-weight: 850;
}

.file-upload-heading small {
  display: block;
  color: #75848b;
  font-weight: 600;
}

.file-upload-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

.file-upload-preview {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  color: #0c5367;
  border: 1px solid #d9e8ed;
  border-radius: 14px;
  background: #eff9fc;
}

.file-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-upload-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  min-height: 42px;
  padding: 0 16px;
  overflow: hidden;
  color: #fff;
  border-radius: 12px;
  background: #13242e;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(19, 36, 46, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.file-upload-trigger span,
.file-upload-trigger svg {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  color: #fff !important;
  line-height: 1;
  white-space: nowrap;
}

.file-upload-trigger:hover {
  transform: translateY(-1px);
  background: #0a4c5f;
  box-shadow: 0 16px 32px rgba(10, 76, 95, 0.2);
}

.file-upload-trigger input {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  min-height: 38px;
  margin-right: 12px;
  border: 0;
  border-radius: 12px;
  background: #0e5063;
  color: #fff;
  font: inherit;
  font-weight: 850;
  padding: 0 14px;
  cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button {
  min-height: 38px;
  margin-right: 12px;
  border: 0;
  border-radius: 12px;
  background: #0e5063;
  color: #fff;
  font: inherit;
  font-weight: 850;
  padding: 0 14px;
  cursor: pointer;
}

.file-upload-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: #63747c;
  font-size: 13px;
  font-weight: 700;
}

.file-upload-meta.is-hidden {
  display: none;
}

.file-upload-meta button {
  color: #bd3d45;
  font: inherit;
  font-weight: 850;
}

.form-error {
  margin: 0;
  color: #b93a3a;
  font-size: 14px;
  font-weight: 800;
}

.question-filter-sheet {
  display: grid;
  gap: 18px;
}

.question-filter-sheet h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.question-filter-sheet section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.question-filter-sheet button {
  padding: 10px 13px;
  border-radius: 999px;
  background: #f2f7f9;
  font-weight: 800;
}

.question-filter-sheet button.is-selected {
  color: #0d6f91;
  background: #dff5fb;
}

.question-filter-sheet footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.question-filter-sheet footer button:last-child {
  color: #fff;
  background: var(--teal);
}

.screen-profile {
  background: #d4e8ef;
}

.profile-hero {
  position: relative;
  min-height: 422px;
  padding: 28px 24px 0;
  overflow: hidden;
  background: #94bed0;
}

.profile-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 56, 71, 0.02), rgba(5, 45, 60, 0.11));
  pointer-events: none;
}

.hero-top-actions {
  position: relative;
  z-index: 3;
  justify-content: space-between;
}

.blue-glass {
  width: 60px;
  height: 60px;
  color: #16323d;
  background: rgba(205, 235, 243, 0.42);
  backdrop-filter: blur(14px);
}

.favorite-button.is-favorite {
  color: #e45d64;
  background: rgba(255, 255, 255, 0.55);
}

.favorite-button.is-favorite svg {
  fill: currentColor;
}

.rating-pill {
  position: absolute;
  z-index: 3;
  left: 31px;
  top: 137px;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 72px;
  padding: 8px 12px;
  border-radius: 18px;
  background: rgba(229, 245, 248, 0.78);
  font-size: 14px;
  font-weight: 760;
}

.rating-pill svg {
  fill: currentColor;
  stroke-width: 0;
}

.profile-title {
  position: absolute;
  z-index: 3;
  left: 31px;
  top: 180px;
}

.profile-title h1 {
  margin: 0 0 16px;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 520;
}

.profile-title p {
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 650;
}

.profile-doctor {
  position: absolute;
  z-index: 2;
  right: -22px;
  top: 68px;
  width: 260px;
  height: 306px;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: normal;
}

.contact-glass {
  position: absolute;
  z-index: 4;
  left: 20px;
  right: 20px;
  bottom: 12px;
  justify-content: space-between;
  gap: 12px;
  min-height: 84px;
  padding: 13px;
  border-radius: 34px;
  background: rgba(197, 228, 236, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px);
}

.details-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  min-width: 126px;
  padding: 0 22px;
  border-radius: 999px;
  color: #102833;
  background: #daf5fa;
  font-size: 15px;
  font-weight: 650;
}

.white-button {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 24px rgba(19, 43, 51, 0.08);
}

.profile-content {
  position: relative;
  z-index: 5;
  margin-top: -1px;
  padding: 0 18px 22px;
  background: #d4e8ef;
}

.stats-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  min-height: 82px;
  padding: 12px 10px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(33, 59, 66, 0.06);
}

.stat-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 8px;
  align-items: center;
}

.stat-item svg {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  color: #23333b;
}

.stat-item strong {
  color: #6c9aa4;
  font-size: 15px;
  line-height: 1.05;
  white-space: nowrap;
}

.stat-item span {
  color: #52676f;
  font-size: 9px;
  line-height: 1.1;
}

.booking-card {
  margin-top: 12px;
  padding: 18px 22px 18px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(32, 52, 59, 0.07);
}

.booking-row {
  justify-content: space-between;
  gap: 12px;
}

.booking-row p,
.select-label {
  margin: 0;
  color: #9aa4a7;
  font-size: 15px;
  font-weight: 520;
}

.month-switch {
  gap: 10px;
}

.month-switch strong {
  font-size: 14px;
}

.plain-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
}

.date-strip {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 0 2px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  touch-action: auto;
  user-select: none;
}

.date-strip::-webkit-scrollbar,
.time-scroll::-webkit-scrollbar {
  display: none;
}

.date-card {
  flex: 0 0 86px;
  min-height: 70px;
  padding: 9px 6px;
  border: 1px solid #eef1f2;
  border-radius: 17px;
  background: #fff;
  color: #869296;
  box-shadow: 0 10px 22px rgba(24, 44, 50, 0.035);
  scroll-snap-align: start;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.date-card strong,
.date-card span {
  display: block;
}

.date-card strong {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 520;
}

.date-card span {
  margin-top: 7px;
  font-size: 11px;
}

.date-card.is-selected {
  color: #12323d;
  background: var(--blue);
  border-color: var(--blue);
}

.select-label {
  margin-top: 18px;
}

.time-ruler {
  position: relative;
  margin: 10px 0 18px;
  padding-top: 2px;
}

.time-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  touch-action: auto;
  user-select: none;
}

.date-strip.is-dragging,
.time-scroll.is-dragging {
  cursor: grabbing;
}

.time-track {
  display: flex;
  align-items: end;
  gap: 4px;
  min-width: max-content;
  padding: 0 5px 8px;
}

.time-slot {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  width: 70px;
  min-height: 68px;
  padding: 0 0 2px;
  background: transparent;
  color: #13252e;
  scroll-snap-align: center;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.date-card > *,
.time-slot > * {
  pointer-events: none;
}

.time-slot:focus,
.time-slot:focus-visible {
  outline: 0;
}

.time-selected-bar {
  width: 58px;
  height: 9px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: transparent;
}

.time-slot.is-selected .time-selected-bar {
  background: #74bfd2;
}

.time-tick {
  display: block;
  width: 3px;
  height: var(--h);
  border-radius: 999px;
  background: #172833;
}

.time-slot::before,
.time-slot::after {
  content: "";
  position: absolute;
  bottom: 22px;
  width: 2px;
  border-radius: 999px;
  background: #172833;
}

.time-slot::before {
  left: 13px;
  height: 18px;
}

.time-slot::after {
  right: 13px;
  height: 24px;
}

.time-label {
  display: block;
  margin-top: 7px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

.time-slot.is-selected .time-label {
  color: #6daebd;
  font-weight: 760;
}

.empty-slots {
  min-height: 64px;
  display: grid;
  place-items: center;
  margin: 0;
  color: #6d7b82;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}

.primary-button {
  width: 100%;
  min-height: 62px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 17px;
  font-weight: 650;
  box-shadow: 0 14px 26px rgba(6, 62, 82, 0.2);
}

.booking-card .primary-button {
  position: sticky;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 8;
}

.screen-doctor-profile {
  padding: 24px 18px 112px;
  background:
    radial-gradient(circle at 50% 0, rgba(200, 233, 244, 0.82), transparent 38%),
    linear-gradient(180deg, #e9f9fd 0 220px, #fff 520px);
}

.doctor-account-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.doctor-account-actions,
.patient-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.doctor-edit-link,
.doctor-detail-section header button,
.read-more-button {
  padding: 0;
  background: transparent;
  color: #0a5269;
  font-size: 13px;
  font-weight: 780;
}

.account-logout-button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #0e5063;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 12px 24px rgba(7, 65, 83, 0.16);
}

.account-logout-button:hover {
  background: #0a4253;
}

.doctor-account-hero {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 170px;
}

.doctor-avatar-wrap {
  position: relative;
  width: 132px;
  height: 132px;
}

.doctor-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #bfe5ee;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 14px 30px rgba(17, 38, 47, 0.12);
}

.doctor-avatar-wrap button {
  position: absolute;
  right: 4px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #0a5269;
  box-shadow: 0 10px 22px rgba(17, 38, 47, 0.14);
  cursor: pointer;
  z-index: 2;
}

.doctor-account-identity {
  min-width: 0;
}

.doctor-account-identity h1 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  color: #101c25;
  font-size: 20px;
  line-height: 1.12;
  font-weight: 830;
}

.doctor-account-identity h1 svg {
  flex: 0 0 auto;
  color: #0a5269;
}

.doctor-account-identity p {
  margin: 0 0 7px;
  color: #263943;
  font-size: 13px;
  line-height: 1.25;
}

.doctor-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #101c25;
  font-size: 12px;
  box-shadow: 0 8px 18px rgba(17, 38, 47, 0.08);
}

.doctor-rating-pill svg {
  color: #0a5269;
}

.doctor-rating-pill em {
  color: #63727c;
  font-style: normal;
}

.doctor-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 26px;
}

.doctor-shortcut-grid button {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 84px;
  padding: 12px 6px;
  border-radius: 16px;
  background: #fff;
  color: #122f3c;
  box-shadow: 0 12px 28px rgba(17, 38, 47, 0.07);
}

.doctor-shortcut-grid span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #0a5269;
  background: #e8f8fc;
}

.doctor-shortcut-grid .icon {
  width: 19px;
  height: 19px;
}

.doctor-shortcut-grid strong {
  font-size: 10px;
  line-height: 1;
  font-weight: 720;
}

.doctor-availability-warning {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 22px;
  padding: 16px;
  border: 1px solid #d9eef5;
  border-radius: 22px;
  background: #eefbff;
  color: #153f4d;
  box-shadow: 0 16px 36px rgba(17, 38, 47, 0.06);
}

.doctor-availability-warning.is-hidden {
  display: none;
}

.doctor-availability-warning > span {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: #fff;
  color: #16495a;
}

.doctor-availability-warning strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 830;
}

.doctor-availability-warning p {
  margin: 0;
  color: #66808b;
  font-size: 13px;
  line-height: 1.45;
}

.doctor-availability-warning button {
  margin-left: auto;
  padding: 12px 18px;
  border-radius: 999px;
  background: #17485a;
  color: #fff;
  font-size: 13px;
  font-weight: 820;
  white-space: nowrap;
}

.doctor-profile-panel {
  overflow: hidden;
  border: 1px solid #eef1f2;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(17, 38, 47, 0.06);
}

.doctor-detail-section {
  padding: 20px 20px 18px;
}

.doctor-detail-section + .doctor-detail-section {
  border-top: 1px solid #eef1f2;
}

.doctor-detail-section header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.doctor-detail-section h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1;
  font-weight: 820;
}

.doctor-detail-section p {
  margin: 0;
  color: #263943;
  font-size: 13px;
  line-height: 1.55;
}

.doctor-fee-line {
  margin-bottom: 12px !important;
}

.doctor-fee-line strong {
  color: #063e52;
}

.read-more-button {
  margin-top: 10px;
}

.doctor-contact-list {
  display: grid;
  gap: 14px;
}

.doctor-contact-list p {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 14px;
}

.doctor-contact-list svg {
  margin-top: 1px;
  color: #53646d;
}

.doctor-timeline-list {
  display: grid;
  gap: 18px;
}

.doctor-timeline-item {
  position: relative;
  padding-left: 20px;
  color: #63727c;
  font-size: 12px;
  line-height: 1.35;
}

.doctor-timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ed4e4;
}

.doctor-timeline-item strong {
  display: block;
  margin-bottom: 3px;
  color: #101c25;
  font-size: 13px;
  font-weight: 800;
}

.doctor-timeline-item span {
  display: block;
}

.doctor-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.doctor-chip-row span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 13px;
  border-radius: 10px;
  background: #dff5fb;
  color: #164052;
  font-size: 11px;
  font-weight: 650;
}

.doctor-awards-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #263943;
  font-size: 12px;
  line-height: 1.45;
}

.doctor-gallery-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.doctor-gallery-row img,
.doctor-gallery-row button {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #e8f8fc;
}

.doctor-gallery-row img {
  object-fit: cover;
  object-position: center top;
}

.doctor-gallery-row button {
  color: #0a5269;
  font-size: 28px;
  line-height: 1;
}

.doctor-save-button {
  width: 100%;
  min-height: 58px;
  margin-top: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #06475c, #07384d);
  color: #fff;
  font-size: 17px;
  font-weight: 820;
  box-shadow: 0 16px 30px rgba(6, 62, 82, 0.2);
}

.screen-doctor-more {
  padding: 34px 18px 112px;
  background:
    radial-gradient(circle at 10% 0, rgba(223, 245, 251, 0.8), transparent 28%),
    linear-gradient(180deg, #fbfdff, #fff);
}

.doctor-more-header {
  margin-bottom: 26px;
}

.doctor-more-header h1 {
  margin: 0 0 9px;
  color: #091b3f;
  font-size: 42px;
  line-height: 1;
  font-weight: 850;
}

.doctor-more-header p {
  margin: 0;
  color: #546176;
  font-size: 16px;
  line-height: 1.35;
}

.doctor-more-card {
  margin-top: 17px;
  padding: 20px;
  border: 1px solid #e2e9ee;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 38px rgba(17, 38, 47, 0.06);
}

.doctor-more-card h2 {
  margin: 0 0 18px;
  color: #1d73c8;
  font-size: 20px;
  line-height: 1.05;
  font-weight: 820;
}

.doctor-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  row-gap: 20px;
}

.doctor-more-grid button,
.doctor-more-card.is-list > button {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: transparent;
  color: #101c25;
  text-align: left;
}

.doctor-more-grid button:nth-child(odd) {
  padding-right: 17px;
  border-right: 1px solid #e7edf1;
}

.doctor-more-grid.is-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 12px;
}

.doctor-more-grid.is-compact button {
  grid-template-columns: 50px minmax(0, 1fr) 14px;
  gap: 11px;
  padding-right: 12px;
  border-right: 1px solid #e7edf1;
}

.doctor-more-grid.is-compact button:last-child {
  border-right: 0;
  padding-right: 0;
}

.doctor-more-card.is-list {
  display: grid;
  gap: 0;
}

.doctor-more-card.is-list h2 {
  margin-bottom: 5px;
}

.doctor-more-card.is-list > button {
  min-height: 74px;
  border-bottom: 1px solid #eef2f5;
}

.doctor-more-card.is-list > button:last-child {
  border-bottom: 0;
}

.more-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: var(--more-color);
  background: var(--more-bg);
}

.more-icon .icon {
  width: 25px;
  height: 25px;
}

.more-icon.is-blue {
  --more-color: #2468d8;
  --more-bg: #eef4ff;
}

.more-icon.is-green {
  --more-color: #2a9a59;
  --more-bg: #eef9f0;
}

.more-icon.is-purple {
  --more-color: #6838ca;
  --more-bg: #f4efff;
}

.more-icon.is-orange {
  --more-color: #d66c30;
  --more-bg: #fff3ea;
}

.more-icon.is-cyan {
  --more-color: #0a7188;
  --more-bg: #e8f8fc;
}

.more-icon.is-red {
  --more-color: #c94d62;
  --more-bg: #fff0f4;
}

.more-icon.is-yellow {
  --more-color: #e09b28;
  --more-bg: #fff8e7;
}

.doctor-more-card strong,
.doctor-more-card small {
  display: block;
}

.doctor-more-card strong {
  margin-bottom: 7px;
  color: #0a1435;
  font-size: 15px;
  line-height: 1.17;
  font-weight: 800;
}

.doctor-more-card small {
  color: #667087;
  font-size: 13px;
  line-height: 1.35;
}

.doctor-more-card button > .mini-icon {
  color: #0a1435;
}

.screen-patient {
  padding: 26px 18px 102px;
  background: #fff;
}

.patient-header {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.patient-header h1 {
  margin: 0;
  text-align: center;
  font-size: 23px;
  line-height: 1;
  font-weight: 780;
}

.profile-circle {
  width: 50px;
  height: 50px;
  border: 1px solid #edf1f3;
  border-radius: 50%;
  background: #f7f9fa;
  box-shadow: 0 10px 22px rgba(19, 43, 52, 0.06);
}

.patient-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  min-height: 178px;
  padding: 21px 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.84), transparent 33%),
    linear-gradient(135deg, #dff5fb, #eef8fa 52%, #d9eef4);
  box-shadow: 0 18px 38px rgba(19, 43, 52, 0.08);
}

.patient-avatar-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  align-self: center;
}

.patient-avatar-large {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #bfe0ea;
  object-fit: cover;
  object-position: center top;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.patient-identity {
  min-width: 0;
  padding-top: 10px;
}

.patient-identity h2 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1;
  font-weight: 800;
}

.patient-identity p {
  margin: 0 0 10px;
  color: #63727a;
  font-size: 15px;
  line-height: 1.25;
}

.patient-identity strong {
  color: #2e86c1;
  font-weight: 700;
}

.dot-separator {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 10px 3px;
  border-radius: 50%;
  background: #c5ced2;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 15px;
  border-radius: 999px;
  color: #59646a;
  background: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 560;
}

.status-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64c36a;
}

.edit-profile-button {
  position: absolute;
  right: 18px;
  bottom: 24px;
  display: grid;
  justify-items: center;
  gap: 8px;
  background: transparent;
  font-size: 12px;
  font-weight: 560;
}

.edit-profile-button span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #102231;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 18px rgba(19, 43, 52, 0.08);
}

.patient-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 24px;
}

.patient-quick-stats button {
  position: relative;
  min-height: 110px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border: 1px solid #eef1f2;
  border-radius: 20px;
  background: #fff;
  text-align: left;
  box-shadow: 0 12px 26px rgba(17, 38, 47, 0.045);
}

.patient-quick-stats button > .mini-icon {
  position: absolute;
  right: 9px;
  bottom: 13px;
}

.patient-quick-stats strong {
  display: block;
  font-size: 22px;
  line-height: 1;
}

.patient-quick-stats small {
  display: block;
  margin-top: 6px;
  color: #68757c;
  font-size: 10px;
  line-height: 1.25;
}

.stat-bubble,
.info-icon,
.insurance-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #122f3c;
  background: #e7f6fb;
}

.patient-quick-stats .stat-bubble {
  width: 38px;
  height: 38px;
}

.patient-section {
  margin-top: 22px;
}

.patient-section h2 {
  margin: 0 0 13px;
  font-size: 21px;
  line-height: 1;
  font-weight: 780;
}

.patient-info-card {
  overflow: hidden;
  border: 1px solid #eef1f2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 13px 30px rgba(17, 38, 47, 0.04);
}

.patient-info-row {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr 16px;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  background: #fff;
  text-align: left;
}

.patient-info-row + .patient-info-row {
  border-top: 1px solid #eef1f2;
}

.patient-info-row span:nth-child(2),
.health-tile span:nth-child(2) {
  min-width: 0;
}

.patient-info-row small,
.health-tile small {
  display: block;
  margin-bottom: 6px;
  color: #7d8990;
  font-size: 12px;
  line-height: 1;
}

.patient-info-row strong,
.health-tile strong {
  display: block;
  color: #101c25;
  font-size: 15px;
  line-height: 1.28;
  font-weight: 560;
}

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

.health-tile {
  min-height: 95px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid #eef1f2;
  border-radius: 20px;
  background: #fff;
  text-align: left;
  box-shadow: 0 12px 26px rgba(17, 38, 47, 0.04);
}

.health-tile.emergency-tile {
  grid-column: span 2;
}

.info-icon.danger {
  color: #521429;
  background: #f9dbe4;
}

.insurance-card {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #dff5fb, #e8f8fc);
}

.insurance-icon {
  width: 58px;
  height: 58px;
  color: #0b4357;
  background: #bce8f4;
}

.insurance-card h3 {
  margin: 0 0 5px;
  font-size: 16px;
  line-height: 1.1;
}

.insurance-card p {
  margin: 0;
  color: #283b45;
  font-size: 12px;
  line-height: 1.25;
}

.insurance-card button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(8, 62, 82, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.36);
  color: #103647;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.history-button {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 34px 1fr 16px;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 0 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #06475c, #07384d);
  color: #fff;
  text-align: left;
  font-size: 17px;
  font-weight: 780;
  box-shadow: 0 16px 30px rgba(6, 62, 82, 0.18);
}

.app-nav {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 9px 8px;
  border: 1px solid #e8eef0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 38px rgba(17, 38, 47, 0.11);
  backdrop-filter: blur(16px);
  z-index: 20;
}

.phone-shell.nav-hidden .app-nav {
  display: none;
}

.app-nav button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 54px;
  padding: 5px 0;
  border-radius: 18px;
  background: transparent;
  color: #51606a;
  font-size: 9px;
  line-height: 1;
}

.app-nav button.is-active {
  color: #063e52;
  background: #dff5fb;
  font-weight: 760;
}

.patient-edit-form {
  display: grid;
  gap: 12px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: 4px;
}

.patient-edit-form label {
  display: grid;
  gap: 6px;
  color: #64737b;
  font-size: 12px;
  font-weight: 650;
}

.patient-edit-form input,
.patient-edit-form textarea,
.patient-edit-form select {
  width: 100%;
  border: 1px solid #e5ecef;
  border-radius: 14px;
  padding: 12px 13px;
  color: #101c25;
  background: #f8fbfc;
  font-size: 15px;
  line-height: 1.3;
}

.patient-edit-form input[readonly] {
  color: #64737b;
  background: #eef6f8;
}

.patient-edit-unit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 10px;
}

.patient-edit-actions {
  position: sticky;
  bottom: -4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  background: #fff;
}

.doctor-edit-help {
  margin: -2px 0 0;
  color: #728087;
  font-size: 11px;
  line-height: 1.4;
}

.doctor-username-status {
  display: block;
  margin-top: 7px;
  color: #728087;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.doctor-username-status[data-status="success"] {
  color: #1f9d63;
}

.doctor-username-status[data-status="error"] {
  color: #be3348;
}

.doctor-username-status[data-status="checking"] {
  color: #67737c;
}

.message-payment-qr-field {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e5ecef;
  border-radius: 18px;
  background: #f8fbfc;
}

.message-payment-qr-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #13242e;
  font-size: 13px;
  font-weight: 850;
}

.message-payment-qr-field small,
.message-payment-help {
  color: #728087;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

.message-payment-qr-preview {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  overflow: hidden;
  border: 1px dashed #bddce7;
  border-radius: 12px;
  background: #fff;
}

.message-payment-qr-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.message-payment-qr-preview .mini-icon {
  width: 28px;
  height: 28px;
  color: #0c5367;
}

.message-payment-save {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  background: #eff9fc;
}

.message-payment-save input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.message-payment-confirm {
  display: grid;
  gap: 9px;
  padding: 16px;
  border: 1px solid #e5ecef;
  border-radius: 20px;
  background: #f8fbfc;
  color: #13242e;
}

.message-payment-confirm p {
  margin: 0;
  color: #728087;
  font-size: 13px;
}

.message-payment-confirm strong {
  color: #102d3a;
  font-size: 28px;
  line-height: 1;
}

.message-payment-confirm span,
.message-payment-confirm em {
  color: #52677e;
  font-size: 14px;
  line-height: 1.35;
}

.message-payment-confirm img {
  width: min(240px, 100%);
  aspect-ratio: 1;
  border: 1px solid #d9e8ed;
  border-radius: 12px;
  object-fit: contain;
  padding: 10px;
  background: #fff;
}

.chat-care-card {
  display: grid;
  gap: 12px;
  min-width: min(360px, 72vw);
  max-width: min(520px, 78vw);
  padding: 16px;
  border: 1px solid #cfe4ec;
  border-radius: 18px;
  background: #f5fbfd;
  color: #13242e;
  box-shadow: 0 14px 34px rgba(18, 45, 58, 0.08);
}

.chat-care-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.chat-care-card-head > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #e4f4f8;
  color: #0c5367;
}

.chat-care-card-head strong {
  display: block;
  color: #102d3a;
  font-size: 15px;
  line-height: 1.2;
}

.chat-care-card-head small,
.chat-care-note {
  color: #60727c;
  font-size: 12px;
  line-height: 1.45;
}

.chat-care-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.chat-care-card li,
.chat-care-card p {
  margin: 0;
  color: #243744;
  font-size: 13px;
  line-height: 1.45;
}

.chat-care-card.is-payment {
  background: #fffaf1;
  border-color: #f1dfbd;
}

.chat-payment-qr-button {
  display: grid;
  justify-self: center;
  width: min(280px, 100%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.chat-payment-qr {
  width: min(260px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  object-fit: contain;
  padding: 10px;
  border: 1px solid #eadfcf;
  border-radius: 12px;
  background: #fff;
}

.chat-message .chat-payment-qr,
.chat-message .chat-image-preview img,
.chat-message .chat-file-thumb,
.chat-attachment-preview img {
  height: auto;
  border-radius: 12px;
  object-position: center;
}

.chat-attachment-preview {
  display: grid;
  gap: 14px;
}

.chat-attachment-preview img {
  width: 100%;
  max-height: min(62vh, 620px);
  object-fit: contain;
  border: 1px solid #d9e8ed;
  border-radius: 16px;
  background: #fff;
}

.chat-attachment-preview iframe {
  width: 100%;
  min-height: min(64vh, 680px);
  border: 1px solid #d9e8ed;
  border-radius: 16px;
  background: #fff;
}

.chat-care-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-care-actions button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #123f50;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.lab-request-list,
.lab-request-card {
  display: grid;
  gap: 12px;
}

.lab-request-card,
.lab-upload-summary {
  padding: 16px;
  border: 1px solid #dfeaf0;
  border-radius: 18px;
  background: #f8fbfc;
}

.lab-request-card strong,
.lab-upload-summary strong {
  display: block;
  color: #102d3a;
  font-size: 15px;
}

.lab-request-card span,
.lab-upload-summary span,
.lab-request-card small,
.lab-upload-summary p {
  display: block;
  margin-top: 4px;
  color: #60727c;
  font-size: 12px;
  line-height: 1.45;
}

.lab-request-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.lab-request-status {
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff2d8;
  color: #8a5a08;
  font-size: 11px;
  font-weight: 850;
}

.lab-request-status.is-done {
  background: #e4f6e8;
  color: #24753a;
}

.record-row.is-lab-request .record-note {
  display: block;
  margin-top: 4px;
}

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

.message-emoji-grid button {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid #e5ecef;
  border-radius: 16px;
  background: #f8fbfc;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.message-emoji-grid button:hover {
  transform: translateY(-1px);
  border-color: #bddce7;
  background: #eff9fc;
}

.chip.is-primary {
  background: var(--teal);
  color: #fff;
}

.screen-medical-reports,
.screen-prescriptions {
  padding: 34px 18px 118px;
  background:
    linear-gradient(180deg, rgba(211, 226, 232, 0.72) 0 58px, transparent 58px),
    radial-gradient(circle at 16% 5%, rgba(223, 245, 251, 0.85), transparent 30%),
    #fbfdfe;
}

.records-header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.records-header > div {
  min-width: 0;
}

.records-header h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.04;
  font-weight: 850;
  letter-spacing: 0;
}

.records-header p {
  margin: 7px 0 0;
  color: #66757f;
  font-size: 14px;
  line-height: 1.3;
}

.records-hero {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 16px;
  min-height: 148px;
  margin-bottom: 22px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #cdebf5;
  border-radius: 22px;
  background: linear-gradient(105deg, #ecfbff, #dff5fb);
  box-shadow: 0 18px 38px rgba(17, 38, 47, 0.07);
}

.records-hero-icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  color: #07536a;
  background: #d7f1f8;
}

.records-hero-icon .icon {
  width: 42px;
  height: 42px;
  stroke-width: 1.8;
}

.records-hero strong {
  display: block;
  margin-bottom: 7px;
  font-size: 44px;
  line-height: 0.9;
  font-weight: 860;
}

.records-hero h2,
.records-hero p {
  margin: 0;
}

.records-hero h2 {
  font-size: 20px;
  line-height: 1.15;
  font-weight: 780;
}

.records-hero p {
  margin-top: 9px;
  color: #66757f;
  font-size: 14px;
}

.records-folder-art {
  position: relative;
  justify-self: end;
  width: 86px;
  height: 72px;
}

.records-folder-art i,
.records-folder-art b,
.records-folder-art em {
  position: absolute;
  display: block;
  border-radius: 9px;
}

.records-folder-art i,
.records-folder-art b {
  width: 50px;
  height: 58px;
  top: 2px;
  background: #fff;
  border: 1px solid #d4edf7;
  box-shadow: 0 8px 18px rgba(33, 127, 170, 0.16);
}

.records-folder-art i {
  right: 18px;
  transform: rotate(4deg);
}

.records-folder-art b {
  right: 3px;
  top: 9px;
  transform: rotate(7deg);
}

.records-folder-art i::before,
.records-folder-art b::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 16px;
  height: 5px;
  border-radius: 999px;
  background: #a6daf0;
  box-shadow: 0 13px 0 #d5ecf6;
}

.records-folder-art em {
  right: 10px;
  bottom: 0;
  width: 78px;
  height: 47px;
  background: linear-gradient(145deg, #8dd4ff, #58ace2);
  box-shadow: 0 13px 20px rgba(45, 130, 216, 0.18);
}

.records-folder-art em::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
  width: 36px;
  height: 16px;
  border-radius: 8px 8px 0 0;
  background: #b9e6ff;
}

.records-folder-art em::after {
  content: "✓";
  position: absolute;
  right: -10px;
  bottom: -10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #2d82d8;
  background: #dff5fb;
  font-style: normal;
  font-weight: 850;
  box-shadow: 0 8px 16px rgba(17, 38, 47, 0.11);
}

.records-folder-art.is-prescription em {
  background: linear-gradient(145deg, #9de0ec, #58bfd2);
}

.records-panel {
  padding: 16px 13px 14px;
  border: 1px solid #e0e8ec;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 42px rgba(17, 38, 47, 0.07);
}

.records-search {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 17px;
  border: 1px solid #dce7eb;
  border-radius: 18px;
  color: #70808a;
  background: #fbfdfe;
}

.records-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #101c25;
  font-size: 15px;
}

.records-search input::placeholder {
  color: #8a97a0;
}

.records-filters {
  display: flex;
  gap: 10px;
  margin: 15px -2px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.records-filters::-webkit-scrollbar {
  display: none;
}

.records-filters button {
  flex: 0 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid #dfe8ec;
  border-radius: 999px;
  background: #fff;
  color: #273946;
  font-size: 13px;
  font-weight: 710;
}

.records-filters button.is-active {
  border-color: #2d9cf0;
  color: #07536a;
  background: #e9f8ff;
}

.records-list {
  display: grid;
  gap: 11px;
}

.empty-state-card {
  display: grid;
  gap: 7px;
  padding: 22px;
  border: 1px solid #dce8ec;
  border-radius: 20px;
  background: #f8fbfc;
  color: #12202b;
}

.empty-state-card strong {
  font-size: 17px;
}

.empty-state-card p {
  margin: 0;
  color: #6e7c85;
  font-size: 14px;
  line-height: 1.45;
}

.patient-onboarding {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(circle at 18% 8%, rgba(189, 235, 245, 0.78), transparent 34%),
    rgba(10, 29, 38, 0.28);
  backdrop-filter: blur(14px);
}

.patient-onboarding.is-open {
  display: flex;
}

.patient-onboarding-card {
  width: min(440px, 100%);
  max-height: min(92vh, 780px);
  overflow-y: auto;
  border: 1px solid #dce9ed;
  border-radius: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
  box-shadow: 0 28px 80px rgba(12, 55, 70, 0.22);
  padding: 26px;
  color: #13232e;
}

.patient-onboarding-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #0b5870;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}

.patient-onboarding-brand::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("/assets/apyva-logo-favicon.png") center / contain no-repeat;
}

.onboarding-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 18px;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 9px;
}

.onboarding-step button {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #edf5f7;
  color: #7b8a92;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
}

.onboarding-step.is-current button {
  background: #06485a;
  color: #fff;
  box-shadow: 0 14px 30px rgba(6, 72, 90, 0.25);
}

.onboarding-step.is-done button {
  background: #d9f3f8;
  color: #06485a;
}

.onboarding-step span {
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: #d7e4e8;
}

.onboarding-step.is-done span {
  background: #76bfd0;
}

.onboarding-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf3f5;
  margin-bottom: 26px;
}

.onboarding-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #81cddd, #06485a);
  transition: width 0.55s ease;
}

.onboarding-copy {
  display: grid;
  gap: 7px;
  margin-bottom: 22px;
}

.onboarding-copy p,
.onboarding-copy span {
  margin: 0;
  color: #71818b;
  font-size: 14px;
  line-height: 1.45;
}

.onboarding-copy h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.02;
  letter-spacing: 0;
}

.onboarding-fields {
  display: grid;
  gap: 15px;
}

.onboarding-field {
  display: grid;
  gap: 8px;
}

.onboarding-field span {
  font-size: 14px;
  font-weight: 850;
  color: #12202b;
}

.onboarding-field input,
.onboarding-field textarea,
.onboarding-field select {
  width: 100%;
  border: 1px solid #dce7eb;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  color: #142630;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  outline: none;
  padding: 16px 17px;
  box-shadow: 0 10px 26px rgba(18, 55, 66, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.onboarding-field textarea {
  resize: vertical;
}

.onboarding-field input:focus,
.onboarding-field textarea:focus,
.onboarding-field select:focus {
  border-color: #86cddd;
  box-shadow: 0 0 0 4px rgba(134, 205, 221, 0.24);
}

.onboarding-unit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: center;
  gap: 10px;
}

.onboarding-unit-row > input,
.onboarding-unit-row > select,
.onboarding-split-row > input {
  min-width: 0;
}

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

.onboarding-unit-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border: 1px solid #dce7eb;
  border-radius: 18px;
  background: rgba(229, 247, 251, 0.7);
  color: #17485a;
  font-size: 15px;
  font-weight: 850;
}

@media (max-width: 560px) {
  .onboarding-unit-row {
    grid-template-columns: 1fr;
  }
}

.profile-upload-field {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid #dce9ed;
  border-radius: 22px;
  background: #f8fcfd;
}

.profile-upload-field img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #dff3f8;
}

.onboarding-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid #dce9ed;
  border-radius: 18px;
  background: #f8fcfd;
  color: #5f707a;
  font-size: 13px;
  line-height: 1.45;
}

.onboarding-consent input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #06485a;
}

.onboarding-consent button,
.legal-sheet-copy button:not(.chip) {
  border: 0;
  padding: 0;
  background: transparent;
  color: #0b6f8d;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.legal-sheet-copy {
  display: grid;
  gap: 14px;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 4px;
}

.legal-sheet-copy article {
  padding: 14px;
  border: 1px solid #dce9ed;
  border-radius: 18px;
  background: #f8fcfd;
}

.legal-sheet-copy h3 {
  margin: 0 0 7px;
  font-size: 16px;
}

.legal-sheet-copy p {
  margin: 0;
  color: #60727d;
  font-size: 13px;
  line-height: 1.55;
}

.patient-photo-button {
  position: absolute;
  right: 0;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #0a5269;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(17, 38, 47, 0.14);
  z-index: 2;
}

.patient-photo-button:hover {
  background: #f4fbfd;
}

[data-profile-upload].chip,
.profile-upload-field [data-profile-upload] {
  background: #0e5063;
  color: #fff;
  box-shadow: 0 12px 26px rgba(10, 76, 95, 0.16);
}

[data-profile-upload].chip:hover,
.profile-upload-field [data-profile-upload]:hover {
  background: #0a4253;
  color: #fff;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.onboarding-actions > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboarding-skip,
.onboarding-back,
.onboarding-next {
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.onboarding-skip,
.onboarding-back {
  background: transparent;
  color: #60727d;
}

.onboarding-next {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  background: #06485a;
  color: #fff;
  box-shadow: 0 16px 30px rgba(6, 72, 90, 0.25);
}

.onboarding-next:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  box-shadow: none;
}

.setup-later-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.setup-later-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #dff6fa;
  color: #06485a;
  font-size: 26px;
  font-weight: 950;
}

.photo-reminder-avatar {
  width: 96px;
  height: 96px;
  border: 4px solid #eef8fb;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 18px 34px rgba(6, 72, 90, 0.16);
}

.setup-later-card h3 {
  margin: 0;
  font-size: 24px;
}

.setup-later-card p {
  margin: 0 0 4px;
  color: #6b7b84;
  font-size: 15px;
  line-height: 1.5;
}

.record-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(96px, auto) 20px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #e0e8ec;
  border-radius: 15px;
  background: #fff;
}

.record-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  color: var(--record-color);
  background: var(--record-bg);
}

.record-main {
  min-width: 0;
}

.record-main h2 {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 790;
}

.record-main p,
.record-main small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #6a7881;
  font-size: 12px;
  line-height: 1.35;
}

.record-main small {
  margin-top: 8px;
}

.record-main p span,
.record-main small span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a8b2b8;
}

.record-side {
  display: grid;
  justify-items: end;
  gap: 13px;
}

.record-side b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--record-color);
  background: var(--record-soft);
  font-size: 12px;
  line-height: 1;
}

.record-side b::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.record-side div {
  display: flex;
  gap: 10px;
  color: #5f6d76;
}

.record-side button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 690;
}

.record-next {
  display: grid;
  place-items: center;
  width: 20px;
  height: 34px;
  background: transparent;
  color: #101c25;
}

.record-row.is-green {
  --record-color: #46bb59;
  --record-bg: #eaf8ee;
  --record-soft: #e5f8dc;
}

.record-row.is-blue {
  --record-color: #2d82d8;
  --record-bg: #e6f4ff;
  --record-soft: #e1f2ff;
}

.record-row.is-purple {
  --record-color: #8c58e8;
  --record-bg: #f0e9ff;
  --record-soft: #f0e3ff;
}

.record-row.is-orange {
  --record-color: #e88c25;
  --record-bg: #fff1df;
  --record-soft: #fff0dc;
}

.record-row.is-gray {
  --record-color: #65737b;
  --record-bg: #eef3f5;
  --record-soft: #eef3f5;
}

.prescription-record {
  align-items: start;
}

.prescription-record .record-main {
  display: grid;
  gap: 10px;
}

.prescription-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.prescription-meta-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e0ebef;
  border-radius: 12px;
  background: #f8fcfd;
  color: #667680;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.prescription-meta-grid b {
  color: #143241;
  font-size: 11px;
  text-transform: uppercase;
}

.prescription-medicine-stack {
  display: grid;
  gap: 8px;
}

.prescription-medicine-stack > span {
  color: #586a74;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.prescription-medicine-pill {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 9px;
  border: 1px solid #dce9ed;
  border-radius: 13px;
  background: #fbfdfe;
}

.prescription-medicine-pill b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e3f5f9;
  color: #0f4d61;
  font-size: 12px;
}

.prescription-medicine-pill span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.prescription-medicine-pill strong {
  color: #12202b;
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.prescription-medicine-pill small,
.prescription-notes {
  margin: 0;
  color: #667680;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.prescription-notes {
  padding: 10px 11px;
  border-radius: 12px;
  background: #f3f8fa;
}

.records-share-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 17px;
  border: 1px solid #dce8ed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(17, 38, 47, 0.06);
}

.records-share-card > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #2d82d8;
  background: #dff5fb;
}

.records-share-card h2,
.records-share-card p {
  margin: 0;
}

.records-share-card h2 {
  font-size: 16px;
  line-height: 1.15;
}

.records-share-card p {
  margin-top: 8px;
  color: #66757f;
  font-size: 12px;
  line-height: 1.45;
}

.records-share-card button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid #2d9cf0;
  border-radius: 999px;
  background: #fff;
  color: #1476c5;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

@media (max-width: 460px) {
  .screen-medical-reports,
  .screen-prescriptions {
    padding-inline: 14px;
  }

  .records-header {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    gap: 10px;
  }

  .records-header h1 {
    font-size: 25px;
  }

  .records-hero {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 138px;
    padding: 18px;
  }

  .records-hero-icon {
    width: 66px;
    height: 66px;
  }

  .records-hero-icon .icon {
    width: 34px;
    height: 34px;
  }

  .records-hero strong {
    font-size: 38px;
  }

  .records-folder-art {
    position: absolute;
    right: 15px;
    bottom: 18px;
    width: 70px;
    height: 58px;
    opacity: 0.75;
  }

  .records-folder-art i,
  .records-folder-art b {
    width: 42px;
    height: 48px;
  }

  .records-folder-art em {
    width: 64px;
    height: 38px;
  }

  .records-panel {
    padding: 13px 9px 10px;
  }

  .record-row {
    grid-template-columns: 52px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 10px;
  }

  .record-icon {
    width: 52px;
    height: 52px;
  }

  .record-side {
    grid-column: 2 / -1;
    grid-row: 2;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    gap: 10px;
  }

  .record-side div {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .record-side b {
    min-height: 28px;
    padding-inline: 11px;
  }

  .record-next {
    grid-column: 3;
    grid-row: 1;
  }

  .prescription-meta-grid {
    grid-template-columns: 1fr;
  }

  .records-share-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .records-share-card button {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
}

.screen-medical-history {
  padding: 32px 18px 112px;
  background:
    radial-gradient(circle at 12% 5%, rgba(223, 245, 251, 0.8), transparent 28%),
    #f8fbfc;
}

.history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;
}

.history-header h1 {
  margin: 0 0 10px;
  font-size: 35px;
  line-height: 1;
  font-weight: 820;
}

.history-header p {
  margin: 0;
  color: #63727c;
  font-size: 16px;
  line-height: 1.35;
}

.history-header button {
  flex: 0 0 auto;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid #dde7eb;
  border-radius: 13px;
  background: #fff;
  font-weight: 760;
  box-shadow: 0 12px 26px rgba(17, 38, 47, 0.06);
}

.history-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  border-bottom: 1px solid #dfe7ea;
}

.history-tabs button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 78px;
  background: transparent;
  color: #5f6d76;
  font-size: 11px;
  font-weight: 660;
}

.history-tabs button.is-active {
  color: #2d82d8;
}

.history-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #2d82d8;
}

.history-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 25px 0 18px;
}

.history-section-heading h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1;
}

.history-section-heading button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  border: 1px solid #dde7eb;
  border-radius: 12px;
  background: #fff;
  color: #243847;
  font-weight: 700;
}

.timeline-list {
  position: relative;
  display: grid;
  gap: 18px;
}

.timeline-list::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 24px;
  bottom: 26px;
  width: 2px;
  background: #dbe5ea;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: start;
}

.timeline-dot {
  position: absolute;
  left: 16px;
  top: 32px;
  z-index: 2;
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--timeline-color);
  box-shadow: 0 0 0 1px rgba(17, 38, 47, 0.08);
}

.timeline-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-top: 18px;
  border-radius: 50%;
  color: var(--timeline-color);
  background: var(--timeline-bg);
  box-shadow: 0 12px 24px rgba(17, 38, 47, 0.05);
}

.timeline-card {
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(17, 38, 47, 0.07);
}

.timeline-top {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.timeline-top strong {
  color: var(--timeline-color);
  font-size: 15px;
}

.timeline-top b {
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0 13px;
  border-radius: 999px;
  color: #2b8e57;
  background: #e3f8ea;
  font-size: 12px;
}

.timeline-top b.is-past {
  color: #5f6670;
  background: #eef1f4;
}

.timeline-top button {
  background: transparent;
  color: #576672;
  font-weight: 800;
}

.timeline-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.1;
}

.timeline-card p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #63727c;
  font-size: 14px;
}

.timeline-card p span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #63727c;
}

.timeline-card em {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #dceafb;
  border-radius: 12px;
  color: #2d72c7;
  background: #f1f7ff;
  font-style: normal;
  font-size: 14px;
  line-height: 1.4;
}

.timeline-item.is-blue {
  --timeline-color: #2d82d8;
  --timeline-bg: #e7f3ff;
}

.timeline-item.is-green {
  --timeline-color: #3dbb83;
  --timeline-bg: #e7fbf1;
}

.timeline-item.is-orange {
  --timeline-color: #e68a2e;
  --timeline-bg: #fff2e3;
}

.timeline-item.is-purple {
  --timeline-color: #8c58e8;
  --timeline-bg: #f1eaff;
}

.view-all-history {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 0 28px;
  border: 1px solid #dde7eb;
  border-radius: 999px;
  background: #fff;
  font-weight: 780;
  box-shadow: 0 12px 26px rgba(17, 38, 47, 0.06);
}

.history-summary-card {
  margin-top: 26px;
  overflow: hidden;
  padding: 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(17, 38, 47, 0.07);
}

.history-summary-card header {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.history-summary-card header > span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: #fff;
  background: #2d82d8;
}

.history-summary-card h2,
.history-summary-card p {
  margin: 0;
}

.history-summary-card h2 {
  font-size: 18px;
}

.history-summary-card p {
  margin-top: 5px;
  color: #63727c;
  font-size: 13px;
}

.history-summary-card header button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: #2d82d8;
  font-size: 13px;
  font-weight: 760;
}

.history-summary-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.history-summary-grid::-webkit-scrollbar {
  display: none;
}

.history-summary-grid article {
  flex: 0 0 112px;
  display: grid;
  gap: 6px;
  padding: 15px;
  border-radius: 14px;
  background: #f4f8ff;
  color: #2d82d8;
}

.history-summary-grid article:nth-child(2) {
  color: #e68a2e;
  background: #fff6eb;
}

.history-summary-grid article:nth-child(3) {
  color: #8c58e8;
  background: #f4efff;
}

.history-summary-grid article:nth-child(4) {
  color: #3dbb83;
  background: #ecfbf3;
}

.history-summary-grid strong {
  color: #101c25;
  font-size: 20px;
}

.history-summary-grid span {
  color: #63727c;
  font-size: 12px;
}

.screen-appointments {
  padding: 34px 20px 112px;
  background:
    radial-gradient(circle at 80% 8%, rgba(223, 245, 251, 0.78), transparent 32%),
    #fff;
}

.doctor-appointments-view {
  display: none;
}

.phone-shell.is-doctor-role .screen-appointments {
  padding: 24px 20px 112px;
  background:
    radial-gradient(circle at 12% 0, rgba(200, 233, 244, 0.54), transparent 35%),
    linear-gradient(180deg, #fbfdff, #fff);
}

.phone-shell.is-doctor-role .doctor-appointments-view {
  display: block;
}

.phone-shell.is-doctor-role .patient-appointments-view {
  display: none;
}

.appointments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.appointments-header h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  font-weight: 820;
}

.appointments-header div {
  display: flex;
  gap: 10px;
}

.appointment-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #dfe7ea;
}

.appointment-tabs button {
  position: relative;
  min-height: 44px;
  background: transparent;
  color: #6d7b82;
  text-align: left;
  font-size: 15px;
  font-weight: 650;
}

.appointment-tabs button.is-active {
  color: #101c25;
}

.appointment-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 86px;
  height: 3px;
  border-radius: 999px;
  background: #063e52;
}

.appointment-section.is-hidden {
  display: none;
}

.appointment-date-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px -20px 32px 0;
  padding-right: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.appointment-date-row::-webkit-scrollbar {
  display: none;
}

.appointment-date-row button {
  flex: 0 0 54px;
  min-height: 72px;
  border-radius: 18px;
  background: transparent;
  color: #263943;
  font-size: 12px;
}

.appointment-date-row button span,
.appointment-date-row button strong {
  display: block;
}

.appointment-date-row button strong {
  margin-top: 7px;
  font-size: 21px;
  line-height: 1;
}

.appointment-date-row .is-selected {
  background: #c8e9f4;
}

.appointment-date-row .appointment-month {
  flex-basis: 178px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 26px rgba(17, 38, 47, 0.075);
}

.appointment-month strong {
  margin: 0 !important;
  font-size: 16px !important;
}

.appointment-section {
  margin-top: 24px;
}

.appointment-section h2 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1;
  font-weight: 780;
}

.appointment-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px 62px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 150px;
  margin-bottom: 12px;
  padding: 18px 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(17, 38, 47, 0.07);
}

.appointment-card.is-compact {
  min-height: 96px;
  grid-template-columns: 96px 50px minmax(0, 1fr);
  padding-block: 14px;
}

.appointment-time {
  display: grid;
  gap: 10px;
  padding-right: 16px;
  border-right: 1px solid #e9eef0;
}

.appointment-time strong {
  font-size: 18px;
  line-height: 1;
}

.appointment-time small {
  font-size: 12px;
}

.appointment-time span {
  color: #6d7b82;
  font-size: 12px;
}

.appointment-card img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #dff5fb;
  object-fit: cover;
  object-position: center top;
}

.appointment-card.is-compact img {
  width: 50px;
  height: 50px;
}

.appointment-info {
  min-width: 0;
}

.appointment-info h3 {
  margin: 0 0 6px;
  padding-right: 0;
  font-size: 17px;
  line-height: 1.05;
}

.appointment-info p {
  margin: 0 0 8px;
  color: #65737b;
  font-size: 12px;
}

.appointment-info span,
.appointment-info em {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #65737b;
  font-size: 11px;
  line-height: 1.25;
  font-style: normal;
}

.appointment-info em {
  width: max-content;
  max-width: 100%;
  margin-top: 9px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #104254;
  background: #e7f5fb;
  font-weight: 650;
}

.appointment-info em.in-person {
  color: #1f5533;
  background: #e4f6e9;
}

.appointment-inline-action {
  width: max-content;
  max-width: 100%;
  margin-top: 9px;
  border: 0;
  border-radius: 999px;
  background: #f3f7f9;
  color: #134b5b;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 800;
}

.appointment-time b {
  width: max-content;
  min-height: 27px;
  display: grid;
  place-items: center;
  padding: 0 11px;
  border-radius: 999px;
  color: #134b5b;
  background: #e7f5fb;
  font-size: 11px;
  line-height: 1;
}

.appointment-time b.is-complete {
  color: #1e623a;
  background: #dff8e9;
}

.appointment-time b.is-pending {
  color: #8a5a0a;
  background: #fff3d8;
}

.appointment-time b.is-confirmed,
.appointment-time b.is-checked_in {
  color: #1e623a;
  background: #dff8e9;
}

.appointment-time b.is-cancelled {
  color: #7b2323;
  background: #ffe4e4;
}

.appointment-card > button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 44px;
  background: transparent;
}

.past-appointments {
  margin-top: 24px;
}

.new-appointment-banner {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 17px;
  border-radius: 22px;
  background: linear-gradient(135deg, #e3f7fc, #f1fbfd);
  box-shadow: 0 14px 32px rgba(17, 38, 47, 0.07);
}

.new-appointment-banner > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  color: #0b4357;
  background: #c8e9f4;
}

.new-appointment-banner h2 {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.1;
}

.new-appointment-banner p {
  margin: 0;
  color: #68757c;
  font-size: 13px;
  line-height: 1.25;
}

.new-appointment-banner button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 999px;
  background: #063e52;
  color: #fff;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.doctor-appointments-top,
.doctor-appointment-heading,
.doctor-appointment-heading > div {
  display: flex;
  align-items: center;
}

.doctor-appointments-top {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 32px;
}

.doctor-appointment-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 24px;
}

.doctor-appointment-heading h1 {
  margin: 0 0 8px;
  color: #0a1940;
  font-size: 32px;
  line-height: 1;
  font-weight: 860;
}

.doctor-appointment-heading p {
  margin: 0;
  color: #536579;
  font-size: 15px;
}

.doctor-appointment-heading > div {
  gap: 10px;
}

.doctor-appointment-heading > div:first-child {
  display: block;
  min-width: 0;
}

.doctor-appointment-heading button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #dfe9ef;
  border-radius: 14px;
  background: #fff;
  color: #0a1940;
}

.doctor-appointment-heading button .icon {
  width: 20px;
  height: 20px;
}

.doctor-appointment-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.doctor-appointment-stats article {
  min-height: 94px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid #dfe9ef;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(17, 38, 47, 0.04);
}

.doctor-appointment-stats span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  grid-row: span 2;
  border-radius: 16px;
  background: #e8f3ff;
  color: #0b72d9;
}

.doctor-appointment-stats span.is-orange {
  background: #fff0dc;
  color: #ff8500;
}

.doctor-appointment-stats span.is-green {
  background: #e8f8ee;
  color: #14a956;
}

.doctor-appointment-stats strong {
  color: #0a1940;
  font-size: 25px;
  line-height: 1;
}

.doctor-appointment-stats small {
  color: #536579;
  font-size: 13px;
  line-height: 1.15;
}

.doctor-date-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
  padding: 10px;
  border: 1px solid #dfe9ef;
  border-radius: 18px;
  background: #fff;
}

.doctor-date-strip button {
  min-height: 72px;
  border-radius: 16px;
  background: transparent;
  color: #0a1940;
  font-size: 13px;
}

.doctor-date-strip span,
.doctor-date-strip strong {
  display: block;
}

.doctor-date-strip strong {
  margin-top: 7px;
  font-size: 24px;
  line-height: 1;
}

.doctor-date-strip .is-selected {
  background: #0b72d9;
  color: #fff;
  box-shadow: 0 12px 22px rgba(11, 114, 217, 0.24);
}

.doctor-appointment-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  border-bottom: 1px solid #dfe9ef;
}

.doctor-appointment-tabs button {
  position: relative;
  min-height: 54px;
  background: transparent;
  color: #536579;
  font-size: 15px;
  font-weight: 760;
}

.doctor-appointment-tabs button.is-active {
  color: #0b72d9;
}

.doctor-appointment-tabs .is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #0b72d9;
}

.doctor-consultation-list {
  display: grid;
  gap: 14px;
}

.doctor-consultation-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 150px;
  padding: 18px 48px 18px 18px;
  border: 1px solid #e1eaf1;
  border-left: 4px solid #0b72d9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(17, 38, 47, 0.055);
}

.doctor-consultation-card.is-green {
  border-left-color: #14a956;
}

.doctor-consultation-card.is-orange {
  border-left-color: #ff7a00;
}

.consult-time {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-right: 13px;
  border-right: 1px solid #e1eaf1;
}

.consult-time strong {
  color: #0a1940;
  font-size: 23px;
  line-height: 1;
}

.consult-time span {
  color: #536579;
  font-size: 14px;
}

.doctor-consultation-card img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.consult-info h2 {
  margin: 0 0 7px;
  color: #0a1940;
  font-size: 18px;
  line-height: 1;
  font-weight: 850;
}

.consult-info p {
  margin: 0 0 8px;
  color: #2e4562;
  font-size: 13px;
  line-height: 1.25;
}

.consult-meta {
  grid-column: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.consult-meta > span,
.consult-meta > b {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: #e8f3ff;
  color: #0b72d9;
  font-size: 12px;
  font-weight: 760;
}

.consult-meta > span.is-clinic,
.consult-meta > b.is-green {
  background: #e8f8ee;
  color: #11964b;
}

.consult-meta > span.is-follow {
  background: #f2e9ff;
  color: #7b44d9;
}

.consult-meta > b {
  justify-self: end;
  background: #e8f8ee;
  color: #11964b;
}

.consult-meta > b.is-pending {
  background: #fff0dc;
  color: #ef7400;
}

.consult-meta div {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consult-meta button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #dfe9ef;
  border-radius: 9px;
  background: #fff;
  color: #0a1940;
  font-size: 12px;
  font-weight: 760;
}

.consult-meta button.is-primary {
  border-color: #0b72d9;
  background: #0b72d9;
  color: #fff;
}

.consult-meta button.is-visit {
  border-color: #14a956;
  background: #14a956;
  color: #fff;
}

.consult-more {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: #0a1940;
  font-size: 25px;
  line-height: 1;
}

.doctor-schedule-banner {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid #dbeaf8;
  border-radius: 18px;
  background: linear-gradient(135deg, #eaf5ff, #f8fcff);
}

.doctor-schedule-banner > span {
  display: grid;
  place-items: center;
  width: 84px;
  height: 70px;
  border-radius: 18px;
  background: #d8ecff;
  color: #0b72d9;
}

.doctor-schedule-banner h2 {
  margin: 0 0 8px;
  color: #0a1940;
  font-size: 18px;
}

.doctor-schedule-banner p {
  margin: 0;
  color: #536579;
  font-size: 13px;
}

.doctor-schedule-banner button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 12px;
  background: #0b72d9;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.screen-doctor-calendar {
  padding: 24px 20px 112px;
  background:
    radial-gradient(circle at 12% 0, rgba(200, 233, 244, 0.54), transparent 35%),
    linear-gradient(180deg, #fbfdff, #fff);
}

.doctor-calendar-view {
  display: grid;
  gap: 18px;
  min-width: 0;
}

[data-doctor-calendar-root] {
  width: 100%;
  min-width: 0;
}

.doctor-calendar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  padding: 22px;
  border: 1px solid #dcecf2;
  border-radius: 26px;
  background: linear-gradient(135deg, #e6f8fc, #ffffff);
  box-shadow: 0 18px 42px rgba(17, 38, 47, 0.055);
  min-width: 0;
}

.doctor-calendar-hero p,
.doctor-calendar-hero span {
  margin: 0;
  color: #5c7180;
  font-size: 13px;
  font-weight: 680;
}

.doctor-calendar-hero h1 {
  margin: 7px 0;
  color: #0a1940;
  font-size: 33px;
  line-height: 1.02;
}

.doctor-calendar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.doctor-calendar-hero button,
.doctor-calendar-sync {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: 999px;
  background: #06485a;
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.doctor-calendar-hero .doctor-calendar-title-button {
  min-height: 0;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  white-space: normal;
  box-shadow: none;
}

.doctor-calendar-title-button::after {
  content: "";
  width: 0.38em;
  height: 0.38em;
  margin-left: 0.34em;
  border-right: 0.08em solid currentColor;
  border-bottom: 0.08em solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
}

.doctor-calendar-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.doctor-calendar-nav,
.doctor-calendar-view-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid #dce7ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(17, 38, 47, 0.045);
  min-width: 0;
}

.doctor-calendar-nav button,
.doctor-calendar-view-tabs button {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 13px;
  background: transparent;
  color: #435766;
  font-size: 13px;
  font-weight: 800;
}

.doctor-calendar-view-tabs {
  justify-self: center;
}

.doctor-calendar-view-tabs .is-active {
  background: #dff5fb;
  color: #06485a;
}

.doctor-calendar-legend {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.doctor-calendar-legend::-webkit-scrollbar {
  display: none;
}

.doctor-calendar-legend span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: #526878;
  border: 1px solid #dfe9ef;
  font-size: 12px;
  font-weight: 800;
}

.doctor-calendar-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.doctor-calendar-legend .is-new,
.doctor-calendar-event.is-new {
  color: #0b72d9;
}

.doctor-calendar-legend .is-follow,
.doctor-calendar-event.is-follow {
  color: #7b44d9;
}

.doctor-calendar-legend .is-clinic,
.doctor-calendar-event.is-clinic {
  color: #11964b;
}

.doctor-calendar-legend .is-video,
.doctor-calendar-event.is-video {
  color: #0a8396;
}

.doctor-calendar-legend .is-pending,
.doctor-calendar-event.is-pending {
  color: #d97904;
}

.doctor-calendar-legend .is-blocked,
.doctor-calendar-event.is-blocked {
  color: #c05a05;
}

.doctor-calendar-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dfe9ef;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(17, 38, 47, 0.055);
  min-width: 0;
}

.doctor-calendar-month > strong {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-right: 1px solid #edf2f5;
  border-bottom: 1px solid #edf2f5;
  color: #617584;
  font-size: 12px;
}

.doctor-calendar-month > strong:nth-child(7) {
  border-right: 0;
}

.doctor-calendar-day {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  border-right: 1px solid #edf2f5;
  border-bottom: 1px solid #edf2f5;
  background: #fff;
  text-align: left;
}

.doctor-calendar-day:nth-child(7n) {
  border-right: 0;
}

.doctor-calendar-day.is-muted {
  background: #f8fbfc;
  color: #98a5ad;
}

.doctor-calendar-day.is-selected {
  box-shadow: inset 0 0 0 2px #86cddd;
  background: #f2fbfd;
}

.doctor-calendar-day > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #12202b;
  font-size: 13px;
  font-weight: 900;
}

.doctor-calendar-day.is-selected > span {
  background: #06485a;
  color: #fff;
}

.doctor-calendar-day div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.doctor-calendar-day em,
.doctor-calendar-day small {
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  padding: 5px 7px;
  background: #eef8fb;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doctor-calendar-day em.is-blocked {
  background: #fff0dc;
}

.doctor-calendar-day em.is-clinic {
  background: #e8f8ee;
}

.doctor-calendar-day em.is-follow {
  background: #f2e9ff;
}

.doctor-calendar-day small {
  color: #65737b;
  background: #f3f6f7;
}

.doctor-calendar-agenda {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dfe9ef;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(17, 38, 47, 0.055);
  min-width: 0;
}

.doctor-calendar-agenda header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.doctor-calendar-agenda h2,
.doctor-calendar-agenda p {
  margin: 0;
}

.doctor-calendar-agenda h2 {
  color: #0a1940;
  font-size: 22px;
}

.doctor-calendar-agenda p,
.doctor-calendar-agenda header > span {
  color: #627786;
  font-size: 13px;
  font-weight: 740;
}

.doctor-calendar-slots,
.doctor-calendar-list {
  display: grid;
  gap: 10px;
}

.doctor-calendar-slots article {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.doctor-calendar-slots time {
  padding-top: 14px;
  color: #536579;
  font-size: 12px;
  font-weight: 800;
}

.doctor-calendar-slots article > div {
  min-height: 58px;
  display: grid;
  gap: 8px;
  padding: 8px;
  border-left: 1px solid #e2edf1;
}

.doctor-calendar-event {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid #e1eaf1;
  border-radius: 16px;
  background: #fbfdfe;
  text-align: left;
}

.doctor-calendar-event > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: currentColor;
}

.doctor-calendar-event > span svg {
  color: #fff;
}

.doctor-calendar-event strong,
.doctor-calendar-event small {
  display: block;
}

.doctor-calendar-event strong {
  color: #0f1f2a;
  font-size: 14px;
  line-height: 1.15;
}

.doctor-calendar-event small {
  margin-top: 3px;
  color: #667782;
  font-size: 11px;
  line-height: 1.25;
}

.doctor-calendar-event b {
  min-height: 27px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(6, 72, 90, 0.08);
  color: currentColor;
  font-size: 11px;
}

.calendar-open-slot {
  min-height: 50px;
  border: 1px dashed #bad5dc;
  border-radius: 15px;
  background: #f9fcfd;
  color: #78909c;
  font-size: 12px;
  font-weight: 800;
}

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

.calendar-event-detail {
  display: grid;
  gap: 12px;
}

.calendar-event-detail > span {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: currentColor;
}

.calendar-event-detail > span svg {
  color: #fff;
}

.calendar-event-detail h3,
.calendar-event-detail p {
  margin: 0;
}

.calendar-event-detail h3 {
  color: #0f1f2a;
  font-size: 24px;
}

.calendar-event-detail p {
  color: #687882;
  line-height: 1.45;
}

.calendar-event-detail dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.calendar-event-detail dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f4;
}

.calendar-event-detail dt,
.calendar-event-detail dd {
  margin: 0;
}

.calendar-event-detail dt {
  color: #6d7c84;
  font-size: 13px;
}

.calendar-event-detail dd {
  color: #10202b;
  font-size: 13px;
  font-weight: 820;
  text-align: right;
}

.booking-mode-selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 6px;
}

.booking-mode-option {
  display: grid;
  gap: 7px;
  min-height: 106px;
  padding: 12px;
  border: 1px solid #e3eef2;
  border-radius: 20px;
  background: #ffffff;
  color: #10202b;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
  touch-action: manipulation;
}

.booking-mode-option:hover,
.booking-mode-option:focus-visible {
  border-color: #b9e4ee;
  box-shadow: 0 12px 26px rgba(20, 75, 91, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.booking-mode-option.is-selected {
  border-color: #9bd7e4;
  background: #eaf9fc;
  box-shadow: inset 0 0 0 2px rgba(151, 215, 228, 0.8);
}

.booking-mode-option span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: #e8f6fa;
  color: var(--ink);
}

.booking-mode-option strong {
  font-size: 13px;
  line-height: 1.1;
}

.booking-mode-option small {
  color: #6d7c84;
  font-size: 11px;
  line-height: 1.3;
}

@media (max-width: 460px) {
  .doctor-appointment-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .doctor-appointment-heading > div:last-child {
    justify-content: flex-end;
  }

  .doctor-appointment-heading h1 {
    font-size: 34px;
  }

  .booking-mode-selector {
    grid-template-columns: 1fr;
  }

  .screen-doctor-more {
    padding-inline: 14px;
  }

  .doctor-more-header h1 {
    font-size: 38px;
  }

  .doctor-more-card {
    padding: 17px 14px;
  }

  .doctor-more-card h2 {
    font-size: 18px;
  }

  .doctor-more-grid,
  .doctor-more-grid.is-compact {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .doctor-more-grid button,
  .doctor-more-grid.is-compact button,
  .doctor-more-card.is-list > button {
    min-height: 82px;
    grid-template-columns: 52px minmax(0, 1fr) 16px;
    gap: 12px;
    padding: 11px 0;
    border-right: 0;
    border-bottom: 1px solid #eef2f5;
  }

  .doctor-more-grid button:last-child,
  .doctor-more-grid.is-compact button:last-child {
    border-bottom: 0;
  }

  .doctor-more-card strong {
    font-size: 14px;
  }

  .doctor-more-card small {
    font-size: 12px;
  }

  .screen-doctor-calendar {
    overflow-x: hidden;
    padding: 18px 14px 112px;
  }

  .doctor-calendar-hero {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 19px;
    border-radius: 24px;
  }

  .doctor-calendar-hero h1 {
    font-size: 29px;
  }

  .doctor-calendar-actions {
    width: 100%;
  }

  .doctor-calendar-hero button {
    width: 100%;
  }

  .doctor-calendar-toolbar {
    grid-template-columns: 1fr;
  }

  .doctor-calendar-nav,
  .doctor-calendar-view-tabs {
    width: 100%;
    justify-content: space-between;
  }

  .doctor-calendar-nav button,
  .doctor-calendar-view-tabs button {
    flex: 1;
  }

  .doctor-calendar-sync {
    width: 100%;
  }

  .doctor-calendar-month {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 10px;
    border-radius: 20px;
    scroll-padding-inline: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .doctor-calendar-month::-webkit-scrollbar {
    display: none;
  }

  .doctor-calendar-month > strong {
    display: none;
  }

  .doctor-calendar-day {
    flex: 0 0 132px;
    min-height: 154px;
    border: 1px solid #edf2f5;
    border-radius: 18px;
    scroll-snap-align: start;
  }

  .doctor-calendar-day.is-muted {
    display: none;
  }

  .doctor-calendar-agenda {
    padding: 15px;
    border-radius: 20px;
  }

  .doctor-calendar-agenda header {
    align-items: flex-start;
    flex-direction: column;
  }

  .doctor-calendar-slots article {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
  }

  .doctor-calendar-event {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .doctor-calendar-event > span {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .doctor-calendar-event b {
    grid-column: 2;
    justify-self: start;
  }

  .doctor-block-grid {
    grid-template-columns: 1fr;
  }
}

.screen-find,
.screen-find-results {
  padding: 34px 26px 112px;
  background: #fff;
}

.screen-pain,
.screen-care-doctor {
  padding: 34px 26px 190px;
  background: #fff;
}

.care-header h1 {
  margin: 14px 0 34px;
  font-size: 40px;
  line-height: 1;
  font-weight: 820;
}

.care-subheader {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
}

.care-subheader h1 {
  margin: 0;
  font-size: 25px;
  line-height: 1;
  font-weight: 800;
}

.care-search-stack {
  display: grid;
  gap: 14px;
}

.care-search-stack button,
.care-search-field,
.results-search {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 25px;
  border: 1px solid #e9eef0;
  border-radius: 999px;
  background: #fff;
  color: #65727a;
  text-align: left;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(17, 38, 47, 0.035);
}

.care-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #101c25;
  font: inherit;
}

.care-search-field input::placeholder {
  color: #8a959b;
}

.care-search-field input[type="date"] {
  color: #65727a;
}

.screen-find .care-search-field {
  position: relative;
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 25px;
  border: 1px solid #e9eef0;
  border-radius: 999px;
  background: #fff;
  color: #65727a;
  box-shadow: 0 10px 24px rgba(17, 38, 47, 0.035);
}

.screen-find .care-search-field .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: #65727a;
}

.screen-find .care-search-field input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #101c25;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
}

.screen-find .care-search-field input::placeholder {
  color: #8a959b;
  opacity: 1;
}

.screen-find .care-search-field input[type="date"] {
  min-height: 24px;
  color: #65727a;
}

.screen-find .care-search-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.care-category-grid button.is-selected span {
  color: #063e52;
  background: #dff5fb;
  box-shadow: inset 0 0 0 2px rgba(6, 62, 82, 0.12);
}

.care-primary-button {
  width: 100%;
  min-height: 62px;
  margin-top: 34px;
  border-radius: 999px;
  background: #063e52;
  color: #fff;
  font-size: 16px;
  font-weight: 760;
  box-shadow: 0 16px 32px rgba(6, 62, 82, 0.2);
}

.care-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 20px;
  margin-top: 66px;
}

.care-category-grid button {
  display: grid;
  justify-items: center;
  gap: 13px;
  background: transparent;
  font-size: 13px;
  font-weight: 650;
}

.care-category-grid span {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  color: #0c3f55;
  background: #f0f8fb;
  box-shadow: inset 0 0 0 1px rgba(6, 62, 82, 0.03);
}

.pain-question {
  margin: 0 0 32px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 560;
}

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

.pain-grid button {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid #edf1f2;
  border-radius: 28px;
  background: #fff;
  font-size: 18px;
  font-weight: 620;
  box-shadow: 0 10px 24px rgba(17, 38, 47, 0.035);
}

.pain-grid button.is-selected {
  border-color: #0f1d24;
  box-shadow: none;
}

.pain-grid span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #0c3f55;
  background: #dff5fb;
  font-size: 10px;
  font-weight: 800;
}

.pain-not-listed-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dbeef4;
  border-radius: 24px;
  background: #f4fbfd;
}

.pain-not-listed-panel.is-hidden {
  display: none;
}

.pain-not-listed-panel label {
  display: grid;
  gap: 8px;
  color: #607681;
  font-size: 13px;
  font-weight: 800;
}

.pain-not-listed-panel input {
  width: 100%;
  border: 1px solid #d7e7ec;
  border-radius: 18px;
  padding: 13px 15px;
  background: #fff;
  color: #111f2a;
  outline: none;
  font: inherit;
}

.pain-not-listed-panel input:focus {
  border-color: #75c5d7;
  box-shadow: 0 0 0 4px rgba(117, 197, 215, 0.16);
}

.pain-not-listed-panel button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: #0f4558;
  color: #fff;
  padding: 0 18px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 700px) {
  .pain-not-listed-panel {
    grid-template-columns: 1fr;
  }

  .pain-not-listed-panel button {
    width: 100%;
  }
}

.pain-action {
  margin-top: 92px;
}

.results-search {
  margin-bottom: 38px;
}

.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.results-toolbar strong {
  font-size: 20px;
}

.results-toolbar div {
  display: flex;
  gap: 10px;
}

.results-toolbar button {
  width: 58px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #edf1f2;
  border-radius: 999px;
  background: #fff;
}

.provider-list {
  display: grid;
  gap: 22px;
}

.provider-card {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  padding: 26px 20px 18px;
  border-radius: 25px;
  background:
    linear-gradient(135deg, #f4fbfd, #e7f5fa),
    #f4f6f6;
  box-shadow: 0 18px 42px rgba(17, 38, 47, 0.08);
  cursor: pointer;
}

.provider-card.is-dark {
  background: linear-gradient(135deg, #07384d, #0a2634);
  color: #fff;
}

.provider-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
}

.provider-badges span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #15242d;
  font-size: 12px;
  font-weight: 700;
}

.provider-card h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 5px;
  font-size: 19px;
}

.provider-card .verified-doctor-badge {
  transform: translateY(-1px);
}

.provider-card p {
  position: relative;
  z-index: 2;
  margin: 0 0 30px;
  color: #6f7d84;
  font-size: 14px;
}

.provider-card.is-dark p {
  color: rgba(255, 255, 255, 0.68);
}

.provider-card > strong {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 13px;
}

.provider-card img {
  position: absolute;
  right: 8px;
  top: 18px;
  width: 172px;
  height: 170px;
  object-fit: contain;
  object-position: center bottom;
}

.provider-days {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-top: 20px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(16px);
}

.provider-days button {
  min-height: 66px;
  border-radius: 18px;
  background: #fff;
  color: #6d7b82;
  font-size: 11px;
  line-height: 1.35;
}

.provider-days button.is-selected {
  background: #063e52;
  color: #fff;
}

.provider-days b {
  color: inherit;
  font-size: 12px;
}

.care-doctor-hero {
  position: relative;
  min-height: 240px;
}

.care-doctor-hero h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.care-doctor-hero p {
  margin: 0 0 22px;
  color: #6d7b82;
  font-size: 15px;
}

.care-doctor-hero button {
  min-width: 124px;
  min-height: 42px;
  border: 1px solid #e4ecef;
  border-radius: 999px;
  background: #fff;
  font-weight: 650;
}

.care-doctor-hero img {
  position: absolute;
  right: -18px;
  bottom: 0;
  width: 235px;
  height: 230px;
  object-fit: contain;
  object-position: center bottom;
}

.care-stat-glass {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: -4px;
  padding: 22px 20px;
  border-radius: 22px;
  background: rgba(223, 245, 251, 0.72);
  box-shadow: 0 20px 44px rgba(17, 38, 47, 0.08);
  backdrop-filter: blur(18px);
}

.care-stat-glass strong,
.care-stat-glass span {
  display: block;
}

.care-stat-glass strong {
  margin-bottom: 10px;
  font-size: 17px;
}

.care-stat-glass span {
  color: #6d7b82;
  font-size: 13px;
}

.care-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 26px;
  border-bottom: 1px solid #dfe7ea;
}

.care-tabs button {
  position: relative;
  min-height: 48px;
  background: transparent;
  color: #6d7b82;
  font-weight: 650;
}

.care-tabs button.is-active {
  color: #101c25;
}

.care-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #063e52;
}

.care-tab-panel {
  display: none;
}

.care-tab-panel.is-active {
  display: block;
}

.care-about {
  margin-top: 32px;
}

.care-about h2,
.care-reviews h2,
.care-profile-details h3,
.care-socials h2,
.care-availability-panel h2 {
  margin: 0 0 20px;
  font-size: 21px;
}

.care-about p {
  margin: 0;
  color: #263943;
  font-size: 15px;
  line-height: 1.7;
}

.care-reviews {
  margin-top: 34px;
  padding-bottom: 22px;
}

.care-reviews h2 span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  border-radius: 50%;
  background: #063e52;
  color: #fff;
  font-size: 12px;
}

.care-reviews div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.care-reviews strong {
  font-size: 54px;
  line-height: 1;
  color: #333;
}

.care-reviews span {
  color: #e4be35;
  font-size: 24px;
  letter-spacing: 1px;
}

.care-reviews p,
.care-availability-panel p {
  margin: 10px 0 0;
  color: #65727a;
  line-height: 1.55;
}

.care-profile-details {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.care-profile-details article,
.care-review-list article,
.care-review-form,
.care-availability-grid article {
  border: 1px solid #edf2f4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(17, 38, 47, 0.045);
}

.care-profile-details article {
  padding: 18px;
}

.care-profile-details h3 {
  margin-bottom: 12px;
  font-size: 17px;
}

.care-profile-details p,
.care-profile-details li {
  color: #52636c;
  line-height: 1.55;
}

.care-timeline-list {
  display: grid;
  gap: 12px;
}

.care-timeline-list div {
  display: grid;
  gap: 3px;
  padding-left: 16px;
  border-left: 2px solid #c8ecf5;
}

.care-timeline-list strong,
.care-review-list strong {
  color: #101c25;
}

.care-timeline-list span,
.care-timeline-list em,
.care-review-list time {
  color: #687780;
  font-style: normal;
  font-size: 13px;
}

.care-chip-list,
.doctor-social-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.care-chip-list span,
.doctor-social-editor a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: #e7f6fb;
  color: #063e52;
  font-weight: 700;
  text-decoration: none;
}

.doctor-social-editor p,
.doctor-visibility-note {
  margin: 0;
  color: #65727a;
}

.doctor-visibility-checks {
  display: grid;
  gap: 12px;
}

.doctor-visibility-checks label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #edf2f4;
  border-radius: 14px;
  background: #fbfdfe;
  font-weight: 700;
}

.doctor-visibility-checks input {
  width: 18px;
  height: 18px;
  accent-color: #063e52;
}

.care-socials {
  margin-top: 28px;
}

.care-socials[hidden] {
  display: none;
}

.care-socials div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.care-socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 999px;
  color: var(--theme-primary);
  background: var(--theme-panel-soft);
  font-weight: 760;
  text-decoration: none;
  box-shadow: 0 12px 26px var(--theme-shadow-color);
}

.care-socials a span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--theme-primary-contrast);
  background: var(--theme-primary);
  font-size: 12px;
  font-weight: 850;
}

.care-socials a svg {
  width: 15px;
  height: 15px;
  display: block;
}

.care-review-list {
  display: grid;
  gap: 12px;
}

.care-review-list article {
  padding: 16px;
}

.care-review-list article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.care-review-list p {
  margin: 10px 0 8px;
  color: #52636c;
  line-height: 1.55;
}

.care-review-list span,
.care-reviews [data-care-stars] {
  color: #cfd9dd;
}

.care-review-list .is-filled,
.care-reviews [data-care-stars] .is-filled,
.care-star-input button.is-active {
  color: #e4be35;
}

.care-review-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 18px;
}

.care-review-form h3 {
  margin: 0;
  font-size: 18px;
}

.care-review-form p {
  margin: 0;
  color: #65727a;
  line-height: 1.5;
}

.care-star-input {
  display: flex;
  gap: 5px;
}

.care-star-input button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f2f8fa;
  color: #cfd9dd;
  font-size: 20px;
}

.care-review-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #dfe8eb;
  border-radius: 16px;
  padding: 12px 14px;
  color: #101c25;
  font: inherit;
}

.care-review-anonymous {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #5c6c75;
  font-size: 14px;
  font-weight: 800;
}

.care-review-anonymous input {
  width: 18px;
  height: 18px;
  accent-color: #174b5d;
}

.care-availability-panel {
  margin-top: 32px;
}

.care-availability-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.care-availability-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 16px;
}

.care-availability-grid strong {
  color: #101c25;
}

.care-availability-grid span {
  color: #063e52;
  font-weight: 760;
}

.care-availability-grid em {
  color: #65727a;
  font-style: normal;
}

.care-book-button {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 28px 0 0;
  z-index: 18;
}

.screen-doctor-patients,
.screen-doctor-patient-detail {
  padding: 24px 20px 112px;
  background:
    radial-gradient(circle at 12% 0, rgba(200, 233, 244, 0.6), transparent 34%),
    linear-gradient(180deg, #fbfdff, #fff);
}

.doctor-patients-top,
.doctor-patient-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
}

.doctor-brand-row,
.doctor-top-actions,
.doctor-patient-heading,
.doctor-patient-heading > div,
.doctor-patient-detail-top > div {
  display: flex;
  align-items: center;
}

.doctor-brand-row {
  gap: 14px;
}

.doctor-brand-row strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0a1940;
  font-size: 21px;
  font-weight: 850;
}

.doctor-brand-row strong span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #0b72d9;
  color: #fff;
  font-size: 18px;
}

.brand-inline-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.doctor-top-actions {
  gap: 14px;
}

.doctor-top-actions button,
.doctor-patient-heading button,
.doctor-patient-detail-top button,
.doctor-patient-profile-head > button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  border: 1px solid #e5edf2;
  border-radius: 14px;
  background: #fff;
  color: #071a3d;
  box-shadow: 0 10px 22px rgba(17, 38, 47, 0.05);
}

.doctor-top-actions b {
  position: absolute;
  right: -5px;
  top: -7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0b72d9;
  color: #fff;
  font-size: 10px;
}

.doctor-top-actions img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.doctor-top-actions em {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #20cf5d;
}

.doctor-patient-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.doctor-patient-heading h1 {
  margin: 0 0 8px;
  color: #0a1940;
  font-size: 30px;
  line-height: 1;
  font-weight: 850;
}

.doctor-patient-heading p {
  margin: 0;
  color: #536579;
  font-size: 14px;
}

.doctor-patient-heading > div {
  gap: 10px;
}

.doctor-patient-tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-bottom: 20px;
  scrollbar-width: none;
}

.doctor-patient-tabs::-webkit-scrollbar {
  display: none;
}

.doctor-patient-tabs button {
  flex: 0 0 auto;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid #dfe9ef;
  border-radius: 12px;
  background: #fff;
  color: #0a1940;
  font-size: 13px;
  font-weight: 790;
}

.doctor-patient-tabs button.is-active {
  border-color: #0b72d9;
  background: #0b72d9;
  color: #fff;
}

.doctor-patient-tabs span {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(11, 114, 217, 0.1);
  color: #0b4d8f;
  font-size: 11px;
}

.doctor-patient-tabs .is-active span {
  background: rgba(255, 255, 255, 0.23);
  color: #fff;
}

.doctor-patient-search {
  min-height: 50px;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 0 14px;
  border: 1px solid #e5edf2;
  border-radius: 14px;
  background: #fff;
  color: #536579;
}

.doctor-patient-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0a1940;
  font-size: 13px;
}

.doctor-patient-list {
  display: grid;
  gap: 10px;
}

.doctor-patient-row {
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 110px 84px 24px;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border: 1px solid #e8eef2;
  border-radius: 18px;
  background: #fff;
  text-align: left;
  box-shadow: 0 12px 28px rgba(17, 38, 47, 0.045);
}

.doctor-patient-row img,
.doctor-patient-avatar img {
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.doctor-patient-row .avatar-wrap {
  position: relative;
  width: 54px;
  height: 54px;
}

.doctor-patient-row img {
  width: 54px;
  height: 54px;
}

.doctor-patient-row .avatar-wrap em,
.doctor-patient-avatar em {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #20cf5d;
}

.doctor-patient-row h2 {
  margin: 0 0 7px;
  color: #0a1940;
  font-size: 15px;
  line-height: 1;
  font-weight: 850;
}

.doctor-patient-row p,
.doctor-patient-row small {
  margin: 0;
  color: #2e4562;
  font-size: 12px;
  line-height: 1.35;
}

.doctor-patient-row small {
  display: block;
  padding-left: 16px;
  border-left: 1px solid #e0e7ec;
}

.doctor-patient-row small b {
  display: block;
  margin-bottom: 8px;
  color: #536579;
  font-size: 11px;
}

.doctor-patient-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #e7f8ee;
  color: #148744;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.doctor-patient-status.is-due {
  background: #fff3df;
  color: #e07800;
}

.doctor-patient-status.is-report {
  background: #e6f3ff;
  color: #0b72d9;
}

.doctor-patient-row .kebab {
  justify-self: end;
  color: #0a1940;
  font-size: 24px;
  line-height: 1;
}

.doctor-patient-detail-top {
  margin-bottom: 24px;
}

.doctor-patient-detail-top h1 {
  margin: 0;
  color: #0a1940;
  font-size: 18px;
  font-weight: 850;
}

.doctor-patient-detail-top button {
  box-shadow: none;
  border: 0;
}

.doctor-patient-detail-top > button {
  display: inline-flex;
  gap: 6px;
  width: auto;
  padding: 0;
  background: transparent;
  font-weight: 720;
}

.doctor-patient-detail-top > div {
  gap: 8px;
}

.doctor-patient-profile-head {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.doctor-patient-avatar {
  position: relative;
  width: 90px;
  height: 90px;
}

.doctor-patient-avatar img {
  width: 90px;
  height: 90px;
}

.doctor-patient-profile-head h2 {
  margin: 0 0 10px;
  color: #0a1940;
  font-size: 22px;
  line-height: 1;
  font-weight: 850;
}

.doctor-patient-profile-head p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 9px;
  color: #253a5b;
  font-size: 13px;
}

.doctor-patient-profile-head > button {
  display: inline-flex;
  gap: 7px;
  width: auto;
  padding: 0 14px;
  color: #0b72d9;
  font-weight: 760;
}

.doctor-patient-detail-tabs {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  margin: 0 -20px 20px;
  padding: 0 20px;
  border-bottom: 1px solid #e5edf2;
  scrollbar-width: none;
}

.doctor-patient-detail-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: 48px;
  background: transparent;
  color: #22375a;
  font-size: 14px;
  font-weight: 750;
}

.doctor-patient-detail-tabs button.is-active {
  color: #0b72d9;
}

.doctor-patient-detail-tabs .is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #0b72d9;
}

.doctor-patient-vitals,
.doctor-patient-visit-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid #e5edf2;
  border-radius: 16px;
  background: #fff;
}

.doctor-patient-vitals article {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
}

.doctor-patient-vitals article > span,
.doctor-patient-visit-card article > span,
.doctor-medical-summary header > span,
.doctor-recent-activity article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8f8fc;
  color: #0b72d9;
  font-weight: 850;
}

.doctor-patient-vitals .is-red {
  background: #fff0f1;
  color: #f04454;
}

.doctor-patient-vitals .is-purple {
  background: #f0edff;
  color: #7b61ff;
}

.doctor-patient-vitals small,
.doctor-patient-visit-card small {
  display: block;
  margin-bottom: 4px;
  color: #536579;
  font-size: 12px;
}

.doctor-patient-vitals strong,
.doctor-patient-visit-card strong {
  color: #0a1940;
  font-size: 13px;
}

.doctor-patient-visit-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.doctor-patient-visit-card article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  min-width: 0;
}

.doctor-patient-visit-card article + article {
  padding-left: 12px;
  border-left: 1px solid #e5edf2;
}

.doctor-patient-visit-card p {
  margin: 5px 0 0;
  color: #0a1940;
  font-size: 12px;
}

.doctor-medical-summary {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eafaf2, #f4fffa);
}

.doctor-medical-summary header,
.doctor-recent-activity header {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
}

.doctor-medical-summary h2,
.doctor-recent-activity h2 {
  margin: 0;
  color: #0a1940;
  font-size: 15px;
}

.doctor-medical-summary button,
.doctor-recent-activity button {
  background: transparent;
  color: #0b72d9;
  font-size: 12px;
  font-weight: 750;
}

.doctor-medical-summary ul {
  margin: 10px 0 0 50px;
  padding: 0;
  color: #0a1940;
  font-size: 13px;
  line-height: 1.6;
}

.doctor-recent-activity {
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid #e5edf2;
  border-radius: 16px;
  background: #fff;
}

.doctor-recent-activity header {
  grid-template-columns: 1fr auto;
  padding: 14px 16px;
  border-bottom: 1px solid #e5edf2;
}

.doctor-recent-activity article {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.doctor-recent-activity strong,
.doctor-recent-activity p,
.doctor-recent-activity time {
  display: block;
  margin: 0;
  color: #0a1940;
  font-size: 12px;
}

.doctor-recent-activity p,
.doctor-recent-activity time {
  color: #536579;
}

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

.doctor-patient-actions button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #dfe9ef;
  border-radius: 14px;
  background: #fff;
  color: #0b72d9;
  font-size: 12px;
  font-weight: 790;
}

.screen-messages,
.screen-message-thread {
  background:
    radial-gradient(circle at 18% 3%, rgba(200, 233, 244, 0.72), transparent 38%),
    linear-gradient(180deg, #f5fcfe, #fff);
}

.screen-messages {
  position: relative;
  padding: 30px 20px 118px;
}

.messages-header {
  display: grid;
  grid-template-columns: 1fr 62px;
  align-items: start;
  gap: 16px;
  margin-bottom: 22px;
}

.messages-header h1 {
  margin: 0 0 8px;
  color: #101c25;
  font-size: 38px;
  line-height: 1;
  font-weight: 860;
}

.messages-header p {
  margin: 0;
  color: #5d6d76;
  font-size: 16px;
  line-height: 1.35;
}

.compose-button {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: #fff;
  color: #0b72d9;
  box-shadow: 0 18px 34px rgba(17, 38, 47, 0.1);
}

.compose-button .icon {
  width: 30px;
  height: 30px;
}

.message-search {
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border: 1px solid #eef1f2;
  border-radius: 16px;
  background: #fff;
  color: #102231;
  box-shadow: 0 14px 32px rgba(17, 38, 47, 0.05);
}

.message-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #101c25;
  background: transparent;
  font-size: 16px;
}

.message-search input::placeholder {
  color: #6c7882;
}

.message-filters {
  display: flex;
  gap: 12px;
  margin: 22px 0 24px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.message-filters::-webkit-scrollbar {
  display: none;
}

.message-filters button {
  flex: 0 0 auto;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: 22px;
  background: #fff;
  color: #101c25;
  font-size: 15px;
  font-weight: 760;
  box-shadow: 0 10px 22px rgba(17, 38, 47, 0.05);
}

.message-filters button.is-active {
  color: #0b72d9;
  background: #e7f6ff;
  box-shadow: inset 0 0 0 1px rgba(11, 114, 217, 0.12);
}

.message-list-card {
  overflow: hidden;
  border: 1px solid #eef1f2;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(17, 38, 47, 0.06);
}

.message-list-card .empty-state-card,
.message-empty-action {
  grid-column: 1 / -1;
}

.message-empty-action {
  padding: 0 16px 18px;
  background: #fff;
}

.message-row {
  width: 100%;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: #fff;
  text-align: left;
}

.message-row + .message-row {
  border-top: 1px solid #eef1f2;
}

.message-avatar {
  position: relative;
  width: 62px;
  height: 62px;
}

.message-avatar img,
.message-avatar span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8f8fc;
  object-fit: cover;
  object-position: center top;
  color: #0b72d9;
  font-size: 28px;
  font-weight: 850;
}

.message-avatar em {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 15px;
  height: 15px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #20cf5d;
}

.message-row h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: #101c25;
  font-size: 19px;
  line-height: 1;
  font-weight: 830;
}

.message-row h2 svg {
  color: #0b72d9;
}

.message-row p {
  margin: 0;
  color: #334653;
  font-size: 14px;
  line-height: 1.38;
}

.message-meta {
  display: grid;
  justify-items: end;
  gap: 14px;
  color: #3b4851;
  font-size: 13px;
}

.message-meta b {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  background: #0b72d9;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.message-meta b.is-soft {
  background: #d7ebff;
  color: #0b72d9;
}

.message-fab {
  position: absolute;
  right: 24px;
  bottom: 96px;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #0872d9;
  color: #fff;
  box-shadow: 0 18px 38px rgba(8, 114, 217, 0.32);
}

.message-compose-list,
.message-options-list {
  display: grid;
  gap: 10px;
}

.message-compose-list button,
.message-options-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e4edf2;
  border-radius: 18px;
  background: #fff;
  text-align: left;
}

.message-options-list button {
  grid-template-columns: minmax(0, 1fr);
}

.message-compose-list strong,
.message-options-list strong,
.message-contact-sheet h3 {
  color: #101c25;
  font-size: 16px;
  font-weight: 850;
}

.message-compose-list small,
.message-options-list small,
.message-contact-sheet p {
  display: block;
  margin-top: 4px;
  color: #62747f;
  font-size: 13px;
  line-height: 1.35;
}

.message-contact-sheet {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.message-contact-sheet .message-avatar {
  width: 78px;
  height: 78px;
}

.screen-message-thread {
  padding: 28px 18px 116px;
}

.thread-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.plain-thread-button,
.thread-topbar button {
  background: transparent;
  color: #071a3d;
}

.thread-topbar > div {
  display: flex;
  align-items: center;
  gap: 18px;
}

.thread-topbar > div button {
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 34px;
  font-size: 28px;
  line-height: 1;
}

.thread-profile {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
}

.thread-profile img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #dff5fb;
  object-fit: cover;
  object-position: center top;
}

.thread-profile .online-dot {
  position: absolute;
  left: 124px;
  top: 112px;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #20cf5d;
}

.thread-profile h1 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: #0a1940;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 850;
}

.thread-profile h1 svg {
  color: #0b72d9;
}

.thread-profile p {
  margin: 0 0 9px;
  color: #5c6c80;
  font-size: 16px;
  line-height: 1.25;
}

.thread-profile strong {
  display: block;
  margin-bottom: 11px;
  color: #0b72d9;
  font-size: 16px;
}

.thread-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0a1940 !important;
  font-size: 14px !important;
}

.thread-rating span:nth-child(2) {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #63727c;
}

.thread-online {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #5c6c80 !important;
  font-size: 13px !important;
}

.thread-online b {
  color: #21bd57;
}

.thread-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin: 26px 0 18px;
  border: 1px solid #dce9f1;
  border-radius: 18px;
  background: #fff;
}

.thread-tabs button {
  position: relative;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #233752;
  font-size: 14px;
  font-weight: 720;
}

.thread-tabs button + button {
  border-left: 1px solid #e7eef3;
}

.thread-tabs button.is-active {
  color: #0b72d9;
}

.thread-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #0b72d9;
}

.secure-note {
  display: grid;
  grid-template-columns: 46px 1fr 28px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid #d0eaff;
  border-radius: 16px;
  background: #eaf6ff;
  color: #0b72d9;
}

.secure-note p {
  margin: 0;
  color: #4b6074;
  font-size: 13px;
  line-height: 1.45;
}

.secure-note strong {
  color: #0b72d9;
}

.secure-note button {
  background: transparent;
  color: #10233f;
  font-size: 26px;
}

.chat-stream {
  display: grid;
  gap: 16px;
  margin: 24px 0 22px;
}

.chat-date {
  justify-self: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: #eef3fb;
  color: #607084;
  font-size: 13px;
  font-weight: 680;
}

.chat-message {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.chat-message.is-me {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
}

.chat-message > img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.chat-bubble {
  max-width: 82%;
  padding: 16px 18px;
  border: 1px solid #e5ecf3;
  border-radius: 18px;
  background: #fff;
  color: #0c1d3d;
  font-size: 16px;
  line-height: 1.55;
  box-shadow: 0 10px 24px rgba(17, 38, 47, 0.04);
}

.chat-message.is-me .chat-bubble {
  background: #eaf6ff;
  border-color: #cbe6ff;
}

.chat-bubble time {
  display: block;
  margin-top: 8px;
  color: #52677e;
  text-align: right;
  font-size: 12px;
  line-height: 1;
}

.chat-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-top: 8px;
}

.chat-file span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #ffefef;
  color: #ef3f3f;
  font-size: 12px;
  font-weight: 850;
}

.chat-file.is-image span {
  background: #eaf8fc;
  color: #0c5367;
}

.chat-file-thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid #d9e8ed;
  object-fit: cover;
  background: #eff9fc;
}

.chat-image-preview {
  display: block;
  width: min(300px, 66vw);
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e8ed;
  border-radius: 14px;
  background: #eff9fc;
  cursor: zoom-in;
}

.chat-image-preview img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: #fff;
}

.chat-file.is-image {
  grid-template-columns: minmax(0, 1fr);
  width: min(320px, 68vw);
}

.chat-file-detail {
  min-width: 0;
}

.chat-file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chat-file-actions button,
.chat-care-actions button {
  border: 1px solid #d6e7ee;
  border-radius: 999px;
  padding: 8px 12px;
  color: #0c5367;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.chat-file small {
  color: #6b7b84;
  font-weight: 650;
}

.chat-text + .chat-file {
  margin-top: 12px;
}

.chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: -8px;
  margin-left: 58px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f6fb;
  color: #5d6d76;
  font-size: 12px;
}

.thread-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.thread-actions button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid #dce9f1;
  border-radius: 16px;
  background: #fff;
  color: #0a1940;
  font-size: 12px;
  font-weight: 760;
}

.thread-composer {
  display: grid;
  grid-template-columns: 52px 1fr 40px 52px;
  align-items: center;
  gap: 8px;
}

.thread-composer button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #dce9f1;
  border-radius: 50%;
  background: #fff;
  color: #0a1940;
  font-size: 25px;
}

.thread-composer [data-message-send] {
  background: #0b72d9;
  color: #fff;
}

.thread-composer label {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid #dce9f1;
  border-radius: 999px;
  background: #fff;
}

.thread-composer input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
}

.screen-call {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #8db6c3;
}

.call-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(169, 213, 224, 0.34), rgba(4, 37, 48, 0.72)),
    #9fc8d3;
}

.call-doctor {
  position: absolute;
  left: 0;
  top: 120px;
  width: 100%;
  height: 590px;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0.96;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 96%, rgba(0, 0, 0, 0.75) 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 96%, rgba(0, 0, 0, 0.75) 100%);
}

.call-header {
  position: relative;
  z-index: 3;
  padding: 38px 36px 0;
}

.call-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: #132733;
  font-size: 32px;
  line-height: 1;
  font-weight: 760;
}

.call-header p {
  margin: 0;
  color: #183440;
  font-size: 14px;
  font-weight: 560;
}

.voice-pulse {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(83, 136, 151, 0.35);
}

.voice-pulse::before,
.voice-pulse::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 3px;
  border-radius: 999px;
  background: #173442;
}

.voice-pulse::before {
  left: 9px;
  height: 11px;
}

.voice-pulse::after {
  right: 9px;
  height: 8px;
}

.participants {
  position: absolute;
  z-index: 4;
  left: 30px;
  right: 30px;
  bottom: 154px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.participant-card {
  position: relative;
  height: 132px;
  overflow: hidden;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 30px rgba(10, 35, 43, 0.16);
}

.participant-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.participant-overlay {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.participant-overlay strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-round {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
}

.call-controls {
  position: absolute;
  z-index: 5;
  left: 30px;
  right: 30px;
  bottom: 34px;
  justify-content: space-between;
  gap: 14px;
  min-height: 88px;
  padding: 13px;
  border-radius: 36px;
  background: rgba(221, 231, 234, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(18px);
}

.call-control {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.18);
}

.call-control.is-on {
  color: #10242d;
  background: rgba(255, 255, 255, 0.95);
}

.end-call {
  background: var(--danger);
  color: #fff;
}

.end-call svg {
  transform: rotate(135deg);
}

.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  align-items: end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  touch-action: none;
}

.bottom-sheet.is-legal-sheet {
  z-index: 140;
  align-items: center;
  padding: 18px;
}

.bottom-sheet.is-avatar-cropper {
  z-index: 150;
  align-items: center;
  padding: 18px;
}

.bottom-sheet.is-pregnancy-sheet {
  z-index: 130;
}

.bottom-sheet.is-open {
  pointer-events: auto;
  opacity: 1;
}

.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 24, 30, 0.28);
  touch-action: none;
}

.bottom-sheet.is-pregnancy-sheet .sheet-scrim {
  background: rgba(58, 31, 43, 0.32);
  backdrop-filter: blur(8px);
}

.sheet-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 28px));
  max-height: min(84vh, 760px);
  margin: 0 auto 18px;
  padding: 14px 22px 24px;
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(13, 35, 43, 0.24);
  transform: translateY(18px);
  transition: transform 180ms ease;
}

.bottom-sheet.is-legal-sheet .sheet-card {
  width: min(720px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  margin: 0 auto;
  overflow: hidden;
}

.bottom-sheet.is-avatar-cropper .sheet-card {
  width: min(430px, calc(100vw - 32px));
  margin: 0 auto;
}

.bottom-sheet.is-pregnancy-sheet .sheet-card {
  width: min(430px, calc(100vw - 28px));
  margin: 0 auto 18px;
  padding: 16px 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(252, 232, 229, 0.9)),
    rgba(255, 255, 255, 0.76);
  box-shadow: 0 30px 80px rgba(216, 79, 199, 0.18);
  backdrop-filter: blur(22px);
}

.bottom-sheet.is-legal-sheet .sheet-body {
  max-height: calc(min(82vh, 760px) - 88px);
  overflow: hidden;
}

.avatar-cropper-sheet {
  display: grid;
  gap: 16px;
}

.avatar-cropper-sheet p {
  margin: 0;
  color: #60727d;
  font-size: 14px;
  line-height: 1.45;
}

.avatar-cropper-frame {
  position: relative;
  width: min(300px, calc(100vw - 92px));
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;
  background: #dff3f8;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.avatar-cropper-frame:active {
  cursor: grabbing;
}

.avatar-cropper-frame img {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: none;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.avatar-cropper-frame span {
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(9, 35, 43, 0.12);
  pointer-events: none;
}

.avatar-zoom-control {
  display: grid;
  gap: 8px;
  color: #11212b;
  font-weight: 800;
}

.avatar-zoom-control input {
  accent-color: #0a4c5f;
}

.avatar-crop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bottom-sheet.is-open .sheet-card {
  transform: translateY(0);
}

.sheet-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: #172a33;
}

.bottom-sheet.is-pregnancy-sheet .sheet-handle {
  width: 48px;
  height: 5px;
  margin-bottom: 20px;
  background: #111;
}

.sheet-card h2 {
  margin: 0 0 15px;
  font-size: 23px;
  line-height: 1.1;
}

.bottom-sheet.is-pregnancy-sheet .sheet-card h2 {
  margin-bottom: 18px;
  color: #111;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  color: #53656c;
  max-height: calc(min(84vh, 760px) - 82px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.pregnancy-sheet-form {
  display: grid;
  gap: 14px;
}

.pregnancy-sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
}

.pregnancy-sheet-field {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #111;
  font-size: 13px;
  font-weight: 850;
}

.pregnancy-sheet-field span {
  padding-left: 4px;
}

.pregnancy-sheet-form input,
.pregnancy-sheet-form select,
.pregnancy-sheet-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  color: #111;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(216, 79, 199, 0.08),
    0 12px 24px rgba(70, 42, 50, 0.08);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  outline: none;
  transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.pregnancy-sheet-form textarea {
  min-height: 112px;
  padding-top: 14px;
  line-height: 1.45;
  resize: vertical;
}

.pregnancy-sheet-form input:focus,
.pregnancy-sheet-form select:focus,
.pregnancy-sheet-form textarea:focus {
  border-color: rgba(216, 79, 199, 0.34);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(216, 79, 199, 0.22),
    0 0 0 4px rgba(216, 79, 199, 0.1),
    0 14px 30px rgba(70, 42, 50, 0.1);
}

.pregnancy-sheet-form .pregnancy-disclaimer {
  margin: 0;
  color: rgba(17, 17, 17, 0.56);
  font-size: 13px;
  line-height: 1.45;
}

.pregnancy-sheet-actions {
  display: flex;
  justify-content: flex-start;
}

.pregnancy-sheet-actions .pregnancy-primary {
  width: auto;
  min-width: 170px;
  min-height: 52px;
  padding: 0 24px;
  background: #143f4d;
}

.sheet-search {
  display: flex;
  gap: 10px;
}

.sheet-search input {
  min-width: 0;
  flex: 1;
  height: 54px;
  padding: 0 17px;
  border: 1px solid #e7eeee;
  border-radius: 999px;
  background: #f8faf9;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.chip {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  background: #edf6f8;
  color: #12303a;
  font-size: 14px;
}

.sheet-list {
  display: grid;
  gap: 12px;
}

.sheet-list p {
  margin: 0;
  padding: 13px 14px;
  border-radius: 16px;
  background: #f7faf9;
  font-size: 14px;
  line-height: 1.35;
}

.patient-settings-sheet button,
.theme-choice {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid #e6eef1;
  border-radius: 18px;
  background: #f8fbfc;
  color: #12202b;
  text-align: left;
}

.patient-settings-sheet button strong,
.theme-choice strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 900;
}

.patient-settings-sheet button small,
.theme-choice small {
  display: block;
  color: #697984;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.theme-settings-sheet > p {
  border: 1px solid #e0edf1;
  background: #f4fbfd;
  color: #36505b;
  font-weight: 750;
}

.theme-choice-list {
  display: grid;
  gap: 10px;
}

.theme-choice {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 76px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.theme-choice:hover {
  transform: translateY(-1px);
}

.theme-choice.is-active {
  border-color: rgba(10, 82, 105, 0.38);
  background: #e8f8fc;
  box-shadow: 0 14px 30px rgba(18, 63, 82, 0.1);
}

.theme-swatches {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 82px;
}

.theme-swatches i {
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  box-shadow: 0 5px 12px rgba(17, 38, 47, 0.12);
}

.notification-sheet-row {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 15px;
  border-radius: 18px;
  background: #f7faf9;
  text-align: left;
  color: #12202b;
  transition: transform 180ms ease, background 160ms ease;
  touch-action: pan-y;
  z-index: 1;
}

.notification-sheet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #53656c;
  font-size: 13px;
  font-weight: 850;
}

.notification-sheet-toolbar .chip {
  min-height: 34px;
  padding: 8px 12px;
}

.notification-swipe-row {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #ffeff1;
}

.notification-delete-action {
  position: absolute;
  inset: 0 auto 0 0;
  width: 92px;
  border: 0;
  border-radius: 18px 0 0 18px;
  background: #dc3545;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.notification-swipe-row.is-delete-ready .notification-sheet-row {
  transform: translateX(92px);
}

.sheet-list .notification-permission-card,
.notification-permission-card {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 15px;
  border: 1px solid #d8edf3;
  border-radius: 18px;
  background: #f2fbfd;
  color: #35505a;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.sheet-list .notification-permission-card.is-enabled,
.notification-permission-card.is-enabled {
  border-color: #c9ead2;
  background: #f1fbf4;
  color: #2e6a42;
}

.sheet-list .notification-permission-card .chip,
.notification-permission-card .chip {
  justify-self: start;
}

.notification-install-button.is-compact {
  min-height: 38px;
  padding-inline: 14px;
}

.notification-install-hint {
  margin: 0;
  color: #2e6a42;
  font-size: 13px;
  font-weight: 800;
}

.web-app-install-sheet ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 16px 14px 36px;
  border: 1px solid #d8edf3;
  border-radius: 18px;
  background: #f2fbfd;
  color: #244650;
  font-size: 14px;
  line-height: 1.4;
}

.web-app-install-sheet li::marker {
  color: #0b5d73;
  font-weight: 900;
}

.notification-sheet-row.is-unread {
  background: #e9f8fc;
}

.notification-sheet-row strong {
  font-size: 15px;
}

.notification-sheet-row span {
  color: #6a7b85;
  font-size: 13px;
  line-height: 1.35;
}

.in-app-notifications {
  position: fixed;
  z-index: 55;
  top: 22px;
  right: 22px;
  display: flex;
  width: min(360px, calc(100vw - 44px));
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.in-app-notification-card {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 14px;
  border: 1px solid rgba(194, 217, 224, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 55px rgba(20, 50, 61, 0.16);
  color: #11202a;
  text-align: left;
  backdrop-filter: blur(18px);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: top right;
  animation: in-app-notification-enter 360ms cubic-bezier(0.2, 0.9, 0.22, 1.15) both;
}

.in-app-notification-card:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 26px 64px rgba(20, 50, 61, 0.2);
}

.in-app-notification-card.is-leaving {
  animation: in-app-notification-exit 240ms ease forwards;
}

.in-app-notification-avatar {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #e9f8fc;
}

.in-app-notification-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.in-app-notification-card span:last-child {
  min-width: 0;
  padding-left: 13px;
}

.in-app-notification-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
}

.in-app-notification-card small {
  display: block;
  overflow: hidden;
  color: #6c7b83;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes in-app-notification-enter {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.82);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes in-app-notification-exit {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.86);
  }
}

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 28px;
  max-width: min(340px, calc(100vw - 36px));
  padding: 13px 18px;
  border-radius: 999px;
  background: #102b36;
  color: #fff;
  box-shadow: 0 18px 45px rgba(15, 36, 44, 0.25);
  font-size: 14px;
  font-weight: 650;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 170ms ease, transform 170ms ease;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

html[data-app-theme="apyva"] {
  --ink: #2b1f2c;
  --muted: #756674;
  --faint: #eadfe9;
  --paper: #faf6f3;
  --white: #ffffff;
  --mist: #dccfe8;
  --blue: #dccfe8;
  --blue-strong: #c97d93;
  --teal: #4a3148;
  --teal-soft: #7a4d65;
  --peach: #f4d9d5;
  --theme-page: #faf6f3;
  --theme-page-soft: #fbf0f2;
  --theme-surface: rgba(255, 255, 255, 0.88);
  --theme-surface-strong: #ffffff;
  --theme-surface-soft: rgba(255, 255, 255, 0.74);
  --theme-panel: rgba(255, 255, 255, 0.84);
  --theme-panel-soft: #f8e9ef;
  --theme-primary: #4a3148;
  --theme-primary-2: #7a4d65;
  --theme-primary-contrast: #ffffff;
  --theme-accent: #c97d93;
  --theme-accent-soft: #f3e7ee;
  --theme-accent-muted: #f8e9ef;
  --theme-border: rgba(201, 125, 147, 0.24);
  --theme-border-strong: rgba(201, 125, 147, 0.38);
  --theme-ring: rgba(201, 125, 147, 0.25);
  --theme-success: #5f8f68;
  --theme-text: #2b1f2c;
  --theme-text-strong: #241826;
  --theme-muted: #756674;
  --theme-icon: #4a3148;
  --theme-shadow-color: rgba(74, 49, 72, 0.08);
  --theme-shadow-strong: rgba(74, 49, 72, 0.18);
  --theme-gradient: linear-gradient(135deg, #dccfe8, #faf6f3 50%, #f0d4dc);
  --theme-page-gradient: radial-gradient(circle at 80% 8%, rgba(220, 207, 232, 0.56), transparent 32%), #faf6f3;
  --shadow: 0 26px 70px rgba(74, 49, 72, 0.18);
  --soft-shadow: 0 15px 40px rgba(74, 49, 72, 0.1);
}

html[data-app-theme="dark"],
html[data-app-theme="apyva-dark"] {
  --ink: #f6fbfc;
  --muted: #b9c7ce;
  --faint: #213641;
  --paper: #0b1b23;
  --white: #102630;
  --mist: #193543;
  --blue: #123f52;
  --blue-strong: #76b6c7;
  --teal: #dff5fb;
  --teal-soft: #9fd5e4;
  --peach: #2b3a42;
  --theme-page: #07161d;
  --theme-page-soft: #0b1b23;
  --theme-surface: rgba(16, 38, 48, 0.92);
  --theme-surface-strong: #102630;
  --theme-surface-soft: rgba(255, 255, 255, 0.06);
  --theme-panel: rgba(16, 38, 48, 0.92);
  --theme-panel-soft: rgba(216, 237, 243, 0.1);
  --theme-primary: #dff5fb;
  --theme-primary-2: #9fd5e4;
  --theme-primary-contrast: #081820;
  --theme-accent: #76b6c7;
  --theme-accent-soft: rgba(216, 237, 243, 0.12);
  --theme-accent-muted: rgba(216, 237, 243, 0.1);
  --theme-border: rgba(216, 237, 243, 0.14);
  --theme-border-strong: rgba(216, 237, 243, 0.26);
  --theme-ring: rgba(223, 245, 251, 0.32);
  --theme-success: #8ad89a;
  --theme-text: #f6fbfc;
  --theme-text-strong: #ffffff;
  --theme-muted: #b9c7ce;
  --theme-icon: #dff5fb;
  --theme-shadow-color: rgba(0, 0, 0, 0.24);
  --theme-shadow-strong: rgba(0, 0, 0, 0.38);
  --theme-gradient: linear-gradient(135deg, #102630, #07161d 58%, #123f52);
  --theme-page-gradient: radial-gradient(circle at 80% 8%, rgba(118, 194, 209, 0.18), transparent 32%), #07161d;
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.45);
  --soft-shadow: 0 15px 40px rgba(0, 0, 0, 0.28);
}

html[data-app-theme="apyva-dark"] {
  --faint: #332131;
  --paper: #211321;
  --white: #2a1a29;
  --mist: #4a3148;
  --blue: #4a3148;
  --blue-strong: #c97d93;
  --teal: #f4dfe8;
  --teal-soft: #dccfe8;
  --peach: #3b2638;
  --theme-page: #160d16;
  --theme-page-soft: #211321;
  --theme-surface: rgba(42, 26, 41, 0.94);
  --theme-surface-strong: #2a1a29;
  --theme-surface-soft: rgba(244, 223, 232, 0.08);
  --theme-panel: rgba(42, 26, 41, 0.94);
  --theme-panel-soft: rgba(201, 125, 147, 0.13);
  --theme-primary: #f4dfe8;
  --theme-primary-2: #dccfe8;
  --theme-primary-contrast: #211321;
  --theme-accent: #c97d93;
  --theme-accent-soft: rgba(201, 125, 147, 0.16);
  --theme-accent-muted: rgba(201, 125, 147, 0.12);
  --theme-border: rgba(201, 125, 147, 0.2);
  --theme-border-strong: rgba(201, 125, 147, 0.36);
  --theme-ring: rgba(201, 125, 147, 0.32);
  --theme-success: #9bd1a2;
  --theme-text: #f6fbfc;
  --theme-text-strong: #ffffff;
  --theme-muted: #d7c9d2;
  --theme-icon: #f4dfe8;
  --theme-shadow-color: rgba(0, 0, 0, 0.28);
  --theme-shadow-strong: rgba(0, 0, 0, 0.42);
  --theme-gradient: linear-gradient(135deg, #4a3148, #211321 58%, #160d16);
  --theme-page-gradient: radial-gradient(circle at 80% 8%, rgba(201, 125, 147, 0.2), transparent 32%), #160d16;
}

html[data-app-theme="apyva"] body,
html[data-app-theme="apyva"] body.is-authenticated {
  background:
    radial-gradient(circle at 18% 18%, rgba(220, 207, 232, 0.55), transparent 34%),
    linear-gradient(135deg, #faf6f3, #fff 50%, #f7e8e7);
  color: #2b1f2c;
}

html[data-app-theme="dark"] body,
html[data-app-theme="dark"] body.is-authenticated,
html[data-app-theme="apyva-dark"] body,
html[data-app-theme="apyva-dark"] body.is-authenticated {
  background: #07161d;
  color: #f6fbfc;
}

html[data-app-theme="apyva-dark"] body,
html[data-app-theme="apyva-dark"] body.is-authenticated {
  background: #160d16;
}

html[data-app-theme="apyva"] .login-page,
html[data-app-theme="apyva"] .signup-page,
html[data-app-theme="apyva"] .legal-page {
  background:
    radial-gradient(circle at 16% 20%, rgba(201, 125, 147, 0.22), transparent 34%),
    linear-gradient(135deg, #faf6f3, #fff 56%, #f4e9f7);
}

html[data-app-theme="dark"] .login-page,
html[data-app-theme="dark"] .signup-page,
html[data-app-theme="dark"] .legal-page,
html[data-app-theme="apyva-dark"] .login-page,
html[data-app-theme="apyva-dark"] .signup-page,
html[data-app-theme="apyva-dark"] .legal-page {
  background:
    radial-gradient(circle at 16% 20%, rgba(118, 194, 209, 0.18), transparent 34%),
    linear-gradient(135deg, #07161d, #102630 58%, #081820);
}

html[data-app-theme="apyva-dark"] .login-page,
html[data-app-theme="apyva-dark"] .signup-page,
html[data-app-theme="apyva-dark"] .legal-page {
  background:
    radial-gradient(circle at 16% 20%, rgba(201, 125, 147, 0.2), transparent 34%),
    linear-gradient(135deg, #160d16, #2a1a29 58%, #211321);
}

html[data-app-theme="apyva"] .phone-shell {
  background: #faf6f3;
  box-shadow: 18px 18px 0 rgba(201, 125, 147, 0.16), var(--shadow);
}

html[data-app-theme="dark"] .phone-shell,
html[data-app-theme="apyva-dark"] .phone-shell {
  background: #07161d;
  box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.28), var(--shadow);
}

html[data-app-theme="apyva-dark"] .phone-shell {
  background: #160d16;
}

html[data-app-theme="apyva"] .screen,
html[data-app-theme="apyva"] .screen-patient,
html[data-app-theme="apyva"] .screen-doctor-profile,
html[data-app-theme="apyva"] .screen-doctor-more,
html[data-app-theme="apyva"] .screen-medical-reports,
html[data-app-theme="apyva"] .screen-prescriptions,
html[data-app-theme="apyva"] .screen-appointments,
html[data-app-theme="apyva"] .screen-find,
html[data-app-theme="apyva"] .screen-find-results,
html[data-app-theme="apyva"] .screen-care-doctor,
html[data-app-theme="apyva"] .screen-messages,
html[data-app-theme="apyva"] .screen-message-thread,
html[data-app-theme="apyva"] .screen-health-questions,
html[data-app-theme="apyva"] .screen-question-detail,
html[data-app-theme="apyva"] .screen-ask-question {
  background: #faf6f3;
  color: #2b1f2c;
}

html[data-app-theme="apyva"] .screen-home {
  background:
    radial-gradient(circle at 80% 5%, rgba(220, 207, 232, 0.62), transparent 28%),
    linear-gradient(180deg, #faf6f3, #fff 46%, #fbf0f2);
}

html[data-app-theme="dark"] .screen,
html[data-app-theme="dark"] .screen-home,
html[data-app-theme="dark"] .screen-patient,
html[data-app-theme="dark"] .screen-doctor-profile,
html[data-app-theme="dark"] .screen-doctor-more,
html[data-app-theme="dark"] .screen-medical-reports,
html[data-app-theme="dark"] .screen-prescriptions,
html[data-app-theme="dark"] .screen-appointments,
html[data-app-theme="dark"] .screen-find,
html[data-app-theme="dark"] .screen-find-results,
html[data-app-theme="dark"] .screen-care-doctor,
html[data-app-theme="dark"] .screen-messages,
html[data-app-theme="dark"] .screen-message-thread,
html[data-app-theme="dark"] .screen-health-questions,
html[data-app-theme="dark"] .screen-question-detail,
html[data-app-theme="dark"] .screen-ask-question,
html[data-app-theme="apyva-dark"] .screen,
html[data-app-theme="apyva-dark"] .screen-home,
html[data-app-theme="apyva-dark"] .screen-patient,
html[data-app-theme="apyva-dark"] .screen-doctor-profile,
html[data-app-theme="apyva-dark"] .screen-doctor-more,
html[data-app-theme="apyva-dark"] .screen-medical-reports,
html[data-app-theme="apyva-dark"] .screen-prescriptions,
html[data-app-theme="apyva-dark"] .screen-appointments,
html[data-app-theme="apyva-dark"] .screen-find,
html[data-app-theme="apyva-dark"] .screen-find-results,
html[data-app-theme="apyva-dark"] .screen-care-doctor,
html[data-app-theme="apyva-dark"] .screen-messages,
html[data-app-theme="apyva-dark"] .screen-message-thread,
html[data-app-theme="apyva-dark"] .screen-health-questions,
html[data-app-theme="apyva-dark"] .screen-question-detail,
html[data-app-theme="apyva-dark"] .screen-ask-question {
  background: #07161d;
  color: #f6fbfc;
}

html[data-app-theme="apyva-dark"] .screen,
html[data-app-theme="apyva-dark"] .screen-home,
html[data-app-theme="apyva-dark"] .screen-patient,
html[data-app-theme="apyva-dark"] .screen-doctor-profile,
html[data-app-theme="apyva-dark"] .screen-doctor-more,
html[data-app-theme="apyva-dark"] .screen-medical-reports,
html[data-app-theme="apyva-dark"] .screen-prescriptions,
html[data-app-theme="apyva-dark"] .screen-appointments,
html[data-app-theme="apyva-dark"] .screen-find,
html[data-app-theme="apyva-dark"] .screen-find-results,
html[data-app-theme="apyva-dark"] .screen-care-doctor,
html[data-app-theme="apyva-dark"] .screen-messages,
html[data-app-theme="apyva-dark"] .screen-message-thread,
html[data-app-theme="apyva-dark"] .screen-health-questions,
html[data-app-theme="apyva-dark"] .screen-question-detail,
html[data-app-theme="apyva-dark"] .screen-ask-question {
  background: #160d16;
}

html[data-app-theme="apyva"] .topbar,
html[data-app-theme="apyva"] .app-nav,
html[data-app-theme="apyva"] .bottom-sheet .sheet-card,
html[data-app-theme="apyva"] .doctor-card-panel,
html[data-app-theme="apyva"] .service-card,
html[data-app-theme="apyva"] .patient-quick-stats button,
html[data-app-theme="apyva"] .patient-info-card,
html[data-app-theme="apyva"] .health-tile,
html[data-app-theme="apyva"] .insurance-card,
html[data-app-theme="apyva"] .doctor-more-card,
html[data-app-theme="apyva"] .records-panel,
html[data-app-theme="apyva"] .chat-bubble,
html[data-app-theme="apyva"] .care-profile-details article,
html[data-app-theme="apyva"] .review-summary-card,
html[data-app-theme="apyva"] .question-card,
html[data-app-theme="apyva"] .answer-card,
html[data-app-theme="apyva"] .patient-settings-sheet button,
html[data-app-theme="apyva"] .theme-choice {
  border-color: rgba(201, 125, 147, 0.24);
  background: rgba(255, 255, 255, 0.84);
  color: #2b1f2c;
  box-shadow: 0 18px 42px rgba(74, 49, 72, 0.08);
}

html[data-app-theme="apyva"] .patient-hero-card,
html[data-app-theme="apyva"] .records-hero,
html[data-app-theme="apyva"] .profile-hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(135deg, #dccfe8, #faf6f3 50%, #f0d4dc);
}

html[data-app-theme="apyva"] .service-card.is-selected,
html[data-app-theme="apyva"] .history-button,
html[data-app-theme="apyva"] .doctor-save-button,
html[data-app-theme="apyva"] .chip.is-primary,
html[data-app-theme="apyva"] .app-nav button.is-active {
  background: #4a3148;
  color: #fff;
}

html[data-app-theme="apyva"] .service-card.is-selected .service-arrow,
html[data-app-theme="apyva"] .stat-bubble,
html[data-app-theme="apyva"] .info-icon,
html[data-app-theme="apyva"] .more-icon,
html[data-app-theme="apyva"] .profile-circle,
html[data-app-theme="apyva"] .glass-button,
html[data-app-theme="apyva"] .soft-button {
  background: #f3e7ee;
  color: #4a3148;
}

html[data-app-theme="apyva"] .theme-choice.is-active {
  border-color: rgba(201, 125, 147, 0.54);
  background: #f8e9ef;
}

html[data-app-theme="dark"] .topbar,
html[data-app-theme="dark"] .app-nav,
html[data-app-theme="dark"] .bottom-sheet .sheet-card,
html[data-app-theme="dark"] .doctor-card-panel,
html[data-app-theme="dark"] .service-card,
html[data-app-theme="dark"] .patient-quick-stats button,
html[data-app-theme="dark"] .patient-info-card,
html[data-app-theme="dark"] .health-tile,
html[data-app-theme="dark"] .insurance-card,
html[data-app-theme="dark"] .doctor-more-card,
html[data-app-theme="dark"] .records-panel,
html[data-app-theme="dark"] .chat-bubble,
html[data-app-theme="dark"] .care-profile-details article,
html[data-app-theme="dark"] .review-summary-card,
html[data-app-theme="dark"] .question-card,
html[data-app-theme="dark"] .answer-card,
html[data-app-theme="dark"] .patient-settings-sheet button,
html[data-app-theme="dark"] .theme-choice,
html[data-app-theme="apyva-dark"] .topbar,
html[data-app-theme="apyva-dark"] .app-nav,
html[data-app-theme="apyva-dark"] .bottom-sheet .sheet-card,
html[data-app-theme="apyva-dark"] .doctor-card-panel,
html[data-app-theme="apyva-dark"] .service-card,
html[data-app-theme="apyva-dark"] .patient-quick-stats button,
html[data-app-theme="apyva-dark"] .patient-info-card,
html[data-app-theme="apyva-dark"] .health-tile,
html[data-app-theme="apyva-dark"] .insurance-card,
html[data-app-theme="apyva-dark"] .doctor-more-card,
html[data-app-theme="apyva-dark"] .records-panel,
html[data-app-theme="apyva-dark"] .chat-bubble,
html[data-app-theme="apyva-dark"] .care-profile-details article,
html[data-app-theme="apyva-dark"] .review-summary-card,
html[data-app-theme="apyva-dark"] .question-card,
html[data-app-theme="apyva-dark"] .answer-card,
html[data-app-theme="apyva-dark"] .patient-settings-sheet button,
html[data-app-theme="apyva-dark"] .theme-choice {
  border-color: rgba(216, 237, 243, 0.14);
  background: rgba(16, 38, 48, 0.92);
  color: #f6fbfc;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

html[data-app-theme="apyva-dark"] .topbar,
html[data-app-theme="apyva-dark"] .app-nav,
html[data-app-theme="apyva-dark"] .bottom-sheet .sheet-card,
html[data-app-theme="apyva-dark"] .doctor-card-panel,
html[data-app-theme="apyva-dark"] .service-card,
html[data-app-theme="apyva-dark"] .patient-quick-stats button,
html[data-app-theme="apyva-dark"] .patient-info-card,
html[data-app-theme="apyva-dark"] .health-tile,
html[data-app-theme="apyva-dark"] .insurance-card,
html[data-app-theme="apyva-dark"] .doctor-more-card,
html[data-app-theme="apyva-dark"] .records-panel,
html[data-app-theme="apyva-dark"] .chat-bubble,
html[data-app-theme="apyva-dark"] .care-profile-details article,
html[data-app-theme="apyva-dark"] .review-summary-card,
html[data-app-theme="apyva-dark"] .question-card,
html[data-app-theme="apyva-dark"] .answer-card,
html[data-app-theme="apyva-dark"] .patient-settings-sheet button,
html[data-app-theme="apyva-dark"] .theme-choice {
  border-color: rgba(201, 125, 147, 0.2);
  background: rgba(42, 26, 41, 0.94);
}

html[data-app-theme="dark"] .patient-hero-card,
html[data-app-theme="dark"] .records-hero,
html[data-app-theme="dark"] .profile-hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(118, 194, 209, 0.16), transparent 34%),
    linear-gradient(135deg, #102630, #07161d 58%, #123f52);
}

html[data-app-theme="apyva-dark"] .patient-hero-card,
html[data-app-theme="apyva-dark"] .records-hero,
html[data-app-theme="apyva-dark"] .profile-hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(201, 125, 147, 0.18), transparent 34%),
    linear-gradient(135deg, #4a3148, #211321 58%, #160d16);
}

html[data-app-theme="dark"] .service-card.is-selected,
html[data-app-theme="dark"] .history-button,
html[data-app-theme="dark"] .doctor-save-button,
html[data-app-theme="dark"] .chip.is-primary,
html[data-app-theme="dark"] .app-nav button.is-active {
  background: #dff5fb;
  color: #081820;
}

html[data-app-theme="apyva-dark"] .service-card.is-selected,
html[data-app-theme="apyva-dark"] .history-button,
html[data-app-theme="apyva-dark"] .doctor-save-button,
html[data-app-theme="apyva-dark"] .chip.is-primary,
html[data-app-theme="apyva-dark"] .app-nav button.is-active {
  background: #f4dfe8;
  color: #211321;
}

html[data-app-theme="dark"] .stat-bubble,
html[data-app-theme="dark"] .info-icon,
html[data-app-theme="dark"] .more-icon,
html[data-app-theme="dark"] .profile-circle,
html[data-app-theme="dark"] .glass-button,
html[data-app-theme="dark"] .soft-button,
html[data-app-theme="apyva-dark"] .stat-bubble,
html[data-app-theme="apyva-dark"] .info-icon,
html[data-app-theme="apyva-dark"] .more-icon,
html[data-app-theme="apyva-dark"] .profile-circle,
html[data-app-theme="apyva-dark"] .glass-button,
html[data-app-theme="apyva-dark"] .soft-button {
  background: rgba(216, 237, 243, 0.1);
  color: #f6fbfc;
}

html[data-app-theme="dark"] input,
html[data-app-theme="dark"] textarea,
html[data-app-theme="dark"] select,
html[data-app-theme="dark"] .patient-edit-form input,
html[data-app-theme="dark"] .patient-edit-form textarea,
html[data-app-theme="dark"] .patient-edit-form select,
html[data-app-theme="apyva-dark"] input,
html[data-app-theme="apyva-dark"] textarea,
html[data-app-theme="apyva-dark"] select,
html[data-app-theme="apyva-dark"] .patient-edit-form input,
html[data-app-theme="apyva-dark"] .patient-edit-form textarea,
html[data-app-theme="apyva-dark"] .patient-edit-form select {
  border-color: rgba(216, 237, 243, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #f6fbfc;
}

html[data-app-theme="apyva"] input,
html[data-app-theme="apyva"] textarea,
html[data-app-theme="apyva"] select,
html[data-app-theme="apyva"] .patient-edit-form input,
html[data-app-theme="apyva"] .patient-edit-form textarea,
html[data-app-theme="apyva"] .patient-edit-form select {
  border-color: rgba(201, 125, 147, 0.22);
  background: rgba(255, 255, 255, 0.74);
  color: #2b1f2c;
}

html[data-app-theme="dark"] .patient-identity p,
html[data-app-theme="dark"] .doctor-more-card small,
html[data-app-theme="dark"] .patient-settings-sheet button small,
html[data-app-theme="dark"] .theme-choice small,
html[data-app-theme="dark"] .chat-bubble time,
html[data-app-theme="apyva-dark"] .patient-identity p,
html[data-app-theme="apyva-dark"] .doctor-more-card small,
html[data-app-theme="apyva-dark"] .patient-settings-sheet button small,
html[data-app-theme="apyva-dark"] .theme-choice small,
html[data-app-theme="apyva-dark"] .chat-bubble time {
  color: #b9c7ce;
}

html[data-app-theme="apyva"] .patient-identity p,
html[data-app-theme="apyva"] .doctor-more-card small,
html[data-app-theme="apyva"] .patient-settings-sheet button small,
html[data-app-theme="apyva"] .theme-choice small,
html[data-app-theme="apyva"] .chat-bubble time {
  color: #756674;
}

html[data-app-theme="dark"] .chat-message.is-me .chat-bubble {
  background: #123f52;
  color: #f6fbfc;
}

html[data-app-theme="apyva"] .chat-message.is-me .chat-bubble {
  background: #f3e7ee;
  color: #2b1f2c;
}

html[data-app-theme="apyva-dark"] .chat-message.is-me .chat-bubble {
  background: #4a3148;
  color: #f6fbfc;
}

html[data-app-theme="dark"] .theme-choice.is-active,
html[data-app-theme="apyva-dark"] .theme-choice.is-active {
  border-color: rgba(223, 245, 251, 0.45);
  background: rgba(223, 245, 251, 0.12);
}

html[data-app-theme] button:focus-visible,
html[data-app-theme] input:focus-visible {
  outline-color: var(--theme-ring);
}

html[data-app-theme] .screen-home,
html[data-app-theme] .screen-appointments,
html[data-app-theme] .screen-find,
html[data-app-theme] .screen-find-results,
html[data-app-theme] .screen-health-questions,
html[data-app-theme] .screen-question-detail,
html[data-app-theme] .screen-ask-question,
html[data-app-theme] .screen-messages,
html[data-app-theme] .screen-message-thread,
html[data-app-theme] .screen-patient,
html[data-app-theme] .screen-medical-reports,
html[data-app-theme] .screen-prescriptions {
  background: var(--theme-page-gradient);
  color: var(--theme-text);
}

html[data-app-theme] .topbar,
html[data-app-theme] .app-nav,
html[data-app-theme] .bottom-sheet .sheet-card,
html[data-app-theme] .message-list-card,
html[data-app-theme] .message-row,
html[data-app-theme] .message-empty-action,
html[data-app-theme] .thread-tabs,
html[data-app-theme] .thread-actions button,
html[data-app-theme] .thread-composer button,
html[data-app-theme] .thread-composer label,
html[data-app-theme] .question-card,
html[data-app-theme] .question-detail-card,
html[data-app-theme] .answers-section,
html[data-app-theme] .doctor-answer-form,
html[data-app-theme] .ask-question-form,
html[data-app-theme] .patient-quick-stats button,
html[data-app-theme] .patient-info-card,
html[data-app-theme] .patient-info-row,
html[data-app-theme] .health-tile,
html[data-app-theme] .appointment-card,
html[data-app-theme] .appointment-month,
html[data-app-theme] .appointment-empty-card,
html[data-app-theme] .doctor-patient-vitals,
html[data-app-theme] .doctor-patient-visit-card,
html[data-app-theme] .doctor-recent-activity,
html[data-app-theme] .message-compose-list button,
html[data-app-theme] .message-options-list button,
html[data-app-theme] .notification-sheet-row,
html[data-app-theme] .in-app-notification-card,
html[data-app-theme] .theme-choice,
html[data-app-theme] .patient-settings-sheet button {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 18px 42px var(--theme-shadow-color);
}

html[data-app-theme] .topbar {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-app-theme] .brand-mark {
  color: var(--theme-text-strong) !important;
}

html[data-app-theme] .brand-mark span {
  color: currentColor !important;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--theme-page) 42%, transparent);
}

html[data-app-theme="apyva"] .brand-mark {
  color: #4a3148 !important;
}

html[data-app-theme] .doctor-card-panel,
html[data-app-theme] .service-card,
html[data-app-theme] .question-floating-cta,
html[data-app-theme] .question-bottom-cta,
html[data-app-theme] .insurance-card,
html[data-app-theme] .appointment-schedule-card,
html[data-app-theme] .new-appointment-banner,
html[data-app-theme] .web-app-install-sheet ol,
html[data-app-theme] .notification-permission-card,
html[data-app-theme] .sheet-list .notification-permission-card,
html[data-app-theme] .theme-settings-sheet > p {
  border-color: var(--theme-border);
  background: var(--theme-panel-soft);
  color: var(--theme-text);
}

html[data-app-theme] .patient-hero-card,
html[data-app-theme] .records-hero,
html[data-app-theme] .profile-hero {
  background: var(--theme-gradient);
}

html[data-app-theme] .questions-toolbar label,
html[data-app-theme] .message-search,
html[data-app-theme] .care-search-stack button,
html[data-app-theme] .care-search-field,
html[data-app-theme] .screen-find .care-search-field,
html[data-app-theme] .results-search,
html[data-app-theme] .sheet-search input,
html[data-app-theme] .question-category-chips label,
html[data-app-theme] .ask-privacy label,
html[data-app-theme] .question-filter-sheet button,
html[data-app-theme] .patient-edit-form input,
html[data-app-theme] .patient-edit-form textarea,
html[data-app-theme] .patient-edit-form select,
html[data-app-theme] .care-doctor-search,
html[data-app-theme] .appointment-inline-action {
  border-color: var(--theme-border);
  background: var(--theme-surface-soft);
  color: var(--theme-text);
}

html[data-app-theme] :is(
  .message-search input,
  .care-search-field input,
  .questions-toolbar input,
  .sheet-search input,
  .patient-edit-form input[type="search"]
) {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--theme-text-strong) !important;
}

html[data-app-theme] :is(
  .message-search input,
  .care-search-field input,
  .questions-toolbar input,
  .sheet-search input
)::placeholder {
  color: var(--theme-muted) !important;
  opacity: 0.82;
}

html[data-app-theme] .filter-pill,
html[data-app-theme] .chip,
html[data-app-theme] .message-filters button,
html[data-app-theme] .question-tabs button,
html[data-app-theme] .question-tags span,
html[data-app-theme] .field-requirement,
html[data-app-theme] .question-category-chevron,
html[data-app-theme] .category-chevron,
html[data-app-theme] .question-category-option:hover,
html[data-app-theme] .question-category-option.is-selected,
html[data-app-theme] .care-category-grid span,
html[data-app-theme] .pain-grid span,
html[data-app-theme] .appointment-date-row .is-selected,
html[data-app-theme] .appointment-time b,
html[data-app-theme] .appointment-info em,
html[data-app-theme] .chat-date,
html[data-app-theme] .chat-reaction,
html[data-app-theme] .notification-sheet-row.is-unread,
html[data-app-theme] .in-app-notification-avatar,
html[data-app-theme] .message-avatar img,
html[data-app-theme] .message-avatar span,
html[data-app-theme] .thread-profile img,
html[data-app-theme] .appointment-card img,
html[data-app-theme] .question-avatar,
html[data-app-theme] .answer-card img,
html[data-app-theme] .stat-bubble,
html[data-app-theme] .info-icon,
html[data-app-theme] .insurance-icon,
html[data-app-theme] .more-icon,
html[data-app-theme] .profile-circle,
html[data-app-theme] .glass-button,
html[data-app-theme] .soft-button {
  border-color: var(--theme-border);
  background: var(--theme-accent-soft);
  color: var(--theme-icon);
}

html[data-app-theme] .message-filters button.is-active,
html[data-app-theme] .question-tabs button.is-active,
html[data-app-theme] .question-filter-sheet button.is-selected,
html[data-app-theme] .care-category-grid button.is-selected span,
html[data-app-theme] .theme-choice.is-active,
html[data-app-theme] .records-filters button.is-active {
  border-color: var(--theme-border-strong);
  background: var(--theme-accent-muted);
  color: var(--theme-primary);
  box-shadow: inset 0 0 0 1px var(--theme-border);
}

html[data-app-theme] .question-tabs b,
html[data-app-theme] .message-meta b,
html[data-app-theme] .message-fab,
html[data-app-theme] .floating-plus,
html[data-app-theme] .thread-composer [data-message-send],
html[data-app-theme] .care-primary-button,
html[data-app-theme] .question-floating-cta button,
html[data-app-theme] .question-bottom-cta button,
html[data-app-theme] .doctor-answer-form button[type="submit"],
html[data-app-theme] .question-filter-sheet footer button:last-child,
html[data-app-theme] .answer-now,
html[data-app-theme] .primary-action,
html[data-app-theme] .history-button,
html[data-app-theme] .appointment-schedule-card button,
html[data-app-theme] .new-appointment-banner button,
html[data-app-theme] .patient-logout,
html[data-app-theme] .account-logout,
html[data-app-theme] .account-logout-button,
html[data-app-theme] .logout-button,
html[data-app-theme] .file-upload-trigger,
html[data-app-theme] input[type="file"]::file-selector-button,
html[data-app-theme] input[type="file"]::-webkit-file-upload-button {
  background: var(--theme-primary);
  color: var(--theme-primary-contrast);
  box-shadow: 0 18px 38px var(--theme-shadow-strong);
}

html[data-app-theme] .service-card.is-selected,
html[data-app-theme] .app-nav button.is-active,
html[data-app-theme] .chip.is-primary {
  background: var(--theme-primary);
  color: var(--theme-primary-contrast);
}

html[data-app-theme] .service-card.is-selected .service-arrow,
html[data-app-theme] .service-arrow,
html[data-app-theme] .compose-button,
html[data-app-theme] .care-header .profile-circle,
html[data-app-theme] .appointments-header .profile-circle,
html[data-app-theme] .questions-header .profile-circle,
html[data-app-theme] .question-detail-header .profile-circle,
html[data-app-theme] .edit-profile-button span,
html[data-app-theme] .new-appointment-banner > span,
html[data-app-theme] .doctor-patient-vitals article > span,
html[data-app-theme] .doctor-patient-visit-card article > span,
html[data-app-theme] .doctor-medical-summary header > span,
html[data-app-theme] .doctor-recent-activity article > span {
  background: var(--theme-accent-soft);
  color: var(--theme-primary);
}

html[data-app-theme] .patient-identity strong,
html[data-app-theme] .message-filters button.is-active .icon,
html[data-app-theme] .message-row h2 svg,
html[data-app-theme] .thread-profile h1 svg,
html[data-app-theme] .thread-profile strong,
html[data-app-theme] .thread-tabs button.is-active,
html[data-app-theme] .secure-note,
html[data-app-theme] .secure-note strong,
html[data-app-theme] .doctor-patient-profile-head > button,
html[data-app-theme] .doctor-patient-detail-tabs button.is-active,
html[data-app-theme] .doctor-medical-summary button,
html[data-app-theme] .doctor-recent-activity button,
html[data-app-theme] .doctor-patient-actions button,
html[data-app-theme] .answer-disclaimer,
html[data-app-theme] .answer-card footer button,
html[data-app-theme] .question-bookmark.is-active,
html[data-app-theme] [data-question-bookmark].is-active,
html[data-app-theme] .question-category-option.is-selected::after,
html[data-app-theme] .web-app-install-sheet li::marker {
  color: var(--theme-primary);
}

html[data-app-theme] .thread-tabs button.is-active::after,
html[data-app-theme] .doctor-patient-detail-tabs .is-active::after,
html[data-app-theme] .appointment-tabs button.is-active::after {
  background: var(--theme-primary);
}

html[data-app-theme] .secure-note,
html[data-app-theme] .answer-disclaimer,
html[data-app-theme] .message-payment-save,
html[data-app-theme] .message-payment-confirm,
html[data-app-theme] .message-payment-qr-field,
html[data-app-theme] .avatar-cropper-frame {
  border-color: var(--theme-border-strong);
  background: var(--theme-accent-muted);
}

html[data-app-theme] .chat-message.is-me .chat-bubble {
  border-color: var(--theme-border-strong);
  background: var(--theme-accent-muted);
  color: var(--theme-text);
}

html[data-app-theme] .chat-file.is-image span,
html[data-app-theme] .chat-file-thumb,
html[data-app-theme] .message-payment-qr-preview,
html[data-app-theme] .message-payment-qr-preview .mini-icon {
  border-color: var(--theme-border);
  background: var(--theme-surface-soft);
  color: var(--theme-primary);
}

html[data-app-theme] .appointment-tabs button.is-active,
html[data-app-theme] .appointment-date-row button,
html[data-app-theme] .care-category-grid button,
html[data-app-theme] .pain-grid button,
html[data-app-theme] .question-category-trigger,
html[data-app-theme] .thread-topbar button,
html[data-app-theme] .plain-thread-button,
html[data-app-theme] .app-nav button {
  color: var(--theme-text);
}

html[data-app-theme] .question-card.is-unanswered {
  background: linear-gradient(135deg, var(--theme-accent-muted), var(--theme-surface));
}

html[data-app-theme] .question-category-trigger {
  border-color: var(--theme-border-strong);
  background: var(--theme-primary);
  color: var(--theme-primary-contrast);
  box-shadow: 0 16px 34px var(--theme-shadow-strong);
}

html[data-app-theme] .category-orb {
  background: var(--theme-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-accent) 24%, transparent);
}

html[data-app-theme] .appointment-schedule-card,
html[data-app-theme] .new-appointment-banner,
html[data-app-theme] .appointment-empty-card,
html[data-app-theme] .records-share-card {
  background: var(--theme-panel-soft);
}

html[data-app-theme] .records-share-card {
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: 0 18px 42px var(--theme-shadow-color);
}

html[data-app-theme] .records-share-card > span {
  background: var(--theme-accent-soft);
  color: var(--theme-primary);
}

html[data-app-theme] .records-share-card h2 {
  color: var(--theme-text-strong);
}

html[data-app-theme] .records-share-card p {
  color: var(--theme-muted);
}

html[data-app-theme] .records-share-card button {
  border-color: var(--theme-primary);
  background: var(--theme-surface);
  color: var(--theme-primary);
}

html[data-app-theme] .records-search {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-muted);
}

html[data-app-theme] .records-search input {
  color: var(--theme-text-strong);
}

html[data-app-theme] .records-search input::placeholder {
  color: var(--theme-muted);
}

html[data-app-theme] .records-filters button {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-app-theme] .records-filters button.is-active {
  background: var(--theme-accent-soft);
  color: var(--theme-primary);
}

html[data-app-theme] .screen-messages,
html[data-app-theme] .screen-message-thread {
  background:
    radial-gradient(circle at 18% 3%, color-mix(in srgb, var(--theme-accent-soft) 72%, transparent), transparent 38%),
    var(--theme-page);
}

html[data-app-theme] .screen-health-questions,
html[data-app-theme] .screen-question-detail,
html[data-app-theme] .screen-ask-question {
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--theme-accent-soft) 80%, transparent), transparent 30%),
    var(--theme-page);
}

html[data-app-theme] .screen-appointments {
  background: var(--theme-page-gradient);
}

html[data-app-theme] .screen-find,
html[data-app-theme] .screen-find-results,
html[data-app-theme] .screen-pain,
html[data-app-theme] .screen-care-doctor {
  background: var(--theme-page);
}

html[data-app-theme] .questions-header h1,
html[data-app-theme] .question-detail-header h1,
html[data-app-theme] .messages-header h1,
html[data-app-theme] .care-header h1,
html[data-app-theme] .appointments-header h1,
html[data-app-theme] .patient-header h1,
html[data-app-theme] .patient-section h2,
html[data-app-theme] .question-card strong,
html[data-app-theme] .question-detail-card strong,
html[data-app-theme] .answer-card strong,
html[data-app-theme] .thread-profile h1,
html[data-app-theme] .message-row h2,
html[data-app-theme] .doctor-patient-profile-head h2,
html[data-app-theme] .doctor-patient-row h2,
html[data-app-theme] .doctor-more-card strong,
html[data-app-theme] .patient-info-row strong,
html[data-app-theme] .health-tile strong {
  color: var(--theme-text-strong);
}

html[data-app-theme] .questions-header p,
html[data-app-theme] .question-detail-header p,
html[data-app-theme] .question-card small,
html[data-app-theme] .question-detail-card small,
html[data-app-theme] .answer-card small,
html[data-app-theme] .question-card time,
html[data-app-theme] .answer-card time,
html[data-app-theme] .question-card-copy p,
html[data-app-theme] .question-detail-card p,
html[data-app-theme] .answer-card p,
html[data-app-theme] .messages-header p,
html[data-app-theme] .message-row p,
html[data-app-theme] .message-meta,
html[data-app-theme] .thread-profile p,
html[data-app-theme] .secure-note p,
html[data-app-theme] .chat-bubble time,
html[data-app-theme] .patient-info-row small,
html[data-app-theme] .health-tile small,
html[data-app-theme] .appointment-info p,
html[data-app-theme] .appointment-info span,
html[data-app-theme] .appointment-info em,
html[data-app-theme] .appointment-time span,
html[data-app-theme] .sheet-body,
html[data-app-theme] .sheet-list p,
html[data-app-theme] .theme-choice small,
html[data-app-theme] .patient-settings-sheet button small {
  color: var(--theme-muted);
}

html[data-app-theme] .notification-permission-card.is-enabled,
html[data-app-theme] .sheet-list .notification-permission-card.is-enabled {
  border-color: color-mix(in srgb, var(--theme-success) 38%, transparent);
  background: color-mix(in srgb, var(--theme-success) 13%, var(--theme-surface));
  color: var(--theme-success);
}

@media (max-width: 460px) {
  .in-app-notifications {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
  }

  .in-app-notification-card {
    min-height: 66px;
    padding: 11px 12px;
    border-radius: 19px;
    transform-origin: top center;
  }

  .in-app-notification-card:not(:first-child) {
    display: none;
  }

  .in-app-notification-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .login-page {
    min-height: 100dvh;
    padding: 44px 16px 28px;
    overflow-x: hidden;
  }

  .login-topline {
    display: block;
    margin-bottom: 28px;
  }

  .login-logo {
    font-size: 34px;
  }

  .login-topline > p {
    display: none;
  }

  .login-hero {
    display: block;
  }

  .login-story {
    display: block;
  }

  .login-story h1 {
    margin: 74px 0 14px;
    font-size: 38px;
    line-height: 1.05;
  }

  .login-story > p {
    max-width: 240px;
    font-size: 18px;
    line-height: 1.35;
  }

  .login-hero-art {
    display: none;
  }

  .login-card {
    position: relative;
    gap: 18px;
    margin-top: 88px;
    padding: 38px 18px 26px;
    border-radius: 24px;
  }

  .signup-card {
    gap: 13px;
    margin-top: 54px;
    padding-top: 28px;
  }

  .signup-page .login-story h1 {
    margin-top: 52px;
    font-size: 35px;
  }

  .signup-page .login-story > p {
    max-width: 270px;
  }

  .signup-page .login-mobile-art {
    top: -190px;
  }

  .signup-role button {
    min-height: 40px;
  }

  .signup-consent {
    font-size: 12px;
  }

  .login-mobile-art {
    position: absolute;
    right: -88px;
    top: -218px;
    display: block;
    width: 220px;
    height: 242px;
    overflow: hidden;
    border-radius: 0 0 0 96px;
    background: radial-gradient(circle at 60% 52%, #c8e9f4 0 56%, transparent 57%);
    pointer-events: none;
  }

  .login-mobile-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    filter: drop-shadow(0 18px 28px rgba(17, 38, 47, 0.12));
  }

  .login-mobile-art span {
    position: absolute;
    left: 0;
    top: 118px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #0a5269;
    background: rgba(255, 255, 255, 0.74);
  }

  .login-heading {
    display: none;
  }

  .login-field {
    gap: 10px;
    font-size: 15px;
  }

  .login-field div {
    min-height: 58px;
    padding: 0 14px;
    gap: 13px;
    border-radius: 14px;
  }

  .login-field input {
    font-size: 15px;
  }

  .forgot-button {
    font-size: 14px;
  }

  .login-submit {
    min-height: 58px;
    border-radius: 14px;
    font-size: 17px;
  }

  .login-divider {
    gap: 14px;
  }

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

  .social-login button {
    min-height: 50px;
    gap: 6px;
    padding: 0 6px;
    font-size: 13px;
  }

  .login-privacy {
    grid-template-columns: 54px 1fr;
    margin-top: 26px;
    padding: 17px;
    border-radius: 18px;
    background: #e8f8fc;
  }

  .login-privacy span {
    width: 54px;
    height: 54px;
  }

  .login-benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 22px -16px 0;
    padding: 26px 10px 0;
    background: rgba(255, 255, 255, 0.5);
  }

  .login-benefits article {
    padding: 0 7px;
  }

  .login-benefits span {
    width: 54px;
    height: 54px;
  }

  .login-benefits h3 {
    font-size: 12px;
    line-height: 1.25;
  }

  .login-benefits p {
    font-size: 11px;
  }

  .login-terms {
    margin-top: 26px;
    font-size: 14px;
  }

  .mobile-auth-switch {
    display: block;
    margin: 24px 0 0;
    color: #63727c;
    text-align: center;
    font-size: 15px;
  }

  .mobile-auth-switch button {
    padding: 0;
    background: transparent;
    color: #006f98;
    font-weight: 780;
  }

  .mobile-auth-switch [data-auth-role-switch] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .legal-page {
    padding: 18px 14px 28px;
  }

  .legal-header {
    grid-template-columns: 46px 1fr auto;
    gap: 12px;
    margin-bottom: 18px;
  }

  .legal-header .login-logo {
    font-size: 27px;
  }

  .legal-back {
    width: 44px;
    height: 44px;
  }

  .legal-badge {
    min-height: 32px;
    padding: 0 12px;
    font-size: 11px;
  }

  .legal-hero-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 18px;
    border-radius: 24px;
  }

  .legal-kicker {
    font-size: 12px;
  }

  .legal-hero-card h1 {
    font-size: 34px;
    line-height: 1.08;
  }

  .legal-hero-card p,
  .legal-footer-card p,
  .legal-section p {
    font-size: 14px;
    line-height: 1.55;
  }

  .legal-hero-card aside {
    padding: 18px;
    border-radius: 18px;
  }

  .legal-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .legal-section {
    min-height: auto;
    padding: 20px;
    border-radius: 20px;
  }

  .legal-section h2 {
    font-size: 20px;
  }

  .legal-footer-card {
    padding: 22px;
    border-radius: 20px;
  }

  .app-stage {
    padding: 0;
    place-items: stretch;
  }

  .phone-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }

  .phone-shell.is-doctor-role .screen-appointments,
  .screen-doctor-patients,
  .screen-doctor-patient-detail,
  .screen-doctor-more {
    overflow-x: hidden;
    padding-inline: 14px;
  }

  .doctor-appointments-top,
  .doctor-patients-top {
    margin-bottom: 22px;
  }

  .doctor-brand-row {
    min-width: 0;
    gap: 10px;
  }

  .doctor-brand-row strong {
    min-width: 0;
    font-size: 18px;
  }

  .doctor-top-actions {
    gap: 8px;
  }

  .doctor-top-actions button,
  .doctor-patient-heading button,
  .doctor-patient-detail-top button,
  .doctor-patient-profile-head > button {
    min-width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .doctor-appointment-heading,
  .doctor-patient-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
  }

  .doctor-appointment-heading h1,
  .doctor-patient-heading h1 {
    font-size: 30px;
  }

  .doctor-appointment-heading p,
  .doctor-patient-heading p {
    font-size: 13px;
  }

  .doctor-appointment-heading > div:last-child,
  .doctor-patient-heading > div:last-child {
    gap: 8px;
  }

  .doctor-patient-heading > div:first-child {
    display: block;
    min-width: 0;
  }

  .doctor-appointment-heading button {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .doctor-appointment-stats {
    gap: 8px;
  }

  .doctor-appointment-stats article {
    min-height: 76px;
    grid-template-columns: 34px 1fr;
    gap: 6px;
    padding: 10px 8px;
    border-radius: 15px;
  }

  .doctor-appointment-stats span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .doctor-appointment-stats .icon {
    width: 18px;
    height: 18px;
  }

  .doctor-appointment-stats strong {
    font-size: 22px;
  }

  .doctor-appointment-stats small {
    font-size: 11px;
  }

  .doctor-date-strip {
    display: flex;
    gap: 8px;
    margin-inline: -2px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .doctor-date-strip::-webkit-scrollbar {
    display: none;
  }

  .doctor-date-strip button {
    flex: 0 0 58px;
    min-height: 62px;
    border-radius: 14px;
    font-size: 11px;
  }

  .doctor-date-strip strong {
    font-size: 20px;
  }

  .doctor-appointment-tabs {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    margin-inline: -14px;
    padding-inline: 14px;
    scrollbar-width: none;
  }

  .doctor-appointment-tabs::-webkit-scrollbar {
    display: none;
  }

  .doctor-appointment-tabs button {
    flex: 0 0 auto;
    min-height: 46px;
    font-size: 13px;
  }

  .doctor-consultation-card {
    grid-template-columns: 58px 52px minmax(0, 1fr);
    gap: 9px;
    min-height: 0;
    padding: 14px 34px 14px 12px;
    border-radius: 16px;
  }

  .consult-time {
    padding-right: 8px;
  }

  .consult-time strong {
    font-size: 18px;
  }

  .consult-time span,
  .consult-info p {
    font-size: 11px;
  }

  .doctor-consultation-card img {
    width: 50px;
    height: 50px;
  }

  .consult-info {
    min-width: 0;
  }

  .consult-info h2 {
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.1;
  }

  .consult-meta {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 4px;
  }

  .consult-meta > span,
  .consult-meta > b {
    width: auto;
    max-width: 100%;
    min-height: 30px;
    padding-inline: 9px;
    border-radius: 9px;
    font-size: 11px;
  }

  .consult-meta div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .consult-meta button {
    justify-content: center;
    min-height: 34px;
    gap: 4px;
    padding: 0 5px;
    font-size: 10px;
    white-space: nowrap;
  }

  .consult-meta button .mini-icon {
    width: 12px;
    height: 12px;
  }

  .consult-more {
    top: 13px;
    right: 11px;
    transform: none;
    font-size: 22px;
  }

  .doctor-schedule-banner {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .doctor-schedule-banner > span {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }

  .doctor-schedule-banner h2 {
    font-size: 15px;
  }

  .doctor-schedule-banner p {
    font-size: 12px;
  }

  .doctor-schedule-banner button {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 48px;
    font-size: 13px;
  }

  .doctor-more-header {
    margin-bottom: 18px;
  }

  .doctor-more-header h1 {
    font-size: 34px;
  }

  .doctor-more-header p {
    font-size: 14px;
  }

  .doctor-more-card {
    margin-top: 12px;
    padding: 14px 12px;
    border-radius: 18px;
  }

  .doctor-more-card h2 {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .doctor-more-grid button,
  .doctor-more-grid.is-compact button,
  .doctor-more-card.is-list > button {
    min-height: 68px;
    grid-template-columns: 44px minmax(0, 1fr) 14px;
    gap: 10px;
    padding: 9px 0;
  }

  .doctor-more-grid button:nth-child(odd),
  .doctor-more-grid.is-compact button:nth-child(odd) {
    padding-right: 0;
    border-right: 0;
  }

  .more-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .more-icon .icon {
    width: 21px;
    height: 21px;
  }

  .doctor-more-card strong {
    margin-bottom: 4px;
    font-size: 13px;
  }

  .doctor-more-card small {
    font-size: 11px;
    line-height: 1.28;
  }

  .doctor-patient-tabs {
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .doctor-patient-tabs button {
    min-height: 42px;
    padding: 0 12px;
    font-size: 12px;
  }

  .doctor-patient-search {
    min-height: 48px;
    border-radius: 13px;
  }

  .doctor-patient-row {
    position: relative;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px 38px 12px 12px;
    border-radius: 16px;
  }

  .doctor-patient-row .avatar-wrap,
  .doctor-patient-row img {
    width: 48px;
    height: 48px;
  }

  .doctor-patient-row h2 {
    overflow-wrap: anywhere;
    font-size: 14px;
  }

  .doctor-patient-row p,
  .doctor-patient-row small {
    font-size: 11px;
  }

  .doctor-patient-row small {
    grid-column: 2 / 3;
    padding-left: 0;
    border-left: 0;
  }

  .doctor-patient-row small b {
    display: inline;
    margin-right: 6px;
    margin-bottom: 0;
  }

  .doctor-patient-status {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    min-height: 28px;
    padding-inline: 10px;
    font-size: 10px;
  }

  .doctor-patient-row .kebab {
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 20px;
  }

  .doctor-patient-detail-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
  }

  .doctor-patient-detail-top h1 {
    text-align: center;
  }

  .doctor-patient-profile-head {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 12px;
  }

  .doctor-patient-avatar,
  .doctor-patient-avatar img {
    width: 70px;
    height: 70px;
  }

  .doctor-patient-profile-head h2 {
    overflow-wrap: anywhere;
    font-size: 18px;
  }

  .doctor-patient-profile-head p {
    gap: 6px;
    font-size: 12px;
  }

  .doctor-patient-profile-head > button {
    grid-column: 2;
    justify-self: start;
    min-height: 36px;
    height: 36px;
    padding-inline: 12px;
  }

  .doctor-patient-detail-tabs {
    margin-inline: -14px;
    padding-inline: 14px;
    gap: 18px;
  }

  .doctor-patient-vitals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }

  .doctor-patient-vitals strong {
    grid-column: 2;
  }

  .doctor-patient-visit-card {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .doctor-patient-visit-card article + article {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid #e5edf2;
  }

  .doctor-medical-summary,
  .doctor-recent-activity {
    border-radius: 14px;
  }

  .doctor-recent-activity article {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .doctor-recent-activity time {
    grid-column: 2;
  }

  .doctor-patient-actions {
    grid-template-columns: 1fr;
  }

  .sheet-card {
    width: 100%;
    margin-bottom: 0;
    border-radius: 30px 30px 0 0;
  }
}

@media (max-width: 360px) {
  .screen-home {
    padding-inline: 16px;
  }

  .featured-grid {
    height: 300px;
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .section-heading h1 {
    font-size: 25px;
  }

  .soft-button {
    width: 52px;
    height: 52px;
  }

  .service-grid {
    gap: 12px;
  }

  .service-card {
    min-height: 146px;
    padding-inline: 15px;
  }

  .details-pill {
    min-width: 112px;
    padding-inline: 16px;
  }
}

@media (min-width: 900px) {
  body.is-authenticated {
    background:
      radial-gradient(circle at 14% 4%, rgba(200, 233, 244, 0.72), transparent 34%),
      linear-gradient(135deg, #dfeaec, #f8fcfd 48%, #dfeaec);
  }

  .app-stage {
    padding: 32px;
    place-items: center;
  }

  .phone-shell {
    width: min(1180px, calc(100vw - 64px));
    height: min(900px, calc(100dvh - 48px));
    min-height: min(760px, calc(100dvh - 48px));
    max-height: none;
    border-radius: 30px;
  }

  .screen {
    scrollbar-width: thin;
    scrollbar-color: #c8dce3 transparent;
  }

  .screen::-webkit-scrollbar {
    display: block;
    width: 10px;
    height: 10px;
  }

  .screen::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: #c8dce3;
    background-clip: padding-box;
  }

  .app-nav {
    left: 50%;
    right: auto;
    bottom: 20px;
    width: min(760px, calc(100% - 64px));
    transform: translateX(-50%);
    border-radius: 25px;
  }

  .phone-shell.nav-hidden .app-nav {
    display: none;
  }

  .bottom-sheet .sheet-card {
    width: min(520px, calc(100vw - 48px));
  }

  .screen-home {
    padding: 36px 42px 124px;
  }

  .topbar,
  .featured-grid,
  .find-area {
    max-width: 1080px;
    margin-inline: auto;
  }

  .featured-grid {
    height: 366px;
    gap: 24px;
    padding: 0 4px 14px;
    margin-inline: auto;
  }

  .featured-grid::-webkit-scrollbar,
  .date-strip::-webkit-scrollbar,
  .time-scroll::-webkit-scrollbar,
  .appointment-date-row::-webkit-scrollbar,
  .doctor-patient-tabs::-webkit-scrollbar,
  .message-filters::-webkit-scrollbar,
  .records-filters::-webkit-scrollbar {
    display: block;
    height: 8px;
  }

  .featured-grid::-webkit-scrollbar-thumb,
  .date-strip::-webkit-scrollbar-thumb,
  .time-scroll::-webkit-scrollbar-thumb,
  .appointment-date-row::-webkit-scrollbar-thumb,
  .doctor-patient-tabs::-webkit-scrollbar-thumb,
  .message-filters::-webkit-scrollbar-thumb,
  .records-filters::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d0e2e8;
  }

  .doctor-card-primary {
    flex-basis: 342px;
  }

  .doctor-card-primary > img {
    height: 80%;
  }

  .doctor-card-panel {
    min-height: 126px;
    padding: 22px 24px 20px;
    border-radius: 28px;
  }

  .doctor-card h2 {
    font-size: 28px;
  }

  .doctor-card p {
    font-size: 15px;
  }

  .micro-icons span {
    width: 34px;
    height: 34px;
  }

  .round-action {
    width: 76px;
    height: 76px;
  }

  .find-area {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    padding-top: 8px;
  }

  .find-area .section-heading {
    display: block;
    margin-bottom: 0;
  }

  .find-area .section-tools {
    margin-top: 24px;
  }

  .section-heading h1 {
    font-size: 38px;
  }

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

  .service-card {
    min-height: 190px;
    border-radius: 24px;
  }

  .screen-profile.is-active {
    display: grid;
    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
    background: #edf7fa;
  }

  .profile-hero {
    min-height: 100%;
    border-radius: 0 30px 30px 0;
  }

  .profile-doctor {
    right: 8px;
    top: 86px;
    width: 365px;
    height: 480px;
  }

  .profile-title {
    top: 210px;
  }

  .profile-title h1 {
    font-size: 42px;
  }

  .contact-glass {
    bottom: 34px;
  }

  .profile-content {
    margin: 0;
    padding: 42px 48px 124px;
    background: #edf7fa;
  }

  .stats-card,
  .booking-card {
    max-width: 650px;
  }

  .stats-card {
    min-height: 104px;
  }

  .stat-item strong {
    font-size: 20px;
  }

  .stat-item span {
    font-size: 13px;
  }

  .date-card {
    flex-basis: 104px;
    min-height: 86px;
  }

  .time-slot {
    width: 92px;
  }

  .screen-doctor-profile,
  .screen-doctor-more,
  .screen-patient,
  .screen-medical-reports,
  .screen-prescriptions,
  .screen-medical-history,
  .screen-appointments,
  .screen-find,
  .screen-pain,
  .screen-find-results,
  .screen-care-doctor,
  .screen-doctor-patients,
  .screen-doctor-patient-detail,
  .screen-messages,
  .screen-message-thread {
    padding-left: max(42px, calc((100% - 1080px) / 2));
    padding-right: max(42px, calc((100% - 1080px) / 2));
  }

  .screen-doctor-profile,
  .screen-doctor-more,
  .screen-patient,
  .screen-medical-reports,
  .screen-prescriptions,
  .screen-medical-history,
  .screen-appointments,
  .screen-find,
  .screen-pain,
  .screen-find-results,
  .screen-care-doctor,
  .screen-doctor-patients,
  .screen-doctor-patient-detail,
  .screen-messages,
  .screen-message-thread {
    padding-bottom: 128px;
  }

  .doctor-account-top {
    max-width: 980px;
    margin-inline: auto;
  }

  .doctor-account-hero {
    max-width: 980px;
    grid-template-columns: 170px minmax(0, 1fr);
    min-height: 210px;
    margin-inline: auto;
  }

  .doctor-avatar-wrap,
  .doctor-avatar-wrap img {
    width: 170px;
    height: 170px;
  }

  .doctor-account-identity h1 {
    font-size: 34px;
  }

  .doctor-account-identity p {
    font-size: 18px;
  }

  .doctor-shortcut-grid,
  .doctor-profile-panel,
  .doctor-save-button {
    max-width: 980px;
    margin-inline: auto;
  }

  .doctor-shortcut-grid button {
    min-height: 116px;
  }

  .doctor-profile-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doctor-detail-section + .doctor-detail-section {
    border-top: 0;
  }

  .doctor-detail-section:nth-child(odd) {
    border-right: 1px solid #eef1f2;
  }

  .doctor-detail-section:nth-child(n + 3) {
    border-top: 1px solid #eef1f2;
  }

  .doctor-detail-section p,
  .doctor-more-card small,
  .patient-info-row strong,
  .health-tile strong {
    font-size: 15px;
  }

  .doctor-save-button {
    display: block;
  }

  .doctor-more-header,
  .doctor-more-card,
  .doctor-appointments-top,
  .doctor-appointment-heading,
  .doctor-appointment-stats,
  .doctor-date-strip,
  .doctor-appointment-tabs,
  .doctor-consultation-list,
  .doctor-schedule-banner,
  .doctor-patients-top,
  .doctor-patient-heading,
  .doctor-patient-tabs,
  .doctor-patient-search,
  .doctor-patient-list,
  .doctor-patient-detail-top,
  .doctor-patient-profile-head,
  .doctor-patient-detail-tabs,
  .doctor-patient-vitals,
  .doctor-patient-visit-card,
  .doctor-medical-summary,
  .doctor-recent-activity,
  .doctor-patient-actions,
  .messages-header,
  .message-search,
  .message-filters,
  .message-list-card,
  .thread-topbar,
  .thread-profile,
  .thread-tabs,
  .secure-note,
  .chat-stream,
  .thread-actions,
  .thread-composer {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .doctor-more-grid {
    column-gap: 34px;
    row-gap: 24px;
  }

  .doctor-more-grid button,
  .doctor-more-card.is-list > button {
    min-height: 92px;
  }

  .doctor-more-grid.is-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .patient-header,
  .patient-hero-card,
  .patient-quick-stats,
  .patient-section,
  .insurance-card,
  .history-button {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  .patient-hero-card {
    grid-template-columns: 150px minmax(0, 1fr) auto;
    min-height: 210px;
    padding: 28px 32px;
  }

  .patient-avatar-wrap,
  .patient-avatar-large {
    width: 150px;
    height: 150px;
  }

  .patient-identity h2 {
    font-size: 36px;
  }

  .patient-quick-stats button {
    min-height: 126px;
    padding: 18px;
  }

  .patient-info-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .patient-info-row + .patient-info-row {
    border-top: 0;
  }

  .patient-info-row:nth-child(odd) {
    border-right: 1px solid #eef1f2;
  }

  .patient-info-row:nth-child(n + 3) {
    border-top: 1px solid #eef1f2;
  }

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

  .health-tile.emergency-tile {
    grid-column: auto;
  }

  .records-header,
  .records-hero,
  .records-panel,
  .records-share-card,
  .history-header,
  .history-tabs,
  .history-timeline,
  .history-summary-card,
  .patient-appointments-view,
  .doctor-appointments-view,
  .doctor-calendar-view,
  .care-header,
  .care-search-stack,
  .care-primary-button,
  .care-category-grid,
  .care-subheader,
  .pain-question,
  .pain-grid,
  .pain-not-listed-panel,
  .results-search,
  .results-toolbar,
  .provider-list,
  .care-doctor-hero,
  .care-stat-glass,
  .care-tabs,
  .care-about,
  .care-reviews {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .records-hero {
    grid-template-columns: 120px minmax(0, 1fr) 170px;
    min-height: 170px;
  }

  .record-row {
    grid-template-columns: 70px minmax(0, 1fr) 230px 24px;
    padding: 16px;
  }

  .record-icon {
    width: 64px;
    height: 64px;
  }

  .history-tabs button {
    min-height: 96px;
    font-size: 15px;
  }

  .timeline-item {
    grid-template-columns: 78px 1fr;
  }

  .timeline-list::before {
    left: 30px;
  }

  .timeline-dot {
    left: 24px;
  }

  .timeline-icon {
    width: 72px;
    height: 72px;
  }

  .history-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .history-summary-grid article {
    flex: none;
  }

  .patient-appointments-view,
  .doctor-appointments-view {
    width: 100%;
  }

  .doctor-calendar-view {
    width: 100%;
  }

  .phone-shell.is-doctor-role .screen-appointments,
  .phone-shell.is-doctor-role .screen-doctor-calendar {
    padding-left: max(42px, calc((100% - 1080px) / 2));
    padding-right: max(42px, calc((100% - 1080px) / 2));
  }

  .appointment-card {
    grid-template-columns: 150px 86px minmax(0, 1fr);
    min-height: 136px;
    padding: 24px 56px 24px 24px;
  }

  .appointment-card.is-compact {
    grid-template-columns: 150px 72px minmax(0, 1fr);
  }

  .appointment-time strong {
    font-size: 24px;
  }

  .appointment-info h3 {
    font-size: 24px;
  }

  .appointment-info p {
    font-size: 16px;
  }

  .appointment-info span,
  .appointment-info em {
    font-size: 14px;
  }

  .doctor-consultation-card {
    grid-template-columns: 90px 88px minmax(180px, 1fr) minmax(360px, 1.2fr);
    min-height: 130px;
  }

  .consult-meta {
    grid-column: 4;
    grid-row: 1;
  }

  .consult-info h2 {
    font-size: 21px;
  }

  .consult-meta div {
    grid-column: 1 / -1;
  }

  .doctor-patient-row {
    grid-template-columns: 72px minmax(0, 1.2fr) minmax(130px, 0.7fr) 120px 26px;
    padding: 18px;
  }

  .doctor-patient-row h2 {
    font-size: 18px;
  }

  .doctor-patient-vitals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .screen-find,
  .screen-find-results {
    padding-top: 54px;
  }

  .care-header h1 {
    font-size: 52px;
  }

  .screen-find .care-search-stack {
    max-width: 640px;
    margin-left: 0;
  }

  .screen-find .care-primary-button {
    max-width: 640px;
    margin-left: 0;
  }

  .care-category-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
  }

  .provider-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .provider-card {
    min-height: 310px;
  }

  .screen-care-doctor {
    padding-bottom: 128px;
  }

  .care-doctor-hero {
    min-height: 310px;
  }

  .care-doctor-hero h2 {
    font-size: 42px;
  }

  .care-doctor-hero p {
    font-size: 24px;
  }

  .care-doctor-hero img {
    right: 80px;
    width: 330px;
    height: 320px;
  }

  .care-stat-glass {
    margin-top: -22px;
    padding: 28px;
  }

  .care-book-button {
    position: static;
    display: flex;
    justify-content: center;
    width: min(420px, 100%);
    margin: 28px auto 0;
  }

  .messages-header {
    grid-template-columns: 1fr 68px;
  }

  .message-list-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .message-row + .message-row {
    border-top: 0;
  }

  .message-row:nth-child(odd) {
    border-right: 1px solid #eef1f2;
  }

  .message-row:nth-child(n + 3) {
    border-top: 1px solid #eef1f2;
  }

  .screen-message-thread {
    padding-bottom: 116px;
  }

  .thread-profile {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .thread-profile img {
    width: 132px;
    height: 132px;
  }

  .thread-profile .online-dot {
    left: 108px;
    top: 98px;
  }

  .chat-bubble {
    max-width: 64%;
  }
}

@media (max-width: 460px) {
  .doctor-account-actions,
  .patient-header-actions {
    gap: 8px;
  }

  .account-logout-button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }

  .patient-header {
    grid-template-columns: 50px minmax(0, 1fr) auto;
  }

  .mindfulness-status,
  .mindfulness-top,
  .mindfulness-middle,
  .mindfulness-bottom {
    padding-inline: 20px;
  }

  .mindfulness-middle {
    margin-top: 66px;
  }

  .mindfulness-copy {
    margin: 70px 20px 0;
  }

  .mindfulness-copy h1 {
    font-size: 42px;
  }

  .mindfulness-copy p {
    font-size: 14px;
  }

  .mind-glass-button {
    width: 52px;
    height: 52px;
  }

  .mind-play-button {
    min-width: 154px;
    height: 56px;
    padding-left: 20px;
    font-size: 16px;
  }

  .mindfulness-bottom {
    bottom: 24px;
  }

  .screen-mindfulness-diary {
    padding: 18px 18px 28px;
  }

  .diary-header {
    align-items: flex-start;
    gap: 12px;
  }

  .diary-hero-card {
    margin: 34px 0 20px;
  }

  .diary-hero-card h2 {
    font-size: 36px;
  }

  .diary-hero-card p {
    font-size: 14px;
  }

  .diary-sound-card {
    grid-template-columns: 64px 1fr;
    gap: 12px;
  }

  .diary-player-controls {
    grid-template-columns: 44px 1fr;
  }

  .diary-player-controls .soft-button {
    width: 44px;
    height: 44px;
  }

  .diary-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: 20px;
  }

  .reflection-prompt-card p {
    font-size: 17px;
  }

  .diary-streak-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .screen-health-questions,
  .screen-question-detail,
  .screen-ask-question,
  .screen-depression-screening {
    padding: 22px 16px 104px;
  }

  .questions-header,
  .depression-header {
    align-items: flex-start;
  }

  .questions-toolbar {
    grid-template-columns: 1fr;
  }

  .filter-pill {
    justify-content: center;
  }

  .question-card {
    grid-template-columns: 1fr;
  }

  .question-card aside {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }

  .question-floating-cta,
  .question-bottom-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .question-floating-cta button,
  .question-bottom-cta button {
    width: 100%;
  }

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

  .question-category-grid {
    display: block;
  }

  .question-category-dropdown {
    display: block;
  }

  .question-category-chips {
    display: none;
  }

  .depression-card {
    padding: 18px;
  }

  .depression-card h2 {
    font-size: 23px;
  }

  .depression-options button {
    grid-template-columns: 36px 1fr;
    min-height: 56px;
    padding: 10px 12px;
  }

  .depression-options button strong {
    width: 34px;
    height: 34px;
  }

  .depression-result-actions {
    flex-direction: column;
  }

  .answer-card {
    grid-template-columns: 48px 1fr;
  }

  .answer-card img {
    width: 48px;
    height: 48px;
  }

  .patient-onboarding {
    align-items: flex-end;
    padding: 12px;
  }

  .patient-onboarding-card {
    width: 100%;
    max-height: 94vh;
    border-radius: 30px;
    padding: 22px;
  }

  .onboarding-copy h2 {
    font-size: 29px;
  }

  .onboarding-stepper {
    gap: 6px;
  }

  .onboarding-step {
    gap: 6px;
  }

  .onboarding-step button {
    width: 34px;
    height: 34px;
  }

  .onboarding-step span {
    width: 18px;
  }

  .onboarding-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .onboarding-actions > div {
    width: 100%;
  }

  .onboarding-next,
  .onboarding-back {
    flex: 1;
    justify-content: center;
  }

  .onboarding-skip {
    min-height: 42px;
  }

  .bottom-sheet.is-legal-sheet {
    align-items: flex-end;
    padding: 12px;
  }

  .bottom-sheet.is-avatar-cropper {
    align-items: flex-end;
    padding: 12px;
  }

  .bottom-sheet.is-pregnancy-sheet {
    align-items: flex-end;
    padding: 12px;
  }

  .bottom-sheet.is-legal-sheet .sheet-card {
    width: 100%;
    max-height: 88vh;
    border-radius: 30px;
  }

  .bottom-sheet.is-avatar-cropper .sheet-card {
    width: 100%;
    border-radius: 30px;
  }

  .bottom-sheet.is-pregnancy-sheet .sheet-card {
    width: 100%;
    border-radius: 30px;
  }

  .pregnancy-sheet-grid {
    grid-template-columns: 1fr;
  }

  .bottom-sheet.is-legal-sheet .sheet-body {
    max-height: calc(88vh - 88px);
  }
}

/* Final diary-only overrides, intentionally late in the cascade. */
.screen-mindfulness-diary.is-active {
  min-height: 100svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(17, 17, 27, 0.32), rgba(24, 18, 28, 0.62) 48%, rgba(7, 10, 17, 0.9)),
    radial-gradient(circle at 18% 18%, rgba(228, 159, 183, 0.52), transparent 34%),
    radial-gradient(circle at 78% 26%, rgba(124, 169, 190, 0.42), transparent 34%),
    linear-gradient(145deg, #2a2334 0%, #75465a 45%, #112531 100%);
  background-blend-mode: normal, screen, screen, normal;
}

.screen-mindfulness-diary.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("./assets/diary-background.png") center / cover no-repeat;
  opacity: 0.74;
}

.screen-mindfulness-diary .diary-topbar,
.screen-mindfulness-diary .diary-tabs,
.screen-mindfulness-diary .diary-write-panel,
.screen-mindfulness-diary .diary-history-panel,
.screen-mindfulness-diary .diary-bottom-grid,
.screen-mindfulness-diary .diary-share-card {
  position: relative;
  z-index: 2;
}

.screen-mindfulness-diary .diary-write-panel {
  flex: 0 0 auto;
  min-height: auto;
}

.screen-mindfulness-diary .diary-write-panel textarea {
  min-height: clamp(220px, 32vh, 330px);
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(10, 14, 24, 0.24);
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  caret-color: #fff;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.screen-mindfulness-diary .diary-write-panel textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.screen-mindfulness-diary .diary-write-panel textarea:focus {
  outline: 3px solid rgba(255, 255, 255, 0.3);
  outline-offset: 4px;
}

.screen-mindfulness-diary .diary-save-row,
.screen-mindfulness-diary .diary-bottom-grid .diary-sound-card,
.screen-mindfulness-diary .diary-bottom-grid .reflection-prompt-card,
.screen-mindfulness-diary .diary-share-card,
.screen-mindfulness-diary .diary-history-panel {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(17, 20, 30, 0.42);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.screen-mindfulness-diary .diary-save-row p,
.screen-mindfulness-diary .diary-bottom-grid .reflection-prompt-card p,
.screen-mindfulness-diary .diary-share-card label,
.screen-mindfulness-diary .diary-share-card label small {
  color: rgba(255, 255, 255, 0.8);
}

.screen-mindfulness-diary .diary-entry-card p,
.screen-mindfulness-diary .diary-entry-card time,
.screen-mindfulness-diary .diary-history h2,
.screen-mindfulness-diary .diary-history small {
  color: #fff;
}

.screen-mindfulness-diary .diary-entry-card {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.screen-mindfulness-diary .diary-save-button,
.screen-mindfulness-diary .diary-share-card .primary-action {
  color: #111820;
  background: rgba(255, 255, 255, 0.96);
}

.screen-mindfulness-diary .diary-history-panel {
  min-height: 132px;
  overflow: visible;
}

.screen-mindfulness-diary .diary-history-panel header {
  min-height: 36px;
  align-items: center;
  margin-bottom: 16px;
}

.screen-mindfulness-diary .diary-history-panel h2 {
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.12;
}

.screen-mindfulness-diary .diary-history-panel small {
  flex: 0 0 auto;
  font-size: 14px;
}

.screen-mindfulness-diary .diary-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.screen-mindfulness-diary .diary-entry-picker {
  display: grid;
  gap: 8px;
  max-height: 168px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(10, 14, 24, 0.28);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.42) transparent;
}

.screen-mindfulness-diary .diary-entry-picker::-webkit-scrollbar {
  width: 6px;
}

.screen-mindfulness-diary .diary-entry-picker::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.screen-mindfulness-diary .diary-entry-picker button,
.screen-mindfulness-diary .diary-entry-picker-empty {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
}

.screen-mindfulness-diary .diary-entry-picker button.is-selected {
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.2);
}

.screen-mindfulness-diary .diary-entry-picker strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

.screen-mindfulness-diary .diary-entry-picker span,
.screen-mindfulness-diary .diary-entry-picker-empty {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.35;
}

.screen-mindfulness-diary .diary-share-card select:not(.diary-native-select) {
  color: rgba(255, 255, 255, 0.94);
  background: rgba(10, 14, 24, 0.34);
}

html[data-app-theme="dark"] .screen-pregnancy-care,
html[data-app-theme="apyva-dark"] .screen-pregnancy-care {
  --preg-bg: var(--theme-page);
  --preg-peach: var(--theme-accent-muted);
  --preg-blush: var(--theme-panel-soft);
  --preg-pink: var(--theme-accent);
  --preg-purple: var(--theme-primary-2);
  --preg-green: var(--theme-success);
  --preg-text: var(--theme-text-strong);
  --preg-muted: var(--theme-muted);
  --preg-surface: color-mix(in srgb, var(--theme-surface) 82%, transparent);
  --preg-surface-strong: color-mix(in srgb, var(--theme-surface-strong) 88%, transparent);
  --preg-surface-soft: color-mix(in srgb, var(--theme-surface-soft) 70%, transparent);
  --preg-border: var(--theme-border-strong);
  --preg-input: color-mix(in srgb, var(--theme-surface-strong) 84%, #000 16%);
  --preg-input-text: var(--theme-text-strong);
  --preg-primary: var(--theme-primary);
  --preg-primary-contrast: var(--theme-primary-contrast);
  --preg-shadow: var(--theme-shadow-color);
  background:
    radial-gradient(circle at 76% 6%, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 28%),
    var(--theme-page-gradient) !important;
}

html[data-app-theme="apyva"] .screen-pregnancy-care {
  --preg-bg: var(--theme-page);
  --preg-peach: var(--theme-accent-muted);
  --preg-blush: var(--theme-panel-soft);
  --preg-pink: var(--theme-accent);
  --preg-purple: var(--theme-primary-2);
  --preg-green: var(--theme-success);
  --preg-text: var(--theme-text-strong);
  --preg-muted: var(--theme-muted);
  --preg-surface: var(--theme-surface);
  --preg-surface-strong: var(--theme-surface-strong);
  --preg-surface-soft: var(--theme-panel-soft);
  --preg-border: var(--theme-border);
  --preg-input: color-mix(in srgb, var(--theme-surface-strong) 88%, var(--theme-page));
  --preg-input-text: var(--theme-text-strong);
  --preg-primary: var(--theme-primary);
  --preg-primary-contrast: var(--theme-primary-contrast);
  --preg-shadow: var(--theme-shadow-color);
  background: var(--theme-page-gradient) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-pregnancy-care :is(
  .pregnancy-setup-hero,
  .pregnancy-setup-form,
  .pregnancy-profile-card,
  .pregnancy-glass,
  .pregnancy-pill,
  .pregnancy-profile-pill,
  .pregnancy-pill-button
) {
  border-color: var(--preg-border) !important;
  background: var(--preg-surface) !important;
  color: var(--preg-text) !important;
  box-shadow: 0 20px 44px var(--preg-shadow) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-pregnancy-care :is(
  h1,
  h2,
  label,
  .pregnancy-status,
  .pregnancy-pill,
  .pregnancy-profile-pill
) {
  color: var(--preg-text) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-pregnancy-care :is(
  p,
  small,
  .pregnancy-disclaimer
) {
  color: var(--preg-muted) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-pregnancy-care :is(input, select, textarea) {
  border-color: var(--preg-border) !important;
  background: var(--preg-input) !important;
  color: var(--preg-input-text) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-pregnancy-care :is(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--preg-muted) 78%, transparent) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-pregnancy-care .pregnancy-primary {
  background: var(--preg-primary) !important;
  color: var(--preg-primary-contrast) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-pregnancy-care :is(.pregnancy-secondary, .pregnancy-outline-cta) {
  background: var(--preg-surface-strong) !important;
  border-color: var(--preg-border) !important;
  color: var(--preg-text) !important;
}

@media (max-width: 560px) {
  .screen-mindfulness-diary.is-active {
    min-height: 100svh;
    padding: 26px 18px 44px;
  }

  .screen-mindfulness-diary .diary-tabs {
    width: 100%;
  }

  .screen-mindfulness-diary .diary-tabs button {
    flex: 1;
    padding: 0 14px;
  }

  .screen-mindfulness-diary .diary-write-panel textarea {
    font-size: clamp(34px, 11vw, 54px);
    min-height: 250px;
  }

  .screen-mindfulness-diary .diary-floating-submit {
    display: none;
  }

  .screen-mindfulness-diary .diary-write-panel {
    min-height: auto;
  }

  .screen-mindfulness-diary .diary-save-row {
    position: relative;
    z-index: 3;
    margin-top: 12px;
  }
}

/* Payment request sheet scroll fix. The sheet body owns scrolling; the overlay
   should not block touch panning inside forms on mobile/PWA. */
.bottom-sheet.is-open {
  touch-action: pan-y;
}

.bottom-sheet.is-open .sheet-card {
  max-height: calc(100dvh - 32px);
}

.bottom-sheet.is-open .sheet-body {
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.bottom-sheet.is-open .patient-edit-form {
  overflow: visible;
  touch-action: pan-y;
}

.bottom-sheet.is-message-payment-sheet {
  align-items: center;
  padding: 18px;
}

.bottom-sheet.is-message-payment-sheet .sheet-card {
  width: min(520px, calc(100vw - 32px));
  max-height: min(88dvh, 780px);
  margin: 0 auto;
}

.bottom-sheet.is-message-payment-sheet .sheet-body {
  max-height: calc(min(88dvh, 780px) - 92px);
}

@media (max-width: 560px) {
  .bottom-sheet.is-message-payment-sheet {
    align-items: end;
    padding: 10px;
  }

  .bottom-sheet.is-message-payment-sheet .sheet-card {
    width: 100%;
    max-height: calc(100dvh - 20px);
    margin: 0;
    border-radius: 30px 30px 0 0;
  }

  .bottom-sheet.is-message-payment-sheet .sheet-body {
    max-height: calc(100dvh - 108px);
  }
}

/* Theme completion for doctor-side workspaces. */
html[data-app-theme] .screen-doctor-profile,
html[data-app-theme] .screen-doctor-more,
html[data-app-theme] .screen-doctor-calendar,
html[data-app-theme] .screen-doctor-patients,
html[data-app-theme] .screen-doctor-patient-detail {
  background: var(--theme-page-gradient);
  color: var(--theme-text);
}

html[data-app-theme] .doctor-account-top,
html[data-app-theme] .doctor-patients-top,
html[data-app-theme] .doctor-patient-detail-top {
  color: var(--theme-text);
}

html[data-app-theme] .doctor-calendar-hero,
html[data-app-theme] .doctor-calendar-nav,
html[data-app-theme] .doctor-calendar-view-tabs,
html[data-app-theme] .doctor-calendar-legend span,
html[data-app-theme] .doctor-calendar-month,
html[data-app-theme] .doctor-calendar-agenda,
html[data-app-theme] .doctor-calendar-event,
html[data-app-theme] .doctor-profile-panel,
html[data-app-theme] .doctor-shortcut-grid button,
html[data-app-theme] .doctor-availability-warning,
html[data-app-theme] .doctor-more-card,
html[data-app-theme] .doctor-patient-tabs button,
html[data-app-theme] .doctor-patient-search,
html[data-app-theme] .doctor-patient-row,
html[data-app-theme] .doctor-patient-vitals,
html[data-app-theme] .doctor-patient-visit-card,
html[data-app-theme] .doctor-medical-summary,
html[data-app-theme] .doctor-recent-activity,
html[data-app-theme] .doctor-patient-actions button,
html[data-app-theme] .doctor-top-actions button,
html[data-app-theme] .doctor-patient-heading button,
html[data-app-theme] .doctor-patient-detail-top button,
html[data-app-theme] .doctor-patient-profile-head > button,
html[data-app-theme] .doctor-rating-pill,
html[data-app-theme] .doctor-avatar-wrap button,
html[data-app-theme] .health-guide-links {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 18px 42px var(--theme-shadow-color);
}

html[data-app-theme] .doctor-calendar-day {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-app-theme] .doctor-calendar-month > strong,
html[data-app-theme] .doctor-detail-section + .doctor-detail-section,
html[data-app-theme] .doctor-more-grid button:nth-child(odd),
html[data-app-theme] .doctor-more-grid.is-compact button,
html[data-app-theme] .doctor-more-card.is-list > button,
html[data-app-theme] .doctor-patient-row small,
html[data-app-theme] .doctor-patient-detail-tabs,
html[data-app-theme] .doctor-patient-visit-card article + article,
html[data-app-theme] .doctor-recent-activity header,
html[data-app-theme] .doctor-calendar-slots article > div {
  border-color: var(--theme-border);
}

html[data-app-theme] .doctor-calendar-day.is-muted,
html[data-app-theme] .doctor-calendar-day.is-selected,
html[data-app-theme] .doctor-calendar-day small,
html[data-app-theme] .doctor-calendar-event,
html[data-app-theme] .doctor-medical-summary,
html[data-app-theme] .doctor-patient-status,
html[data-app-theme] .doctor-patient-tabs span,
html[data-app-theme] .doctor-chip-row span,
html[data-app-theme] .doctor-shortcut-grid span,
html[data-app-theme] .doctor-patient-vitals article > span,
html[data-app-theme] .doctor-patient-visit-card article > span,
html[data-app-theme] .doctor-medical-summary header > span,
html[data-app-theme] .doctor-recent-activity article > span,
html[data-app-theme] .more-icon {
  border-color: var(--theme-border);
  background: var(--theme-accent-soft);
  color: var(--theme-primary);
}

html[data-app-theme] .doctor-calendar-hero button,
html[data-app-theme] .doctor-calendar-sync,
html[data-app-theme] .doctor-patient-tabs button.is-active,
html[data-app-theme] .doctor-save-button {
  background: var(--theme-primary);
  color: var(--theme-primary-contrast);
  box-shadow: 0 18px 38px var(--theme-shadow-strong);
}

html[data-app-theme] .doctor-calendar-hero .doctor-calendar-title-button {
  background: transparent;
  color: var(--theme-text-strong);
  box-shadow: none;
}

html[data-app-theme] .doctor-calendar-nav button,
html[data-app-theme] .doctor-calendar-view-tabs button,
html[data-app-theme] .doctor-patient-tabs button,
html[data-app-theme] .doctor-patient-detail-tabs button,
html[data-app-theme] .doctor-more-grid button,
html[data-app-theme] .doctor-more-card.is-list > button,
html[data-app-theme] .doctor-top-actions button,
html[data-app-theme] .doctor-patient-heading button,
html[data-app-theme] .doctor-patient-detail-top button,
html[data-app-theme] .doctor-patient-profile-head > button,
html[data-app-theme] .doctor-patient-row .kebab,
html[data-app-theme] .doctor-contact-list svg,
html[data-app-theme] .doctor-more-card button > .mini-icon {
  color: var(--theme-text);
}

html[data-app-theme] .doctor-calendar-view-tabs .is-active,
html[data-app-theme] .doctor-patient-detail-tabs button.is-active,
html[data-app-theme] .doctor-patient-profile-head > button,
html[data-app-theme] .doctor-edit-link,
html[data-app-theme] .doctor-detail-section header button,
html[data-app-theme] .read-more-button,
html[data-app-theme] .doctor-medical-summary button,
html[data-app-theme] .doctor-recent-activity button,
html[data-app-theme] .doctor-patient-actions button {
  color: var(--theme-primary);
}

html[data-app-theme] .doctor-calendar-view-tabs .is-active,
html[data-app-theme] .doctor-top-actions b {
  background: var(--theme-accent-muted);
}

html[data-app-theme] .doctor-patient-tabs button.is-active span {
  background: color-mix(in srgb, var(--theme-primary-contrast) 18%, transparent);
  color: var(--theme-primary-contrast);
}

html[data-app-theme] .doctor-calendar-day.is-selected > span {
  background: var(--theme-primary);
  color: var(--theme-primary-contrast);
}

html[data-app-theme] .doctor-calendar-day em,
html[data-app-theme] .doctor-calendar-day em.is-blocked,
html[data-app-theme] .doctor-calendar-day em.is-clinic,
html[data-app-theme] .doctor-calendar-day em.is-follow,
html[data-app-theme] .doctor-calendar-event b {
  background: var(--theme-accent-muted);
  color: var(--theme-primary);
}

html[data-app-theme] .doctor-brand-row strong,
html[data-app-theme] .doctor-account-identity h1,
html[data-app-theme] .doctor-calendar-hero h1,
html[data-app-theme] .doctor-calendar-agenda h2,
html[data-app-theme] .doctor-calendar-event strong,
html[data-app-theme] .doctor-detail-section h2,
html[data-app-theme] .doctor-more-header h1,
html[data-app-theme] .doctor-more-card h2,
html[data-app-theme] .doctor-more-card strong,
html[data-app-theme] .doctor-patient-heading h1,
html[data-app-theme] .doctor-patient-row h2,
html[data-app-theme] .doctor-patient-detail-top h1,
html[data-app-theme] .doctor-patient-profile-head h2,
html[data-app-theme] .doctor-patient-vitals strong,
html[data-app-theme] .doctor-patient-visit-card strong,
html[data-app-theme] .doctor-medical-summary h2,
html[data-app-theme] .doctor-recent-activity h2,
html[data-app-theme] .doctor-recent-activity strong,
html[data-app-theme] .health-guide-links h2 {
  color: var(--theme-text-strong);
}

html[data-app-theme] .doctor-account-identity p,
html[data-app-theme] .doctor-calendar-hero p,
html[data-app-theme] .doctor-calendar-hero span,
html[data-app-theme] .doctor-calendar-month > strong,
html[data-app-theme] .doctor-calendar-agenda p,
html[data-app-theme] .doctor-calendar-agenda header > span,
html[data-app-theme] .doctor-calendar-event small,
html[data-app-theme] .doctor-calendar-slots time,
html[data-app-theme] .doctor-detail-section p,
html[data-app-theme] .doctor-more-header p,
html[data-app-theme] .doctor-more-card small,
html[data-app-theme] .doctor-patient-heading p,
html[data-app-theme] .doctor-patient-row p,
html[data-app-theme] .doctor-patient-row small,
html[data-app-theme] .doctor-patient-row small b,
html[data-app-theme] .doctor-patient-profile-head p,
html[data-app-theme] .doctor-patient-vitals small,
html[data-app-theme] .doctor-patient-visit-card small,
html[data-app-theme] .doctor-patient-visit-card p,
html[data-app-theme] .doctor-medical-summary ul,
html[data-app-theme] .doctor-recent-activity p,
html[data-app-theme] .doctor-recent-activity time,
html[data-app-theme] .doctor-rating-pill em,
html[data-app-theme] .health-guide-links > span {
  color: var(--theme-muted);
}

html[data-app-theme] .doctor-patient-search input {
  color: var(--theme-text-strong);
}

html[data-app-theme] .doctor-patient-search input::placeholder {
  color: var(--theme-muted);
}

html[data-app-theme] .doctor-patient-status.is-due {
  background: color-mix(in srgb, #e09b28 18%, var(--theme-surface));
  color: #e09b28;
}

html[data-app-theme] .doctor-patient-status.is-report {
  background: color-mix(in srgb, var(--theme-primary) 18%, var(--theme-surface));
  color: var(--theme-primary);
}

html[data-app-theme="dark"] .doctor-medical-summary,
html[data-app-theme="apyva-dark"] .doctor-medical-summary,
html[data-app-theme="dark"] .doctor-patient-actions button,
html[data-app-theme="apyva-dark"] .doctor-patient-actions button,
html[data-app-theme="dark"] .doctor-shortcut-grid button,
html[data-app-theme="apyva-dark"] .doctor-shortcut-grid button,
html[data-app-theme="dark"] .doctor-calendar-month,
html[data-app-theme="apyva-dark"] .doctor-calendar-month,
html[data-app-theme="dark"] .doctor-calendar-day,
html[data-app-theme="apyva-dark"] .doctor-calendar-day {
  background: color-mix(in srgb, var(--theme-surface) 90%, var(--theme-page));
}

/* Theme completion for patient-facing doctor profiles and booking. */
html[data-app-theme] .screen-profile,
html[data-app-theme] .screen-care-doctor,
html[data-app-theme] .profile-content {
  background: var(--theme-page-gradient);
  color: var(--theme-text);
}

html[data-app-theme] .stats-card,
html[data-app-theme] .booking-card,
html[data-app-theme] .care-stat-glass,
html[data-app-theme] .care-profile-details article,
html[data-app-theme] .care-review-list article,
html[data-app-theme] .care-review-form,
html[data-app-theme] .care-availability-grid article,
html[data-app-theme] .care-socials a,
html[data-app-theme] .care-search-stack button,
html[data-app-theme] .care-search-field,
html[data-app-theme] .results-search {
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 18px 42px var(--theme-shadow-color);
}

html[data-app-theme] .screen-care-doctor .profile-circle,
html[data-app-theme] .screen-profile .blue-glass,
html[data-app-theme] .screen-profile .details-pill,
html[data-app-theme] .screen-profile .white-button,
html[data-app-theme] .screen-profile .rating-pill,
html[data-app-theme] .screen-profile .contact-glass,
html[data-app-theme] .screen-care-doctor .provider-badges span,
html[data-app-theme] .screen-care-doctor .care-doctor-hero > button,
html[data-app-theme] .screen-care-doctor .verified-doctor-badge,
html[data-app-theme] .plain-icon,
html[data-app-theme] .date-card,
html[data-app-theme] .care-star-input button,
html[data-app-theme] .care-chip-list span {
  border-color: var(--theme-border);
  background: var(--theme-accent-soft);
  color: var(--theme-primary);
}

html[data-app-theme] .screen-care-doctor .care-doctor-hero,
html[data-app-theme] .screen-care-doctor .care-tabs {
  border-color: var(--theme-border);
}

html[data-app-theme] .screen-care-doctor .care-doctor-hero h2,
html[data-app-theme] .screen-profile .profile-title h1,
html[data-app-theme] .care-subheader h1,
html[data-app-theme] .care-about h2,
html[data-app-theme] .care-reviews h2,
html[data-app-theme] .care-profile-details h3,
html[data-app-theme] .care-socials h2,
html[data-app-theme] .care-availability-panel h2,
html[data-app-theme] .care-review-form h3,
html[data-app-theme] .care-review-list strong,
html[data-app-theme] .care-profile-details strong,
html[data-app-theme] .care-timeline-list strong,
html[data-app-theme] .care-availability-grid strong,
html[data-app-theme] .stat-item strong,
html[data-app-theme] .month-switch strong,
html[data-app-theme] .booking-row p,
html[data-app-theme] .select-label,
html[data-app-theme] .time-slot,
html[data-app-theme] .time-tick {
  color: var(--theme-text-strong);
}

html[data-app-theme] .screen-care-doctor .care-doctor-hero p,
html[data-app-theme] .screen-profile .profile-title p,
html[data-app-theme] .care-about p,
html[data-app-theme] .care-reviews p,
html[data-app-theme] .care-review-form p,
html[data-app-theme] .care-review-form textarea::placeholder,
html[data-app-theme] .care-profile-details p,
html[data-app-theme] .care-profile-details li,
html[data-app-theme] .care-timeline-list span,
html[data-app-theme] .care-timeline-list em,
html[data-app-theme] .care-review-list p,
html[data-app-theme] .care-review-list time,
html[data-app-theme] .care-availability-grid em,
html[data-app-theme] .stat-item span,
html[data-app-theme] .date-card span,
html[data-app-theme] .empty-slots {
  color: var(--theme-muted);
}

html[data-app-theme] .care-tabs button {
  color: var(--theme-muted);
}

html[data-app-theme] .care-tabs button.is-active,
html[data-app-theme] .care-availability-grid span,
html[data-app-theme] .time-slot.is-selected .time-label {
  color: var(--theme-primary);
}

html[data-app-theme] .care-tabs button.is-active::after,
html[data-app-theme] .time-slot.is-selected .time-selected-bar {
  background: var(--theme-primary);
}

html[data-app-theme] .date-card.is-selected,
html[data-app-theme] .screen-care-doctor .care-primary-button,
html[data-app-theme] .booking-card .primary-button,
html[data-app-theme] .care-review-form .chip.is-primary {
  border-color: var(--theme-primary);
  background: var(--theme-primary);
  color: var(--theme-primary-contrast);
  box-shadow: 0 18px 38px var(--theme-shadow-strong);
}

html[data-app-theme] .date-card.is-selected strong,
html[data-app-theme] .date-card.is-selected span,
html[data-app-theme] .booking-card .primary-button,
html[data-app-theme] .screen-care-doctor .care-primary-button,
html[data-app-theme] .care-review-form .chip.is-primary {
  color: var(--theme-primary-contrast);
}

html[data-app-theme] .booking-card .primary-button:disabled {
  border-color: var(--theme-border);
  background: var(--theme-surface-soft);
  color: var(--theme-muted);
  box-shadow: none;
}

html[data-app-theme] .care-review-form textarea {
  border-color: var(--theme-border);
  background: color-mix(in srgb, var(--theme-surface) 88%, var(--theme-page));
  color: var(--theme-text-strong);
}

html[data-app-theme] .care-review-anonymous,
html[data-app-theme] .care-socials a {
  color: var(--theme-primary);
}

html[data-app-theme] .care-socials a span {
  background: var(--theme-primary);
  color: var(--theme-primary-contrast);
}

html[data-app-theme="dark"] .stats-card,
html[data-app-theme="apyva-dark"] .stats-card,
html[data-app-theme="dark"] .booking-card,
html[data-app-theme="apyva-dark"] .booking-card,
html[data-app-theme="dark"] .care-stat-glass,
html[data-app-theme="apyva-dark"] .care-stat-glass,
html[data-app-theme="dark"] .care-profile-details article,
html[data-app-theme="apyva-dark"] .care-profile-details article,
html[data-app-theme="dark"] .care-review-list article,
html[data-app-theme="apyva-dark"] .care-review-list article,
html[data-app-theme="dark"] .care-review-form,
html[data-app-theme="apyva-dark"] .care-review-form,
html[data-app-theme="dark"] .care-availability-grid article,
html[data-app-theme="apyva-dark"] .care-availability-grid article {
  background: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-page));
}

html[data-app-theme="dark"] .time-tick,
html[data-app-theme="apyva-dark"] .time-tick,
html[data-app-theme="dark"] .time-slot::before,
html[data-app-theme="apyva-dark"] .time-slot::before,
html[data-app-theme="dark"] .time-slot::after,
html[data-app-theme="apyva-dark"] .time-slot::after {
  background: var(--theme-text-strong);
}

/* Non-default theme hardening for doctor workspace and auth flows.
   Keep this scoped to named themes so the current default UI stays untouched. */
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) {
  --theme-glass-surface: color-mix(in srgb, var(--theme-surface) 90%, var(--theme-page));
  --theme-card-surface: color-mix(in srgb, var(--theme-surface-strong, var(--theme-surface)) 84%, var(--theme-page));
  --theme-soft-surface: color-mix(in srgb, var(--theme-accent-soft) 54%, var(--theme-surface));
  --theme-input-surface: color-mix(in srgb, var(--theme-surface-strong, var(--theme-surface)) 92%, var(--theme-page));
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-page,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .signup-page,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-appointments,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-doctor-patients,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-doctor-patient-detail,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-doctor-calendar,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-doctor-profile,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .screen-doctor-more {
  background: var(--theme-page-gradient) !important;
  color: var(--theme-text) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .phone-shell.is-doctor-role {
  background: var(--theme-page) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-card,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-field div,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .social-login button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-login-link,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-hero-art article,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-privacy,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-benefits,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-heading button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-stats article,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-date-strip,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-consultation-card,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .appointment-month,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .appointment-card,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .appointment-empty-card,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .empty-state-card,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .new-appointment-banner,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-profile-panel,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-detail-section,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-shortcut-grid button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-availability-warning,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-more-card,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-more-card.is-list,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-tabs button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-search,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-row,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-vitals,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-visit-card,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-medical-summary,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-recent-activity,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-actions button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-top-actions button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-heading button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-detail-top button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-profile-head > button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-hero,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-nav,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-view-tabs,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-legend span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-month,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-day,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-agenda,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-event,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .calendar-open-slot,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .notification-sheet-row,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .notification-permission-card,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .web-app-install-sheet ol {
  background: var(--theme-card-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: 0 18px 46px var(--theme-shadow-color) !important;
}

html[data-app-theme="dark"] .login-card,
html[data-app-theme="apyva-dark"] .login-card,
html[data-app-theme="dark"] .doctor-appointment-stats article,
html[data-app-theme="apyva-dark"] .doctor-appointment-stats article,
html[data-app-theme="dark"] .doctor-date-strip,
html[data-app-theme="apyva-dark"] .doctor-date-strip,
html[data-app-theme="dark"] .doctor-consultation-card,
html[data-app-theme="apyva-dark"] .doctor-consultation-card,
html[data-app-theme="dark"] .appointment-month,
html[data-app-theme="apyva-dark"] .appointment-month,
html[data-app-theme="dark"] .appointment-card,
html[data-app-theme="apyva-dark"] .appointment-card,
html[data-app-theme="dark"] .appointment-empty-card,
html[data-app-theme="apyva-dark"] .appointment-empty-card,
html[data-app-theme="dark"] .empty-state-card,
html[data-app-theme="apyva-dark"] .empty-state-card,
html[data-app-theme="dark"] .new-appointment-banner,
html[data-app-theme="apyva-dark"] .new-appointment-banner,
html[data-app-theme="dark"] .doctor-profile-panel,
html[data-app-theme="apyva-dark"] .doctor-profile-panel,
html[data-app-theme="dark"] .doctor-detail-section,
html[data-app-theme="apyva-dark"] .doctor-detail-section,
html[data-app-theme="dark"] .doctor-shortcut-grid button,
html[data-app-theme="apyva-dark"] .doctor-shortcut-grid button,
html[data-app-theme="dark"] .doctor-more-card,
html[data-app-theme="apyva-dark"] .doctor-more-card,
html[data-app-theme="dark"] .doctor-more-card.is-list,
html[data-app-theme="apyva-dark"] .doctor-more-card.is-list,
html[data-app-theme="dark"] .doctor-patient-row,
html[data-app-theme="apyva-dark"] .doctor-patient-row,
html[data-app-theme="dark"] .doctor-patient-vitals,
html[data-app-theme="apyva-dark"] .doctor-patient-vitals,
html[data-app-theme="dark"] .doctor-patient-visit-card,
html[data-app-theme="apyva-dark"] .doctor-patient-visit-card,
html[data-app-theme="dark"] .doctor-medical-summary,
html[data-app-theme="apyva-dark"] .doctor-medical-summary,
html[data-app-theme="dark"] .doctor-recent-activity,
html[data-app-theme="apyva-dark"] .doctor-recent-activity,
html[data-app-theme="dark"] .doctor-calendar-hero,
html[data-app-theme="apyva-dark"] .doctor-calendar-hero,
html[data-app-theme="dark"] .doctor-calendar-month,
html[data-app-theme="apyva-dark"] .doctor-calendar-month,
html[data-app-theme="dark"] .doctor-calendar-day,
html[data-app-theme="apyva-dark"] .doctor-calendar-day,
html[data-app-theme="dark"] .doctor-calendar-agenda,
html[data-app-theme="apyva-dark"] .doctor-calendar-agenda,
html[data-app-theme="dark"] .doctor-calendar-event,
html[data-app-theme="apyva-dark"] .doctor-calendar-event,
html[data-app-theme="dark"] .notification-sheet-row,
html[data-app-theme="apyva-dark"] .notification-sheet-row,
html[data-app-theme="dark"] .notification-permission-card,
html[data-app-theme="apyva-dark"] .notification-permission-card {
  background: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-page)) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-card h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-card label,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-field input,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-heading h1,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-stats strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-date-strip button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .appointment-section h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .empty-state-card strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .appointment-info h3,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .appointment-time strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .new-appointment-banner h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-account-identity h1,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-more-header h1,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-more-card h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-more-card strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-heading h1,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-row h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-detail-top h1,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-profile-head h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-vitals strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-visit-card strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-medical-summary h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-recent-activity h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-recent-activity strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-hero h1,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-agenda h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-event strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-detail-section h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-detail-section p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-fee-line strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-timeline-item strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .notification-sheet-row strong {
  color: var(--theme-text-strong) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-card p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-field input::placeholder,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-heading p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-stats small,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .appointment-info p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .empty-state-card p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .appointment-time span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-account-identity p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-more-header p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-more-card p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-heading p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-row p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-row small,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-search input::placeholder,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-profile-head p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-vitals small,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-visit-card small,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-visit-card p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-hero p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-hero span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-agenda p,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-event small,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .notification-sheet-row span {
  color: var(--theme-muted) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-tabs button.is-active,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-tabs button.is-active,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-date-strip .is-selected,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .appointment-date-row .is-selected,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-hero button:not(.doctor-calendar-title-button),
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-sync,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-save-button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .new-appointment-banner button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-submit {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-title-button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .forgot-button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .signup-link,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-login-link,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-edit-link,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-detail-section a {
  color: var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-field svg,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-heading button svg,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-top-actions button svg,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-heading button svg,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-detail-top button svg,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-hero button svg,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-sync svg,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .notification-sheet-row svg {
  color: var(--theme-icon) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-stats span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .new-appointment-banner > span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-shortcut-grid span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-vitals article > span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-visit-card article > span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-medical-summary header > span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-recent-activity article > span,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-day em,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-day small {
  background: var(--theme-accent-soft) !important;
  color: var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-day.is-selected {
  background: color-mix(in srgb, var(--theme-primary) 14%, var(--theme-surface)) !important;
  box-shadow: inset 0 0 0 2px var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-day.is-selected > span {
  background: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-day.is-muted {
  background: color-mix(in srgb, var(--theme-page) 86%, var(--theme-surface)) !important;
  color: var(--theme-muted) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-month > strong {
  background: color-mix(in srgb, var(--theme-surface) 96%, var(--theme-page)) !important;
  color: var(--theme-muted) !important;
  border-color: var(--theme-border) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-search input,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .login-field input {
  color: var(--theme-text-strong) !important;
  background: transparent !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-status,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .verified-doctor-badge {
  background: color-mix(in srgb, var(--theme-success) 18%, var(--theme-surface)) !important;
  color: var(--theme-success) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-detail-tabs,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-tabs,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-profile-panel,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-more-card {
  border-color: var(--theme-border) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-detail-tabs button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-tabs button,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-view-tabs button {
  color: var(--theme-muted) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-detail-tabs button.is-active,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-tabs button.is-active,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-view-tabs button.is-active {
  color: var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-patient-detail-tabs .is-active::after,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-appointment-tabs .is-active::after {
  background: var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .notification-sheet-row.is-unread {
  background: color-mix(in srgb, var(--theme-accent-soft) 72%, var(--theme-surface)) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .notification-permission-card.is-enabled {
  background: color-mix(in srgb, var(--theme-success) 16%, var(--theme-surface)) !important;
  border-color: color-mix(in srgb, var(--theme-success) 36%, var(--theme-border)) !important;
  color: var(--theme-success) !important;
}

html[data-app-theme="apyva"] .doctor-medical-summary,
html[data-app-theme="apyva"] .doctor-patient-prescriptions {
  background: color-mix(in srgb, #eefdf6 60%, var(--theme-surface)) !important;
}

html[data-app-theme="dark"] .doctor-medical-summary,
html[data-app-theme="dark"] .doctor-patient-prescriptions,
html[data-app-theme="apyva-dark"] .doctor-medical-summary,
html[data-app-theme="apyva-dark"] .doctor-patient-prescriptions {
  background: color-mix(in srgb, var(--theme-surface) 88%, var(--theme-success) 8%) !important;
}

/* Final doctor/auth theme contract. This deliberately stays off the default
   theme and catches newer doctor cards that do not yet use shared tokens. */
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) {
  --doctor-app-bg: var(--theme-page-gradient);
  --doctor-app-panel: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-page));
  --doctor-app-panel-strong: color-mix(in srgb, var(--theme-surface-strong, var(--theme-surface)) 92%, var(--theme-page));
  --doctor-app-panel-soft: color-mix(in srgb, var(--theme-accent-soft) 56%, var(--theme-surface));
  --doctor-app-input: color-mix(in srgb, var(--theme-surface-strong, var(--theme-surface)) 96%, var(--theme-page));
  --doctor-app-text: var(--theme-text);
  --doctor-app-text-strong: var(--theme-text-strong);
  --doctor-app-muted: var(--theme-muted);
  --doctor-app-line: var(--theme-border);
}

html[data-app-theme="dark"],
html[data-app-theme="apyva-dark"] {
  --doctor-app-panel: color-mix(in srgb, var(--theme-surface) 88%, #000 12%);
  --doctor-app-panel-strong: color-mix(in srgb, var(--theme-surface-strong, var(--theme-surface)) 86%, #000 14%);
  --doctor-app-input: color-mix(in srgb, var(--theme-surface-strong, var(--theme-surface)) 92%, #000 8%);
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .login-page,
  .signup-page,
  .screen-appointments,
  .screen-doctor-more,
  .screen-doctor-profile,
  .screen-doctor-patients,
  .screen-doctor-patient-detail,
  .screen-doctor-calendar
) {
  background: var(--doctor-app-bg) !important;
  color: var(--doctor-app-text) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .login-card,
  .login-hero-art article,
  .login-privacy,
  .login-benefits,
  .doctor-appointment-stats article,
  .doctor-date-strip,
  .doctor-consultation-card,
  .appointment-card,
  .appointment-month,
  .appointment-empty-card,
  .empty-state-card,
  .new-appointment-banner,
  .doctor-more-card,
  .doctor-profile-panel,
  .doctor-detail-section,
  .doctor-shortcut-grid button,
  .doctor-patient-tabs button,
  .doctor-patient-search,
  .doctor-patient-row,
  .doctor-patient-vitals,
  .doctor-patient-vitals article,
  .doctor-patient-visit-card,
  .doctor-patient-visit-card article,
  .doctor-medical-summary,
  .doctor-patient-prescriptions,
  .doctor-recent-activity,
  .doctor-calendar-hero,
  .doctor-calendar-nav,
  .doctor-calendar-view-tabs,
  .doctor-calendar-legend span,
  .doctor-calendar-month,
  .doctor-calendar-day,
  .doctor-calendar-agenda,
  .doctor-calendar-slots article,
  .doctor-calendar-slots article > div,
  .doctor-calendar-event,
  .calendar-open-slot,
  .notification-sheet-row,
  .notification-permission-card
) {
  background: var(--doctor-app-panel) !important;
  border-color: var(--doctor-app-line) !important;
  color: var(--doctor-app-text) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .login-field div,
  .social-login button,
  .doctor-top-actions button,
  .doctor-appointment-heading button,
  .doctor-patient-heading button,
  .doctor-patient-detail-top button,
  .doctor-patient-profile-head > button,
  .doctor-patient-actions button,
  .doctor-calendar-nav button,
  .doctor-calendar-view-tabs button
) {
  background: var(--doctor-app-input) !important;
  border-color: var(--doctor-app-line) !important;
  color: var(--doctor-app-text-strong) !important;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .login-card,
  .login-field div,
  .social-login button,
  .doctor-appointment-stats article,
  .doctor-date-strip,
  .doctor-consultation-card,
  .appointment-card,
  .appointment-month,
  .appointment-empty-card,
  .empty-state-card,
  .new-appointment-banner,
  .doctor-more-card,
  .doctor-profile-panel,
  .doctor-detail-section,
  .doctor-shortcut-grid button,
  .doctor-patient-tabs button,
  .doctor-patient-search,
  .doctor-patient-row,
  .doctor-patient-vitals,
  .doctor-patient-visit-card,
  .doctor-medical-summary,
  .doctor-patient-prescriptions,
  .doctor-recent-activity,
  .doctor-calendar-hero,
  .doctor-calendar-month,
  .doctor-calendar-day,
  .doctor-calendar-agenda,
  .doctor-calendar-event,
  .notification-sheet-row,
  .notification-permission-card
) {
  background: var(--doctor-app-panel-strong) !important;
  box-shadow: 0 18px 46px var(--theme-shadow-color) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .login-card h2,
  .login-card label,
  .login-field input,
  .social-login b,
  .doctor-brand-row strong,
  .doctor-appointment-heading h1,
  .doctor-appointment-stats strong,
  .doctor-date-strip button,
  .appointment-section h2,
  .empty-state-card strong,
  .appointment-info h3,
  .appointment-time strong,
  .new-appointment-banner h2,
  .doctor-more-header h1,
  .doctor-more-card h2,
  .doctor-more-card strong,
  .doctor-account-identity h1,
  .doctor-patient-heading h1,
  .doctor-patient-row h2,
  .doctor-patient-detail-top h1,
  .doctor-patient-profile-head h2,
  .doctor-patient-vitals strong,
  .doctor-patient-visit-card strong,
  .doctor-medical-summary h2,
  .doctor-patient-prescriptions h2,
  .doctor-recent-activity h2,
  .doctor-recent-activity strong,
  .doctor-calendar-hero h1,
  .doctor-calendar-day > span,
  .doctor-calendar-agenda h2,
  .doctor-calendar-event strong,
  .doctor-profile-panel h1,
  .doctor-profile-panel h2,
  .doctor-detail-section h2,
  .doctor-shortcut-grid strong,
  .doctor-fee-line strong,
  .doctor-timeline-item strong,
  .notification-sheet-row strong
) {
  color: var(--doctor-app-text-strong) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .login-card p,
  .login-field input::placeholder,
  .doctor-appointment-heading p,
  .doctor-appointment-stats small,
  .appointment-info p,
  .empty-state-card p,
  .appointment-time span,
  .new-appointment-banner p,
  .doctor-more-header p,
  .doctor-more-card p,
  .doctor-more-card small,
  .doctor-account-identity p,
  .doctor-patient-heading p,
  .doctor-patient-row p,
  .doctor-patient-row small,
  .doctor-patient-search input,
  .doctor-patient-search input::placeholder,
  .doctor-patient-profile-head p,
  .doctor-patient-vitals small,
  .doctor-patient-visit-card small,
  .doctor-patient-visit-card p,
  .doctor-medical-summary li,
  .doctor-patient-prescriptions li,
  .doctor-recent-activity p,
  .doctor-calendar-hero p,
  .doctor-calendar-hero span,
  .doctor-calendar-month > strong,
  .doctor-calendar-agenda p,
  .doctor-calendar-agenda header > span,
  .doctor-calendar-slots time,
  .doctor-calendar-event small,
  .doctor-detail-section p,
  .notification-sheet-row span
) {
  color: var(--doctor-app-muted) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .doctor-appointment-tabs button.is-active,
  .doctor-patient-tabs button.is-active,
  .doctor-calendar-view-tabs button.is-active,
  .doctor-date-strip .is-selected,
  .appointment-date-row .is-selected,
  .login-submit,
  .new-appointment-banner button,
  .doctor-save-button,
  .doctor-calendar-hero button:not(.doctor-calendar-title-button),
  .doctor-calendar-sync
) {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .doctor-calendar-title-button,
  .forgot-button,
  .signup-link,
  .doctor-login-link,
  .doctor-edit-link,
  .doctor-detail-section a,
  .doctor-calendar-view-tabs button.is-active,
  .doctor-patient-detail-tabs button.is-active
) {
  color: var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .login-field svg,
  .doctor-top-actions button svg,
  .doctor-appointment-heading button svg,
  .doctor-patient-heading button svg,
  .doctor-patient-detail-top button svg,
  .doctor-patient-profile-head > button svg,
  .doctor-calendar-hero button svg,
  .doctor-calendar-sync svg,
  .doctor-detail-section svg,
  .doctor-shortcut-grid svg,
  .notification-sheet-row svg
) {
  color: var(--theme-icon) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .doctor-appointment-stats span,
  .new-appointment-banner > span,
  .doctor-shortcut-grid span,
  .doctor-patient-vitals article > span,
  .doctor-patient-visit-card article > span,
  .doctor-medical-summary header > span,
  .doctor-patient-prescriptions header > span,
  .doctor-recent-activity article > span,
  .more-icon,
  .doctor-calendar-day em,
  .doctor-calendar-day small
) {
  background: var(--doctor-app-panel-soft) !important;
  color: var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-day.is-selected {
  background: color-mix(in srgb, var(--theme-primary) 16%, var(--doctor-app-panel)) !important;
  box-shadow: inset 0 0 0 2px var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-day.is-selected > span {
  background: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-calendar-day.is-muted {
  opacity: 0.76;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .doctor-patient-actions button,
  .doctor-patient-profile-head > button,
  .doctor-top-actions button
) {
  background: color-mix(in srgb, var(--theme-surface) 78%, #fff 8%) !important;
  color: var(--doctor-app-text-strong) !important;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .doctor-patient-actions button:disabled,
  .doctor-save-button:disabled,
  .login-submit:disabled
) {
  opacity: 0.58 !important;
}

html[data-app-theme="apyva"] :is(.doctor-medical-summary, .doctor-patient-prescriptions) {
  background: color-mix(in srgb, #eefdf6 46%, var(--doctor-app-panel)) !important;
}

html[data-app-theme="dark"] :is(.doctor-medical-summary, .doctor-patient-prescriptions),
html[data-app-theme="apyva-dark"] :is(.doctor-medical-summary, .doctor-patient-prescriptions) {
  background: color-mix(in srgb, var(--doctor-app-panel-strong) 88%, var(--theme-success) 8%) !important;
}

/* Doctor dark-theme hardening for screens that were still leaking default
   white/blue surfaces in app-like browser views. */
html[data-app-theme="dark"] :is(
  .screen-doctor-patients .doctor-patient-tabs button,
  .screen-doctor-patients .doctor-patient-search,
  .screen-doctor-patients .empty-state-card,
  .screen-doctor-patient-detail .doctor-patient-vitals,
  .screen-doctor-patient-detail .doctor-patient-vitals article,
  .screen-doctor-patient-detail .doctor-patient-visit-card,
  .screen-doctor-patient-detail .doctor-medical-summary,
  .screen-doctor-patient-detail .doctor-patient-prescriptions,
  .screen-doctor-patient-detail .doctor-recent-activity,
  .screen-doctor-patient-detail .doctor-patient-actions button,
  .screen-doctor-calendar .doctor-calendar-hero,
  .screen-doctor-calendar .doctor-calendar-nav,
  .screen-doctor-calendar .doctor-calendar-view-tabs,
  .screen-doctor-calendar .doctor-calendar-legend span,
  .screen-doctor-calendar .doctor-calendar-month,
  .screen-doctor-calendar .doctor-calendar-day,
  .screen-doctor-calendar .doctor-calendar-agenda,
  .screen-doctor-calendar .doctor-calendar-event,
  .screen-doctor-profile .doctor-shortcut-grid button,
  .screen-doctor-profile .doctor-profile-panel,
  .screen-doctor-profile .doctor-detail-section,
  .screen-doctor-more .doctor-more-card
),
html[data-app-theme="apyva-dark"] :is(
  .screen-doctor-patients .doctor-patient-tabs button,
  .screen-doctor-patients .doctor-patient-search,
  .screen-doctor-patients .empty-state-card,
  .screen-doctor-patient-detail .doctor-patient-vitals,
  .screen-doctor-patient-detail .doctor-patient-vitals article,
  .screen-doctor-patient-detail .doctor-patient-visit-card,
  .screen-doctor-patient-detail .doctor-medical-summary,
  .screen-doctor-patient-detail .doctor-patient-prescriptions,
  .screen-doctor-patient-detail .doctor-recent-activity,
  .screen-doctor-patient-detail .doctor-patient-actions button,
  .screen-doctor-calendar .doctor-calendar-hero,
  .screen-doctor-calendar .doctor-calendar-nav,
  .screen-doctor-calendar .doctor-calendar-view-tabs,
  .screen-doctor-calendar .doctor-calendar-legend span,
  .screen-doctor-calendar .doctor-calendar-month,
  .screen-doctor-calendar .doctor-calendar-day,
  .screen-doctor-calendar .doctor-calendar-agenda,
  .screen-doctor-calendar .doctor-calendar-event,
  .screen-doctor-profile .doctor-shortcut-grid button,
  .screen-doctor-profile .doctor-profile-panel,
  .screen-doctor-profile .doctor-detail-section,
  .screen-doctor-more .doctor-more-card
) {
  background: var(--doctor-app-panel-strong) !important;
  border-color: var(--doctor-app-line) !important;
  color: var(--doctor-app-text) !important;
}

html[data-app-theme="dark"] :is(
  .screen-doctor-patients .doctor-patient-search input,
  .screen-doctor-patient-detail input,
  .screen-doctor-patient-detail textarea
),
html[data-app-theme="apyva-dark"] :is(
  .screen-doctor-patients .doctor-patient-search input,
  .screen-doctor-patient-detail input,
  .screen-doctor-patient-detail textarea
) {
  background: transparent !important;
  color: var(--doctor-app-text-strong) !important;
}

html[data-app-theme="dark"] .screen-doctor-patients .doctor-patient-tabs button.is-active,
html[data-app-theme="apyva-dark"] .screen-doctor-patients .doctor-patient-tabs button.is-active {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

/* Quick Health Check follows the same theme contract as the rest of APYVA. */
.screen-depression-screening {
  background: var(--depression-page-bg) !important;
  color: var(--depression-text) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .depression-card,
  .depression-disclaimer,
  .depression-result-notes,
  .depression-pattern,
  .depression-options button,
  .depression-secondary,
  .depression-score-ring
) {
  border-color: var(--depression-border) !important;
  background: var(--depression-surface) !important;
  color: var(--depression-text) !important;
  box-shadow: 0 18px 42px var(--depression-shadow) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .depression-header h1,
  .depression-card h2,
  .depression-score-ring span
) {
  color: var(--depression-text-strong) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .depression-header p,
  .depression-card p,
  .depression-score-ring small
) {
  color: var(--depression-muted) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .depression-header span,
  .depression-kicker
) {
  background: var(--depression-chip-bg) !important;
  color: var(--depression-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .depression-primary {
  background: var(--depression-primary) !important;
  color: var(--depression-primary-contrast) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .depression-secondary {
  background: var(--depression-surface-strong) !important;
  color: var(--depression-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .depression-options button.is-selected,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .depression-options button:hover {
  background: var(--depression-option-selected) !important;
  border-color: var(--depression-border-strong) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .depression-options button strong {
  background: var(--depression-number-bg) !important;
  color: var(--depression-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .depression-progress-bar {
  background: var(--depression-progress-bg) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .depression-progress-bar span {
  background: linear-gradient(90deg, var(--depression-accent), var(--depression-accent-2)) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .depression-safety-card,
  .depression-result-card.has-safety-flag,
  .depression-result-safety
) {
  background: var(--depression-danger-bg) !important;
  border-color: color-mix(in srgb, var(--depression-danger) 30%, var(--depression-border)) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .depression-alert-label,
  .depression-help-grid a
) {
  background: var(--depression-danger-chip) !important;
  color: var(--depression-danger) !important;
  border-color: color-mix(in srgb, var(--depression-danger) 25%, var(--depression-border)) !important;
}

/* Final non-default theme polish for doctor sheets, nested records, and native
   controls that can otherwise leak browser/default light surfaces. */
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .bottom-sheet .sheet-card {
  background: var(--doctor-app-panel-strong, var(--theme-surface)) !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-text) !important;
  box-shadow: 0 30px 80px var(--theme-shadow-strong) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .bottom-sheet .sheet-handle {
  background: var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .bottom-sheet .sheet-card h2,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .bottom-sheet .sheet-card strong,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .patient-edit-form label,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .patient-edit-form label > span {
  color: var(--theme-text-strong) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .sheet-body,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .bottom-sheet .sheet-card small,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-edit-help,
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .sheet-list p {
  color: var(--theme-muted) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .sheet-list p,
  .message-options-list button,
  .doctor-more-actions button:not(.chip),
  .doctor-patient-prescriptions li,
  .doctor-medical-summary li,
  .patient-edit-form input,
  .patient-edit-form textarea,
  .patient-edit-form select,
  .patient-edit-actions,
  .privacy-settings-sheet button,
  .privacy-settings-sheet .profile-card,
  .privacy-settings-sheet .stacked-form,
  .privacy-settings-sheet .checkbox-line,
  .privacy-settings-sheet .form-note,
  .web-app-install-sheet ol,
  .push-prompt-sheet p,
  .notification-permission-card,
  .sheet-list .notification-permission-card,
  .message-payment-qr-field,
  .message-payment-save,
  .message-payment-confirm,
  .doctor-visibility-checks label,
  .sheet-search input,
  .chip,
  .theme-choice,
  .patient-settings-sheet button
) {
  background: var(--doctor-app-input, var(--theme-surface-soft)) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-strong) !important;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .sheet-list p,
  .message-options-list button,
  .doctor-more-actions button:not(.chip),
  .doctor-patient-prescriptions li,
  .doctor-medical-summary li,
  .patient-edit-form input,
  .patient-edit-form textarea,
  .patient-edit-form select,
  .patient-edit-actions,
  .privacy-settings-sheet button,
  .privacy-settings-sheet .profile-card,
  .privacy-settings-sheet .stacked-form,
  .privacy-settings-sheet .checkbox-line,
  .privacy-settings-sheet .form-note,
  .web-app-install-sheet ol,
  .push-prompt-sheet p,
  .notification-permission-card,
  .sheet-list .notification-permission-card,
  .message-payment-qr-field,
  .message-payment-save,
  .message-payment-confirm,
  .doctor-visibility-checks label,
  .sheet-search input,
  .chip,
  .theme-choice,
  .patient-settings-sheet button
) {
  background: color-mix(in srgb, var(--theme-surface-strong) 82%, #000 18%) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .patient-edit-form input::placeholder,
  .patient-edit-form textarea::placeholder,
  .sheet-search input::placeholder,
  .doctor-patient-prescriptions small,
  .doctor-medical-summary small,
  .privacy-settings-sheet small,
  .privacy-settings-sheet .form-note,
  .message-payment-help,
  .message-payment-confirm span,
  .message-payment-confirm em,
  .message-options-list small,
  .doctor-more-actions span,
  .theme-choice small,
  .patient-settings-sheet button small
) {
  color: var(--theme-muted) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .chip.is-primary,
  .patient-edit-actions .is-primary,
  .doctor-more-actions .chip.is-primary,
  .privacy-settings-sheet .chip.is-primary,
  .push-prompt-sheet .chip.is-primary,
  .web-app-install-sheet .chip.is-primary
) {
  background: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .privacy-settings-sheet button,
  .privacy-settings-sheet .profile-card,
  .privacy-settings-sheet .stacked-form,
  .message-payment-confirm strong,
  .message-payment-qr-field > span
) {
  color: var(--theme-text-strong) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  .privacy-settings-sheet button .mini-icon,
  .message-payment-qr-field .mini-icon
) {
  color: var(--theme-icon) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(
  select,
  option,
  optgroup
) {
  background-color: var(--doctor-app-input, var(--theme-surface)) !important;
  color: var(--theme-text-strong) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) option:checked {
  background: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .new-appointment-banner {
  background: var(--doctor-app-panel-strong) !important;
  border: 1px solid var(--theme-border) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .new-appointment-banner > span {
  background: var(--doctor-app-panel-soft) !important;
  color: var(--theme-primary) !important;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .new-appointment-banner button {
  background: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .records-share-card {
  background: var(--theme-surface-strong) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .records-share-card h2 {
  color: var(--theme-text-strong) !important;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .records-share-card p {
  color: var(--theme-muted) !important;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .records-share-card button {
  background: var(--theme-accent-soft) !important;
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-primary) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon {
  background: var(--more-theme-bg, var(--more-bg)) !important;
  color: var(--more-theme-color, var(--more-color)) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon .icon {
  color: currentColor !important;
}

html[data-app-theme="apyva"] .more-icon.is-blue {
  --more-theme-color: #2468d8;
  --more-theme-bg: #eef4ff;
}

html[data-app-theme="apyva"] .more-icon.is-green {
  --more-theme-color: #2a9a59;
  --more-theme-bg: #eef9f0;
}

html[data-app-theme="apyva"] .more-icon.is-purple {
  --more-theme-color: #6838ca;
  --more-theme-bg: #f4efff;
}

html[data-app-theme="apyva"] .more-icon.is-orange {
  --more-theme-color: #d66c30;
  --more-theme-bg: #fff3ea;
}

html[data-app-theme="apyva"] .more-icon.is-cyan {
  --more-theme-color: #0a7188;
  --more-theme-bg: #e8f8fc;
}

html[data-app-theme="apyva"] .more-icon.is-red {
  --more-theme-color: #c94d62;
  --more-theme-bg: #fff0f4;
}

html[data-app-theme="apyva"] .more-icon.is-yellow {
  --more-theme-color: #d68c18;
  --more-theme-bg: #fff8e7;
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon.is-blue {
  --more-theme-color: #8fc7ff;
  --more-theme-bg: rgba(43, 125, 233, 0.18);
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon.is-green {
  --more-theme-color: #88dea7;
  --more-theme-bg: rgba(42, 154, 89, 0.2);
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon.is-purple {
  --more-theme-color: #c9b0ff;
  --more-theme-bg: rgba(104, 56, 202, 0.24);
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon.is-orange {
  --more-theme-color: #ffbd7a;
  --more-theme-bg: rgba(214, 108, 48, 0.22);
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon.is-cyan {
  --more-theme-color: #7de4f2;
  --more-theme-bg: rgba(10, 113, 136, 0.26);
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon.is-red {
  --more-theme-color: #ff9aac;
  --more-theme-bg: rgba(201, 77, 98, 0.22);
}

:is(html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .more-icon.is-yellow {
  --more-theme-color: #ffd36b;
  --more-theme-bg: rgba(224, 155, 40, 0.22);
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(.screen-doctor-more, .bottom-sheet) .more-icon.is-blue {
  background: var(--more-theme-bg, #eef4ff) !important;
  color: var(--more-theme-color, #2468d8) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(.screen-doctor-more, .bottom-sheet) .more-icon.is-green {
  background: var(--more-theme-bg, #eef9f0) !important;
  color: var(--more-theme-color, #2a9a59) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(.screen-doctor-more, .bottom-sheet) .more-icon.is-purple {
  background: var(--more-theme-bg, #f4efff) !important;
  color: var(--more-theme-color, #6838ca) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(.screen-doctor-more, .bottom-sheet) .more-icon.is-orange {
  background: var(--more-theme-bg, #fff3ea) !important;
  color: var(--more-theme-color, #d66c30) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(.screen-doctor-more, .bottom-sheet) .more-icon.is-cyan {
  background: var(--more-theme-bg, #e8f8fc) !important;
  color: var(--more-theme-color, #0a7188) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(.screen-doctor-more, .bottom-sheet) .more-icon.is-red {
  background: var(--more-theme-bg, #fff0f4) !important;
  color: var(--more-theme-color, #c94d62) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) :is(.screen-doctor-more, .bottom-sheet) .more-icon.is-yellow {
  background: var(--more-theme-bg, #fff8e7) !important;
  color: var(--more-theme-color, #d68c18) !important;
}

/* Patient home doctor cards need the same theme contract as the rest of the
   app; the default card blue was otherwise leaking into custom themes. */
:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-card-primary {
  border: 1px solid var(--theme-border-strong) !important;
  background:
    radial-gradient(circle at 74% 18%, color-mix(in srgb, var(--theme-accent) 34%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-accent-soft) 76%, var(--theme-surface)) 0%, color-mix(in srgb, var(--theme-panel-soft) 82%, var(--theme-page)) 100%) !important;
  box-shadow: 0 18px 42px var(--theme-shadow-color) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-card-panel {
  border: 1px solid color-mix(in srgb, var(--theme-border-strong) 74%, transparent) !important;
  background: color-mix(in srgb, var(--theme-surface) 78%, transparent) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent), 0 -14px 34px var(--theme-shadow-color) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-card h2 {
  color: var(--theme-text-strong) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-card p {
  color: var(--theme-muted) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-card .micro-icons span {
  background: color-mix(in srgb, var(--theme-surface-strong) 82%, var(--theme-accent-soft)) !important;
  color: var(--theme-icon) !important;
  border: 1px solid var(--theme-border) !important;
}

:is(html[data-app-theme="apyva"], html[data-app-theme="dark"], html[data-app-theme="apyva-dark"]) .doctor-card .round-action.dark {
  background: var(--theme-primary) !important;
  color: var(--theme-primary-contrast) !important;
}

html[data-app-theme="apyva"] .doctor-card-primary {
  background:
    radial-gradient(circle at 76% 14%, rgba(201, 125, 147, 0.28), transparent 34%),
    linear-gradient(145deg, #f8e9ef 0%, #f3e7ee 48%, #dccfe8 100%) !important;
}

html[data-app-theme="dark"] .doctor-card-primary {
  background:
    radial-gradient(circle at 76% 14%, rgba(118, 182, 199, 0.28), transparent 34%),
    linear-gradient(145deg, #102630 0%, #0b1b23 54%, #123f52 100%) !important;
}

html[data-app-theme="apyva-dark"] .doctor-card-primary {
  background:
    radial-gradient(circle at 76% 14%, rgba(201, 125, 147, 0.28), transparent 34%),
    linear-gradient(145deg, #4a3148 0%, #2a1a29 54%, #160d16 100%) !important;
}

/* Desktop browsers can be shown in narrow side-by-side panes inside Codex or
   Chrome dev tools. Keep doctor workspaces web-shaped on mouse/trackpad devices
   instead of falling back to the compact phone shell too early. */
@media (hover: hover) and (pointer: fine) {
  body.is-authenticated .app-stage {
    padding: clamp(18px, 3vw, 32px);
    place-items: center;
  }

  body.is-authenticated .phone-shell {
    width: min(1180px, calc(100vw - clamp(28px, 5vw, 64px))) !important;
    max-width: none;
    border-radius: 30px;
  }

  .phone-shell:not(.is-doctor-role) :is(
    .screen-home,
    .screen-patient,
    .screen-medical-reports,
    .screen-prescriptions,
    .screen-medical-history,
    .screen-appointments,
    .screen-find,
    .screen-find-results,
    .screen-care-doctor,
    .screen-messages
  ) {
    padding-left: max(24px, calc((100% - 1080px) / 2));
    padding-right: max(24px, calc((100% - 1080px) / 2));
  }

  .phone-shell:not(.is-doctor-role) :is(
    .topbar,
    .featured-grid,
    .find-area,
    .records-hero,
    .records-panel,
    .records-share-card,
    .patient-hero-card,
    .patient-info-card,
    .insurance-card,
    .appointment-card,
    .appointment-empty-card,
    .appointment-schedule-card,
    .message-search,
    .message-filters,
    .message-list-card
  ) {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .phone-shell.is-doctor-role :is(
    .screen-appointments,
    .screen-doctor-calendar,
    .screen-doctor-patients,
    .screen-doctor-patient-detail,
    .screen-doctor-profile,
    .screen-doctor-more,
    .screen-messages
  ) {
    padding-left: max(24px, calc((100% - 1080px) / 2));
    padding-right: max(24px, calc((100% - 1080px) / 2));
  }

  .phone-shell.is-doctor-role :is(
    .doctor-more-header,
    .doctor-more-card,
    .doctor-appointments-top,
    .doctor-appointment-heading,
    .doctor-appointment-stats,
    .doctor-date-strip,
    .doctor-appointment-tabs,
    .doctor-consultation-list,
    .doctor-schedule-banner,
    .doctor-patients-top,
    .doctor-patient-heading,
    .doctor-patient-tabs,
    .doctor-patient-search,
    .doctor-patient-list,
    .doctor-patient-detail-top,
    .doctor-patient-profile-head,
    .doctor-patient-detail-tabs,
    .doctor-patient-vitals,
    .doctor-patient-visit-card,
    .doctor-medical-summary,
    .doctor-recent-activity,
    .doctor-patient-actions,
    .messages-header,
    .message-search,
    .message-filters,
    .message-list-card
  ) {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .phone-shell.is-doctor-role .doctor-appointment-heading,
  .phone-shell.is-doctor-role .doctor-patient-heading,
  .phone-shell.is-doctor-role .doctor-appointments-top,
  .phone-shell.is-doctor-role .doctor-patients-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .phone-shell.is-doctor-role .doctor-appointment-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 18px);
  }

  .phone-shell.is-doctor-role .doctor-appointment-stats article {
    min-height: 96px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .phone-shell.is-doctor-role .doctor-date-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(60px, 1fr));
    gap: 10px;
    overflow: visible;
    margin-inline: auto;
    padding: 12px;
  }

  .phone-shell.is-doctor-role .doctor-date-strip button {
    min-height: 72px;
    border-radius: 16px;
  }

  .phone-shell.is-doctor-role .doctor-appointment-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    margin-inline: auto;
    padding-inline: 0;
  }

  .phone-shell.is-doctor-role .doctor-appointment-tabs button {
    justify-content: center;
  }

  .phone-shell.is-doctor-role .doctor-schedule-banner {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 18px;
  }

  .phone-shell.is-doctor-role .doctor-schedule-banner button {
    grid-column: auto;
    min-width: 150px;
  }
}