/* VisitCard theme v5: light sky-blue, colourful buttons, light and dark. CSS only, no images. */
:root {
  --bg: #eaf4ff; --glow-a: #c4e3ff; --glow-b: #d9f2ff; --card: #ffffff; --fg: #0f2744; --muted: #5a7089; --line: #d4e5f7;
  --brand: #1a76dc; --brand-2: #1558c9; --brand-soft: #e0efff; --brand-text: #1558c9; --brand-line: #b9d6f6;
  --green: #0a8250; --green-2: #0e9f6e; --green-soft: #dcf7e8; --green-text: #0a7447;
  --blue: #2563eb; --blue-soft: #dbeafe; --violet: #5a3ee6; --violet-2: #7a5cf5; --violet-soft: #ece8ff;
  --teal: #0e7490; --teal-2: #0b8aae; --teal-soft: #d8f3fa;
  --orange: #c2410c; --orange-2: #e0560f; --orange-soft: #ffe9d9;
  --amber: #a15407; --amber-soft: #fef1c9; --coral: #d94632; --coral-soft: #ffe4de; --red: #c2261b; --red-soft: #fee4e2;
  --shadow: 0 1px 2px rgba(15,39,68,.05), 0 10px 28px rgba(26,118,220,.10);
  --wa: #25d366; --wa-fg: #05301a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1625; --glow-a: #123861; --glow-b: #0e2d4a; --card: #14233a; --fg: #e6eefb; --muted: #93a9c6; --line: #223a58;
    --brand: #4d9bff; --brand-2: #2f7fe8; --brand-soft: #14305a; --brand-text: #8fc2ff; --brand-line: #2a4b78;
    --green: #34d399; --green-2: #22c58b; --green-soft: #0f3a2e; --green-text: #5eead4;
    --blue: #7aa7ff; --blue-soft: #17294d; --violet: #a893ff; --violet-2: #8f76ff; --violet-soft: #271f52;
    --teal: #3cc3e6; --teal-2: #29b0d6; --teal-soft: #0e3442;
    --orange: #ff9a5c; --orange-2: #ff8340; --orange-soft: #442612;
    --amber: #fbbf24; --amber-soft: #3a2e0f; --coral: #ff8a70; --coral-soft: #44211b; --red: #ff8b82; --red-soft: #451b18;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--fg); min-height: 100vh;
  background:
    radial-gradient(900px 420px at 88% -8%, var(--glow-a) 0, transparent 62%),
    radial-gradient(760px 380px at -4% 0, var(--glow-b) 0, transparent 58%),
    var(--bg);
  background-attachment: fixed;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
main { max-width: 900px; margin: 0 auto; padding: 20px 16px 48px; }
body.narrow main { max-width: 460px; margin-top: 28px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 28px 24px; box-shadow: var(--shadow); }
body.card main { max-width: 520px; }
h1 { font-size: 1.65rem; line-height: 1.2; margin: .3em 0 .4em; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .7em; }
a { color: var(--brand-text); font-weight: 500; }
.muted { color: var(--muted); font-size: .9rem; }
body.narrow h1::before { content: "🩺 "; }

/* top bar */
.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 10px 18px; background: color-mix(in srgb, var(--card) 84%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); box-shadow: 0 6px 20px rgba(26,118,220,.07); }
.top nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.top nav a, .top nav button.link { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--fg); font-weight: 600; font-size: .92rem; }
.top nav a:hover, .top nav button.link:hover { background: var(--brand-soft); color: var(--brand-text); }
.top nav a[href="/"]::before { content: "📊 "; }
.top nav a[href="/visits/new"]::before { content: "➕ "; }
.top nav a[href="/patients"]::before { content: "👥 "; }
.top nav a[href="/settings"]::before { content: "⚙️ "; }
.brand { font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: -.01em;
  background: linear-gradient(90deg, var(--brand-2), var(--violet-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand::before { content: "🩺 "; -webkit-text-fill-color: initial; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; color: #fff; border-radius: 24px; padding: 20px 22px; margin-bottom: 6px;
  background: linear-gradient(120deg, #1558c9 0%, #1a76dc 55%, #5b7cf5 100%); box-shadow: 0 14px 34px rgba(26,118,220,.28); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -40px; top: -50px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.12); }
.hero h1 { color: #fff; margin: .1em 0 0; font-size: 1.55rem; }
.hero-sub { color: rgba(255,255,255,.88); font-size: .9rem; font-weight: 600; }
.hero > * { position: relative; z-index: 1; }

/* boxes */
.box { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; margin: 14px 0; box-shadow: var(--shadow); }
.box.attention { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.box.info { background: var(--brand-soft); border-color: var(--brand-line); }
.box.ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 35%, transparent); font-weight: 600; }
.box h2 { display: flex; align-items: center; gap: 8px; }
.box h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--violet-2)); flex: none; }
.box h2.has-icon::before { display: none; }
.error { color: var(--red); font-size: .9rem; margin: .25em 0 0; font-weight: 500; }
.error.box { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 35%, transparent); }

/* forms */
.stack { display: grid; gap: 14px; }
.row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
label { display: grid; gap: 5px; font-size: .9rem; font-weight: 600; }
input, select, textarea, button, .button {
  font: inherit; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
input.short { width: 7.5em; } input.days { width: 4.8em; }

/* buttons: soft blue by default, one colour per meaning */
button, .button { cursor: pointer; text-decoration: none; display: inline-block; text-align: center; font-weight: 700; transition: transform .08s, box-shadow .15s, filter .15s;
  background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-line); }
button:hover, .button:hover { border-color: var(--brand); filter: brightness(.98); }
button:active, .button:active { transform: translateY(1px); }
button:focus-visible, .button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
button.primary, .button.primary, button.green, .button.green, button.violet, .button.violet, button.orange, .button.orange, button.teal, .button.teal, button.danger, .button.wa {
  color: #fff; border-color: transparent; font-weight: 700;
}
button.primary, .button.primary { background: linear-gradient(135deg, var(--brand-2), var(--brand)); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 38%, transparent); }
button.green, .button.green { background: linear-gradient(135deg, var(--green), var(--green-2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--green) 35%, transparent); }
button.violet, .button.violet { background: linear-gradient(135deg, var(--violet), var(--violet-2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--violet) 35%, transparent); }
button.orange, .button.orange { background: linear-gradient(135deg, var(--orange), var(--orange-2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--orange) 38%, transparent); }
button.teal, .button.teal { background: linear-gradient(135deg, var(--teal), var(--teal-2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--teal) 35%, transparent); }
button.primary:hover, .button.primary:hover, button.green:hover, .button.green:hover, button.violet:hover, .button.violet:hover,
button.orange:hover, .button.orange:hover, button.teal:hover, .button.teal:hover { filter: brightness(1.07); border-color: transparent; }
@media (prefers-color-scheme: dark) {
  button.green, .button.green, button.orange, .button.orange, button.teal, .button.teal, button.violet, .button.violet { color: #07131f; }
}
.button.white { background: #fff; color: #1558c9; border-color: transparent; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.button.wa { background: var(--wa); color: var(--wa-fg); box-shadow: 0 6px 16px rgba(37,211,102,.32); }
.button.wa::before { content: "💬 "; }
.big { padding: 15px 18px; font-size: 1.05rem; width: 100%; border-radius: 14px; }
button.link { border: 0; background: none; padding: 6px 12px; box-shadow: none; color: var(--fg); }
form.inline { display: inline; }
fieldset { border: 1.5px dashed var(--brand-line); border-radius: 18px; padding: 14px; }
legend { font-weight: 700; padding: 0 6px; }
.med { display: grid; grid-template-columns: 2fr 1.2fr .8fr 1.1fr .6fr auto; gap: 8px; margin-bottom: 8px; padding: 10px; background: color-mix(in srgb, var(--brand-soft) 60%, var(--card)); border-radius: 14px; }
.med input, .med select { padding: 9px 10px; }
@media (max-width: 700px) { .med { grid-template-columns: 1fr 1fr; } .med input:first-child { grid-column: 1 / -1; } }
.rm-med { color: var(--coral); font-size: 1.2rem; line-height: 1; padding: 6px 12px; background: var(--card); border-color: var(--line); }
#add-med { border-style: dashed; }

/* dashboard tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.tile { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 16px 14px; box-shadow: var(--shadow); overflow: hidden; --c: var(--blue); --cs: var(--blue-soft); }
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--c); }
.tile::after { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 12px; background: var(--cs); display: grid; place-items: center; font-size: 1.1rem; }
.tile:nth-child(1) { --c: var(--blue); --cs: var(--blue-soft); } .tile:nth-child(1)::after { content: "📋"; }
.tile:nth-child(2) { --c: var(--amber); --cs: var(--amber-soft); } .tile:nth-child(2)::after { content: "⚡"; }
.tile:nth-child(3) { --c: var(--violet); --cs: var(--violet-soft); } .tile:nth-child(3)::after { content: "👀"; }
.tile:nth-child(4) { --c: var(--green); --cs: var(--green-soft); } .tile:nth-child(4)::after { content: "✅"; }
.tile:nth-child(5) { --c: var(--coral); --cs: var(--coral-soft); } .tile:nth-child(5)::after { content: "🔁"; }
.tile:nth-child(6) { --c: var(--teal); --cs: var(--teal-soft); } .tile:nth-child(6)::after { content: "😊"; }
.tile:nth-child(7) { --c: var(--orange); --cs: var(--orange-soft); } .tile:nth-child(7)::after { content: "🧪"; }
.tile.warn { --c: var(--red); --cs: var(--red-soft); background: color-mix(in srgb, var(--red-soft) 40%, var(--card)); }
.tile-label { color: var(--muted); font-size: .82rem; font-weight: 600; padding-right: 42px; }
.tile-value { font-size: 2.1rem; font-weight: 800; line-height: 1.15; color: var(--c); margin: 2px 0; letter-spacing: -.02em; }
.tile-sub { color: var(--muted); font-size: .8rem; }

/* lists */
.item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.item:first-of-type { border-top: 0; }
.actions { display: flex; gap: 8px; }
.badge { font-size: .78rem; padding: 3px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-weight: 700; display: inline-block; }
.badge.ok { background: var(--green-soft); color: var(--green-text); }
.badge.lab { background: var(--orange-soft); color: var(--orange); }
.badge.blue { background: var(--brand-soft); color: var(--brand-text); }
.linkrow { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .linkrow input { flex: 1; min-width: 12em; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: start; padding: 9px 8px; border-top: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; border-top: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 55%, transparent); }
.pre { white-space: pre-wrap; }

/* patient card */
.cardhead {
  text-align: center; padding: 26px 18px 22px; margin-bottom: 4px; color: #fff; border-radius: 26px; box-shadow: 0 14px 34px rgba(26,118,220,.28);
  background: linear-gradient(135deg, #1558c9 0%, #1a76dc 55%, #5b7cf5 100%); position: relative; overflow: hidden;
}
.cardhead::after { content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.12); }
.cardhead > * { position: relative; z-index: 1; }
.cardhead .muted { color: rgba(255,255,255,.9); } .cardhead h1 { margin: .15em 0; color: #fff; font-size: 1.7rem; }
.cardhead::before { content: "🩺"; display: block; font-size: 2rem; position: relative; z-index: 1; }
.cardbox { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px; margin: 14px 0; box-shadow: var(--shadow); }
.cardbox h2 { color: var(--brand-text); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
body.card[dir="rtl"], html[dir="rtl"] body.card { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", system-ui, sans-serif; line-height: 2; }
.medcard { padding: 12px 0; border-top: 1px solid var(--line); } .medcard:first-of-type { border-top: 0; padding-top: 2px; }
.med-name { font-weight: 700; font-size: 1.08rem; } .med-name .muted { font-weight: 600; }
.med-detail { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { border-radius: 999px; padding: 3px 12px; font-size: .88rem; font-weight: 600; background: var(--blue-soft); color: var(--blue); }
.chip.food { background: var(--amber-soft); color: var(--amber); }
.chip.days, .chip.until { background: var(--violet-soft); color: var(--violet); }
.chip.sos { background: var(--coral-soft); color: var(--coral); }
.cardbox.next { background: linear-gradient(180deg, var(--brand-soft), var(--card) 75%); border-color: var(--brand-line); text-align: center; }
.bigdate { font-size: 2rem; font-weight: 800; margin: 2px 0 12px; color: var(--brand-text); letter-spacing: -.01em; }
.notice { background: var(--amber-soft); color: var(--amber); border-radius: 14px; padding: 12px; text-align: center; font-weight: 600; }
.notice.ok { background: var(--green-soft); color: var(--green-text); }
.notice.info { background: var(--brand-soft); color: var(--brand-text); }
details { margin-top: 14px; text-align: start; } summary { cursor: pointer; color: var(--brand-text); font-weight: 600; }
.footer { color: var(--muted); font-size: .85rem; text-align: center; }

/* layout safety: grid children and form controls must be allowed to shrink (prevents sideways overflow) */
.stack > *, .grid2 > *, .row > *, .med > *, label, fieldset { min-width: 0; }
label input:not([type="checkbox"]), label select, label textarea { width: 100%; }
input.short { width: 7.5em; } .med input.days { width: 100%; }
.med input, .med select { width: 100%; }
textarea { resize: vertical; }

/* quick buttons, dose ticks, feeling buttons, cancelled/danger states */
.quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: -4px; }
.quick button { padding: 6px 12px; font-size: .86rem; border-radius: 999px; border-style: dashed; }
.actions.wrap { flex-wrap: wrap; margin: 14px 0; }
button.danger { background: var(--red); color: #fff; }
details.cancel { margin: 18px 0; } details.cancel summary { color: var(--red); }
.center { text-align: center; }
.chip.dose { border: 0; font: inherit; font-size: .88rem; font-weight: 700; padding: 6px 14px; min-height: 36px; cursor: pointer; background: var(--blue-soft); color: var(--blue); }
.chip.dose.done { background: var(--green); color: #fff; }
.chip.dose.done::before { content: "✓ "; }
.feel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.feel button { padding: 12px 6px; border-radius: 14px; font-weight: 700; border-color: transparent; }
.feel-better { background: var(--green-soft); color: var(--green-text); }
.feel-same { background: var(--amber-soft); color: var(--amber); }
.feel-worse { background: var(--coral-soft); color: var(--coral); }
.notice + .notice, .cardbox + .notice { margin-top: 14px; }

/* v3: install box, plain list */
.install[hidden], .install [hidden] { display: none; }
.install p { margin: .4rem 0; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .55rem 0; border-top: 1px solid var(--line); }
ul.plain li:first-child { border-top: 0; }

/* v5: tests advised and report upload (patient card) */
.cardbox.tests { background: linear-gradient(180deg, var(--teal-soft), var(--card) 60%); border-color: color-mix(in srgb, var(--teal) 28%, transparent); }
.cardbox.upload { background: linear-gradient(180deg, var(--orange-soft), var(--card) 65%); border-color: color-mix(in srgb, var(--orange) 28%, transparent); }
.cardbox.tests h2 { color: var(--teal); } .cardbox.upload h2 { color: var(--orange); }
.steps { list-style: none; display: flex; gap: 6px; margin: 4px 0 14px; padding: 0; }
.steps li { flex: 1; text-align: center; font-size: .78rem; font-weight: 700; color: var(--muted); position: relative; line-height: 1.3; }
.steps li span { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 4px; border-radius: 50%; border: 2px solid var(--brand-line); background: var(--card); font-size: .9rem; position: relative; z-index: 1; }
.steps li::before { content: ""; position: absolute; top: 15px; inset-inline-start: -50%; width: 100%; height: 3px; background: var(--brand-line); }
.steps li:first-child::before { display: none; }
.steps li.done { color: var(--green-text); }
.steps li.done span { background: var(--green); border-color: var(--green); color: #fff; }
.steps li.done::before { background: var(--green); }
.testlist { list-style: none; margin: 0; padding: 0; }
.testlist li { padding: 10px 0; border-top: 1px solid var(--line); }
.testlist li:first-child { border-top: 0; }
.tname { font-weight: 700; display: block; }
.prep { display: block; margin-top: 5px; padding: 7px 11px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: .86rem; font-weight: 600; }
.prep::before { content: "ℹ️ "; }
.sr-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
label.upload-btn { display: block; cursor: pointer; margin-top: 10px; padding: 16px 18px; border-radius: 16px; font-size: 1.08rem; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-2)); box-shadow: 0 8px 20px color-mix(in srgb, var(--orange) 40%, transparent); border: 0; }
@media (prefers-color-scheme: dark) { label.upload-btn { color: #07131f; } }
label.upload-btn:hover { filter: brightness(1.06); }
.sr-file:focus-visible + label.upload-btn { outline: 3px solid color-mix(in srgb, var(--orange) 55%, transparent); outline-offset: 3px; }
[data-upload].busy label.upload-btn { opacity: .6; pointer-events: none; }
.upload-status { min-height: 1.4em; margin: 10px 0 0; text-align: center; font-weight: 600; }
.upload-status.err { color: var(--red); }
.spin { display: inline-block; width: 1em; height: 1em; border: 3px solid color-mix(in srgb, var(--orange) 30%, transparent); border-top-color: var(--orange); border-radius: 50%; vertical-align: -.15em; margin-inline-end: .4em; animation: spin .8s linear infinite; }
.files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.files li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.files .thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--brand-soft); display: grid; place-items: center; font-size: 1.5rem; flex: none; }
.files .fmeta { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; }
.files form button { padding: 6px 12px; font-size: .82rem; color: var(--red); background: var(--red-soft); border-color: transparent; }

/* v5: test picker (doctor form) */
.tests-picker legend { display: flex; gap: 6px; align-items: baseline; }
.bundles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.bundles button { padding: 7px 13px; border-radius: 999px; font-size: .88rem; border-color: transparent; --bc: var(--brand-text); --bs: var(--brand-soft); background: var(--bs); color: var(--bc); }
.bundles button:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--bc) 30%, transparent); border-color: transparent; }
.b-fever { --bc: var(--orange); --bs: var(--orange-soft); } .b-diabetes { --bc: var(--violet); --bs: var(--violet-soft); }
.b-heart { --bc: var(--coral); --bs: var(--coral-soft); } .b-liver { --bc: var(--green-text); --bs: var(--green-soft); }
.b-anaemia { --bc: var(--red); --bs: var(--red-soft); } .b-thyroid { --bc: var(--teal); --bs: var(--teal-soft); }
.b-uti { --bc: var(--blue); --bs: var(--blue-soft); } .b-stomach { --bc: var(--amber); --bs: var(--amber-soft); }
.bundles .clear { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }
.tgroup { margin-top: 12px; } .tgroup h3 { font-size: .85rem; margin: 0 0 6px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
label.tchip { display: inline-block; position: relative; font-size: .88rem; }
label.tchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.tchip span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-weight: 600; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
label.tchip:hover span { border-color: var(--brand); }
label.tchip input:checked + span { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border-color: transparent; }
label.tchip input:checked + span::before { content: "✓ "; }
label.tchip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; }
.count { display: inline-block; min-width: 1.6em; padding: 0 7px; border-radius: 999px; background: var(--brand); color: #fff; text-align: center; font-size: .8rem; }

/* visit page: tests and reports (doctor) */
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.tag { padding: 3px 11px; border-radius: 999px; background: var(--teal-soft); color: var(--teal); font-weight: 700; font-size: .84rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cardbox, .box, .tile { animation: rise .35s ease both; }
@media (prefers-reduced-motion: reduce) { .cardbox, .box, .tile, .spin { animation: none; } button, .button { transition: none; } }

.printonly { display: none; }
@media print {
  @page { size: A4; margin: 10mm; }
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html { font-size: 14px; }
  html[lang="ur"] { font-size: 13px; }
  body { background: #fff; color: #000; line-height: 1.3; }
  main, body.card main { max-width: none; padding: 0; }
  .noprint, .top, details, .feel, .button, button, .upload, .hero::after, .footer, .steps { display: none !important; }
  .printonly { display: block; }
  /* the Morning / Noon / Night chips are buttons on screen: they must still print, they are the timing of each medicine */
  button.chip.dose { display: inline-block !important; background: #fff; color: #000; border: 1.5px solid #000; min-height: 0; padding: 2px 10px; }
  .chip, .tag { background: #fff !important; color: #000 !important; border: 1px solid #777; }
  .cardbox, .cardhead { box-shadow: none; break-inside: avoid; animation: none; margin: 0 0 7px; padding: 8px 12px; background: none !important; }
  .cardhead { color: #000; border: 1px solid #999; }
  .cardhead h1, .cardhead .muted { color: #000; } .cardhead h1 { font-size: 1.35rem; }
  .cardhead::after, .cardhead::before { display: none; }
  .cardhead > .muted:first-child { display: none; } .cardhead { padding: 6px 12px; } .cardbox.next .bigdate { margin: 0; line-height: 1.2; }
  .cardbox h2 { margin: 0 0 .3em; } .cardbox p, .cardhead > * { margin-top: .25em; margin-bottom: .25em; } .cardbox > :last-child { margin-bottom: 0; } .notice { margin: 6px 0; padding: 6px 10px; }
  .medcard { padding: 6px 0; }
  .cardbox.tests { border: 1.5px solid #000; }
  .testlist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 6px 0; }
  .testlist li::before { content: ""; display: inline-block; width: 11px; height: 11px; border: 1.5px solid #000; flex: none; }
  .testlist .tname { flex: 1; } .testlist .prep { flex-basis: 100%; margin-inline-start: 19px; background: none; border: 1px solid #999; color: #000; }
  .testlist .prep::before { content: ""; }
  .rstatus { font-weight: 700; margin: 8px 0 0; }
  .bigdate { font-size: 1.5rem; }
  /* VisitCard branding on every printed card: header band, page watermark and a footer line for doctors */
  .printonly.printbrand { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 3px solid #1a76dc; }
  .printbrand img { width: 40px; height: 40px; border-radius: 10px; }
  .pb-name { font-size: 1.5rem; font-weight: 800; color: #1558c9; letter-spacing: -.01em; }
  .pb-tag { margin-inline-start: auto; font-size: .85rem; font-weight: 600; color: #43556d; }
  .printfoot { margin-top: 10px; padding: 8px 12px; border: 1.5px solid #1a76dc; border-radius: 10px; font-size: .82rem; line-height: 1.5; text-align: center; break-inside: avoid; }
  .printfoot strong { color: #1558c9; }
  body::before { content: "VisitCard"; position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); font-size: 120px; font-weight: 800; letter-spacing: .04em; color: rgba(26, 118, 220, .09); white-space: nowrap; z-index: -1; pointer-events: none; }
}

/* ---------- labs and pharmacies (v7) ---------- */
body.wide main { max-width: 980px; }
.joingrid { align-items: stretch; }
.joincard { display: flex; flex-direction: column; gap: 6px; }
.joincard.j-lab { background: linear-gradient(180deg, var(--violet-soft), var(--card) 70%); border-color: color-mix(in srgb, var(--violet) 28%, transparent); }
.joincard.j-rx { background: linear-gradient(180deg, var(--orange-soft), var(--card) 70%); border-color: color-mix(in srgb, var(--orange) 28%, transparent); }
.joincard .button { margin-top: auto; text-align: center; }
.pitch { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.pitch li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.pitch li span { font-size: 1.3rem; line-height: 1.2; }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.button.big, button.big { padding: 14px 22px; font-size: 1.05rem; }
.button.sm, button.sm { padding: 6px 12px; font-size: .85rem; min-height: 0; }
.check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { margin-top: 4px; width: auto; flex: none; }
.radio { display: flex !important; gap: 10px; align-items: center; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); font-weight: 600; }
.radio:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.radio input { width: auto; flex: none; }

/* desk */
.desk .tiles.three { grid-template-columns: repeat(3, 1fr); }
.desk .tile:nth-child(1)::after { content: "🔔"; } .desk .tile:nth-child(2)::after { content: "⏳"; } .desk .tile:nth-child(3)::after { content: "✅"; }
@media (max-width: 520px) { .desk .tiles.three { gap: 8px; } .desk .tile { padding: 12px 10px; } .desk .tile::after { display: none; } .desk .tile-label { padding-right: 0; } }
.sect { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 1.1rem; }
.order { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--brand); border-radius: 18px; padding: 14px 16px; margin: 12px 0; box-shadow: var(--shadow); }
.order.sent { border-left-color: var(--orange-2); background: linear-gradient(90deg, var(--orange-soft), var(--card) 40%); }
.order.reported, .order.done, .order.ready, .order.available { border-left-color: var(--green-2); }
.order.cancelled, .order.declined { border-left-color: var(--line); opacity: .8; }
.ohead { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.contact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.addr { margin: 8px 0 0; font-weight: 600; }
.otests, .omeds { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.otests li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--teal-soft); font-weight: 600; }
.omeds li { padding: 8px 12px; border-radius: 12px; background: var(--brand-soft); }
.omeds li.miss { background: var(--red-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent); }
.missrow { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 500; }
.missbox { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; color: var(--red); font-weight: 700; white-space: nowrap; }
.missbox input { width: 20px; height: 20px; }
.deskupload { margin-top: 12px; }
details.finished { margin: 18px 0; } details.finished > summary { font-weight: 700; }
.inline { display: inline; }
button, .button { min-height: 44px; }

/* settings: test menu */
.tgroup.dl, fieldset.tgroup { border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px 12px; margin: 12px 0; }
fieldset.tgroup legend { font-weight: 700; padding: 0 6px; }
.trow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.trow:first-of-type { border-top: 0; }
.tick { display: flex !important; gap: 10px; align-items: center; font-weight: 500; flex: 1; }
.tick input { width: 20px; height: 20px; flex: none; }
input.price { width: 6.5em; flex: none; text-align: end; }

/* patient: choose a shop */
.shopcard { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; margin: 12px 0; box-shadow: var(--shadow); display: grid; gap: 6px; }
.shopcard h3 { margin: 0; font-size: 1.1rem; }
.chip.good { background: var(--green-soft); color: var(--green-text); }
.cityform { display: flex; gap: 8px; align-items: end; margin-top: 10px; flex-wrap: wrap; } .cityform label { flex: 1; min-width: 10em; }
.invite { background: linear-gradient(180deg, var(--green-soft), var(--card) 70%); }
.cardbox.rx { background: linear-gradient(180deg, var(--orange-soft), var(--card) 70%); border-color: color-mix(in srgb, var(--orange) 28%, transparent); }
.orderpanel { background: var(--card); border-inline-start: 6px solid var(--violet); }
.orderpanel .steps li.done span { background: var(--green-2); }
.cardbox.orderpanel + .orderpanel { margin-top: 10px; }
.cardbox.tests .orderpanel, .cardbox.rx .orderpanel { margin: 12px 0 0; box-shadow: none; }

/* "Show at counter": full-screen, high contrast, works offline (CSS :target) */
.counter { display: none; }
.counter:target { display: block; position: fixed; inset: 0; z-index: 50; overflow: auto; background: #fff; color: #0b1b30; padding: 18px 16px 40px; }
.counter-in { max-width: 560px; margin: 0 auto; }
.counter-close { display: block; text-align: center; background: #0b1b30; color: #fff; text-decoration: none; margin-bottom: 14px; border-radius: 14px; }
.counter h2 { font-size: 1.5rem; text-transform: none; letter-spacing: 0; color: #0b1b30; margin: 0; }
.counter h2::before { display: none; }
.c-patient { font-size: 1.3rem; font-weight: 800; margin: 6px 0 2px; }
.c-meta { color: #43556d; margin: 0 0 14px; font-size: .95rem; }
.c-list { margin: 0; padding: 0 0 0 1.6em; display: grid; gap: 10px; font-size: 1.2rem; }
[dir="rtl"] .c-list { padding: 0 1.6em 0 0; }
.c-list li { padding: 10px 12px; border: 2px solid #0b1b30; border-radius: 14px; }
.c-name { display: block; font-weight: 800; }
.c-dose { font-weight: 600; color: #43556d; }
.c-how { display: block; font-size: 1rem; color: #26384f; margin-top: 2px; }
.c-note { margin-top: 18px; font-size: .9rem; color: #43556d; }
@media print { .counter, .counter:target { display: none !important; } .orderpanel, .cardbox.rx { display: none !important; } }

/* v9: referral box, admin money (payments, trial, status) */
.badge.red { background: var(--red-soft); color: var(--red); }
.bill { align-items: flex-start; }
.bill .billdetails { flex-basis: 100%; margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 8px; }
.bill .billdetails > summary { cursor: pointer; font-weight: 700; color: var(--brand-text); padding: 6px 0; }
.bill .billdetails form.row { margin: 10px 0; }
.bill .billdetails form.row label { min-width: 9em; }
.paytable { font-size: .9rem; margin: 8px 0; }
.paytable tr.undone td { text-decoration: line-through; color: var(--muted); }
.paytable tr.undone em { text-decoration: none; display: inline-block; }
.item.shoprow.bill { display: flex; }

/* ---- update 12: templates, follow-ups, history, weekly, assistants, logo, picture timings, voice, review ---- */
.top nav a[href="/followups"]::before { content: "📅 "; }
.top nav a[href="/patients"]::before { content: "🔎 "; }
.top nav .who { padding: 6px 12px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); font-weight: 700; font-size: .85rem; }
.tplbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--violet-soft) 70%, var(--card)); border: 1px solid var(--line); }
.tplbar .button.tpl { background: var(--card); color: var(--violet); border: 1.5px solid color-mix(in srgb, var(--violet) 45%, transparent); font-weight: 700; padding: 8px 14px; min-height: 0; }
.tplbar .button.tpl.on { background: var(--violet); color: #fff; }
.tplhint { margin: 0 0 12px; }
fieldset.savetpl { border: 1px dashed var(--brand-line); border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
label.check input { width: 22px; height: 22px; flex: none; }
details.savetpl-d { margin: 14px 0; } details.savetpl-d summary { cursor: pointer; font-weight: 700; color: var(--violet); }
.history-live { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: color-mix(in srgb, var(--amber-soft) 55%, var(--card)); }
.history-live h3 { margin: 0 0 8px; font-size: .98rem; }
.hist { padding: 8px 0; border-top: 1px dashed var(--line); } .hist:first-of-type { border-top: 0; }
.hist-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hist button.sm { margin-top: 6px; }
.tiles.follow .tile { text-decoration: none; color: inherit; }
.tiles.follow .tile:nth-child(1) { --c: var(--brand); --cs: var(--brand-soft); } .tiles.follow .tile:nth-child(1)::after { content: "📅"; }
.tiles.follow .tile:nth-child(2) { --c: var(--amber); --cs: var(--amber-soft); } .tiles.follow .tile:nth-child(2)::after { content: "⏰"; }
.tiles.follow .tile:nth-child(3) { --c: var(--violet); --cs: var(--violet-soft); } .tiles.follow .tile:nth-child(3)::after { content: "🗓️"; }
.tile.good, .tiles.follow .tile.good { --c: var(--green); --cs: var(--green-soft); } .tile.good::after { content: "✅"; }
.tiles.follow .tile.warn { --c: var(--red); --cs: var(--red-soft); }
a.tile.link { text-decoration: none; color: inherit; display: block; } a.tile.link:hover { filter: brightness(1.03); transform: translateY(-1px); }
.item.done-row { opacity: .72; } .item.done-row .button.wa { filter: saturate(.5); }
.weekly .wkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 10px; }
.wk { background: var(--brand-soft); border-radius: 14px; padding: 10px 12px; }
.wk-v { font-size: 1.6rem; font-weight: 800; color: var(--brand-text); line-height: 1.1; } .wk-l { font-size: .8rem; color: var(--muted); font-weight: 600; }
.inline-details { display: inline-block; } .inline-details summary { cursor: pointer; padding: 6px 10px; font-weight: 600; color: var(--brand-text); }
.logo-preview { width: 96px; height: 96px; object-fit: contain; border-radius: 18px; background: #fff; border: 1px solid var(--line); padding: 6px; }
label.upload-btn.sm { display: inline-block; padding: 10px 16px; font-size: .95rem; }
.recorder { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.voice audio { width: 100%; margin: 6px 0; }
.cardhead.has-logo::before { display: none; }
.cardhead .clinic-logo { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 16px; padding: 4px; display: block; margin-bottom: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cardhead .quals { font-weight: 700; opacity: .95; } .cardhead .specialty { opacity: .9; font-size: .95rem; }
.chip.dose[data-dose$="-morning"]:not(.done)::before { content: "🌅 "; }
.chip.dose[data-dose$="-noon"]:not(.done)::before { content: "☀️ "; }
.chip.dose[data-dose$="-night"]:not(.done)::before { content: "🌙 "; }
table.sched { width: 100%; border-collapse: separate; border-spacing: 4px; text-align: center; }
table.sched th { font-size: .85rem; } table.sched thead th { color: var(--muted); }
table.sched .sicon { font-size: 1.6rem; line-height: 1; }
table.sched tbody th { text-align: start; font-weight: 700; padding: 6px 4px; }
table.sched td { border-radius: 12px; padding: 8px 4px; font-size: 1.15rem; }
table.sched td.on { background: var(--green-soft); } table.sched td.off { background: color-mix(in srgb, var(--line) 50%, transparent); color: var(--muted); }
.cardbox.review { background: color-mix(in srgb, var(--amber-soft) 60%, var(--card)); }
@media print {
  .cardhead .clinic-logo { width: 46px; height: 46px; box-shadow: none; border: 1px solid #999; margin: 0 0 4px; }
  .cardhead .quals, .cardhead .specialty { color: #000; }
  .chip.dose[data-dose$="-morning"]::before { content: "🌅 "; } .chip.dose[data-dose$="-noon"]::before { content: "☀️ "; } .chip.dose[data-dose$="-night"]::before { content: "🌙 "; }
  table.sched { border-spacing: 2px; } table.sched td { padding: 2px; font-size: .95rem; border: 1px solid #999; background: #fff !important; }
  table.sched .sicon { font-size: 1.1rem; } table.sched th { font-size: .8rem; }
  .sched-box h2 { margin-bottom: 2px; }
}
@media print {
  /* keep the printout on one A4 page: logo beside the doctor's name, a tight picture schedule */
  .cardhead.has-logo { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: start; padding: 6px 10px; }
  .cardhead.has-logo > * { grid-column: 2; margin: 0; }
  .cardhead.has-logo .clinic-logo { grid-column: 1; grid-row: 1 / span 7; }
  .cardhead.has-logo h1 { font-size: 1.3rem; }
  table.sched td { padding: 0 2px; line-height: 1.2; }
  table.sched thead th { line-height: 1.1; }
  .sched-box { padding: 5px 10px; }
}
@media print {
  /* two short boxes share a row: picture schedule + advice, next visit + clinic */
  #card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 7px; }
  #card > * { grid-column: 1 / -1; }
  #card > .sched-box:has(~ .advice), #card > .sched-box ~ .advice,
  #card > .cardbox.next:has(~ .clinic), #card > .cardbox.next ~ .clinic { grid-column: auto; }
}
@media print { html[lang="ur"] { font-size: 12px; } html[lang="ur"] body { line-height: 1.2; } html[lang="ur"] .cardbox { padding: 6px 10px; margin-bottom: 5px; } }
@media print {
  html[lang="ur"] .chip, html[lang="ur"] button.chip.dose { font-size: .78rem; padding: 0 7px; line-height: 1.5; }
  html[lang="ur"] .medcard { padding: 2px 0; } html[lang="ur"] .med-detail { gap: 3px; margin-top: 1px; }
  html[lang="ur"] .cardhead.has-logo { padding: 4px 10px; } html[lang="ur"] .cardhead.has-logo h1 { font-size: 1.15rem; }
  html[lang="ur"] .pre { line-height: 1.4; }
}
@media print {
  html[lang="ur"] .cardbox p { margin: 2px 0; } html[lang="ur"] .testlist li { padding: 1px 0; margin: 0; }
  html[lang="ur"] .cardbox h2 { margin-bottom: 2px; } html[lang="ur"] .cardhead > div { line-height: 1.25; }
}
.actions .badge { align-self: center; white-space: nowrap; }

/* ---- update 13: status, public page, queue, token page, QR poster, printed slip, allergies, family ---- */
.top nav a[href="/queue"]::before { content: "🎟️ "; }
.statusbox h2 { margin: 0; } .statusbox .st { font-weight: 800; }
.st.open { color: var(--green-text); } .st.later, .st.break { color: var(--amber); } .st.closed { color: var(--red); } .st.unknown { color: var(--muted); }
.statusbox .actions { margin: 10px 0 4px; } input.short { width: 9rem; }
.cardbox.status { text-align: center; } .status-line { font-size: 1.35rem; font-weight: 800; }
.cardbox.status.open { background: color-mix(in srgb, var(--green-soft) 70%, var(--card)); }
.cardbox.status.later, .cardbox.status.break { background: color-mix(in srgb, var(--amber-soft) 70%, var(--card)); }
.cardbox.status.closed { background: color-mix(in srgb, var(--red-soft) 70%, var(--card)); }
.bignum { font-size: 3.4rem; font-weight: 900; line-height: 1; text-align: center; color: var(--brand-text); letter-spacing: -.02em; }
.bignum.mine { color: var(--violet); }
.tokenbox .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; margin-bottom: 10px; }
.tokenbox .ahead { font-size: 1.3rem; font-weight: 800; text-align: center; margin: 6px 0 0; }
.notice.big { font-size: 1.25rem; font-weight: 800; text-align: center; }
table.timings { width: 100%; border-collapse: collapse; } table.timings th, table.timings td { padding: 7px 4px; border-bottom: 1px solid var(--line); text-align: start; }
table.timings tr.today { background: var(--brand-soft); }
.tok { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 8px; border-radius: 12px; background: var(--violet); color: #fff; font-weight: 900; }
.qrbox { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.qrwrap svg, .poster-qr svg, .slip-qr svg { display: block; background: #fff; border-radius: 10px; }
.tablewrap { overflow-x: auto; } table.sched-form th, table.sched-form td { padding: 6px 4px; white-space: nowrap; }
table.sched-form input[type="time"] { width: 7.2rem; }
.cardbox.allergy { background: color-mix(in srgb, var(--red-soft) 70%, var(--card)); border-color: var(--red); }
.cardbox.allergy h2 { color: var(--red); }
.allergy-stop label.check { margin-top: 8px; }
.cardbox.family li { padding: 4px 0; }
.chips button.on { background: var(--violet); color: #fff; }
body.poster { background: #fff; } body.poster main { max-width: 720px; }
.poster-sheet { text-align: center; border: 3px solid #1558c9; border-radius: 28px; padding: 32px 24px; background: #fff; color: #0f2744; }
.poster-sheet h1 { font-size: 2.3rem; margin: 6px 0 2px; } .poster-sheet .quals { font-weight: 700; margin: 0; } .poster-sheet .clinic { font-size: 1.3rem; margin: 4px 0 18px; }
.poster-logo { width: 90px; height: 90px; object-fit: contain; }
.poster-qr { display: inline-block; padding: 12px; border: 2px dashed #1558c9; border-radius: 22px; }
.poster-sheet .scan { font-size: 1.5rem; font-weight: 800; margin: 18px 0 4px; } .poster-sheet .what { font-size: 1.15rem; margin: 2px 0; }
.poster-sheet .url { color: #1558c9; font-weight: 700; margin-top: 14px; } .poster-sheet .pbrand { color: #5a7089; font-weight: 800; letter-spacing: .05em; }
body.slip { background: #fff; } body.slip main { max-width: 560px; }
.slip-sheet { border: 1.5px solid #333; border-radius: 10px; padding: 12px 14px; color: #000; background: #fff; font-size: .95rem; }
.slip-head { display: flex; gap: 10px; align-items: center; border-bottom: 1.5px solid #333; padding-bottom: 8px; }
.slip-head > div:nth-child(2), .slip-head > div:first-child:not(.slip-qr) { flex: 1; }
.slip-logo { width: 48px; height: 48px; object-fit: contain; }
.slip-patient { margin: 8px 0 4px; } .slip-allergy { color: #b00; font-weight: 800; margin: 4px 0; }
table.slip-meds { width: 100%; border-collapse: collapse; margin: 6px 0; } table.slip-meds td { border-bottom: 1px solid #ccc; padding: 4px 3px; }
.slip-next { font-size: 1.1rem; } .slip-foot { font-size: .75rem; color: #444; border-top: 1px solid #999; padding-top: 4px; margin-bottom: 0; }
@media print {
  body.poster, body.slip { background: #fff; }
  body.poster main, body.slip main { max-width: none; padding: 0; }
  .poster-sheet { border-width: 2px; }
  @page { size: A4; margin: 10mm; }
  body.slip .slip-sheet { width: 138mm; }
  .cardbox.allergy { border: 2px solid #000; background: #fff !important; } .cardbox.allergy h2 { color: #000; }
}
.tests-picker .brow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.tests-picker .tsearch input { font-size: 1.05rem; }
.tests-picker details.tgroup { border: 1px solid var(--line); border-radius: 14px; padding: 6px 10px; margin: 6px 0; }
.tests-picker details.tgroup summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.tests-picker .tchip[hidden] { display: none; }
@media print {
  #card > .cardbox.allergy:has(~ .diag), #card > .cardbox.allergy ~ .diag { grid-column: auto; }
}

/* ---- update 15: today first, booking days, notices, QR on printed card and slip ---- */
.cardbox.status.today .today-times { font-size: 1.6rem; font-weight: 800; margin: 2px 0 4px; }
.cardbox.status .notice { margin: 10px 0 0; }
.notice.late { background: var(--amber-soft); color: var(--amber); }
.live-title { margin: 6px 0 6px; font-size: 1.05rem; }
.bookbox fieldset.days { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.bookbox fieldset.days legend { font-weight: 700; margin-bottom: 6px; }
.bookbox label.day { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--line, #d6e2ef); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.bookbox label.day:has(input:checked) { border-color: var(--green, #1f9d55); background: var(--green-soft); }
.bookbox label.day.full { opacity: .5; cursor: not-allowed; }
.bookbox label.day input { width: auto; margin: 0; }
.bookbox label.day small { display: block; }
.small { font-size: .85rem; }
.badge.red { background: var(--red-soft); color: var(--red, #c0392b); }
.badge.green { background: var(--green-soft); color: var(--green-text); }
.late-row { align-items: center; gap: 6px; margin-top: 8px; }
.scanbox { gap: 10px; align-items: center; }
.scanbox svg { flex: none; background: #fff; }
.scanbox .url { font-size: .8rem; word-break: break-all; }
.slip-scan { display: flex; border-top: 1px dashed #999; padding-top: 6px; margin-top: 6px; }
@media print {
  .scanbox.printonly { display: flex; margin-top: 4px; } .scanbox svg { width: 80px; height: 80px; }
  html .cardhead > .scanbox.headscan { float: right; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 116px; text-align: center; margin: 0 0 0 10px !important; font-size: 9px; line-height: 1.2; }
  html[dir="rtl"] .cardhead > .scanbox.headscan { float: left; margin: 0 10px 0 0 !important; }
  html .cardhead.has-logo:has(.headscan) { grid-template-columns: auto 1fr auto; }
  html .cardhead.has-logo > .scanbox.headscan { float: none; grid-column: 3; grid-row: 1 / span 7; margin: 0 !important; }
  html .cardhead > .scanbox.headscan svg { display: block; flex: none; width: 78px !important; height: 78px !important; }
  .scanbox.headscan .url { display: none; }
}

[hidden] { display: none !important; }

/* ---- update 17: back/forward bar, footer links, voice buttons, monthly report, legal pages, safety ---- */
.backbar { display: flex; justify-content: space-between; gap: 8px; max-width: 980px; margin: 6px auto 0; padding: 0 16px; }
.backbar[hidden] { display: none; }
.backbar button { font-size: .95rem; padding: 6px 4px; }
.sitefoot { text-align: center; font-size: .85rem; color: var(--muted, #6b7a90); margin: 18px 0 24px; }
.sitefoot a { color: inherit; }
.voicebtn { white-space: nowrap; }
.box.voice.highlight { outline: 3px solid var(--violet, #7c4dff); outline-offset: 2px; }
table.bars progress { width: 100%; height: 14px; }
table.bars th { width: 110px; font-weight: 600; text-align: start; }
table.bars td:last-child { width: 40px; text-align: end; }
.toplist { margin: 0; padding-inline-start: 1.4em; } .toplist li { margin: 4px 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.legaltext h1 { font-size: 1.5rem; } .legaltext h2 { font-size: 1.05rem; margin-top: 1.2em; }
.legaltext li { margin: 6px 0; line-height: 1.5; }
table.checks td:first-child { width: 28px; font-size: 1.2rem; } table.checks th { text-align: start; white-space: nowrap; padding-inline-end: 12px; }
@media print { .backbar, .sitefoot { display: none !important; } }
.rowvoice { margin-top: 4px; } .rowvoice:empty { display: none; }
#voice { scroll-margin-top: 210px; } @media (min-width: 760px) { #voice { scroll-margin-top: 90px; } }

/* ---------- update 18: home page for doctors (visitcard.pk) ---------- */
body.homepage main { max-width: 1060px; padding-top: 12px; }
body.homepage .sitefoot { text-align: center; }
.hometop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0 14px; }
.hbrand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--fg); text-decoration: none; }
.hbrand img { border-radius: 9px; }
.hometop nav { display: flex; align-items: center; gap: 12px; }
.hhero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items: center; color: #fff; border-radius: 28px; padding: 34px 32px;
  background: linear-gradient(135deg, #1558c9 0%, #1a76dc 55%, #5b7cf5 100%); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hhero::after { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.08); }
.hhero > * { position: relative; z-index: 1; }
.hpill { display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 4px 12px; font-size: .82rem; font-weight: 700; }
.hhero h1 { color: #fff; font-size: 2.5rem; line-height: 1.12; margin: 14px 0 10px; }
.hhero h1 .hl { color: #ffe08a; }
.hsub { color: #e6f0ff; font-size: 1.05rem; line-height: 1.55; max-width: 520px; }
.hsteps, .hhow { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.hsteps { grid-template-columns: repeat(3, 1fr); font-weight: 700; font-size: .92rem; }
.hsteps li, .hhow li { display: flex; gap: 8px; align-items: flex-start; }
.hnum { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #1558c9; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.hphone { position: relative; justify-self: center; width: 260px; background: #0b1b33; border-radius: 34px; padding: 9px; box-shadow: 0 20px 40px rgba(6,21,46,.35); }
.hscreen { background: #f3f8ff; color: #0f2744; border-radius: 26px; padding: 18px 16px; display: grid; gap: 8px; }
.hsmall { font-size: .72rem; color: #4f6680; font-weight: 700; letter-spacing: .04em; }
.hdoc { font-size: 1.2rem; font-weight: 800; color: #1558c9; }
.hmed { background: #fff; border-radius: 12px; padding: 8px 10px; display: grid; gap: 4px; font-size: .85rem; }
.hmed span { justify-self: start; background: #e0efff; color: #1558c9; font-weight: 700; font-size: .74rem; padding: 2px 7px; border-radius: 6px; }
.hvoice { background: #1558c9; color: #fff; border-radius: 12px; padding: 8px 10px; font-size: .8rem; font-weight: 700; }
.hnext { background: #d94632; color: #fff; border-radius: 12px; padding: 9px 11px; display: flex; justify-content: space-between; font-size: .85rem; }
.hnotif { position: absolute; left: -46px; bottom: -18px; background: #fff; color: #0f2744; border-radius: 14px; padding: 9px 12px; display: flex; gap: 9px; align-items: center; box-shadow: 0 14px 30px rgba(6,21,46,.35); }
.hnotif small { display: block; color: #4f6680; font-size: .68rem; }
.hbell { width: 32px; height: 32px; border-radius: 9px; background: var(--wa); display: inline-flex; align-items: center; justify-content: center; }
.hsect { margin: 34px 4px; }
.heyebrow { color: var(--coral); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; margin-bottom: 8px; }
.hsect h2 { font-size: 1.6rem; margin: 0 0 16px; }
.hprob { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hprob > div { border-top: 3px solid var(--brand); padding-top: 10px; }
.hprob .b2 { border-color: var(--coral); } .hprob .b3 { border-color: var(--violet); }
.hprob h3, .hf h3 { margin: 0 0 4px; font-size: 1.02rem; }
.hprob p, .hf p { margin: 0; color: var(--muted); line-height: 1.5; }
.hfeat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hf { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.hfi { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.hhow { grid-template-columns: repeat(4, 1fr); font-weight: 700; }
.hhow .hnum { background: var(--brand); color: #fff; }
.hprice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hprice > div { background: #0f2744; color: #fff; border-radius: 18px; padding: 18px; display: grid; gap: 4px; }
.hprice strong { font-size: 1.6rem; color: #8fc2ff; }
.hprice span { color: #d6e4f5; font-size: .9rem; }
.hfaq { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 8px 0; }
.hfaq summary { font-weight: 700; cursor: pointer; }
.hfaq p { margin: 8px 0 0; color: var(--muted); }
.hcta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-radius: 24px; padding: 24px 26px; color: #fff;
  background: linear-gradient(135deg, #0f2744, #1558c9); margin: 30px 0 10px; }
.hcta h2 { color: #fff; margin: 0; } .hcta p { margin: 4px 0 0; color: #d6e4f5; }
/* update 25: visual home page, every section a coloured panel like the hero */
.vstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 4px 0; }
.vstats > div { border-radius: 18px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; color: #fff; box-shadow: var(--shadow); }
.vstats .s1 { background: linear-gradient(135deg, #1558c9, #1a76dc); } .vstats .s2 { background: linear-gradient(135deg, #0a8250, #0e9f6e); }
.vstats .s3 { background: linear-gradient(135deg, #5a3ee6, #7a5cf5); } .vstats .s4 { background: linear-gradient(135deg, #c2410c, #e0560f); }
.vsi { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.2); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }
.vstats strong { display: block; font-size: 1.25rem; line-height: 1.15; } .vstats span { font-size: .85rem; opacity: .92; }
.vpanel { position: relative; overflow: hidden; border-radius: 28px; padding: 30px 30px; margin: 34px 0; color: #fff; }
.vpanel::before { content: ""; position: absolute; right: -90px; top: -110px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.08); }
.vpanel::after { content: ""; position: absolute; left: -60px; bottom: -90px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.06); }
.vpanel > * { position: relative; z-index: 1; }
.vpanel h2 { color: #fff; font-size: 1.85rem; line-height: 1.15; margin: 12px 0 6px; }
.vpanel p { color: rgba(255,255,255,.9); margin: 0 0 18px; font-size: 1.05rem; }
.vqr { display: grid; grid-template-columns: 1.3fr .7fr; gap: 26px; align-items: center; background: linear-gradient(120deg, #5a3ee6 0%, #6a4cf0 45%, #1a76dc 100%); box-shadow: 0 14px 34px rgba(90,62,230,.28); }
.vflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vflow li { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 18px; padding: 14px 10px; display: grid; justify-items: center; gap: 4px; text-align: center; position: relative; }
.vflow li:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); font-weight: 800; color: #ffe08a; z-index: 2; }
[dir="rtl"] .vflow li:not(:last-child)::after { content: "←"; right: auto; left: -11px; }
.vfi { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.vflow strong { font-size: 1rem; } .vflow small { color: rgba(255,255,255,.85); font-size: .78rem; }
.vboard { margin: 0; justify-self: center; background: #fff; color: #0f2744; border-radius: 22px; overflow: hidden; display: grid; justify-items: center; gap: 8px; padding: 0 18px 18px; box-shadow: 0 20px 40px rgba(6,21,46,.35); transform: rotate(2deg); max-width: 250px; }
.vboard-top { justify-self: stretch; height: 10px; background: #ffd873; margin: 0 -18px; }
.vboard figcaption { font-weight: 800; color: #1558c9; text-align: center; font-size: .95rem; padding-top: 6px; }
.vboard-qr { padding: 8px; border: 1px solid var(--line); border-radius: 12px; line-height: 0; }
.vboard-qr svg { width: 168px; height: 168px; }
.vboard > strong { color: #d94632; font-size: .85rem; text-align: center; }
.vgroups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.vgroup { position: relative; overflow: hidden; border-radius: 24px; padding: 20px; color: #fff; box-shadow: var(--shadow); }
.vgroup::before { content: ""; position: absolute; right: -50px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.1); }
.vgroup > * { position: relative; }
.g-doc { background: linear-gradient(135deg, #1558c9, #1a76dc 60%, #5b7cf5); } .g-pat { background: linear-gradient(135deg, #0a8250, #0e9f6e 60%, #20c997); }
.g-desk { background: linear-gradient(135deg, #c2410c, #e0560f 60%, #f59e0b); } .g-lab { background: linear-gradient(135deg, #5a3ee6, #7a5cf5 60%, #a78bfa); }
.vghead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vghead h3 { margin: 0; color: #fff; font-size: 1.3rem; flex: 1; }
.vgi { width: 44px; height: 44px; border-radius: 14px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.vgcount { background: rgba(255,255,255,.22); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: .85rem; }
.vchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vchips li { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: .9rem; display: inline-flex; gap: 6px; align-items: center; }
.vprof { display: grid; grid-template-columns: .55fr 1.45fr; gap: 24px; align-items: center; background: linear-gradient(120deg, #0e7490 0%, #0b8aae 50%, #10b5a8 100%); box-shadow: 0 14px 34px rgba(14,116,144,.28); }
.vprof-num { display: grid; gap: 4px; justify-items: start; }
.vprof-num strong { font-size: 4rem; line-height: 1; color: #ffe08a; margin-top: 8px; } .vprof-num span:last-child { font-weight: 700; font-size: 1.05rem; }
.vbubbles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.vbubbles li { display: grid; justify-items: center; gap: 6px; font-weight: 700; font-size: .85rem; text-align: center; }
.vbubbles span { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 8px 18px rgba(6,21,46,.18); }
.vday { background: linear-gradient(120deg, #d94632 0%, #e0560f 50%, #f59e0b 100%); box-shadow: 0 14px 34px rgba(217,70,50,.25); }
.vtime { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; position: relative; }
.vtime::before { content: ""; position: absolute; left: 10%; right: 10%; top: 28px; border-top: 3px dashed rgba(255,255,255,.55); }
.vtime li { display: grid; justify-items: center; gap: 4px; text-align: center; position: relative; }
.vti { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 8px 18px rgba(6,21,46,.2); }
.vtime strong { font-size: 1rem; margin-top: 4px; } .vtime small { color: rgba(255,255,255,.9); font-size: .85rem; }
.vsafe { background: linear-gradient(135deg, #0f2744 0%, #15396b 55%, #1558c9 100%); padding: 24px 30px; }
.vsafe h2 { margin: 0 0 14px; font-size: 1.5rem; }
.vsafe-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.vsafe-list li { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 12px 8px; display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 700; font-size: .85rem; }
.vsafe-list span { font-size: 1.5rem; }
.hprice > div { background: linear-gradient(135deg, #1558c9, #1a76dc 60%, #5b7cf5); }
.hprice strong { color: #ffe08a; } .hprice span { color: #e6f0ff; }
.vpnotes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vpnotes li { background: var(--card); border: 1px solid var(--brand-line); color: var(--brand-text); border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: .88rem; }
@media (max-width: 860px) {
  .hhero { grid-template-columns: 1fr; padding: 26px 20px; }
  .hhero h1 { font-size: 1.9rem; }
  .hphone { margin-top: 10px; } .hnotif { left: -20px; }
  .hfeat, .hhow, .vstats { grid-template-columns: 1fr 1fr; }
  .vgroups, .vqr, .vprof { grid-template-columns: 1fr; }
  .vbubbles, .vsafe-list { grid-template-columns: repeat(3, 1fr); }
  .vpanel { padding: 24px 20px; }
}
@media (max-width: 560px) { .vflow { grid-template-columns: 1fr 1fr; } .vflow li:nth-child(2)::after { content: none; } .vtime { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } .vtime::before { display: none; } .vpanel h2 { font-size: 1.5rem; } .vprof-num strong { font-size: 3rem; }
  .hsteps, .hprob, .hprice, .hfeat, .hhow { grid-template-columns: 1fr; } .hnotif { left: 8px; bottom: -18px; } }

/* "Made with VisitCard" line on patient pages and printed slips */
.madewith { text-align: center; color: var(--muted); font-size: .8rem; margin: 6px 0 0; }
.madewith a { font-weight: 700; }

/* update 18: install guide, setup checklist, first-card celebration */
.install-guide .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ios-steps { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.ios-steps li { display: flex; gap: 12px; align-items: center; }
.ios-pic { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); display: inline-flex; align-items: center; justify-content: center; }
.ios-pic img { border-radius: 7px; }
.box.setup progress { width: 100%; height: 12px; accent-color: var(--green-2); }
.checklist li { padding: 4px 0; }
.checklist li.done span { color: var(--muted); text-decoration: line-through; }
.box.celebrate { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--green-soft), var(--card)); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; background: var(--brand); animation: fall 2.6s ease-in forwards; opacity: .9; }
.confetti i:nth-child(3n) { background: var(--wa); } .confetti i:nth-child(3n+1) { background: var(--amber); } .confetti i:nth-child(4n) { background: var(--coral); }
.confetti i:nth-child(1) { left: 4%; animation-delay: .0s; } .confetti i:nth-child(2) { left: 10%; animation-delay: .3s; } .confetti i:nth-child(3) { left: 16%; animation-delay: .1s; }
.confetti i:nth-child(4) { left: 22%; animation-delay: .5s; } .confetti i:nth-child(5) { left: 28%; animation-delay: .2s; } .confetti i:nth-child(6) { left: 34%; animation-delay: .6s; }
.confetti i:nth-child(7) { left: 40%; animation-delay: .15s; } .confetti i:nth-child(8) { left: 46%; animation-delay: .45s; } .confetti i:nth-child(9) { left: 52%; animation-delay: .05s; }
.confetti i:nth-child(10) { left: 58%; animation-delay: .35s; } .confetti i:nth-child(11) { left: 64%; animation-delay: .25s; } .confetti i:nth-child(12) { left: 70%; animation-delay: .55s; }
.confetti i:nth-child(13) { left: 76%; animation-delay: .12s; } .confetti i:nth-child(14) { left: 82%; animation-delay: .42s; } .confetti i:nth-child(15) { left: 88%; animation-delay: .22s; }
.confetti i:nth-child(16) { left: 94%; animation-delay: .62s; } .confetti i:nth-child(17) { left: 31%; animation-delay: .8s; } .confetti i:nth-child(18) { left: 67%; animation-delay: .9s; }
@keyframes fall { to { transform: translateY(220px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* update 18: Ramadan mode */
.ramadan-row { margin: 10px 0 4px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 14px; display: grid; gap: 6px; }
.cardbox.ramadan { background: linear-gradient(180deg, var(--violet-soft), var(--card) 70%); border-color: color-mix(in srgb, var(--violet) 28%, transparent); }
.cardbox.ramadan h2 { color: var(--violet); }
.rtimes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.rtimes > div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: grid; justify-items: center; gap: 2px; text-align: center; }
.rtimes strong { font-size: 1.1rem; }
.home .actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.home .actions .button { flex: 0 1 auto; width: auto; }
body.homepage[dir="rtl"] { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", system-ui, sans-serif; }
body.homepage[dir="rtl"] .hhero h1 { line-height: 1.6; }
.meds-ramadan .chip.dose[data-dose$="-morning"]:not(.done)::before { content: "🌌 "; }
.meds-ramadan .chip.dose[data-dose$="-noon"]:not(.done)::before { content: "🌇 "; }
.meds-ramadan .chip.dose[data-dose$="-night"]:not(.done)::before { content: "🛏️ "; }

/* ---------- update 19 ---------- */
.verified { display: inline-block; margin: 4px 0; padding: 2px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-text); font-weight: 700; font-size: .85rem; }
html.bigtext body.card { font-size: 1.25rem; }
html.bigtext body.card .chip, html.bigtext body.card .med-detail { font-size: 1.05rem; }
html.bigtext body.card h1 { font-size: 2rem; }
.textsize { text-align: right; margin: 0; }
html[dir="rtl"] .textsize { text-align: left; }
.pin-input { font-size: 2rem; letter-spacing: .5em; text-align: center; max-width: 220px; margin: 0 auto; }
input.short { max-width: 120px; }
body.flash main { animation: flashbg 1s ease 3; }
@keyframes flashbg { 50% { background: #fff3a8; } }
@media (prefers-reduced-motion: reduce) { body.flash main { animation: none; outline: 6px solid #ffd43b; } }
body.tv { background: #0b1b33; color: #fff; }
body.tv main { max-width: none; padding: 20px; }
body.tv .sitefoot { display: none; }
.tvscreen { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.tvclinic { font-size: 2rem; font-weight: 800; color: #8fc2ff; }
.tvlabel { font-size: 1.6rem; color: #d6e4f5; text-transform: uppercase; letter-spacing: .12em; }
.tvnum { font-size: 14rem; font-weight: 800; line-height: 1; color: #ffe08a; }
.tvnext { display: flex; gap: 22px; font-size: 4rem; font-weight: 800; }
.tvnext span { background: rgba(255,255,255,.1); border-radius: 18px; padding: 4px 24px; }
.tvemerg { font-size: 1.6rem; background: #d94632; padding: 8px 20px; border-radius: 14px; }
.tvfoot { margin-top: 20px; color: #9fb4d3; font-size: 1.1rem; }
body.card.theme-green .cardhead { background: linear-gradient(135deg, #087f4b, #0e9f6e 55%, #38c27f); box-shadow: 0 14px 34px rgba(10,130,80,.28); }
body.card.theme-teal .cardhead { background: linear-gradient(135deg, #0b5f78, #0e7490 55%, #22a6c8); box-shadow: 0 14px 34px rgba(14,116,144,.28); }
body.card.theme-purple .cardhead { background: linear-gradient(135deg, #4527c9, #5a3ee6 55%, #8a6cf7); box-shadow: 0 14px 34px rgba(90,62,230,.28); }
body.card.theme-rose .cardhead { background: linear-gradient(135deg, #a61e4d, #c2255c 55%, #e64980); box-shadow: 0 14px 34px rgba(194,37,92,.28); }
body.card.theme-orange .cardhead { background: linear-gradient(135deg, #a33808, #c2410c 55%, #f0782f); box-shadow: 0 14px 34px rgba(194,65,12,.28); }
.med .taper { grid-column: 1 / -1; font-size: .85rem; }

/* ---------- update 20: lifeline ---------- */
.helpfab { position: fixed; right: 14px; bottom: 16px; z-index: 50; background: #d94632; color: #fff; font-weight: 800; padding: 12px 16px; border-radius: 999px; box-shadow: 0 10px 24px rgba(217,70,50,.4); text-decoration: none; }
html[dir="rtl"] .helpfab { right: auto; left: 14px; }
.helpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.helpgrid .button { text-align: center; }
.embtns { display: grid; gap: 10px; margin: 12px 0; }
.embtns .button, .embtns button { text-align: center; font-size: 1.15rem; padding: 16px; }
.cardbox.rescuer { border: 3px solid #d94632; }
.redflags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.redflags span { background: #d94632; color: #fff; font-weight: 800; padding: 6px 10px; border-radius: 10px; }
dl.rescue { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 1.1rem; margin: 0; }
dl.rescue dt { color: var(--muted); font-weight: 700; } dl.rescue dd { margin: 0; font-weight: 700; }
.histqr { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.histcode { font-size: 2.4rem; font-weight: 800; letter-spacing: .3em; }
.histvisit h2 { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.cardbox.dupwarn, .cardbox.urgent-go { border: 3px solid #d94632; background: var(--red-soft); }
.tapertable { width: 100%; border-collapse: collapse; }
.tapertable td, .tapertable th { padding: 6px; border-bottom: 1px solid var(--line); text-align: center; }
.tapertable tr.today { background: var(--amber-soft); font-weight: 800; }
.tapertable tr.past { opacity: .5; }
.pharmbox { font-size: 1.2rem; }
.pharmtable { width: 100%; border-collapse: collapse; font-size: 1.2rem; }
.pharmtable td, .pharmtable th { border: 1px solid var(--line); padding: 8px; text-align: left; }
.danger-signs textarea { width: 100%; }
.sticker-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sticker { border: 3px dashed #d94632; border-radius: 16px; padding: 10px; text-align: center; background: #fff; color: #000; }
.st-head { font-weight: 800; color: #b91c1c; } .st-name { font-weight: 800; font-size: 1.1rem; } .st-small { font-size: .9rem; }
@media print { .helpfab, .helpbox { display: none !important; } }

/* ---- Update 21: inbox, report check, lab request QR, lab fees ---- */
.thread { list-style: none; padding: 0; margin: .5rem 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.thread .msg { max-width: 88%; padding: .5rem .75rem; border-radius: 12px; background: #f1f5f9; }
.thread .msg.from-patient { align-self: flex-start; background: #eef6ff; }
.thread .msg.from-doctor { align-self: flex-end; background: #e8f8ef; }
.thread .msg.from-auto { align-self: center; background: #fff7e6; font-size: .92em; }
.thread .msg.urgent { border: 2px solid #d93025; }
.thread .who { font-size: .8em; color: #5b6b7f; margin-bottom: .15rem; }
.thread audio { width: 100%; max-width: 280px; }
.vrec { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.threadrow.urgent { border-left: 4px solid #d93025; }
.badge.danger { background: #fde8e7; color: #b3261e; }
.qrrow { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.qrrow .qr { flex: 0 0 auto; }
.labbill p { margin: .25rem 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Update 22: care tools ---- */
.tasklist li { margin: .35rem 0; }
button.task { text-align: start; background: #f8fafc; border: 1px solid #d5dde8; width: 100%; }
button.task.done { background: #e8f8ef; border-color: #9ad5b0; }
.readings li { margin: .15rem 0; }
.moodpick { display: flex; flex-wrap: wrap; gap: .5rem; }
.moodpick label { display: flex; align-items: center; gap: .25rem; padding: .3rem .5rem; border: 1px solid #d5dde8; border-radius: 8px; }
.moodpick span { font-size: 1.4em; }
.moodrow { font-size: 1.4em; letter-spacing: .1em; overflow-x: auto; white-space: nowrap; }
.qitem { border: 0; border-bottom: 1px solid #e5eaf0; padding: .5rem 0; margin: 0; }
.qitem legend { font-weight: 600; padding: 0; }
.qopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .25rem .75rem; margin-top: .35rem; }
.safety { background: #eef4ff; border: 2px solid #1a76dc; border-radius: 12px; padding: .75rem 1rem; margin-top: .75rem; }
.breathcircle { width: 90px; height: 90px; margin: 1rem auto; border-radius: 50%; background: #bfe3f2; transform: scale(.6); transition: transform 4s ease-in-out; }
.breathcircle.grow, .breathcircle.hold { transform: scale(1.2); }
.breathcircle.shrink { transform: scale(.6); transition-duration: 6s; }
.breathtext { font-size: 1.2em; min-height: 1.5em; }
.teethchart { overflow-x: auto; }
.tside { display: flex; justify-content: space-between; font-size: .8em; color: #5b6b7f; }
.trow { display: grid; grid-template-columns: repeat(16, minmax(1.6rem, 1fr)); gap: 2px; margin: 2px 0; }
.tooth { display: inline-block; min-width: 1.6rem; padding: .2rem 0; text-align: center; font-size: .75em; border: 1px solid #c9d3df; border-radius: 4px; background: #fff; }
.trow .tooth:nth-child(8) { margin-inline-end: 4px; }
.t-caries { background: #fde2e1; border-color: #e88a85; }
.t-filled { background: #dbeafe; border-color: #7aa7e8; }
.t-rct { background: #ede0fb; border-color: #a78bdb; }
.t-crown { background: #fff4c2; border-color: #d8b83a; }
.t-missing { background: #e5e7eb; color: #6b7280; text-decoration: line-through; }
.t-extract { background: #ffe4cc; border-color: #f08c3a; }
.t-implant { background: #d1fae5; border-color: #4fb98a; }
.legend li { display: flex; align-items: center; gap: .4rem; margin: .2rem 0; }
.legend .tooth { min-width: 1rem; height: 1rem; padding: 0; }
.stagelist li.done span { text-decoration: line-through; color: #5b6b7f; }
.stagelist li.next { font-weight: 600; }
.photogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.photogrid figure { margin: 0; }
.photogrid img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; }
.photogrid figcaption { font-size: .85em; color: #5b6b7f; }
.dietlist dt { font-weight: 700; margin-top: .4rem; }
.dietlist dd { margin: 0 0 .25rem; }
.gtable { border-collapse: collapse; margin: .5rem 0; }
.gtable th, .gtable td { border: 1px solid #d5dde8; padding: .25rem .5rem; text-align: center; }
.preg progress { width: 100%; height: 12px; }
.vaxlist li { padding: .4rem 0; border-bottom: 1px solid #eef1f5; }
.vaxlist .vax-overdue { background: #fff6f5; }
.vaxitems { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.chip.good { background: #e8f8ef; }
button.chip { border: 1px dashed #9aa8b8; background: #fff; cursor: pointer; }
.caretools details { margin: .4rem 0; padding: .25rem .5rem; border-inline-start: 3px solid #e1e8f0; }
.tgrid { display: grid; grid-template-columns: repeat(8, minmax(3.5rem, 1fr)); gap: .25rem; }
.tsel { font-size: .8em; display: flex; flex-direction: column; }
.vaxpick div { margin: .2rem 0; }
.dosehelp div { background: #f1f8ff; padding: .3rem .5rem; border-radius: 6px; margin: .25rem 0; }
.readtable td { padding: .1rem .5rem; border-bottom: 1px solid #eef1f5; }
.item.attention { border-inline-start: 4px solid #f0a020; }
@media print { .caretools, .breath, .journal { display: none; } }

/* ---- Update 23 ---- */
.micbtn { margin: .25rem .25rem .25rem 0; }
.letterhead { border-bottom: 2px solid #1a76dc; padding-bottom: .5rem; margin-bottom: 1rem; }
.certificate { background: #fff; padding: 1rem; border: 1px solid #d5dde8; border-radius: 8px; }
.certfoot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.sigline { border-top: 1px solid #333; padding-top: .25rem; min-width: 12rem; margin-top: 2.5rem; }
.sigpad canvas { width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 220; border: 2px dashed #9aa8b8; border-radius: 8px; touch-action: none; background: #fff; }
.signature { max-width: 300px; border-bottom: 1px solid #333; }
.badge.orange { background: #fff1dc; color: #9a5800; }
.privnote { background: #fffbea; }
@media print { .printdoc header.top, .printdoc .backbar { display: none; } .certificate { border: 0; } }

/* ---- Update 24 ---- */
.announce { border-inline-start: 4px solid #1a76dc; }
.directory .doc h2 { margin-bottom: .2rem; }
table.growth { width: 100%; border-collapse: collapse; }
table.growth td, table.growth th { padding: .3rem .5rem; border-bottom: 1px solid #e5eaf0; text-align: start; }
table.growth progress { width: 8rem; }