/* MediCare+ 5.1 — V4-inspired teal, sage and pearl interface. */
:root {
  --teal: #177966;
  --deep: #123e38;
  --ink: #193b36;
  --muted: #586f66;
  --mint: #dceee5;
  --line: #d0dfd5;
  --bg: #e5eee7;
  --orange: #df9554;
  --shadow: 0 10px 32px #183e2c0b;
}
body { background: #e5eee7; }
button, a, input, select, textarea { outline-color: #22836c; }
.btn { background: linear-gradient(120deg,#1d806d,#126251); border: 1px solid transparent; box-shadow: 0 5px 12px #185d4818; border-radius: 11px; }
.btn:hover { box-shadow: 0 8px 18px #185d4829; }
.btn.secondary { background: #f5f8f1; color: #26584b; border-color: #c2d6c7; }
.btn.subtle { background: #deeee2; color: #24634d; border-color: #cadfce; }
.btn.danger { background: #f9e7e2; color: #9a3e37; border-color: #ebcec6; }
.btn.small { border-radius: 8px; }
.iconbox { background: #dceee0; color: #2b7158; border-radius: 13px; }
.iconbox.blue { background: #e2edf1; color: #386f83; }
.iconbox.orange { background: #f8ebd6; color: #9b612a; }
.iconbox.purple { background: #eee7f3; color: #79618d; }
.textlink { color: #236e52; font-weight: 700; }
.tag { border-radius: 7px; padding: 6px 10px; background: #dceee0; color: #2b6849; font-size: calc(11px * var(--text-scale,1)); }
.tag.pending { background: #f6ead2; color: #805b24; }
.tag.cancelled, .tag.no_show { background: #f7e3de; color: #9c4840; }
.tag.checked_in { background: #e1edf2; color: #396e85; }
.tag.active, .tag.completed { background: #dcecdc; color: #37643e; }
.demo-strip { background: #d4e5d8; color: #3d6652; border-bottom-color: #bfd4c3; }
.demo-strip button { color: #205d43; }

/* The page canvas carries color; panels use quiet, contrasting surfaces. */
.shell { grid-template-columns: 246px minmax(0,1fr); background: radial-gradient(ellipse at 96% 0,#d4e7d8 0,transparent 48%),linear-gradient(145deg,#e9f0e7,#e0ebe1); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 31px 18px 18px; background: linear-gradient(165deg,#153e38,#0c302d); color: #d1e3d8; border: 0; box-shadow: 7px 0 30px #183c2b0b; z-index: 9; }
.sidebar .brand { padding: 0 12px; color: #f4f7ec; font-size: calc(24px * var(--text-scale,1)); margin-bottom: 36px; }
.sidebar .brand em { color: #b4dac6; }
.sidebar .brand small { color: #a6c3b6; font-size: calc(10px * var(--text-scale,1)); }
.sidebar .logo { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg,#8cc2a5,#4d937b); color: #fffdf3; box-shadow: 0 4px 16px #0002; }
.nav-label { color: #a1c1b3; letter-spacing: 1.7px; font-size: calc(9px * var(--text-scale,1)); margin-bottom: 15px; padding-left: 16px; }
.side-nav { gap: 6px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #456b5e transparent; padding: 2px 0 12px; }
.side-nav button { position: relative; flex-shrink: 0; min-height: 44px; padding: 12px 14px; gap: 12px; color: #c3d8cb; font-size: calc(13px * var(--text-scale,1)); border-radius: 10px; line-height: 1.45; }
.side-nav button .icon { width: 19px; height: 19px; color: #a7c6b5; }
.side-nav button:hover { background: #ffffff0b; color: #fcfdf3; }
.side-nav button.active { background: linear-gradient(105deg,#d2e8d6,#bfdbc8); color: #1b4936; font-weight: 800; box-shadow: 0 5px 15px #0001; }
.side-nav button.active .icon { color: #285e43; }
.side-nav button.active:after { content: ''; position: absolute; right: 12px; width: 5px; height: 5px; border-radius: 50%; background: #2b6d4e; }
.sidebar-bottom { margin-top: 18px; flex-shrink: 0; }
.helpbox { margin: 0 4px 17px; padding: 17px 15px; background: linear-gradient(130deg,#2b5147,#25453c); border: 1px solid #466451; border-radius: 13px; color: #e7efdf; }
.helpbox .icon { color: #b7d5bc; margin-bottom: 10px; }
.helpbox p { color: #b9cebc; font-size: calc(11px * var(--text-scale,1)); margin: 7px 0 0; }
.logout { width: 100%; color: #c9dcce; border-top: 1px solid #3d5a4a; padding: 16px 15px 8px; text-align: left; font-size: calc(12px * var(--text-scale,1)); }
.logout:hover { color: #fff7df; }
.topbar { height: 84px; background: #edf3e9e8; backdrop-filter: blur(16px); border-bottom: 1px solid #cadbcb; padding: 0 36px; gap: 20px; }
.searchbox { display: flex; align-items: center; gap: 12px; background: #e2ece0; border: 1px solid #c7d8c6; padding: 11px 15px; border-radius: 12px; color: #718975; }
.topbar .searchbox input { width: min(300px,25vw); color: #385740; background: transparent; font-size: calc(12px * var(--text-scale,1)); }
.searchbox input::placeholder { color: #617967; }
.topbar .bell { background: #e1ebdf; border: 1px solid #c9d9c7; width: 40px; height: 40px; border-radius: 12px; color: #486c51; }
.userbox { padding-left: 18px; border-left: 1px solid #c6d6c3; }
.userbox strong { color: #294b32; font-size: calc(12px * var(--text-scale,1)); }
.userbox small { color: #607963; font-size: calc(10px * var(--text-scale,1)); margin-top: 5px; }
.avatar { background: #d0e2d0; color: #365d3d; border: 1px solid #b9cfb7; }
.content { padding: 31px 36px 48px; max-width: 1650px; background: transparent; margin: 0 auto; }
.page-heading { margin-bottom: 23px; gap: 20px; }
.page-overline { display: block; color: #607d62; font-size: calc(9px * var(--text-scale,1)); letter-spacing: 1.8px; font-weight: 800; margin-bottom: 8px; }
.page-heading h2 { color: #234532; font-size: calc(27px * var(--text-scale,1)); margin-bottom: 7px; letter-spacing: -1px; }
.page-heading p { color: #5a765e; font-size: calc(12px * var(--text-scale,1)); line-height: 1.6; margin-bottom: 0; }
.today { background: #eef4e8; border: 1px solid #c5d8c0; color: #567156; border-radius: 10px; font-size: calc(11px * var(--text-scale,1)); padding: 12px 14px; white-space: nowrap; }

/* The original V4 clinic banner, with readable text and a richer overlay. */
.welcome { min-height: 210px; padding: 34px 36px; gap: 25px; border-radius: 20px; border: 1px solid #265e4c; background: linear-gradient(90deg,#154b3cf7 0%,#1b5b46f5 45%,#246449aa 70%,#254c3155),url('clinic.jpg') right 45%/cover; color: #f9fcf0; box-shadow: 0 12px 30px #183c2b16; margin-bottom: 18px; isolation: isolate; }
.welcome:before { content: ''; position: absolute; width: 350px; height: 350px; right: 10%; top: -190px; border: 1px solid #d8f1cd30; border-radius: 50%; box-shadow: 0 0 0 50px #d2eec50b,0 0 0 105px #d2eec507; z-index: -1; }
.welcome:after { display: none; }
.welcome-copy { max-width: 610px; }
.welcome .eyebrow { color: #c0dec1; font-size: calc(10px * var(--text-scale,1)); letter-spacing: 2px; }
.welcome h2 { color: #f8fbed; font-size: calc(32px * var(--text-scale,1)); font-weight: 800; margin: 12px 0 12px; letter-spacing: -1.1px; line-height: 1.25; }
.welcome p { color: #d3e6d0; font-size: calc(13px * var(--text-scale,1)); max-width: 520px; margin-bottom: 0; }
.welcome-location { display: flex; align-items: center; gap: 7px; color: #c1d9bb; font-size: calc(10px * var(--text-scale,1)); margin-top: 20px; }
.welcome-location .icon { width: 14px; height: 14px; }
.welcome .btn { background: #f0f6e6; color: #24573b; border: 1px solid #e3ecd6; padding: 13px 20px; box-shadow: 0 6px 24px #16332625; flex-shrink: 0; align-self: center; }
.welcome .btn:hover { background: #fff9e9; }
.hours-band { display: flex; gap: 13px; align-items: center; margin: 0 0 22px; padding: 14px 20px; border-radius: 13px; background: #d8e8d6; border: 1px solid #c1d6bb; box-shadow: 0 3px 12px #23452b04; }
.hours-band .iconbox { width: 36px; height: 36px; border-radius: 11px; background: #c5dbbd; color: #416940; }
.hours-band strong { display: block; color: #365b36; font-size: calc(12px * var(--text-scale,1)); }
.hours-band span:not(.iconbox):not(.hours-pill) { display: block; margin-top: 4px; color: #536f4c; font-size: calc(11px * var(--text-scale,1)); }
.hours-band .hours-pill { margin-left: auto; padding: 6px 11px; border: 1px solid #b4cfa8; border-radius: 25px; background: #e9f2e0; color: #3f6537; font-weight: 700; font-size: calc(10px * var(--text-scale,1)); white-space: nowrap; }

.stats { gap: 16px; margin: 22px 0 24px; }
.stat { position: relative; overflow: hidden; min-height: 112px; padding: 22px 20px; gap: 16px; border-radius: 16px; background: linear-gradient(130deg,#eff5e9,#e0edda); border: 1px solid #c5d9bc; box-shadow: 0 6px 20px #28472606; }
.stat:nth-child(2) { background: linear-gradient(130deg,#fbf3e5,#f2e6d1); border-color: #e0d1b8; }
.stat:nth-child(3) { background: linear-gradient(130deg,#eaf2f2,#ddebee); border-color: #c3d6db; }
.stat:nth-child(4) { background: linear-gradient(130deg,#f3eef6,#e8e0ef); border-color: #d6cade; }
.stat:after { content: ''; position: absolute; width: 100px; height: 100px; border: 1px solid #456c3c0d; right: -35px; bottom: -50px; border-radius: 50%; pointer-events: none; }
.stat .iconbox { width: 46px; height: 46px; border: 1px solid #bdd3af; background: #d7e8cb; flex-shrink: 0; }
.stat .iconbox.orange { border-color: #ead4ae; background: #f6e6c8; }
.stat .iconbox.blue { border-color: #bcd3dc; background: #d7e7ee; }
.stat .iconbox.purple { border-color: #d4c2e0; background: #e4d8ed; }
.stat strong { color: #2a4a32; font-size: calc(29px * var(--text-scale,1)); line-height: 1.1; letter-spacing: -1px; margin-bottom: 7px; }
.stat div>span { color: #576e52; font-size: calc(11px * var(--text-scale,1)); line-height: 1.4; }
.dashboard-grid { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: 22px; }
.panel { padding: 25px; border-radius: 17px; border: 1px solid #cbdac7; background: #f5f8ef; box-shadow: 0 5px 24px #2b4e2c07; }
.panel:nth-child(2n) { background: #f0f5ec; }
.panel-title { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #d8e2d1; }
.panel-title h3, .panel>h3 { font-size: calc(15px * var(--text-scale,1)); color: #294d31; letter-spacing: -.3px; margin-bottom: 0; }
.panel-title .textlink { font-size: calc(11px * var(--text-scale,1)); white-space: nowrap; }
.spacer { margin-top: 22px; }
.quick-grid { gap: 12px; }
.quick { position: relative; background: #e8f0df; border: 1px solid #cbdcbd; border-radius: 12px; padding: 18px 16px; transition: transform .2s,box-shadow .2s,border-color .2s; }
.quick:nth-child(2n) { background: #e9f0ee; border-color: #c9dbd2; }
.quick:nth-child(3n) { background: #f4eedf; border-color: #dfd5ba; }
.quick .iconbox { width: 37px; height: 37px; margin-bottom: 14px; border-radius: 10px; background: #d1e2c4; }
.quick:nth-child(2n) .iconbox { background: #d8e6dd; color: #457457; }
.quick:nth-child(3n) .iconbox { background: #e9dfc6; color: #846d3b; }
.quick strong { color: #355331; font-size: calc(12px * var(--text-scale,1)); line-height: 1.5; }
.quick small { color: #607558; font-size: calc(10px * var(--text-scale,1)); line-height: 1.5; margin-top: 5px; }
.quick:hover { transform: translateY(-3px); background: #e0ecd5; border-color: #9dbb8e; box-shadow: 0 9px 16px #3c5d2e0d; }
.empty { padding: 34px 20px; min-height: 150px; border-radius: 12px; background: linear-gradient(135deg,#edf3e4,#e9f0e2); border: 1px dashed #c2d3b6; color: #58734c; line-height: 1.8; }
.empty .icon { color: #7a9c69; width: 31px; height: 31px; margin-bottom: 13px; }
.activity { border-bottom-color: #dbe5d2; }
.activity p { color: #3e5b34; }
.activity small { color: #657d59; }
.dot { background: #699f66; box-shadow: 0 0 0 4px #dcebd3; }
.summary-chart { padding: 16px 12px 0; background: repeating-linear-gradient(to top,transparent 0,transparent 39px,#c8d9bc66 40px,#c8d9bc66 41px); border-radius: 10px; }
.bar { background: linear-gradient(0deg,#437f53,#91b587); border-radius: 6px 6px 2px 2px; box-shadow: inset 1px 0 #ffffff2b; }
.chart-col small, .legend { color: #5d7750; }
.legend i { background: #588b5f; }

/* Services, medicine cards, tables and editable forms share one visual system. */
.services-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.service-card, .medicine-card { padding: 26px; border-radius: 18px; background: #f0f5e9; border: 1px solid #c8d8bb; box-shadow: 0 7px 24px #304e2308; transition: transform .2s,box-shadow .2s; }
.service-card:nth-child(2n), .medicine-card:nth-child(3n) { background: #eaf1ee; border-color: #c7d9ce; }
.service-card:nth-child(3n), .medicine-service { background: #f6f0e1; border-color: #ded2b4; }
.service-card:hover, .medicine-card:hover { transform: translateY(-3px); box-shadow: 0 12px 25px #304e2310; }
.service-card h3, .medicine-card h3 { font-size: calc(18px * var(--text-scale,1)); color: #2f5032; letter-spacing: -.5px; }
.service-card p, .medicine-card p.muted { color: #5b7351; font-size: calc(12px * var(--text-scale,1)); }
.care-service { display: flex; flex-direction: column; align-items: flex-start; }
.care-service>.row { width: 100%; }
.care-service p { flex: 1; }
.care-service .btn { margin-top: 20px; }
.service-hours { padding: 12px 14px; border-radius: 10px; background: #e0eacfaa; color: #466336; font-size: calc(11px * var(--text-scale,1)); line-height: 1.8; width: 100%; }
.service-hours .icon { width: 16px; height: 16px; margin-right: 6px; }
.medicine-picture { background: #e8eedf; border: 1px solid #cbd7c1; border-radius: 12px; }
.medicine-picture img { background: #e9efe2; }
.medicine-picture figcaption { color: #5b724a; background: #edf2e5; }
.medicine-location, .medicine-updated { color: #637951; }
.notice { background: #e7efd9; border: 1px solid #c9d8b2; border-left: 3px solid #8bab6a; border-radius: 10px; color: #4b6539; padding: 15px 17px; line-height: 1.7; font-size: calc(12px * var(--text-scale,1)); }
.notice p { margin: 7px 0 12px; }
.toolbar { padding: 17px; border-radius: 12px; border: 1px solid #d4dfc8; background: #eaf0e1; gap: 12px; }
.toolbar .field { margin-bottom: 0; }
.field input, .field select, .field textarea { background: #f7faf2; border: 1px solid #c3d2b7; border-radius: 9px; color: #34522d; padding: 12px 13px; }
.field label { color: #49653d; font-size: calc(12px * var(--text-scale,1)); font-weight: 600; }
.field small { color: #5d7550; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #6b8061; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #739b5d; box-shadow: 0 0 0 3px #7da25e20; outline: 0; background: #fafcf6; }
.field input[readonly] { background: #e8efdf; color: #607550; }
.form-grid { gap: 12px 18px; }
.form-section { font-size: calc(14px * var(--text-scale,1)); color: #3e6132; margin-top: 25px; border-bottom: 1px solid #d0ddc2; padding: 0 0 12px; }
.intake-help { font-size: calc(12px * var(--text-scale,1)); line-height: 1.7; }
.id-upload { padding: 18px; background: #e9f0dd; border: 1px dashed #a6be8d; border-radius: 12px; margin: 20px 0; }
.id-upload a { display: inline-block; overflow-wrap: anywhere; margin-bottom: 14px; }
.intake-summary { padding: 22px; background: #eff5e5; border: 1px solid #ccdab9; border-radius: 13px; margin: 20px 0; }
.intake-summary h3 { font-size: calc(16px * var(--text-scale,1)); }
.intake-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin: 0; }
.intake-summary dt { color: #60784f; font-size: calc(11px * var(--text-scale,1)); margin-bottom: 5px; }
.intake-summary dd { margin: 0; font-size: calc(13px * var(--text-scale,1)); font-weight: 600; overflow-wrap: anywhere; color: #3f5c30; }
.document-link { display: block; margin-top: 20px; }
.document-link span { display: block; margin-top: 10px; font-size: calc(12px * var(--text-scale,1)); }
.id-preview { display: block; max-width: 100%; max-height: 280px; object-fit: contain; border: 1px solid #bdcfa5; border-radius: 8px; background: #e3edd6; }
.review-box { padding: 20px; border-radius: 13px; border: 1px solid #bfd1a8; background: #e4efd4; margin: 20px 0; }
.review-box form { margin-top: 20px; }
.appointment-card, .confirm-summary { background: #e8f0dc; border-color: #c3d4ae; border-radius: 13px; }
.datebox { background: #cfe2bd; color: #42652e; border-radius: 12px; }
.datebox small { color: #4b6c37; }
.appointment-info h3 { color: #34552b; }
.table-wrap { border-radius: 11px; border: 1px solid #d4dec8; }
table { background: #f5f8ee; }
table th { background: #e5edda; color: #526d3e; padding: 15px 16px; border-bottom: 1px solid #cbd8ba; }
table td { padding: 16px; color: #3f5934; border-bottom-color: #dbe4cf; }
table td small { color: #617850; }
table tbody tr:hover { background: #eaf1df; }
table tbody tr:last-child td { border-bottom: 0; }
#modal { max-width: min(760px,94vw); background: #f3f7eb; border: 1px solid #bdcfa9; border-radius: 20px; box-shadow: 0 25px 100px #102d1d40; }
#modal::backdrop { background: #112d24a8; backdrop-filter: blur(5px); }
.modal-heading { border-bottom: 1px solid #d1ddc0; padding-bottom: 19px; margin-bottom: 22px; }
.modal-heading h2 { font-size: calc(23px * var(--text-scale,1)); color: #37532a; }
.modal-heading p { color: #60764e; line-height: 1.6; }
.close { background: #e4edd8; color: #557244; border-radius: 10px; }
.checkbox { color: #4e673c; line-height: 1.7; }
input[type=checkbox] { accent-color: #537f3a; }
.form-error { background: #f8e7df; color: #9b4c39; border-color: #e7cbbc; }
#toast { background: #254a32; color: #f5f8eb; border: 1px solid #54744d; border-radius: 12px; box-shadow: 0 12px 30px #17331d26; }

/* Landing and account access retain the clinic imagery from V4. */
.public-shell { background: radial-gradient(ellipse at 90% 0,#c9e0ce,transparent 50%),linear-gradient(135deg,#edf4e9,#dcebdc); }
.public-nav { border: 1px solid #d0dfc8; background: #eff6e9eb; box-shadow: 0 8px 25px #37533108; }
.public-nav .brand { color: #294b32; }
.hero { border: 1px solid #c8dcc2; border-radius: 23px; box-shadow: 0 12px 36px #36512b0d; }
.hero:before { background: linear-gradient(90deg,#f2f8eafa 0%,#edf6e5ed 33%,#edf6e580 57%,#e2efdb08 80%); }
.hero h1 { color: #29482f; }
.hero h1 span { color: #538345; }
.hero-copy p { color: #526e47; }
.hero-service { background: #f3f8e9ee; border: 1px solid #d1dfc3; }
.trust-grid article { background: #f2f7e9f2; border: 1px solid #ccdcbc; }
.contact-box { background: linear-gradient(120deg,#214b36,#366547); border: 1px solid #365d3c; box-shadow: 0 10px 30px #284c3112; }
.contact-box h2 { color: #f7f8e8; }
.contact-box .muted { color: #ccdfbd; }
.auth { background: #eff5e6; border: 1px solid #c8d8bb; border-radius: 22px; align-items: stretch; box-shadow: 0 18px 50px #294b2b12; }
.auth-art { min-height: 100%; background: linear-gradient(140deg,#183f2ff7,#2d583fbf),url('clinic.jpg') 70% center/cover; }
.auth-art h1 { color: #f5f8e7; }
.auth-art .eyebrow { color: #c7dfb6; }
.auth-art p { color: #d6e5c9; }
.roles div { border-color: #7c9b6c70; background: #d8e9c311; }
.auth-panel { padding: 46px 42px; background: #eff5e6; }
.auth-panel h2 { color: #3d5a2f; }
.demo-accounts { border-top-color: #c5d7b2; }
.demo-accounts button { background: #dceacb; color: #3d6330; border: 1px solid #bcd0a3; }
.footer { color: #5d7651; }

@media(min-width:1650px) {
  .content { padding: 36px 44px 50px; }
  .topbar { padding: 0 44px; }
  .welcome { min-height: 224px; }
}
@media(max-height:850px) and (min-width:701px) {
  .sidebar { padding-top: 23px; }
  .sidebar .brand { margin-bottom: 23px; }
  .helpbox { display: none; }
  .side-nav { gap: 4px; }
  .side-nav button { padding-top: 11px; padding-bottom: 11px; }
}
@media(max-width:1200px) {
  .shell { grid-template-columns: 220px minmax(0,1fr); }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .sidebar .brand { font-size: calc(22px * var(--text-scale,1)); padding-left: 8px; }
  .side-nav button { padding-left: 12px; gap: 10px; }
  .content { padding: 26px; }
  .topbar { padding: 0 26px; }
  .welcome { padding: 29px; }
  .welcome h2 { font-size: calc(29px * var(--text-scale,1)); }
  .stat { padding: 19px 15px; gap: 12px; }
  .stat .iconbox { width: 39px; height: 39px; }
  .dashboard-grid { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 18px; }
  .panel { padding: 21px; }
}
@media(max-width:1060px) {
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid>div { min-width: 0; }
  .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .welcome { align-items: flex-start; }
  .welcome-copy { max-width: 68%; }
  .welcome .btn { padding: 11px 14px; font-size: calc(11px * var(--text-scale,1)); }
}
@media(max-width:700px) {
  .shell { display: block; }
  .sidebar { position: fixed; width: 252px; left: -270px; padding: 25px 17px 18px; box-shadow: 20px 0 70px #16332025; }
  .sidebar.open { left: 0; }
  .helpbox { display: none; }
  .topbar { height: 73px; padding: 0 20px; }
  .topbar .searchbox { display: none; }
  .topbar .userbox { padding-left: 12px; }
  .topbar .bell { width: 36px; height: 36px; }
  .mobile-toggle { display: block; color: #3c643c; background: #dae8cf; width: 38px; height: 38px; border: 1px solid #bfd2ae; border-radius: 10px; }
  .content { padding: 24px 18px 35px; }
  .page-heading { align-items: flex-start; gap: 12px; margin-bottom: 21px; }
  .page-heading h2 { font-size: calc(24px * var(--text-scale,1)); }
  .page-heading p { font-size: calc(11px * var(--text-scale,1)); }
  .page-overline { font-size: calc(8px * var(--text-scale,1)); letter-spacing: 1.2px; }
  .today { font-size: calc(9px * var(--text-scale,1)); padding: 9px; }
  .welcome { display: block; padding: 27px 24px; min-height: 0; border-radius: 17px; background-position: 68% center; }
  .welcome-copy { max-width: 100%; }
  .welcome h2 { font-size: calc(28px * var(--text-scale,1)); }
  .welcome p { font-size: calc(12px * var(--text-scale,1)); max-width: 90%; }
  .welcome .btn { margin-top: 22px; padding: 12px 17px; font-size: calc(12px * var(--text-scale,1)); }
  .welcome-location { margin-top: 17px; }
  .hours-band { padding: 13px 15px; flex-wrap: wrap; gap: 11px; }
  .hours-band .hours-pill { margin-left: 47px; padding: 5px 9px; font-size: calc(9px * var(--text-scale,1)); }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin: 18px 0; }
  .stat { min-height: 106px; padding: 16px 13px; gap: 10px; border-radius: 13px; }
  .stat .iconbox { width: 33px; height: 33px; border-radius: 10px; }
  .stat strong { font-size: calc(25px * var(--text-scale,1)); }
  .stat div>span { font-size: calc(10px * var(--text-scale,1)); }
  .dashboard-grid { gap: 18px; }
  .panel { padding: 20px 17px; border-radius: 14px; }
  .panel-title { gap: 10px; }
  .quick-grid { gap: 10px; }
  .quick { padding: 16px 13px; }
  .quick strong { font-size: calc(12px * var(--text-scale,1)); }
  .quick small { font-size: calc(10px * var(--text-scale,1)); }
  .services-grid, .patient-mode .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .medicine-grid { grid-template-columns: 1fr; }
  .service-card, .medicine-card { padding: 23px; }
  .form-grid { gap: 9px 12px; }
  .intake-summary dl { grid-template-columns: 1fr; }
  .intake-summary, .review-box { padding: 17px; }
  .toolbar { padding: 13px; }
  #modal { padding: 24px 20px; border-radius: 17px; }
  .auth { display: block; }
  .auth-art { min-height: 270px; padding: 30px; }
  .auth-panel { padding: 30px 24px; }
  .public-nav { padding: 15px; }
}
@media(max-width:400px) {
  .content { padding-left: 13px; padding-right: 13px; }
  .userbox strong { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat { align-items: flex-start; flex-direction: column; gap: 12px; }
  .page-heading { flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) {
  *, *:before, *:after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}
@media print {
  body, .shell, .panel, table { background: #fff!important; color: #111!important; box-shadow: none!important; }
  .shell { display: block; }
  .content { padding: 0; }
}

/* Code lookup and physical collection confirmation. */
.pickup-code-card{padding:23px;border:1px solid #b7d0ad;border-radius:15px;background:linear-gradient(135deg,#dcebd2,#eef4e6);margin:0 0 20px}
.pickup-code-card .eyebrow{color:#4f7241;font-size:calc(10px * var(--text-scale,1))}
.pickup-code{display:block;font-family:Manrope,Arial,sans-serif;font-size:calc(29px * var(--text-scale,1));font-weight:800;letter-spacing:2px;color:#234e35;line-height:1.4;margin:12px 0;user-select:all;overflow-wrap:anywhere}
.pickup-code-card .row .pickup-code{margin:0}
.pickup-code-card h3{margin:17px 0 7px;font-size:calc(19px * var(--text-scale,1));color:#315532}
.pickup-code-card h4{font-size:calc(12px * var(--text-scale,1));margin:18px 0 10px;color:#4d693f}
.pickup-code-card p{font-size:calc(12px * var(--text-scale,1));color:#4d6842;margin:12px 0;line-height:1.75}
.claim-steps{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 22px;padding:11px 13px;border:1px solid #cad8bb;border-radius:10px;background:#e8efdd;font-size:calc(11px * var(--text-scale,1));color:#63774e}
.claim-steps>*{padding:5px 8px;border-radius:6px}.claim-steps strong{background:#d1e3be;color:#3a5f2f}
.claim-confirm-form{margin-top:23px}.claim-blocked{background:#f5e9db;border-color:#dec9ae;color:#805b31}
.release-record{padding:21px;border:1px solid #c9d8bd;border-radius:13px;background:#edf4e6;margin:20px 0}
.release-record h3{font-size:calc(15px * var(--text-scale,1));margin-bottom:18px}
.release-record dl{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0}
.release-record dt{font-size:calc(11px * var(--text-scale,1));color:#62794e;margin-bottom:6px}
.release-record dd{margin:0;font-size:calc(13px * var(--text-scale,1));font-weight:600;overflow-wrap:anywhere;color:#38592e}
.claim-success{padding:18px;text-align:center;background:#dceccb;border:1px solid #bad2a2;border-radius:13px;margin-bottom:20px;color:#3d6730}
.claim-success>.icon{width:35px;height:35px;background:#bad6a4;border-radius:50%;padding:7px;margin-bottom:10px}.claim-success strong{display:block;font-size:calc(18px * var(--text-scale,1))}.claim-success p{font-size:calc(12px * var(--text-scale,1));margin:8px 0 0}
@media(max-width:600px){.pickup-code-card{padding:19px}.pickup-code{font-size:calc(25px * var(--text-scale,1));letter-spacing:1px}.release-record dl{grid-template-columns:1fr}.claim-steps{gap:4px;padding:9px}.claim-steps>*{padding:4px}.claim-confirm-form .modal-actions{flex-wrap:wrap}}

/* Version 6: email verification, matching the sage and teal workspace. */
.verify-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);padding:48px 20px 80px;max-width:1100px;margin:auto;align-items:start}
.verify-intro{padding:35px 10px}.verify-intro>.iconbox{display:flex;width:66px;height:66px;border-radius:22px;background:#cae8dc;margin-bottom:30px}.verify-intro>.eyebrow{display:block}.verify-intro h1{font-size:clamp(30px,3vw,44px);line-height:1.2;margin:18px 0;color:#123f38}.verify-intro p{color:#42665d;line-height:1.8}.verify-intro .notice{background:#d5e9df;border:1px solid #b7d9c9}
.verify-panel{background:linear-gradient(145deg,#f6fcf7,#e7f3ed);border:1px solid #bddbce;box-shadow:0 18px 55px #174d3c14;border-radius:26px;padding:clamp(24px,4vw,40px)}.verify-panel h2{margin:14px 0 18px}.verify-panel p{line-height:1.75}.verify-address{overflow-wrap:anywhere}.verify-panel .otp-input{font-size:27px;letter-spacing:.35em;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;background:#fff;min-height:62px}.verify-submit{width:100%}.verification-resend{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0}.verification-resend small{flex:1;min-width:130px}.verify-correction{padding:20px 0;border-top:1px solid #c8dfd3;margin-bottom:16px}.verify-correction summary{cursor:pointer;color:#176655;font-weight:600}.verify-correction form{margin-top:18px}.demo-code{padding:12px 16px;background:#e1ecff;border-radius:12px;color:#203f67}.demo-code strong{letter-spacing:.15em}
@media(max-width:760px){.verify-layout{grid-template-columns:1fr;padding:15px 16px 45px;gap:10px}.verify-intro{padding:15px 5px}.verify-intro>.iconbox{display:none}.verify-intro h1{font-size:30px}.verify-intro>.notice{display:none}}