:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef2f5;
  --text: #10242c;
  --muted: #5c7079;
  --border: #dce4e8;
  --brand: #0e7490;
  --brand-ink: #ffffff;
  --brand-soft: #e0f2f7;
  --danger: #b42318;
  --danger-soft: #fdeceb;
  --warn: #b7791f;
  --warn-soft: #fdf6e3;
  --radius: 16px;
  --shadow: 0 1px 3px rgba(16,36,44,.08), 0 4px 16px rgba(16,36,44,.06);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --appbar-h: 56px;
  --tabbar-h: 66px;
  /* Global text scale. Every font-size in this file is declared at its original
     value and multiplied by --fs, so the whole app's typography moves together
     from one number and the layout — which is built from paddings, gaps and
     flex/grid tracks, not from text metrics — keeps its proportions.
     --fs-tight is for the few places boxed to a fixed width (the six-up tab
     bar), which get a smaller share of the increase so nothing clips. */
  --fs: 1.12;
  --fs-tight: 1.06;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c161a; --surface: #12232a; --surface-2: #17303a; --text: #e8f0f3;
    --muted: #9fb4bd; --border: #23414d; --brand: #22b8cf; --brand-ink: #04222a;
    --brand-soft: #113842; --danger: #ff6b5e; --danger-soft: #3a1714;
    --warn: #f0c05a; --warn-soft: #33280f; --shadow: 0 1px 3px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
/* Match the page backdrop to the tab-bar surface so the iOS safe-area strip
   ("chin") that can appear/resize when a sheet opens or closes is seamless
   instead of a contrasting band. */
