/* ClyDoc care network: Clinician portal, Consult a Doctor, messages, calls, Admin › Clinicians (js/clinic.js)
   and Donate Blood (js/blood.js) */

/* ---------- Blue tick and header button ---------- */
.v-tick { width: 1.05em; height: 1.05em; margin-left: .3em; vertical-align: -0.15em; flex: none; display: inline-block; }
.dk-clin { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: #d92d3f; color: #fff !important; font: 600 13px var(--body); text-decoration: none;
  white-space: nowrap; box-shadow: 0 6px 18px rgba(217, 45, 63, .35); transition: background .15s, transform .15s; }
.dk-clin:hover { background: #e63b4d; transform: translateY(-1px); }
.dk-clin svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dk-clin .dk-badge { margin-left: 2px; background: #fff; color: #d92d3f; }
.dk-clin[hidden], .app-mobile .dk-clin { display: none; }
@media (max-width: 1180px) { .app-desktop .dk-clin span { display: none; } .app-desktop .dk-clin { padding: 0 13px; } }
/* Mobile profile sheet: the red ClyDoc Clinician row */
.mb-row.mb-clin { margin: 0 0 14px; border-radius: 16px; background: #d92d3f; color: #fff; font-weight: 600; }
.mb-row.mb-clin .mb-row-ic { background: rgba(255, 255, 255, .18); color: #fff; }
.mb-row.mb-clin svg { stroke: #fff; }
.mb-row.mb-clin small { display: block; font-weight: 400; font-size: 12px; opacity: .85; }

/* ---------- Shared bits ---------- */
.cn-tabs button.on { background: color-mix(in srgb, var(--brand) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent); }
.cn-tabs .dk-badge { margin-left: 6px; }
.cn-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; object-fit: cover; font: 600 .85rem var(--display); color: #fff; background: linear-gradient(135deg, var(--brand-700), var(--brand)); }
.cn-av.lg { width: 64px; height: 64px; font-size: 1.2rem; }
.cn-av.xl { width: 104px; height: 104px; font-size: 2rem; }
.cn-badge { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--brand); color: #fff; font: 700 11px var(--body); text-align: center; }
.cn-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.cn-fine { max-width: 760px; margin-top: 14px; font-size: .86rem; }
.cn-warn { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); font-size: .9rem; }
.cn-sheet .modal-card { width: min(640px, 100%); max-height: 88vh; overflow-y: auto; }
.cn-sheet.cn-wide .modal-card { width: min(920px, 100%); }
.cn-report .cr-report { box-shadow: none; margin: 0; }
.cn-viewer .modal-card { width: min(1000px, 100%); height: min(88vh, 900px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cn-viewer-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cn-viewer-h b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-viewer-b { flex: 1; min-height: 0; display: grid; place-items: center; background: #0b0f1c; }
.cn-viewer-b img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cn-viewer-b iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* ---------- Clinician portal ---------- */
.cn-hero { display: grid; grid-template-columns: auto 1fr; gap: 26px; padding: 34px; border-radius: var(--r-lg); background: radial-gradient(circle at 0 0, rgba(217, 45, 63, .25), transparent 55%), linear-gradient(160deg, var(--card-2), var(--card)); border: 1px solid var(--line); }
.cn-hero > svg { width: 74px; height: 74px; padding: 16px; border-radius: 22px; background: #d92d3f; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cn-hero small { color: #ff8b99; font: 600 .75rem var(--display); letter-spacing: .14em; }
.cn-hero h1 { margin: 6px 0 10px; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.cn-hero p { max-width: 720px; color: var(--muted); }
.cn-steps { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cn-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.cn-steps b { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font-size: .8rem; }
.cn-status { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.cn-status > svg { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cn-status > svg.v-tick { margin: 0; }
.cn-status div { flex: 1; display: grid; gap: 2px; }
.cn-status span { color: var(--muted); font-size: .9rem; }
.cn-status.s-pending { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.cn-status.s-draft { color: var(--glow); }
.cn-status.s-rejected { border-color: color-mix(in srgb, var(--risk) 50%, transparent); color: var(--risk); }
.cn-status.s-verified { border-color: rgba(29, 155, 240, .5); color: #1d9bf0; }
.cn-status b { color: var(--text); }
.cn-accept { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.cn-accept input, .bd-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cn-accept span, .bd-switch > span { width: 42px; height: 24px; flex: none; border-radius: 999px; background: var(--line-2); position: relative; transition: background .2s; }
.cn-accept span::after, .bd-switch > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cn-accept input:checked + span, .bd-switch input:checked + span { background: var(--t-ok, #34d399); }
.cn-accept input:checked + span::after, .bd-switch input:checked + span::after { transform: translateX(18px); }
.cn-accept input:focus-visible + span, .bd-switch input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 2px; }
.cn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cn-stats div { padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.cn-stats small { color: var(--muted); }
.cn-stats b { display: block; margin-top: 4px; font: 600 1.9rem var(--display); }
.cn-mini { list-style: none; margin: 0; padding: 0; }
.cn-mini button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; }
.cn-mini button:hover { background: var(--bg-2); }
.cn-mini span:not(.cn-av) { flex: 1; min-width: 0; display: grid; }
.cn-mini small, .cn-tmain small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-mini time { color: var(--dim); font-size: .8rem; }
.cn-form .cx-sub { margin: 22px 0 10px; }
.cn-degrees { display: grid; gap: 10px; margin-bottom: 10px; }
.cn-deg { display: grid; grid-template-columns: 1fr 1.6fr 90px auto; gap: 10px; align-items: end; }
.cn-deg .icon-btn { margin-bottom: 4px; }
.cn-docs { margin-top: 20px; }
.cn-up { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 14px 0; }
.cn-up .wb-field { min-width: 220px; margin: 0; }
.cn-pick { cursor: pointer; }
.cn-pick svg, .cn-doclist svg, .cn-shared svg, .cn-datacard > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cn-doclist { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.cn-doclist li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.cn-doclist li > span { flex: 1; min-width: 0; display: grid; }
.cn-doclist small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-subrow { margin-top: 14px; }

/* ---------- Inbox and chat ---------- */
.cn-inbox { display: grid; grid-template-columns: 320px 1fr; height: min(74vh, 780px); min-height: 480px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.cn-list { border-right: 1px solid var(--line); overflow-y: auto; background: var(--bg-2); }
.cn-list ul { list-style: none; margin: 0; padding: 6px; }
.cn-listsearch { display: flex; align-items: center; gap: 8px; margin: 10px; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.cn-listsearch svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }
.cn-listsearch input { flex: 1; border: 0; background: none; color: var(--text); font: inherit; outline: none; }
.cn-titem { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 10px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.cn-titem:hover { background: var(--card); }
.cn-titem.on { background: color-mix(in srgb, var(--brand) 18%, var(--card)); }
.cn-titem.unread b { font-weight: 700; }
.cn-tmain { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cn-tmain b { font-weight: 500; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.cn-tmeta { display: grid; justify-items: end; gap: 4px; font-size: .75rem; color: var(--dim); }
.cn-tmeta em { font-style: normal; }
.cn-none { padding: 18px 12px; text-align: center; }
.cn-pane { min-width: 0; min-height: 0; display: flex; }
.cn-pane > * { flex: 1; min-width: 0; }
.cn-rec { display: grid; grid-template-columns: 1fr 300px; min-height: 0; height: 100%; }
.cn-rec > div { min-width: 0; min-height: 0; display: flex; }
.cn-rec > div > .cn-chat { flex: 1; }
.cn-side { border-left: 1px solid var(--line); overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 18px; background: var(--bg-2); }
.cn-side h4 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cn-side p { margin: 0 0 6px; }
.cn-notes { width: 100%; margin: 6px 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; resize: vertical; }
.cn-shared { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cn-shared button { width: 100%; display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-align: left; cursor: pointer; }
.cn-shared span { display: grid; }
.cn-shared small { color: var(--muted); }
.cn-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.cn-chat.cn-empty, .cn-loading { display: grid; place-content: center; justify-items: center; gap: 8px; height: 100%; padding: 24px; text-align: center; }
.cn-chat.cn-empty svg { width: 42px; height: 42px; fill: none; stroke: var(--dim); stroke-width: 1.5; }
.cn-chat-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cn-who { flex: 1; min-width: 0; display: grid; }
.cn-who b { display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.cn-who small { color: var(--muted); }
.cn-who em { color: var(--warn); font-style: normal; }
.cn-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cn-acts .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; margin-right: 4px; vertical-align: -3px; }
.cn-hbtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-2); color: var(--glow); cursor: pointer; }
.cn-hbtn:hover { background: var(--card-2); }
.cn-hbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cn-back { display: none; }
.cn-reason { margin: 0; padding: 10px 16px; font-size: .88rem; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.cn-msgs { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.cn-msg { display: flex; }
.cn-msg.me { justify-content: flex-end; }
.cn-bub { max-width: min(76%, 560px); padding: 9px 13px 6px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.cn-msg.me .cn-bub { background: var(--brand); border-color: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.cn-msg.them .cn-bub { border-bottom-left-radius: 5px; }
.cn-bub p { margin: 0 0 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cn-bub a { color: inherit; text-decoration: underline; }
.cn-bub time { display: block; font-size: .7rem; opacity: .65; text-align: right; }
.cn-sys { align-self: center; display: grid; justify-items: center; font-size: .78rem; color: var(--muted); text-align: center; max-width: 80%; }
.cn-sys time { font-size: .7rem; color: var(--dim); }
.cn-img { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cn-img img { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; object-fit: cover; }
.cn-datacard { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 4px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.cn-msg.them .cn-datacard { background: var(--card); }
.cn-datacard div { display: grid; }
.cn-datacard small { opacity: .8; }
.cn-msg.me .cn-datacard .btn { color: #fff; border-color: rgba(255, 255, 255, .5); }
.cn-callpill { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.cn-callpill svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cn-callpill.missed { color: var(--risk); }
.cn-msg.me .cn-callpill.missed { color: #ffd6db; }
.cn-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.cn-compose textarea { flex: 1; min-height: 42px; max-height: 160px; padding: 10px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; resize: none; line-height: 1.4; }
.cn-compose textarea:focus { outline: none; border-color: var(--brand); }
.cn-attach { cursor: pointer; color: var(--muted); }
.cn-sendbtn { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brand); color: #fff; cursor: pointer; }
.cn-sendbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.cn-sendbtn:disabled { opacity: .5; }
.cn-closed { margin: 0; padding: 14px; text-align: center; border-top: 1px solid var(--line); }
.cn-safety { margin: 0; padding: 6px 14px 10px; font-size: .75rem; text-align: center; }

/* ---------- Calls ---------- */
.cn-call { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-rows: 1fr auto; background: radial-gradient(circle at 50% 30%, #1a2550, #070a14 70%); color: #fff; }
.cn-call-stage { position: relative; min-height: 0; overflow: hidden; }
.cn-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; opacity: 0; transition: opacity .3s; }
.cn-call.video.live .cn-remote { opacity: 1; }
.cn-local { position: absolute; right: 18px; bottom: 18px; width: min(26vw, 220px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .35); background: #111; transform: scaleX(-1); display: none; }
.cn-call.video .cn-local { display: block; }
.cn-call.video.in .cn-local { display: none; }
.cn-call.audio .cn-remote { display: none; }
.cn-call-id { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; pointer-events: none; }
.cn-call.video.live .cn-call-id { inset: 16px auto auto 16px; place-content: start; justify-items: start; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, .4); }
.cn-call.video.live .cn-call-id .cn-av { display: none; }
.cn-call-id b { font: 600 1.4rem var(--display); }
.cn-call-st { color: rgba(255, 255, 255, .75); }
.cn-call.out .cn-av, .cn-call.in .cn-av { animation: cn-pulse 1.6s ease-in-out infinite; }
@keyframes cn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(94, 211, 243, .5); } 50% { box-shadow: 0 0 0 18px rgba(94, 211, 243, 0); } }
.cn-call-time { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.cn-call-bar { display: flex; justify-content: center; gap: 22px; padding: 22px 16px calc(26px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.cn-cbtn { display: grid; justify-items: center; gap: 6px; border: 0; background: none; color: #fff; font: 500 .78rem var(--body); cursor: pointer; }
.cn-cbtn svg { width: 60px; height: 60px; padding: 17px; border-radius: 50%; background: rgba(255, 255, 255, .16); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background .15s; }
.cn-cbtn:hover svg { background: rgba(255, 255, 255, .26); }
.cn-cbtn.bad svg { background: #e5394b; }
.cn-cbtn.ok svg { background: #1fb36b; }

/* ---------- Consult a Doctor ---------- */
.cn-searchbox { display: grid; gap: 14px; }
.cn-sinput { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); }
.cn-sinput > svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; }
.cn-sinput input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: 1rem var(--body); outline: none; }
.cn-sinput .btn { border-radius: 999px; }
.cn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-chips .chip { height: 32px; font-size: .8rem; }
.cn-results { margin-top: 18px; }
.cn-hint { margin: 0 0 12px; }
.cn-docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.cn-doc { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); }
.cn-doc h3 { margin: 0; font-size: 1.08rem; display: flex; align-items: center; flex-wrap: wrap; }
.cn-doc p { margin: 2px 0; font-size: .88rem; }
.cn-spec { color: var(--glow); font-weight: 500; }
.cn-doc-act { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.cn-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cn-tags span { padding: 3px 10px; border-radius: 999px; font-size: .76rem; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); }
.cn-tags .ok { color: var(--t-ok, #34d399); border-color: color-mix(in srgb, var(--t-ok, #34d399) 40%, transparent); }
.cn-tags .off { color: var(--warn); }
.cn-tags .fee { color: var(--text); }
.cn-prof h4 { margin: 18px 0 6px; }
.cn-prof .cn-doc { border: 0; padding: 0; background: none; }
.cn-verline { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(29, 155, 240, .1); color: var(--text); font-size: .9rem; }
.cn-verline .v-tick { margin: 0; width: 20px; height: 20px; }
.cn-edu { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cn-edu li { display: grid; }
.cn-edu span { color: var(--muted); font-size: .88rem; }
.cn-sendform, .cn-links { max-width: 1100px; }
.cn-sendform .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; margin-right: 6px; vertical-align: -3px; }
#shareToDoctor { margin-top: 20px; }

/* ---------- Admin › Clinicians ---------- */
.cn-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 600 .74rem var(--body); background: var(--bg-2); border: 1px solid var(--line); white-space: nowrap; }
.cn-pill .v-tick { margin: 0; }
.cn-pill.s-pending { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.cn-pill.s-verified { color: #1d9bf0; border-color: rgba(29, 155, 240, .45); }
.cn-pill.s-rejected { color: var(--risk); border-color: color-mix(in srgb, var(--risk) 45%, transparent); }
.cn-agrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; margin-top: 12px; }
.cn-adetail .modal-foot .btn .v-tick { margin: 0 6px 0 0; }
.a-user .v-tick { margin-left: 4px; }

/* ---------- Donate Blood ---------- */
.bd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bd-side { display: grid; gap: 16px; }
.bd-side .panel + .panel { margin-top: 0; }
.bd-card { position: relative; overflow: hidden; aspect-ratio: 85.6 / 54; max-width: 520px; padding: 22px 24px; border-radius: 22px; color: #fff; display: grid; grid-template-rows: auto 1fr auto; gap: 10px;
  background: radial-gradient(circle at 105% -10%, #e2334a 0 38%, transparent 39%), linear-gradient(135deg, #8f0e22, #c3162f 60%, #a3132a); box-shadow: 0 20px 50px rgba(176, 18, 42, .35); }
.bd-card::after { content: ''; position: absolute; right: -30px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.bd-card small { display: block; color: rgba(255, 220, 225, .85); font: 600 .62rem var(--display); letter-spacing: .12em; text-transform: uppercase; }
.bd-card b { font-weight: 600; }
.bd-card-top { display: flex; align-items: center; gap: 10px; }
.bd-card-top img { width: 36px; height: 36px; }
.bd-card-top div { flex: 1; }
.bd-card-top div b { font: 700 1.15rem var(--display); }
.bd-group { font: 700 clamp(2rem, 6vw, 3rem) var(--display); line-height: 1; }
.bd-card-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; align-content: center; }
.bd-card-mid b { font-size: 1rem; }
.bd-card-foot { display: grid; grid-template-columns: 1fr 1fr auto; gap: 18px; align-items: end; position: relative; z-index: 1; }
.bd-qr { width: 64px; height: 64px; padding: 4px; border-radius: 8px; background: #fff; }
.bd-qr svg { width: 100%; height: 100%; display: block; }
.bd-cardacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bd-elig { display: flex; align-items: center; gap: 14px; }
.bd-elig > svg { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 50%; fill: #fff; stroke: none; }
.bd-elig.ok > svg { background: #1fb36b; }
.bd-elig.wait > svg { background: #d92d3f; }
.bd-elig div { display: grid; gap: 2px; }
.bd-elig span { color: var(--muted); font-size: .9rem; }
.bd-switch { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.bd-switch div { display: grid; gap: 2px; }
.bd-switch small { color: var(--muted); }
.bd-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bd-h h3 { margin: 0; }
.bd-h .btn svg, .bd-reqbar .btn svg, .bd-find .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 4px; vertical-align: -3px; }
.bd-log { list-style: none; padding: 0; margin: 12px 0 8px; display: grid; gap: 6px; }
.bd-log li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); }
.bd-log span { flex: 1; color: var(--muted); }
.bd-check .sys-list { margin: 10px 0; }
.bd-find { max-width: 860px; }
.bd-find .modal-body { margin-bottom: 8px; }
.bd-find .btn { margin-top: 10px; }
.bd-donors, .bd-reqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
.bd-donor, .bd-req { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.bd-req { align-items: start; }
.bd-req.urgent { border-color: color-mix(in srgb, #e5394b 55%, transparent); }
.bd-req.closed { opacity: .65; }
.bd-donor > div, .bd-req > div { min-width: 0; display: grid; gap: 3px; }
.bd-donor small, .bd-req small { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.bd-donor small svg, .bd-req small svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bd-req p { margin: 4px 0; font-size: .9rem; }
.bd-gbadge { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #b0122a, #e2334a); color: #fff; font: 700 1rem var(--display); }
.bd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.bd-tags em, .bd-req em { font-style: normal; font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--muted); }
.bd-tags em.ok { color: var(--t-ok, #34d399); }
.bd-req em.urgent { background: #e5394b; color: #fff; }
.bd-reqact { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bd-reqbar { justify-content: space-between; }
.bd-matrix-wrap { overflow-x: auto; }
.bd-matrix { width: 100%; border-collapse: collapse; text-align: center; font-size: .88rem; }
.bd-matrix th, .bd-matrix td { padding: 7px 6px; border: 1px solid var(--line); }
.bd-matrix thead th { background: var(--bg-2); font-weight: 600; }
.bd-matrix tbody th { background: var(--bg-2); }
.bd-matrix td.y { background: color-mix(in srgb, #e2334a 22%, transparent); color: #ff8b99; font-weight: 700; }
.bd-steps { margin: 10px 0; padding-left: 20px; display: grid; gap: 10px; }
.bd-steps li { display: grid; gap: 2px; }
.bd-steps span { color: var(--muted); }

/* ---------- Light theme ---------- */
[data-theme="light"] .cn-viewer-b { background: #e9edf5; }
[data-theme="light"] .cn-call { color: #fff; }
[data-theme="light"] .bd-matrix td.y { color: #b0122a; }

/* ---------- Narrow screens and phones ---------- */
.cn-recbtn, .cn-sideclose { display: none; }
.cn-rec { position: relative; }
@media (max-width: 1100px) {
  .cn-rec { grid-template-columns: 1fr; }
  .cn-side { display: none; }
  .cn-recbtn { display: inline-flex; }
  .cn-rec.show-side .cn-side { display: grid; position: absolute; inset: 0; z-index: 5; border-left: 0; }
  .cn-rec.show-side .cn-sideclose { display: inline-flex; justify-self: start; }
  .cn-sideclose svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 4px; }
  .cn-two, .bd-grid, .cn-agrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cn-hero { grid-template-columns: 1fr; padding: 22px; }
  .cn-steps { grid-template-columns: 1fr; }
  .cn-stats { grid-template-columns: 1fr 1fr; }
  .cn-deg { grid-template-columns: 1fr 80px auto; }
  .cn-deg .wb-field:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .cn-docgrid, .bd-donors, .bd-reqs { grid-template-columns: 1fr; }
  .cn-inbox { grid-template-columns: 1fr; height: calc(100dvh - 210px); min-height: 420px; }
  .cn-inbox .cn-pane { display: none; }
  .cn-inbox.has-sel .cn-list { display: none; }
  .cn-inbox.has-sel .cn-pane { display: flex; }
  .cn-back { display: grid; }
  .cn-chat-h { flex-wrap: wrap; padding: 10px; }
  .cn-acts { width: 100%; justify-content: flex-start; }
  .cn-bub { max-width: 86%; }
  .cn-status { flex-wrap: wrap; }
  .cn-doc { grid-template-columns: auto 1fr; padding: 14px; }
  .bd-card { padding: 16px 18px; border-radius: 18px; }
  .bd-card-mid b { font-size: .88rem; }
  .bd-qr { width: 52px; height: 52px; }
  .bd-donor, .bd-req { grid-template-columns: auto 1fr; }
  .bd-donor .btn, .bd-reqact { grid-column: 1 / -1; }
  .bd-reqact { flex-direction: row; justify-content: flex-end; }
  .cn-call-bar { gap: 14px; }
  .cn-cbtn svg { width: 56px; height: 56px; padding: 16px; }
  .cn-local { width: 30vw; right: 12px; bottom: 12px; }
}

/* ---------- Send data to your doctor: share links (from js/care.js) ---------- */
.cn-sharelinks { margin-top: 24px; }
.cr-sharehead h3 { margin: 0 0 4px; }
.cr-sharehead p { margin: 0 0 14px; max-width: 760px; }

/* ---------- Blood compatibility checker ---------- */
.bd-checker { margin-top: 20px; }
.bd-checker .bd-h { flex-wrap: wrap; }
.bd-ck-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; margin: 10px 0 14px; }
.bd-ck-row .wb-field { margin: 0; }
.bd-ck-swap { margin-bottom: 4px; font-size: 1.2rem; }
.bd-ck-verdict { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; margin-bottom: 12px; }
.bd-ck-verdict > span { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 700 1.2rem var(--display); }
.bd-ck-verdict div { display: grid; gap: 3px; }
.bd-ck-verdict small { color: var(--muted); }
.bd-ck-verdict.ok { background: color-mix(in srgb, #1fb36b 14%, transparent); border: 1px solid color-mix(in srgb, #1fb36b 45%, transparent); }
.bd-ck-verdict.ok > span { background: #1fb36b; }
.bd-ck-verdict.no { background: color-mix(in srgb, #e5394b 12%, transparent); border: 1px solid color-mix(in srgb, #e5394b 45%, transparent); }
.bd-ck-verdict.no > span { background: #e5394b; }
.bd-ck-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bd-ck-lists small { display: block; margin-bottom: 6px; color: var(--muted); }
.bd-ck-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-ck-chips b { min-width: 40px; padding: 5px 8px; border-radius: 10px; text-align: center; font: 600 .82rem var(--display); background: var(--bg-2); color: var(--dim); border: 1px solid var(--line); text-decoration: line-through; opacity: .7; }
.bd-ck-chips b.y { background: linear-gradient(135deg, #b0122a, #e2334a); color: #fff; border-color: transparent; text-decoration: none; opacity: 1; }
.bd-ck-note { margin: 12px 0 0; font-size: .8rem; }
@media (max-width: 760px) { .bd-ck-lists { grid-template-columns: 1fr; } .bd-ck-row { grid-template-columns: 1fr auto 1fr; gap: 8px; } }

/* ---------- Send data to your doctor: one form, two ways to send ---------- */
.cn-sendform h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.cn-sendform h3:not(:first-child) { margin-top: 22px; }
.cn-step { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font: 700 .8rem var(--display); }
.cn-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-bottom: 14px; }
.cn-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cn-way { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); }
.cn-way h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; }
.cn-way h4 svg { width: 20px; height: 20px; fill: none; stroke: var(--glow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cn-way p { margin: 0; }
.cn-way .wb-field { margin: 0; }
.cn-way .btn { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cn-way .btn svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cn-wayrow { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.cn-links { margin-top: 18px; }
.cn-links h3 { margin-top: 0; }
.cn-links .icon-btn svg, .cn-links .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 760px) { .cn-checks, .cn-ways, .cn-wayrow { grid-template-columns: 1fr; } }
/* Clinician portal without the ClyDoc Clinician plan */
.cn-gate .cn-gate-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(217, 45, 63, .1); border: 1px solid rgba(217, 45, 63, .35); color: var(--text); }
.cn-price { margin: 16px 0 0; color: var(--muted); }
.cn-price b { color: #ff8b99; font: 600 1.25rem var(--display); }
.cn-gate-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cn-gate-act .is-current { cursor: default; opacity: .85; }
.cn-sub { background: #d92d3f; border-color: #d92d3f; color: #fff; }
.cn-sub:hover { background: #c0233a; border-color: #c0233a; }
.cn-plan { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 600 .74rem var(--body); white-space: nowrap; background: rgba(251, 191, 36, .14); color: var(--warn); }
.cn-plan.on { background: rgba(217, 45, 63, .15); color: #ff8b99; }

/* ClyDoc Clinician logo: the ClyDoc head in Clinician red (clydoc-clinician-icon.png) */
.cn-logo-dot { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -4px; border-radius: 50%; background: #1a0b10; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); flex: none; }
.cn-logo { width: 22px; height: 22px; object-fit: contain; }
.cn-hero > .cn-hero-logo { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 0 22px rgba(217, 45, 63, .55)); }
.mb-clin-ic img { width: 24px; height: 24px; object-fit: contain; }
@media (max-width: 640px) { .cn-hero > .cn-hero-logo { width: 72px; height: 72px; } }

/* ClyDoc Clinician button: the red logo on its own (no background) beside a red pill with white text (2026-10-24) */
.dk-clin { background: transparent; padding: 0; gap: 8px; box-shadow: none; }
.dk-clin:hover { background: transparent; }
.dk-clin .cn-logo-dot { width: 40px; height: 40px; margin: 0; background: none; box-shadow: none; border-radius: 0; }
.dk-clin .cn-logo { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(217, 45, 63, .45)); }
.dk-clin > span:not(.cn-logo-dot) { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: #d92d3f; color: #fff; font: 600 13px var(--body); box-shadow: 0 8px 20px -10px rgba(217, 45, 63, .8); }
.dk-clin:hover > span:not(.cn-logo-dot) { background: #e63b4d; }
@media (max-width: 1180px) { .app-desktop .dk-clin { padding: 0; } }