html { background: var(--surface); }
body {
  font-family: -apple-system, "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
  background: var(--bg); color: var(--text);
  /* Body copy that declares no size of its own (article paragraphs, list items,
     care steps) scales from here. */
  font-size: calc(16px * var(--fs));
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  min-height: 100vh; min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
/* When a bottom sheet / fullscreen overlay is open, freeze background scroll so
   the fixed tab bar and safe area don't reflow underneath it. */
body.noscroll { overflow: hidden; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; }

/* App bar */
.appbar {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--appbar-h) + var(--safe-top)); padding-top: var(--safe-top);
  display: flex; align-items: center; gap: 8px; padding-inline: 10px;
  background: var(--brand); color: var(--brand-ink);
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; background: #fff; }
.brand-title { font-weight: 700; font-size: calc(17px * var(--fs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn {
  border: 0; background: rgba(255,255,255,.16); color: var(--brand-ink);
  width: 38px; height: 38px; border-radius: 10px; font-size: calc(20px * var(--fs)); line-height: 1;
  display: grid; place-items: center;
}
.iconbtn.lang { width: auto; padding: 0 12px; font-weight: 700; font-size: calc(14px * var(--fs)); }
#backBtn { font-size: calc(26px * var(--fs)); }

/* Net pill */
.netpill {
  position: sticky; top: calc(var(--appbar-h) + var(--safe-top)); z-index: 20;
  text-align: center; font-size: calc(13px * var(--fs)); padding: 6px 12px;
  background: var(--warn-soft); color: var(--warn);
}
.netpill.ok { background: var(--brand-soft); color: var(--brand); }

/* View */
.view { padding: 14px 14px 26px; max-width: 760px; margin: 0 auto; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-title { font-size: calc(22px * var(--fs)); font-weight: 800; margin: 4px 2px 2px; }
.page-sub { color: var(--muted); margin: 0 2px 14px; font-size: calc(14px * var(--fs)); }

/* Cards & grid */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); display: block;
}
.tile { text-align: start; display: flex; flex-direction: column; gap: 8px; min-height: 104px; color: var(--text); }
.tile .emoji { font-size: calc(26px * var(--fs)); }
.tile .t { font-weight: 700; font-size: calc(15px * var(--fs)); }
.tile .d { color: var(--muted); font-size: calc(12.5px * var(--fs)); }

/* List rows */
.list { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex; align-items: center; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 12px; box-shadow: var(--shadow);
  color: var(--text); width: 100%; text-align: start;
}
.row .thumb { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; background: var(--surface-2); flex: none; }
.row .thumb.ph { display: grid; place-items: center; font-size: calc(24px * var(--fs)); }
.row .thumb.ic { display: grid; place-items: center; background: color-mix(in srgb, var(--tc, var(--brand)) 16%, var(--surface-2)); color: var(--tc, var(--brand)); }
.row .thumb.ic svg { width: 26px; height: 26px; }
.row .rmain { flex: 1; min-width: 0; }
.row .rt { font-weight: 700; font-size: calc(15px * var(--fs)); }
.row .rd { color: var(--muted); font-size: calc(13px * var(--fs)); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row .rcat { display: inline-block; margin-top: 5px; font-size: calc(11px * var(--fs)); font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tc, var(--brand)) 14%, var(--surface-2)); color: var(--tc, var(--brand)); }
.row .chev { color: var(--muted); font-size: calc(22px * var(--fs)); flex: none; }

/* Badges */
.badge { display: inline-block; font-size: calc(11.5px * var(--fs)); font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge.routine { background: var(--brand-soft); color: var(--brand); }
.badge.important { background: var(--warn-soft); color: var(--warn); }
.badge.urgent { background: var(--danger-soft); color: var(--danger); }

/* Gradient color cards (Learn / Tips / Post-op rows) */
.gcard-list { display: flex; flex-direction: column; gap: 12px; }
.gcard {
  position: relative; width: 100%; text-align: start; border: 0; border-radius: var(--radius);
  padding: 16px 16px 54px; color: #fff; box-shadow: var(--shadow); cursor: pointer;
  background: linear-gradient(135deg, var(--c1), var(--c2));
}
.gcard .gc-badge { display: inline-block; font-size: calc(11px * var(--fs)); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.26); margin-bottom: 8px; }
.gcard .gc-title { font-weight: 800; font-size: calc(16px * var(--fs)); margin: 0 0 4px; }
.gcard .gc-desc { font-size: calc(13.5px * var(--fs)); line-height: 1.5; opacity: .96; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gcard .gc-keywords { font-size: calc(12px * var(--fs)); opacity: .9; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard .gc-bottom {
  position: absolute; bottom: 12px; inset-inline-start: 14px; inset-inline-end: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.gcard .gc-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.gcard .gc-chev { color: rgba(255,255,255,.85); font-size: calc(19px * var(--fs)); line-height: 1; width: 24px; text-align: center; }
.gcard .gc-iconbtn {
  width: 32px; height: 32px; border-radius: 999px; background: rgba(255,255,255,.24); color: #fff;
  border: 0; display: grid; place-items: center; flex: none;
}
.gcard .gc-iconbtn svg { width: 16px; height: 16px; }
.gcard .gc-iconbtn.active { background: #fff; color: var(--c1); }
.gcard .gc-tag {
  font-size: calc(11.5px * var(--fs)); padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.22);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%;
}

/* Care List — empty-state "how it works" panel + floating add button */
.care-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.care-step:last-of-type { margin-bottom: 0; }
.care-step-n {
  flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-size: calc(13px * var(--fs)); display: grid; place-items: center; margin-top: 2px;
}
.care-step p { margin: 0; line-height: 1.6; }
.care-fab {
  position: sticky; bottom: 14px; width: 100%; margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Detail */
.hero { width: 100%; border-radius: var(--radius); margin-bottom: 12px; background: var(--surface-2); }
.section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.section h3 { margin: 0 0 8px; font-size: calc(15px * var(--fs)); }
.section ul { margin: 0; padding-inline-start: 20px; }
.section li { margin-bottom: 5px; }
.section p { margin: 0 0 8px; }

/* Disclaimer / warnings */
.notice { border-radius: 14px; padding: 12px 14px; font-size: calc(13px * var(--fs)); margin-bottom: 12px; border: 1px solid transparent; }
.notice.info { background: var(--surface-2); color: var(--muted); }
.notice.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.notice.danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); font-weight: 600; }

/* Buttons */
.btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 12px; padding: 12px 16px; font-size: calc(15px * var(--fs)); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; }
.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-col { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

/* Forms */
label.field { display: block; margin-bottom: 12px; font-size: calc(14px * var(--fs)); font-weight: 600; }
label.field input, label.field textarea, label.field select {
  width: 100%; margin-top: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: calc(15px * var(--fs)); font-family: inherit;
}
textarea { min-height: 84px; resize: vertical; }

/* Tabbar */
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--surface); border-top: 1px solid var(--border);
}
/* Six equal columns share the screen width, so the labels take the smaller
   increase and the bar gained 4px of height (--tabbar-h) to keep them clear of
   the icons. */
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: calc(10px * var(--fs-tight)); text-align: center; padding: 0 1px; line-height: 1.15; }
.tab .tl { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .ti { font-size: calc(20px * var(--fs)); }
.tab.active { color: var(--brand); }

/* Accordion (Clinic QR settings-style rows) */
.acc-list { display: flex; flex-direction: column; gap: 10px; }
.acc-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.acc-item .acc-head { border: 0; box-shadow: none; border-radius: 0; margin: 0; background: transparent; }
.acc-chev { transition: transform .18s ease; }
.acc-item.open .acc-chev { transform: rotate(90deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
/* Ceiling for the open transition, not a layout size. The tallest body (the
   saved QR, with its warning, code, button and caption) measures ~590px at the
   current text scale, so this keeps clear headroom for longer Arabic wrapping
   on narrow screens. */
.acc-item.open .acc-body { max-height: 900px; }
.acc-item .acc-body > * { padding-inline: 16px; }
.acc-item .acc-body > *:first-child { padding-top: 4px; }
.acc-item .acc-body > *:last-child { padding-bottom: 16px; }
.acc-sub { color: var(--muted); font-size: calc(13.5px * var(--fs)); line-height: 1.6; margin: 0 0 12px; }

/* Star rating (Feedback) */
.fb-block { margin-bottom: 16px; }
.fb-label { font-size: calc(14px * var(--fs)); font-weight: 600; margin-bottom: 8px; }
.star-rating { display: flex; gap: 6px; }
.star-rating .star { background: transparent; border: 0; padding: 2px; color: var(--muted); line-height: 0; }
.star-rating .star.on { color: var(--warn); }
.star-rating .star.on svg { fill: currentColor; }
.fb-count { text-align: end; color: var(--muted); font-size: calc(12px * var(--fs)); margin: -8px 0 12px; }

/* Chip row (Feedback topics) */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 9px 16px; font-size: calc(13.5px * var(--fs)); font-weight: 600;
}
.chip.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }

/* Gradient highlight notice (Feedback disclaimer) */
.notice.grad {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #7b3fe4));
  color: #fff; border: 0; font-size: calc(13px * var(--fs)); line-height: 1.6;
  margin-top: 16px;
}

/* Camera / magnifier / scanner */
.camera-wrap { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; display: grid; place-items: center; }
.camera-wrap video, .camera-wrap canvas.freeze { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 18% 14%; border: 3px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
.cam-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.cam-controls .btn { padding: 12px 6px; font-size: calc(13px * var(--fs)); flex-direction: column; }
.zoom-range { width: 100%; margin-top: 12px; accent-color: var(--brand); }

/* QR display */
.qr-box { background: #fff; padding: 18px; border-radius: var(--radius); display: grid; place-items: center; margin: 0 auto; max-width: 320px; box-shadow: var(--shadow); }
.qr-box canvas, .qr-box img { width: 100%; height: auto; image-rendering: pixelated; }

/* Install sheet */
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5); display: grid; align-items: end; }
.sheet[hidden] { display: none; }  /* class selector beats [hidden] otherwise → X couldn't close it */
.sheet-card { background: var(--surface); border-radius: 20px 20px 0 0; padding: 22px 18px calc(22px + var(--safe-bottom)); position: relative; max-width: 620px; margin: 0 auto; width: 100%; }
.sheet-close { position: absolute; inset-inline-end: 14px; top: 12px; border: 0; background: var(--surface-2); width: 34px; height: 34px; border-radius: 50%; font-size: calc(20px * var(--fs)); color: var(--muted); }
.sheet-card h2 { margin: 0 0 6px; font-size: calc(19px * var(--fs)); }
.install-steps { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.install-steps .step { display: flex; gap: 10px; align-items: center; font-size: calc(14px * var(--fs)); }
.install-steps .num { background: var(--brand-soft); color: var(--brand); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; }
.share-ic { font-size: calc(18px * var(--fs)); }
/* "No data is collected" — shown before the user commits to installing. */
.install-privacy {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand);
  font-size: calc(13px * var(--fs)); font-weight: 600; line-height: 1.6;
}

/* Contact sheet (call / whatsapp / map) — capped height with a scrollable list */
.sheet-card.contact-card { padding-top: 10px; max-height: 88vh; display: flex; flex-direction: column; }
.sheet-drag { width: 36px; height: 5px; border-radius: 999px; background: var(--border); margin: 2px auto 14px; flex: none; }
.contact-card h2 { font-size: calc(20px * var(--fs)); font-weight: 800; margin: 0 0 8px; flex: none; }
.contact-card .notice.warn { font-size: calc(13px * var(--fs)); flex: none; }
.contact-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
.contact-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: var(--brand-soft); border-radius: 16px; padding: 12px 14px; color: var(--text);
}
.contact-row .rmain { flex: 1; min-width: 0; }
.contact-row .rt { font-weight: 700; font-size: calc(15px * var(--fs)); }
.contact-row .rd { color: var(--muted); font-size: calc(13.5px * var(--fs)); margin-top: 2px; direction: ltr; text-align: right; }
.contact-row .c-ic {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--surface); color: var(--brand); box-shadow: var(--shadow);
}
.contact-row.maps { background: color-mix(in srgb, #d63384 12%, var(--surface)); }
.contact-row.maps .c-ic { color: #d63384; }

/* Progress */
.progress { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 10px 0; }
.progress > i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }

/* ===== Home (exact-replica) ===== */
.ic { display: inline-block; vertical-align: middle; }
.welcome { font-size: calc(26px * var(--fs)); font-weight: 800; margin: 6px 2px 14px; }

.hero {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border-radius: 22px; margin-bottom: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--surface)), color-mix(in srgb, #a879e0 20%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
}
.hero-logo { width: 92px; height: 92px; border-radius: 20px; background: #fff; padding: 4px; flex: none; box-shadow: var(--shadow); object-fit: contain; }
.hero-txt { flex: 1; min-width: 0; }
.hero-name { font-size: calc(21px * var(--fs)); font-weight: 800; line-height: 1.1; }
.hero-sub { color: var(--muted); font-size: calc(14.5px * var(--fs)); margin-top: 8px; }
.hero-qr { width: 60px; height: 60px; border-radius: 16px; background: var(--surface); display: grid; place-items: center; color: var(--brand); border: 1px solid var(--border); flex: none; }

.qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.qa {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-height: 150px; padding: 16px 12px; border-radius: 18px; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--text); box-shadow: var(--shadow); font: inherit; cursor: pointer;
}
.qa-ic { width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.qa-t { font-size: calc(18px * var(--fs)); font-weight: 800; line-height: 1.15; }

.loc-card, .panel { border-radius: 18px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.loc-card { background: var(--surface); border: 1px solid var(--border); }
.loc-card h3, .panel h3 { margin: 0 0 10px; font-size: calc(17px * var(--fs)); }
.loc-map { width: 100%; border-radius: 14px; margin-bottom: 10px; background: var(--surface-2); }
.loc-card .btn { margin: 8px 0 10px; }
.loc-card .muted { font-size: calc(13px * var(--fs)); }

.panel-social { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), color-mix(in srgb, #7aa5e0 14%, var(--surface))); border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent); }
.panel-social p { margin: 0 0 6px; font-size: calc(14px * var(--fs)); }
.social-row { display: flex; gap: 8px; margin-top: 12px; }
.social-chip { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px; border-radius: 12px; font-weight: 700; font-size: calc(13px * var(--fs)); background: var(--surface); border: 1px solid var(--border); }
.social-chip.web { color: #0d5b8f; } .social-chip.ig { color: #c13584; } .social-chip.fb { color: #1877f2; }

.panel-disc { background: linear-gradient(135deg, #6d7cf0, #9b62c9); color: #fff; font-size: calc(14px * var(--fs)); line-height: 1.7; text-align: center; }
.panel-emergency { background: linear-gradient(135deg, #ff5a6e, #ff8f6b); color: #fff; font-size: calc(14px * var(--fs)); line-height: 1.7; text-align: center; font-weight: 600; }

/* Floating contact button */
.contact-fab {
  position: fixed; inset-inline-start: 14px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px); z-index: 40;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 0; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: calc(14px * var(--fs)); box-shadow: var(--shadow);
}

/* Tabbar SVG icons */
.tab .ti { display: grid; place-items: center; height: 24px; }
.tab .ti .ic { color: inherit; }

/* ===== About tab ===== */
.ab-hero { border-radius: 22px; padding: 20px; margin-bottom: 14px; color: #fff;
  background: linear-gradient(135deg, #1565C0, #42A5F5); box-shadow: var(--shadow); }
.ab-hero-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ab-logo { width: 84px; height: 84px; border-radius: 20px; background: #fff; padding: 5px; flex: none; object-fit: contain; }
.ab-name { font-size: calc(21px * var(--fs)); font-weight: 800; line-height: 1.15; }
.ab-tag { display: inline-block; margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: calc(13px * var(--fs)); }
.ab-welcome { font-size: calc(15px * var(--fs)); line-height: 1.7; margin: 0 0 14px; }
.ab-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: calc(13px * var(--fs)); font-weight: 700; }

.ab-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.info-tile { border-radius: 18px; padding: 16px; box-shadow: var(--shadow); border: 1px solid var(--border); }
.info-tile .it-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; }
.info-tile h3 { margin: 0 0 6px; font-size: calc(15px * var(--fs)); }
.info-tile p { margin: 0; font-size: calc(13.5px * var(--fs)); color: var(--muted); line-height: 1.6; }
.info-tile.philosophy { background: color-mix(in srgb, #d63384 12%, var(--surface)); }
.info-tile.philosophy .it-ic { background: color-mix(in srgb, #d63384 18%, transparent); color: #d63384; }
.info-tile.philosophy h3 { color: #b02a6f; }
.info-tile.mission { background: color-mix(in srgb, #e67700 12%, var(--surface)); }
.info-tile.mission .it-ic { background: color-mix(in srgb, #e67700 18%, transparent); color: #e67700; }
.info-tile.mission h3 { color: #c05600; }

.ab-section { font-size: calc(18px * var(--fs)); font-weight: 800; margin: 18px 2px 10px; }
.ab-section-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 2px 10px; }

.vbtn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.vbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border-radius: 14px; font-weight: 700; font-size: calc(14px * var(--fs)); color: #fff; border: 0; }
.vbtn.call { background: linear-gradient(135deg, #1565C0, #1e88e5); }
.vbtn.call2 { background: linear-gradient(135deg, #00695C, #26A69A); }
.vbtn.wa { background: linear-gradient(135deg, #1faa59, #25D366); }
.vbtn.share { background: linear-gradient(135deg, #6A1B9A, #AB47BC); }
.vbtn.loc { background: linear-gradient(135deg, #E65100, #FB8C00); }

/* Doctor contact card */
.dc-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); margin-bottom: 10px; }
.dc-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.dc-main { flex: 1; min-width: 0; }
.dc-name { font-weight: 800; font-size: calc(16px * var(--fs)); }
.dc-phone { display: inline-block; font-weight: 700; font-size: calc(15px * var(--fs)); margin: 2px 0; }
.dc-note { color: var(--muted); font-size: calc(12.5px * var(--fs)); }
.dc-actions { display: flex; gap: 8px; flex: none; }
.iconbtn2 { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--brand); }

/* Service cards */
.svc-list { display: flex; flex-direction: column; gap: 12px; }
.svc-card { text-align: start; border: 0; border-radius: 18px; padding: 18px; color: #fff; box-shadow: var(--shadow);
  background: linear-gradient(135deg, var(--c1), var(--c2)); display: block; width: 100%; }
.svc-top { display: flex; align-items: flex-start; gap: 8px; }
.svc-title { flex: 1; font-size: calc(18px * var(--fs)); font-weight: 800; line-height: 1.3; }
.svc-chev { opacity: .85; }
.svc-exp { margin: 10px 0 12px; font-size: calc(14px * var(--fs)); line-height: 1.6; opacity: .95; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-tag { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: calc(12.5px * var(--fs)); font-weight: 600; }
.svc-tag.more { background: rgba(255,255,255,.32); }

/* Doctor profile card */
.dp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 14px; }
.dp-hero { padding: 18px; color: #fff; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.dp-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; flex: none; }
.dp-htxt { flex: 1; min-width: 0; }
.dp-name { font-size: calc(20px * var(--fs)); font-weight: 800; }
.dp-title { font-size: calc(13.5px * var(--fs)); opacity: .95; margin: 4px 0; line-height: 1.4; }
.dp-phone { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; background: rgba(255,255,255,.2); padding: 5px 12px; border-radius: 999px; font-size: calc(13px * var(--fs)); }
.dp-actions { display: flex; gap: 10px; padding: 12px 14px; }
.dp-actions .btn { width: auto; flex: 1; }
.btn.wa { background: #25D366; color: #063; border-color: #25D366; }
.dp-body { padding: 4px 14px 14px; }
.pr-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.pr-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--brand); display: grid; place-items: center; flex: none; }
.pr-body { flex: 1; min-width: 0; }
.pr-body h4 { margin: 0 0 4px; font-size: calc(14px * var(--fs)); color: var(--brand); }
.pr-body p { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.6; }
.pr-body ul { margin: 0; padding-inline-start: 18px; font-size: calc(13.5px * var(--fs)); line-height: 1.6; }

/* Bottom sheet (service / privacy detail) */
.sheet-card.tall { max-height: 92vh; padding: 0; overflow: hidden; }
.sheet-card.tall .sheet-close { z-index: 2; background: rgba(0,0,0,.15); color: #fff; }
.sheet-scroll { max-height: 92vh; overflow-y: auto; }
.svc-sheet-head { padding: 26px 18px 16px; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.svc-sheet-head h2 { margin: 0 0 8px; font-size: calc(20px * var(--fs)); }
.svc-sheet-head p { margin: 0; font-size: calc(14px * var(--fs)); line-height: 1.6; opacity: .95; }
.ss-contact { margin: 14px 0 8px; font-size: calc(13px * var(--fs)); opacity: .9; }
.svc-sheet-head .dp-actions { padding: 0; }
.svc-sheet-head .btn.primary { background: rgba(255,255,255,.95); color: var(--text); border: 0; }
.ss-body { padding: 16px 18px calc(24px + var(--safe-bottom)); }
.ss-info { margin-bottom: 14px; }
.ss-info h4 { margin: 0 0 5px; font-size: calc(14px * var(--fs)); color: var(--brand); }
.ss-info p { margin: 0; font-size: calc(13.5px * var(--fs)); line-height: 1.6; color: var(--muted); }
.ss-proc-h { font-size: calc(16px * var(--fs)); margin: 6px 0 12px; }
.proc { display: flex; gap: 12px; margin-bottom: 14px; }
.proc-n { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: calc(13px * var(--fs)); flex: none; }
.proc h4 { margin: 0 0 3px; font-size: calc(14.5px * var(--fs)); }
.proc p { margin: 0; font-size: calc(13px * var(--fs)); line-height: 1.55; color: var(--muted); }

/* ===== Launch / splash screen (identical to the native app) ===== */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: #ffffff; transition: opacity .35s ease;
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash-img { width: 100%; height: 100%; object-fit: contain; }

/* ===== Offline download banner (full-content precache progress) ===== */
.dl-banner {
  position: sticky; top: calc(var(--appbar-h) + var(--safe-top)); z-index: 25;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 10px 14px; box-shadow: var(--shadow);
}
.dl-banner[hidden] { display: none; }
.dl-head { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--brand); }
.dl-head .ic { flex: none; }
.dl-pct { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.dl-banner .progress { margin: 8px 0 0; }
.dl-banner.done .dl-head { color: var(--brand); }
/* Repeated during the offline download itself, not only at the install prompt. */
.dl-note { margin-top: 7px; font-size: calc(12px * var(--fs)); line-height: 1.55; color: var(--muted); }
.dl-note:empty { display: none; }

/* ===== Fullscreen bright QR presentation (show to clinic staff) =====
   Maximum-luminance surface: every pixel that is not the QR itself is pure
   white, and `color-scheme: light` pins it there even when the device is in
   dark mode (which would otherwise darken form controls and the scrollbar
   gutter, and on OLED costs real emitted light). Nothing here may introduce a
   tint, a shadow, or a gray — that is all light the scanner does not get. */
.qr-present {
  position: fixed; inset: 0; z-index: 150; background: #fff;
  color-scheme: light; forced-color-adjust: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: calc(18px + var(--safe-top)) 12px calc(18px + var(--safe-bottom));
  color: #0b0b0b;
}
.qr-present[hidden] { display: none; }
/* No card, no shadow, no radius — the quiet zone around the code is white page,
   so the bright area runs edge to edge instead of stopping at a card border. */
.qp-code { width: min(94vw, 74vh, 560px); background: #fff; }
.qp-code img { width: 100%; height: auto; image-rendering: pixelated; display: block; }
.qp-label { font-weight: 800; font-size: calc(17px * var(--fs)); text-align: center; }
.qp-hint { font-size: calc(13.5px * var(--fs)); color: #444; text-align: center; max-width: 340px; line-height: 1.6; }
.qp-close {
  position: absolute; top: calc(12px + var(--safe-top)); inset-inline-end: 16px;
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: #f4f6f7; color: #444;
  display: grid; place-items: center;
}
.qp-close svg { width: 24px; height: 24px; }

/* Saved clinic QR shown inside the home hero banner */
.hero-qr img { width: 100%; height: 100%; border-radius: 12px; image-rendering: pixelated; background: #fff; }
.hero-qr.has-code { padding: 5px; background: #fff; }

/* ===== Imaging report images ===== */
.rep-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.rep-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.rep-text { white-space: pre-wrap; line-height: 1.7; font-size: calc(14px * var(--fs)); margin-top: 6px; }
.img-viewer { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 16px; }
.img-viewer[hidden] { display: none; }
.img-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.img-viewer .qp-close { background: rgba(255,255,255,.15); color: #fff; }

.muted { color: var(--muted); }
.center { text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 13px; font-size: calc(13px * var(--fs)); color: var(--text); }
.chip.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.filter-row { display: flex; gap: 10px; margin: 10px 0; }
.filter-row select.chip { flex: 1; padding: 10px 13px; }

.safety-card { background: var(--surface-2); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.safety-card .sc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.safety-card .sc-head .ic { color: var(--brand); flex: none; }
.safety-card .sc-head h2 { margin: 0; font-size: calc(19px * var(--fs)); }
.safety-card .sc-msg { color: var(--muted); font-size: calc(15px * var(--fs)); line-height: 1.6; margin: 0; }
.safety-card .sc-section { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.safety-card .sc-section h3 { margin: 0 0 8px; font-size: calc(15px * var(--fs)); color: var(--brand); }
.safety-card .sc-section ul { margin: 0; padding-inline-start: 18px; color: var(--muted); font-size: calc(14px * var(--fs)); line-height: 1.6; }
.safety-card .sc-section li { margin-bottom: 5px; }
.spacer { height: 8px; }
.hidden { display: none !important; }