:root {
  --red: #e00000;
  --maroon: #a50016;
  --ink: #2b1416;
  --charcoal: #3a3a3a;
  --pink: #fbeded;
  --white: #fff;
  --line: rgba(165, 0, 22, 0.12);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-soft: rgba(251, 237, 237, 0.72);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 18px 50px rgba(68, 14, 19, 0.08);
  --font-head: "Montserrat", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #fffafa; font-family: var(--font-body); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid rgba(224, 0, 0, 0.32); outline-offset: 3px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 258px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; padding: 32px 20px 22px; flex-direction: column; gap: 24px; background: #fff; border-right: 1px solid var(--line); z-index: 10; }
.brand-lockup { display: block; padding: 0 10px; }
.brand-lockup img { display: block; width: 190px; height: auto; }
.side-nav { display: grid; gap: 7px; }
.dentist-side-nav, .admin-side-nav { display: none; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 10px 13px; border: 0; border-radius: 13px; color: #796669; background: transparent; text-align: left; font-size: 14px; font-weight: 600; transition: 180ms ease; }
.nav-item > span { display: inline-grid; width: 21px; place-items: center; color: currentColor; font-size: 20px; line-height: 1; }
.nav-item:hover { color: var(--maroon); background: var(--pink); }
.nav-item.active { color: var(--red); background: linear-gradient(108deg, rgba(224, 0, 0, 0.09), rgba(251, 237, 237, 0.6)); }
.admin-nav-item { margin-top: 5px; border: 1px solid rgba(165,0,22,.1); background: rgba(251,237,237,.42); }.admin-nav-item small { margin-left: auto; padding: 3px 5px; border-radius: 99px; color: var(--red); background: #fff; font-size: 8px; text-transform: uppercase; }
.workspace-return { margin-top: 7px; border: 1px solid rgba(165,0,22,.1); }
body[data-experience="dentist"] .public-side-nav, body[data-experience="dentist"] .admin-side-nav { display: none; }
body[data-experience="dentist"] .dentist-side-nav { display: grid; }
body[data-experience="admin"] .public-side-nav, body[data-experience="admin"] .dentist-side-nav { display: none; }
body[data-experience="admin"] .admin-side-nav { display: grid; }
.sidebar-support { margin-top: auto; padding: 18px; border: 1px solid rgba(224, 0, 0, 0.13); border-radius: var(--radius-lg); background: linear-gradient(135deg, #fff5f5, #fff); }
.sidebar-support p { margin: 0 0 7px; }
.sidebar-support strong { display: block; font-family: var(--font-head); font-size: 15px; }
.sidebar-footer { margin: 0 10px; color: #9b888b; font-size: 10px; line-height: 1.7; }

.main-content { width: min(1320px, 100%); margin: 0 auto; padding: 0 46px 76px; overflow: hidden; }
.topbar { display: flex; align-items: center; min-height: 102px; gap: 16px; }
.experience-switcher { display: inline-flex; padding: 4px; align-items: center; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.7); box-shadow: 0 7px 18px rgba(82,20,27,.04); }.experience-switcher button { min-height: 31px; padding: 0 12px; border: 0; border-radius: 99px; color: #846e72; background: transparent; font-size: 10px; font-weight: 800; transition: .2s ease; }.experience-switcher button:hover { color: var(--red); }.experience-switcher button.active { color: #fff; background: linear-gradient(120deg, var(--red), var(--maroon)); box-shadow: 0 5px 11px rgba(165,0,22,.18); }.experience-switcher .admin-toggle { display: inline-flex; align-items: center; gap: 5px; }.experience-switcher .admin-toggle small { padding: 3px 5px; border-radius: 99px; color: inherit; background: rgba(165,0,22,.08); font-size: 7px; letter-spacing: .03em; text-transform: uppercase; }.experience-switcher .admin-toggle.active small { background: rgba(255,255,255,.16); }
.location-pill, .topbar-actions { display: flex; align-items: center; gap: 9px; }
.topbar-actions { margin-left: auto; }.dentist-topbar-actions { display: none; margin-left: auto; align-items: center; gap: 10px; }.workspace-status { display: inline-flex; align-items: center; gap: 6px; color: #796669; font-size: 10px; font-weight: 700; }.workspace-status i { width: 7px; height: 7px; border-radius: 50%; background: #19a66a; box-shadow: 0 0 0 4px rgba(25,166,106,.1); }
body[data-experience="dentist"] .public-topbar-actions { display: none; } body[data-experience="dentist"] .dentist-topbar-actions { display: flex; }
.location-pill { padding: 9px 12px; color: #674f53; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; }
.location-pill button { padding: 0 0 0 2px; border: 0; background: transparent; color: var(--red); }
.location-pin { color: var(--red); font-size: 18px; }
.icon-button, .avatar-button { display: inline-grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #694d51; background: rgba(255,255,255,.75); font-size: 19px; transition: .2s ease; }
.icon-button:hover { color: var(--red); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(82, 20, 27, .08); }
.notification-button { position: relative; }
.notification-button i { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1px solid white; border-radius: 50%; background: var(--red); }
.avatar-button { color: var(--white); border: 0; background: linear-gradient(145deg, var(--red), var(--maroon)); font-size: 11px; font-weight: 700; }
.menu-toggle { display: none; }

.screen { display: none; animation: screenIn .35s ease both; }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { margin: 0 0 9px; color: #917b7f; font-size: 10px; font-weight: 700; letter-spacing: .13em; line-height: 1.1; text-transform: uppercase; }
.red-label { color: var(--red); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-head); letter-spacing: -.04em; }
h1 { margin-bottom: 15px; font-size: clamp(34px, 4vw, 58px); line-height: 1.1; }
h1 em { color: var(--red); font-family: Georgia, serif; font-size: .97em; font-weight: normal; letter-spacing: -.06em; }
h2 { margin-bottom: 8px; font-size: 25px; line-height: 1.18; }
p { color: #6e5a5e; font-size: 14px; line-height: 1.6; }
.glass-card { border: 1px solid rgba(255, 255, 255, .75); background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 20px; }
.hero-card { position: relative; display: grid; min-height: 386px; grid-template-columns: 1.13fr .87fr; overflow: hidden; border-radius: var(--radius-xl); background: linear-gradient(120deg, rgba(251,237,237,.93), rgba(255,255,255,.83) 60%, rgba(248,222,224,.77)); isolation: isolate; }
.hero-card::before { position: absolute; z-index: -1; right: -85px; top: -130px; width: 480px; height: 530px; border-radius: 48% 40% 40% 52%; background: radial-gradient(circle at 45% 44%, rgba(224,0,0,.23), rgba(165,0,22,.08) 47%, transparent 68%); content: ""; }
.hero-card::after { position: absolute; z-index: -1; right: 0; bottom: -175px; width: 75%; height: 210px; background: linear-gradient(110deg, transparent 30%, var(--red)); clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%); opacity: .88; content: ""; }
.hero-copy { z-index: 2; display: flex; padding: 48px 0 35px 48px; flex-direction: column; align-items: flex-start; justify-content: center; }
.hero-description { max-width: 410px; margin-bottom: 25px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.primary-button, .secondary-button, .outline-button { min-height: 43px; padding: 0 17px; border-radius: 11px; font-size: 12px; font-weight: 700; transition: .2s ease; }
.primary-button { border: 1px solid var(--red); color: var(--white); background: linear-gradient(120deg, var(--red), #c5000a); box-shadow: 0 8px 18px rgba(224, 0, 0, .2); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 11px 22px rgba(224,0,0,.29); }
.primary-button span { padding-left: 9px; font-size: 16px; }
.secondary-button { border: 1px solid rgba(224,0,0,.22); color: var(--maroon); background: rgba(255,255,255,.6); }
.secondary-button:hover, .outline-button:hover { border-color: var(--red); color: var(--red); background: #fff; }
.secondary-button.light { border-color: rgba(255,255,255,.43); color: white; background: rgba(255,255,255,.12); }
.hero-person { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
.person-halo { position: absolute; top: 72px; width: 197px; height: 214px; border: 1px solid rgba(224,0,0,.18); border-radius: 48% 48% 45% 45%; background: rgba(255, 255, 255, .25); box-shadow: inset 0 0 40px rgba(255,255,255,.4); }
.person-portrait { position: relative; display: grid; width: 172px; height: 238px; margin-top: 34px; place-items: center; border-radius: 82px 82px 18px 18px; background: linear-gradient(160deg, #722c35, #e00000 58%, #aa0016); box-shadow: 0 18px 25px rgba(100, 0, 12, .17); font-size: 100px; filter: saturate(.88); }
.trusted-tag { position: absolute; right: 7%; bottom: 36px; display: grid; grid-template-columns: 28px auto; column-gap: 8px; padding: 9px 12px 9px 8px; border: 1px solid rgba(255,255,255,.78); border-radius: 13px; background: rgba(255,255,255,.82); box-shadow: 0 8px 25px rgba(65,16,21,.12); backdrop-filter: blur(8px); }
.trusted-tag span { display: grid; width: 27px; height: 27px; grid-row: span 2; place-items: center; border-radius: 50%; color: white; background: var(--red); font-size: 13px; }
.trusted-tag b { align-self: end; color: var(--ink); font-size: 10px; text-transform: uppercase; }
.trusted-tag small { color: #847073; font-size: 9px; }
.hero-watermark { position: absolute; bottom: 19px; left: 24px; color: rgba(224,0,0,.09); font-size: 88px; }
.emergency-card { display: flex; min-height: 386px; padding: 30px 25px; flex-direction: column; align-items: flex-start; border-radius: var(--radius-xl); color: white; background: linear-gradient(156deg, var(--maroon), #760013); box-shadow: 0 20px 45px rgba(97,0,19,.22); }
.emergency-card p { margin: 34px 0 4px; color: rgba(255,255,255,.7); font-size: 12px; }
.emergency-card h2 { margin: 0; color: white; font-size: 30px; }
.emergency-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 14px; background: rgba(255,255,255,.12); font-size: 22px; }
.round-arrow { display: grid; width: 39px; height: 39px; margin-top: auto; place-items: center; border: 1px solid rgba(255,255,255,.43); border-radius: 50%; color: white; background: transparent; font-size: 20px; }
.round-arrow:hover { color: var(--maroon); background: white; }

.section-block { margin-top: 52px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; font-size: 25px; }
.section-heading.compact { margin-top: 46px; }
.text-button { display: inline-flex; padding: 3px 0; align-items: center; gap: 6px; border: 0; color: var(--red); background: transparent; font-size: 12px; font-weight: 700; }
.text-button:hover span { transform: translateX(3px); }
.text-button span { font-size: 16px; transition: .2s ease; }
.quick-grid { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 12px; }
.quick-card { position: relative; display: flex; min-height: 154px; padding: 17px; align-items: flex-start; flex-direction: column; overflow: hidden; border: 1px solid rgba(165,0,22,.1); border-radius: var(--radius-md); color: var(--ink); background: rgba(255,255,255,.75); box-shadow: 0 8px 20px rgba(78,22,25,.03); text-align: left; transition: .25s ease; }
.quick-card:hover { border-color: rgba(224,0,0,.24); transform: translateY(-4px); box-shadow: 0 15px 26px rgba(73,10,16,.09); }
.quick-card.featured { color: white; border-color: transparent; background: linear-gradient(145deg, var(--red), var(--maroon)); }
.quick-card.featured small { color: rgba(255,255,255,.75); }
.quick-card.featured .quick-icon { background: rgba(255,255,255,.15); }
.quick-card.report-card { background: linear-gradient(135deg, #fff5f5, #fff); }
.quick-icon { display: grid; width: 33px; height: 33px; margin-bottom: auto; place-items: center; border-radius: 10px; color: var(--red); background: var(--pink); font-size: 18px; }
.quick-card b { margin-top: 14px; font-size: 13px; }
.quick-card small { margin-top: 4px; color: #907c7f; font-size: 10px; line-height: 1.35; }
.quick-card i { position: absolute; right: 15px; bottom: 13px; color: var(--red); font-size: 17px; font-style: normal; }
.quick-card.featured i { color: white; }
.dentist-scroll { display: grid; grid-auto-columns: minmax(230px, 1fr); grid-auto-flow: column; gap: 15px; overflow-x: auto; padding: 2px 2px 11px; scrollbar-width: thin; }
.dentist-card { min-height: 250px; padding: 14px; border: 1px solid rgba(165,0,22,.1); border-radius: var(--radius-lg); background: rgba(255,255,255,.8); transition: .2s ease; }
.dentist-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.dentist-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.dentist-photo { display: grid; width: 57px; height: 57px; place-items: center; border-radius: 17px; background: var(--photo, var(--pink)); font-size: 32px; }
.save-button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #947f82; background: white; }
.save-button.saved { color: var(--red); background: #fff1f1; }
.dentist-card h3 { margin: 18px 0 4px; font-size: 14px; }
.dentist-card p { margin-bottom: 9px; color: #826e72; font-size: 10px; }
.verified-badge { display: inline-flex; padding: 5px 7px; align-items: center; gap: 4px; border-radius: 7px; color: var(--maroon); background: var(--pink); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.verified-badge b { display: grid; width: 12px; height: 12px; place-items: center; border-radius: 50%; color: white; background: var(--red); font-size: 8px; }
.professional-badge { display: inline-flex; margin-left: 5px; padding: 5px 7px; align-items: center; border: 1px solid rgba(165,0,22,.2); border-radius: 7px; color: var(--maroon); background: rgba(255,255,255,.75); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dentist-card-footer { display: flex; padding-top: 13px; align-items: center; justify-content: space-between; color: #937c80; font-size: 10px; }
.dentist-card-footer button { border: 0; color: var(--red); background: transparent; font-size: 11px; font-weight: 700; }
.home-bottom-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; margin-top: 50px; }
.education-promo { position: relative; min-height: 238px; padding: 32px; overflow: hidden; border-radius: var(--radius-xl); color: white; background: linear-gradient(118deg, var(--red), #b00015); cursor: pointer; }
.education-promo .eyebrow { color: rgba(255,255,255,.68); }
.education-promo h2 { max-width: 310px; margin-bottom: 9px; font-size: 28px; }
.education-promo p { max-width: 360px; color: rgba(255,255,255,.8); font-size: 12px; }
.inline-link { display: inline-flex; align-items: center; gap: 9px; color: inherit; font-size: 12px; font-weight: 700; }
.inline-link b { font-size: 16px; }
.tooth-illustration { position: absolute; right: 6%; bottom: -42px; color: rgba(255,255,255,.13); font-size: 205px; line-height: 1; transform: rotate(-10deg); }
.congress-promo { position: relative; display: grid; min-height: 238px; padding: 28px; grid-template-columns: 58px 1fr; align-content: start; column-gap: 16px; overflow: hidden; border-radius: var(--radius-xl); background: #241012; color: white; }
.congress-promo::after { position: absolute; width: 250px; height: 250px; right: -120px; top: -130px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255,255,255,.03), 0 0 0 53px rgba(255,255,255,.025); content: ""; }
.congress-promo .eyebrow { grid-column: 1 / -1; color: rgba(255,255,255,.54); }
.calendar-date { display: flex; padding-top: 5px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.19); border-radius: 13px; background: rgba(255,255,255,.08); }
.calendar-date b { font-family: var(--font-head); font-size: 23px; }
.calendar-date small { color: #f0cbcf; font-size: 9px; text-transform: uppercase; }
.congress-promo h2 { margin: 3px 0 3px; font-size: 18px; }
.congress-promo p { margin: 0; color: rgba(255,255,255,.61); font-size: 10px; }
.countdown { display: flex; grid-column: 1 / -1; gap: 15px; margin: 18px 0 12px; }
.countdown span { color: rgba(255,255,255,.56); font-size: 9px; }
.countdown b { display: block; color: white; font-family: var(--font-head); font-size: 15px; }
.congress-promo .secondary-button { grid-column: 1 / -1; justify-self: start; }

.page-heading { display: flex; margin: 18px 0 28px; align-items: flex-end; justify-content: space-between; gap: 30px; }
.page-heading > div > p:last-child { max-width: 570px; margin-bottom: 0; }
.directory-count { display: flex; min-width: 180px; padding: 15px 19px; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.72); }
.directory-count b { color: var(--red); font-family: var(--font-head); font-size: 29px; }
.directory-count span { color: #806b6f; font-size: 10px; line-height: 1.45; }
.directory-toolbar { display: flex; padding: 11px; align-items: center; gap: 10px; border: 1px solid rgba(165,0,22,.1); border-radius: 16px; }
.directory-search { display: flex; flex: 1; align-items: center; gap: 9px; padding: 0 8px; color: #876f74; }
.directory-search span { color: var(--red); font-size: 20px; }
.directory-search input { width: 100%; padding: 7px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.directory-search input::placeholder { color: #a59093; }
.filter-button, .view-switch button { min-height: 37px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--maroon); background: white; font-size: 11px; font-weight: 700; }
.filter-button:hover { background: var(--pink); }
.view-switch { display: flex; gap: 4px; }
.view-switch button { display: grid; width: 38px; padding: 0; place-items: center; color: #8c777a; }
.view-switch button:disabled { cursor: not-allowed; color: #b7a5a7; background: #fffafa; opacity: .65; }
.view-switch button.active { color: var(--red); background: var(--pink); }
.filter-chips { display: flex; gap: 8px; margin: 17px 0; overflow-x: auto; }
.chip { flex: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; color: #775e62; background: #fff; font-size: 10px; font-weight: 600; }
.chip:hover, .chip.active { color: var(--red); border-color: rgba(224,0,0,.19); background: var(--pink); }
.directory-list { display: grid; gap: 12px; }
.directory-row { display: grid; padding: 15px; grid-template-columns: 66px minmax(0, 1.6fr) minmax(100px, .9fr) minmax(110px, .75fr) auto; align-items: center; gap: 15px; border: 1px solid rgba(165,0,22,.1); border-radius: 18px; background: rgba(255,255,255,.78); transition: .2s ease; }
.directory-row:hover { transform: translateX(3px); box-shadow: 0 12px 28px rgba(73,10,16,.06); }
.directory-row .dentist-photo { width: 58px; height: 58px; }
.directory-main h3 { margin: 0 0 4px; font-size: 14px; }
.directory-main p, .directory-meta p { margin: 3px 0 0; font-size: 10px; }
.directory-main .verified-badge { margin-top: 6px; }
.directory-meta span { color: #846d71; font-size: 10px; }
.directory-meta strong { display: block; margin-top: 4px; font-size: 11px; }
.directory-actions { display: flex; gap: 8px; align-items: center; }
.directory-actions .primary-button { min-height: 36px; font-size: 10px; }
.directory-actions .save-button { flex: none; }
.map-view { position: relative; min-height: 508px; overflow: hidden; border: 1px solid rgba(165,0,22,.12); border-radius: var(--radius-xl); background: #f7ebeb; }
.map-view.hidden { display: none; }
.map-grid { position: absolute; inset: 0; background-image: linear-gradient(30deg, transparent 47%, rgba(224,0,0,.1) 48%, transparent 50%), linear-gradient(120deg, transparent 47%, rgba(165,0,22,.1) 48%, transparent 50%), radial-gradient(circle at 21% 30%, transparent 0 50px, rgba(255,255,255,.8) 51px 67px, transparent 68px), radial-gradient(circle at 70% 66%, transparent 0 90px, rgba(255,255,255,.7) 91px 109px, transparent 110px); background-size: 130px 110px, 175px 130px, 340px 270px, 410px 330px; }
.map-view::after { position: absolute; left: 0; right: 0; bottom: 22%; height: 10px; background: rgba(165,0,22,.13); box-shadow: 0 -120px 0 rgba(224,0,0,.08), 0 175px 0 rgba(224,0,0,.08); content: ""; transform: rotate(-9deg); }
.map-label { position: absolute; z-index: 2; color: #8e767a; font-size: 13px; font-weight: 700; }
.label-accra { left: 42%; top: 45%; }.label-east { right: 14%; top: 22%; }.label-osu { left: 24%; bottom: 22%; }
.map-pin { position: absolute; z-index: 3; display: grid; width: 39px; height: 39px; place-items: center; border: 3px solid white; border-radius: 50% 50% 50% 4px; color: white; background: var(--red); box-shadow: 0 8px 14px rgba(120,0,12,.2); transform: rotate(-45deg); }
.map-pin::first-letter { transform: rotate(45deg); }.pin-one { left: 47%; top: 34%; }.pin-two { right: 18%; top: 34%; }.pin-three { left: 30%; bottom: 17%; }
.map-legend { position: absolute; z-index: 4; left: 15px; bottom: 15px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; color: #765e62; background: rgba(255,255,255,.82); font-size: 10px; backdrop-filter: blur(7px); }

.learn-heading { margin-bottom: 18px; }.learn-shape { display: grid; width: 110px; height: 110px; place-items: center; border: 1px solid rgba(224,0,0,.1); border-radius: 50%; color: var(--red); background: linear-gradient(145deg, #fff, var(--pink)); font-size: 60px; }
.topic-row { display: flex; gap: 10px; margin: 20px 0 25px; overflow-x: auto; }.topic-chip { flex: none; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; color: #765d61; background: white; font-size: 11px; font-weight: 600; }.topic-chip.active, .topic-chip:hover { color: var(--red); background: var(--pink); }
.featured-article { display: grid; min-height: 280px; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 1px solid rgba(165,0,22,.1); border-radius: var(--radius-xl); background: white; cursor: pointer; }.featured-article:hover { box-shadow: var(--shadow); }.article-visual { display: grid; place-items: center; font-size: 111px; }.child-smile { background: linear-gradient(140deg, #fcdfdf, #f7b9b9); }.article-copy { display: flex; padding: 45px 44px; flex-direction: column; align-items: flex-start; justify-content: center; }.article-copy h2 { max-width: 490px; font-size: 28px; }.article-copy p { max-width: 450px; font-size: 13px; }.article-copy .inline-link { margin-top: 7px; color: var(--red); }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.article-card { overflow: hidden; border: 1px solid rgba(165,0,22,.1); border-radius: 18px; background: white; cursor: pointer; transition: .2s ease; }.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.article-image { display: grid; height: 132px; place-items: center; background: var(--article-color, var(--pink)); font-size: 54px; }.article-body { padding: 15px; }.article-body .eyebrow { margin-bottom: 7px; color: var(--red); letter-spacing: .08em; }.article-body h3 { min-height: 42px; margin: 0 0 12px; font-size: 14px; line-height: 1.28; }.article-meta { display: flex; justify-content: space-between; color: #927d80; font-size: 10px; }

.event-hero { position: relative; min-height: 345px; padding: 46px; overflow: hidden; border-radius: var(--radius-xl); color: white; background: linear-gradient(123deg, #2d1014, #760013 72%, #c4000b); }.event-hero::after { position: absolute; inset: 0; background: repeating-linear-gradient(120deg, transparent 0 95px, rgba(255,255,255,.055) 96px 99px, transparent 100px 190px); content: ""; }.event-hero-copy { position: relative; z-index: 1; }.event-date-chip { display: inline-block; padding: 7px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; color: #ffe3e5; background: rgba(255,255,255,.08); font-size: 10px; font-weight: 700; }.event-hero h2 { margin: 22px 0 10px; font-size: clamp(30px, 4vw, 49px); }.event-hero p { max-width: 430px; color: rgba(255,255,255,.72); }.event-hero .secondary-button { margin-top: 12px; }.event-graphic { position: absolute; z-index: 1; top: -38px; right: 7%; display: grid; width: 280px; height: 420px; align-content: center; justify-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 145px 145px 20px 20px; background: rgba(255,255,255,.08); transform: rotate(10deg); }.event-graphic span { color: #ffdbde; font-family: var(--font-head); font-size: 14px; letter-spacing: .22em; }.event-graphic b { color: white; font-family: var(--font-head); font-size: 147px; line-height: .85; }.event-graphic small { color: #ffd4d8; font-weight: 700; letter-spacing: .18em; }
.event-tabs { display: flex; gap: 6px; }.event-tabs button { padding: 7px 9px; border: 0; border-radius: 8px; color: #856e72; background: transparent; font-size: 10px; font-weight: 700; }.event-tabs button.active { color: var(--red); background: var(--pink); }.event-list { display: grid; gap: 11px; }.event-row { display: grid; padding: 13px; grid-template-columns: 56px 1.6fr .8fr .7fr auto; gap: 15px; align-items: center; border: 1px solid rgba(165,0,22,.1); border-radius: 17px; background: white; }.event-date { display: grid; height: 53px; place-items: center; align-content: center; border-radius: 12px; color: var(--red); background: var(--pink); }.event-date b { font-family: var(--font-head); font-size: 19px; line-height: 1; }.event-date span { font-size: 9px; font-weight: 700; text-transform: uppercase; }.event-info h3 { margin: 0 0 4px; font-size: 13px; }.event-info p, .event-detail { margin: 0; color: #836d71; font-size: 10px; }.event-row .outline-button { min-height: 34px; padding: 0 12px; font-size: 10px; }

.profile-hero { display: flex; padding: 25px 0; align-items: center; gap: 17px; }.profile-avatar { display: grid; width: 76px; height: 76px; place-items: center; border: 4px solid #fff; border-radius: 24px; color: white; background: linear-gradient(145deg, var(--red), var(--maroon)); box-shadow: 0 8px 20px rgba(150,0,15,.19); font-family: var(--font-head); font-size: 22px; }.profile-hero h1 { margin: 0 0 3px; font-size: 30px; }.profile-hero p:not(.eyebrow) { margin-bottom: 0; font-size: 12px; }.outline-button { margin-left: auto; border: 1px solid var(--line); color: var(--maroon); background: white; }.profile-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.profile-stat { display: grid; padding: 17px; border: 1px solid rgba(165,0,22,.1); border-radius: 16px; background: rgba(255,255,255,.72); }.profile-stat b { color: var(--red); font-family: var(--font-head); font-size: 24px; }.profile-stat span { margin-top: 3px; color: #846e72; font-size: 10px; }.profile-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; margin-top: 18px; }.profile-menu { padding: 7px; border: 1px solid rgba(165,0,22,.1); border-radius: var(--radius-lg); }.profile-menu button { display: grid; width: 100%; min-height: 54px; padding: 0 12px; grid-template-columns: 27px 1fr 15px; align-items: center; border: 0; border-bottom: 1px solid rgba(165,0,22,.08); color: var(--maroon); background: transparent; text-align: left; font-size: 15px; }.profile-menu button:last-child { border-bottom: 0; }.profile-menu button:hover { color: var(--red); background: var(--pink); }.profile-menu button span { color: var(--ink); font-size: 12px; font-weight: 600; }.profile-menu button b { color: #977f83; font-size: 18px; }.member-callout { position: relative; padding: 26px; overflow: hidden; border-radius: var(--radius-lg); color: white; background: linear-gradient(145deg, var(--maroon), #68000f); }.member-callout::after { position: absolute; right: -33px; bottom: -64px; color: rgba(255,255,255,.08); content: "✦"; font-size: 210px; }.member-callout .eyebrow { color: #edc7ca; }.member-callout h2 { max-width: 300px; font-size: 22px; }.member-callout p:not(.eyebrow) { color: rgba(255,255,255,.7); font-size: 11px; }.member-callout .secondary-button { position: relative; z-index: 1; margin-top: 8px; }.admin-entry { display: flex; width: 100%; margin-top: 23px; padding: 12px 0; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid var(--line); color: #856e72; background: transparent; font-size: 11px; font-weight: 600; }.admin-entry span { color: var(--red); font-size: 17px; }

.mobile-nav { display: none; }.dentist-mobile-nav, .admin-mobile-nav { display: none; }.modal-backdrop { position: fixed; z-index: 30; inset: 0; visibility: hidden; background: rgba(43,20,22,.3); opacity: 0; transition: .25s ease; backdrop-filter: blur(3px); }.modal-sheet { position: fixed; z-index: 31; top: 0; right: 0; display: flex; width: min(535px, 100%); height: 100dvh; padding: 67px 28px 28px; flex-direction: column; overflow-y: auto; color: var(--ink); background: #fffafa; box-shadow: -18px 0 50px rgba(43,20,22,.12); transform: translateX(105%); transition: .3s cubic-bezier(.2,.8,.2,1); }.modal-backdrop.open { visibility: visible; opacity: 1; }.modal-sheet.open { transform: translateX(0); }.sheet-close { position: absolute; top: 20px; right: 20px; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--maroon); background: #fff; font-size: 23px; }.modal-title { margin-bottom: 8px; font-size: 31px; }.modal-subtitle { margin-bottom: 25px; font-size: 13px; }.sheet-search { display: flex; padding: 12px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 13px; background: white; }.sheet-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; }.modal-list { display: grid; gap: 10px; margin-top: 18px; }.mini-result { display: flex; padding: 12px; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: white; }.mini-result > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--pink); font-size: 19px; }.mini-result b { display: block; font-size: 12px; }.mini-result small { color: #856f73; font-size: 10px; }.mini-result button { margin-left: auto; border: 0; color: var(--red); background: transparent; font-size: 15px; }.verification-panel, .notice-panel, .form-panel { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; }.verify-emblem { display: grid; width: 55px; height: 55px; margin-bottom: 15px; place-items: center; border-radius: 18px; color: white; background: var(--red); font-size: 28px; }.field-label { display: grid; gap: 6px; margin: 13px 0; color: var(--ink); font-size: 11px; font-weight: 700; }.field-label input, .field-label select, .field-label textarea { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); outline-color: var(--red); background: #fffafa; font-size: 12px; }.field-label textarea { min-height: 92px; resize: vertical; }.disclaimer { margin: 15px 0; color: #816b6f; font-size: 10px; line-height: 1.5; }.status-result { display: flex; margin-top: 15px; padding: 12px; gap: 10px; align-items: center; border-radius: 12px; color: var(--maroon); background: var(--pink); font-size: 11px; }.status-result b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: white; background: var(--red); }.detail-profile { display: grid; padding-bottom: 20px; grid-template-columns: 85px 1fr; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }.detail-profile .dentist-photo { width: 84px; height: 84px; border-radius: 25px; font-size: 48px; }.detail-profile h2 { margin-bottom: 4px; font-size: 21px; }.detail-profile p { margin-bottom: 9px; font-size: 11px; }.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }.details-grid dt { color: #947f82; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.details-grid dd { margin: 5px 0 0; font-size: 11px; font-weight: 600; }.service-list { display: flex; flex-wrap: wrap; gap: 6px; }.modal-actions { display: flex; gap: 9px; margin-top: auto; padding-top: 20px; }.modal-actions button { flex: 1; }.toast { position: fixed; z-index: 55; left: 50%; bottom: 28px; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 99px; color: #ffffff !important; background: #1a0d0f !important; box-shadow: 0 9px 30px rgba(0,0,0,.35); font-size: 12px; font-weight: 600; letter-spacing: .01em; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .25s ease, transform .25s ease; white-space: nowrap; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.empty-state { display: grid; min-height: 235px; padding: 30px; place-items: center; align-content: center; border: 1px dashed rgba(224,0,0,.26); border-radius: var(--radius-lg); color: #816a6e; background: rgba(255,255,255,.55); text-align: center; }.empty-state > span { display: grid; width: 48px; height: 48px; margin-bottom: 11px; place-items: center; border-radius: 16px; color: var(--red); background: var(--pink); font-size: 24px; }.empty-state h2 { margin-bottom: 5px; font-size: 18px; }.empty-state p { max-width: 300px; margin-bottom: 15px; font-size: 11px; }

@media (max-width: 1120px) { .main-content { padding: 0 30px 75px; }.hero-grid { grid-template-columns: minmax(0, 1fr) 220px; }.quick-grid { grid-template-columns: repeat(3, 1fr); }.quick-card.featured { grid-column: span 1; }.directory-row { grid-template-columns: 60px 1.4fr .8fr auto; }.directory-meta.experience { display: none; } }
@media (max-width: 850px) { .app-shell { display: block; }.sidebar { display: none; }.main-content { padding: 0 18px 98px; }.topbar { min-height: 78px; }.menu-toggle { display: grid; }.mobile-nav { position: fixed; z-index: 20; right: 14px; bottom: 14px; left: 14px; display: grid; min-height: 64px; padding: 5px; grid-template-columns: repeat(6, 1fr); border: 1px solid rgba(255,255,255,.85); border-radius: 21px; background: rgba(255,255,255,.83); box-shadow: 0 15px 40px rgba(61,14,19,.16); backdrop-filter: blur(18px); }.mobile-nav .nav-item { min-height: 50px; padding: 4px; flex-direction: column; justify-content: center; gap: 2px; text-align: center; }.mobile-nav .nav-item > span { font-size: 18px; }.mobile-nav small { font-size: 9px; }.mobile-nav .admin-nav-item { margin-top: 0; border: 0; background: transparent; }.mobile-nav .admin-nav-item small { margin-left: 0; padding: 0; border-radius: 0; color: inherit; background: transparent; text-transform: none; }.hero-grid { grid-template-columns: 1fr; }.emergency-card { display: grid; min-height: 115px; padding: 20px; grid-template-columns: 42px 1fr 40px; align-items: center; gap: 14px; border-radius: var(--radius-lg); }.emergency-card p { margin: 0 0 3px; }.emergency-card h2 { font-size: 20px; }.round-arrow { margin: 0; }.home-bottom-grid, .profile-layout { grid-template-columns: 1fr; }.quick-grid { grid-template-columns: repeat(3, 1fr); }.quick-card { min-height: 137px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.directory-count { order: -1; }.event-graphic { right: -87px; opacity: .7; }.article-grid { grid-template-columns: 1fr 1fr; }.directory-row { grid-template-columns: 58px 1fr auto; }.directory-meta { display: none; }.toast { bottom: 96px; } }
@media (max-width: 560px) { h1 { font-size: 34px; }.location-pill { display: none; }.hero-card { min-height: 490px; grid-template-columns: 1fr; }.hero-copy { padding: 35px 26px; justify-content: flex-start; }.hero-person { position: absolute; right: -15px; bottom: -15px; width: 49%; }.person-portrait { width: 137px; height: 190px; font-size: 77px; }.person-halo { top: 4px; width: 152px; height: 178px; }.trusted-tag { right: 26px; bottom: 34px; }.hero-description { max-width: 290px; }.hero-actions { position: relative; z-index: 3; }.quick-section { margin-top: 37px; }.quick-grid { grid-template-columns: 1fr 1fr; }.quick-card.featured { grid-column: span 2; min-height: 126px; }.quick-card.featured .quick-icon { margin-bottom: 2px; }.quick-card.featured b { margin-top: 4px; }.quick-card.featured small { max-width: 220px; }.section-heading { align-items: flex-start; }.section-heading h2 { font-size: 21px; }.home-bottom-grid { margin-top: 36px; }.education-promo, .congress-promo { min-height: 215px; padding: 24px; }.featured-article { grid-template-columns: 1fr; }.article-visual { height: 165px; }.article-copy { padding: 26px; }.article-copy h2 { font-size: 23px; }.article-grid { grid-template-columns: 1fr; }.learn-shape { display: none; }.event-hero { min-height: 320px; padding: 28px; }.event-hero h2 { font-size: 32px; }.event-graphic { display: none; }.event-row { grid-template-columns: 54px 1fr auto; }.event-detail { display: none; }.profile-summary { gap: 7px; }.profile-stat { padding: 13px 10px; }.profile-hero { flex-wrap: wrap; }.profile-hero .outline-button { margin-left: 0; }.directory-toolbar { flex-wrap: wrap; }.directory-search { width: 100%; flex-basis: 100%; }.view-switch { margin-left: auto; }.directory-row { padding: 12px; gap: 10px; }.directory-actions .save-button { display: none; }.directory-actions .primary-button { padding: 0 10px; }.modal-sheet { padding: 62px 18px 22px; }.details-grid { gap: 13px 8px; }.member-card .member-card-row { margin-top: 36px; }.profile-avatar { width: 62px; height: 62px; }.profile-hero h1 { font-size: 24px; } }

/* Role-based public care, professional portal, student and administration patterns. */
.hidden { display: none !important; }
.specialty-row { display: flex; align-items: center; gap: 7px; margin: -3px 0 20px; overflow-x: auto; padding-bottom: 2px; }
.specialty-row > span { flex: none; color: #927d81; font-size: 10px; font-weight: 700; }
.specialty-chip { flex: none; padding: 7px 10px; border: 1px solid rgba(165,0,22,.1); border-radius: 99px; color: #745f63; background: rgba(255,255,255,.65); font-size: 10px; font-weight: 700; }
.specialty-chip:hover, .specialty-chip.active { border-color: rgba(224,0,0,.2); color: var(--red); background: var(--pink); }
.location-action, .secure-admin-badge { display: inline-flex; min-height: 41px; padding: 0 13px; align-items: center; gap: 8px; border: 1px solid rgba(224,0,0,.18); border-radius: 11px; color: var(--maroon); background: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; }
.location-action span { color: var(--red); font-size: 17px; }
.care-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.care-map { min-height: 315px; overflow: hidden; border: 1px solid rgba(165,0,22,.1); border-radius: var(--radius-xl); }
.map-status { display: flex; padding: 17px 19px; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.78); }
.map-status b { font-size: 12px; }.map-status small { margin-left: auto; color: #927d81; font-size: 9px; }.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #19a66a; box-shadow: 0 0 0 4px rgba(25,166,106,.13); }
.care-map-grid { position: relative; min-height: 210px; overflow: hidden; background-color: #f8ecec; background-image: linear-gradient(28deg, transparent 47%, rgba(224,0,0,.1) 48%, transparent 50%), linear-gradient(120deg, transparent 47%, rgba(165,0,22,.09) 48%, transparent 50%), radial-gradient(circle at 35% 45%, rgba(255,255,255,.85) 0 32px, transparent 33px), radial-gradient(circle at 70% 58%, rgba(255,255,255,.8) 0 53px, transparent 54px); background-size: 140px 110px, 180px 140px, 180px 170px, 240px 220px; }
.care-map-grid::after { position: absolute; inset: 43% -10% auto; height: 12px; background: rgba(165,0,22,.12); content: ""; transform: rotate(-12deg); }
.care-pin { position: absolute; z-index: 2; display: grid; width: 32px; height: 32px; place-items: center; border: 3px solid white; border-radius: 50%; color: var(--red); background: #fff; box-shadow: 0 7px 15px rgba(102,14,23,.17); font-size: 18px; }.pin-a { left: 32%; top: 35%; }.pin-b { right: 27%; top: 28%; }.pin-c { left: 58%; bottom: 23%; }
.map-place { position: absolute; z-index: 2; color: #856f73; font-size: 10px; font-weight: 700; }.place-a { left: 18%; top: 59%; }.place-b { right: 11%; top: 51%; }.place-c { left: 59%; bottom: 10%; }
.map-caption { padding: 12px 18px; color: #8a7478; background: rgba(255,255,255,.8); font-size: 10px; line-height: 1.45; }
.telehealth-card { display: flex; min-height: 315px; padding: 28px; flex-direction: column; align-items: flex-start; border-radius: var(--radius-xl); color: white; background: linear-gradient(150deg, #2d1014, var(--maroon) 70%, var(--red)); box-shadow: 0 18px 40px rgba(98,0,18,.17); }.telehealth-card .eyebrow { color: rgba(255,255,255,.62); }.telehealth-card h2 { max-width: 250px; font-size: 27px; }.telehealth-card p:not(.eyebrow) { color: rgba(255,255,255,.72); font-size: 12px; }.telehealth-card .secondary-button { margin-top: auto; }
.appointment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.appointment-card { display: flex; min-height: 222px; padding: 17px; flex-direction: column; border: 1px solid rgba(165,0,22,.1); border-radius: 18px; background: rgba(255,255,255,.78); }.appointment-card > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }.appointment-card .dentist-photo { width: 49px; height: 49px; border-radius: 14px; font-size: 26px; }.availability-chip { padding: 5px 7px; border-radius: 99px; color: #147a50; background: #e5f4eb; font-size: 8px; font-weight: 800; text-transform: uppercase; }.appointment-card h3 { margin: 15px 0 4px; font-size: 14px; }.appointment-card p { margin-bottom: 10px; font-size: 10px; }.appointment-card footer { display: flex; margin-top: auto; align-items: center; justify-content: space-between; gap: 7px; }.appointment-card footer small { color: #897276; font-size: 9px; }.appointment-card .primary-button { min-height: 35px; padding: 0 10px; font-size: 10px; }
.care-notice { margin-top: 18px; padding: 14px 17px; border-left: 3px solid var(--red); border-radius: 0 13px 13px 0; background: #fff2f2; }.care-notice b { font-size: 11px; }.care-notice p { margin: 4px 0 0; font-size: 10px; }
.portal-heading { display: flex; margin: 18px 0 27px; align-items: flex-end; justify-content: space-between; gap: 20px; }.portal-heading > div > p:last-child { max-width: 580px; margin-bottom: 0; }.secure-mark { padding: 7px 10px; border: 1px solid rgba(25,166,106,.2); border-radius: 99px; color: #387660; background: #edf8f1; font-size: 9px; font-weight: 800; }.secure-mark::first-letter { color: #19a66a; }
.auth-gate { display: grid; padding: 31px; grid-template-columns: 58px 1fr auto; gap: 18px; align-items: center; border: 1px solid rgba(165,0,22,.1); border-radius: var(--radius-xl); }.auth-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 18px; color: white; background: linear-gradient(135deg, var(--red), var(--maroon)); font-family: var(--font-head); font-size: 23px; }.auth-gate h2 { margin: 0 0 6px; font-size: 24px; }.auth-gate p:not(.eyebrow) { max-width: 510px; margin: 0; font-size: 11px; }.auth-actions { display: grid; gap: 8px; justify-items: stretch; }.auth-actions .text-button { justify-content: center; }.auth-note { grid-column: 2 / -1; margin-top: -2px !important; color: #907b7e; font-size: 9px !important; }
.portal-welcome { display: flex; margin-bottom: 18px; padding: 20px 0; align-items: center; gap: 14px; }.professional-avatar { display: grid; width: 65px; height: 65px; place-items: center; border: 3px solid #fff; border-radius: 20px; color: white; background: linear-gradient(145deg, var(--red), var(--maroon)); box-shadow: 0 8px 19px rgba(150,0,15,.18); font-family: var(--font-head); font-size: 18px; }.portal-welcome h2 { margin: 0 0 3px; font-size: 24px; }.portal-welcome p:not(.eyebrow) { margin: 0; font-size: 11px; }.portal-welcome .outline-button { margin-left: auto; }
.member-stat-grid, .admin-metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.member-stat-grid article, .admin-metric-grid article { display: flex; min-height: 147px; padding: 17px; flex-direction: column; border: 1px solid rgba(165,0,22,.1); border-radius: 17px; background: rgba(255,255,255,.75); }.member-stat-grid span, .admin-metric-grid span { color: #8a7478; font-size: 10px; font-weight: 700; }.member-stat-grid b, .admin-metric-grid b { margin: 8px 0 3px; color: var(--red); font-family: var(--font-head); font-size: 25px; }.member-stat-grid b small { color: #8c767a; font-family: var(--font-body); font-size: 11px; }.member-stat-grid article > small, .admin-metric-grid small { color: #897276; font-size: 9px; }.member-stat-grid button { margin-top: auto; padding: 0; border: 0; color: var(--red); background: transparent; text-align: left; font-size: 10px; font-weight: 800; }.progress-track { height: 6px; margin: 5px 0 8px; overflow: hidden; border-radius: 99px; background: #f4e0e1; }.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--red); }
.portal-grid, .admin-layout, .student-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 18px; margin-top: 18px; }.portal-panel, .student-panel, .content-studio, .admin-queue, .admin-published { padding: 22px; border: 1px solid rgba(165,0,22,.1); border-radius: var(--radius-lg); background: rgba(255,255,255,.76); }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.panel-heading h2 { margin-bottom: 0; font-size: 20px; }.next-step-list, .path-list { display: grid; gap: 7px; margin-top: 17px; }.next-step-list button, .path-list button { display: grid; width: 100%; min-height: 55px; padding: 8px; grid-template-columns: 36px 1fr 16px; align-items: center; gap: 10px; border: 1px solid rgba(165,0,22,.09); border-radius: 12px; color: var(--ink); background: #fff; text-align: left; }.next-step-list button:hover, .path-list button:hover { border-color: rgba(224,0,0,.22); background: var(--pink); }.step-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--red); background: var(--pink); font-size: 9px; font-weight: 800; }.next-step-list b, .path-list b { display: block; font-size: 11px; }.next-step-list small, .path-list span { display: block; margin-top: 2px; color: #8a7478; font-size: 9px; }.next-step-list i, .path-list i { color: var(--red); font-style: normal; }.profile-completeness { position: relative; display: flex; min-height: 260px; padding: 25px; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); color: white; background: linear-gradient(145deg, var(--maroon), #61000e); }.profile-completeness .eyebrow { color: #efc8ca; }.profile-completeness h2 { font-size: 23px; }.profile-completeness p:not(.eyebrow) { max-width: 270px; color: rgba(255,255,255,.74); font-size: 11px; }.ring-progress { position: absolute; right: 18px; bottom: 19px; display: grid; width: 86px; height: 86px; place-items: center; align-content: center; border: 7px solid rgba(255,255,255,.18); border-top-color: white; border-radius: 50%; transform: rotate(28deg); }.ring-progress b, .ring-progress span { display: block; transform: rotate(-28deg); }.ring-progress b { font-family: var(--font-head); font-size: 17px; }.ring-progress span { color: rgba(255,255,255,.7); font-size: 8px; }.profile-completeness .secondary-button { margin-top: auto; margin-right: 95px; }
.opportunity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }.opportunity-grid article { display: flex; min-height: 240px; padding: 20px; flex-direction: column; border: 1px solid rgba(165,0,22,.1); border-radius: 17px; background: rgba(255,255,255,.74); }.opportunity-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--red); background: var(--pink); font-size: 18px; }.opportunity-grid .eyebrow { margin-top: 18px; }.opportunity-grid h3 { margin-bottom: 7px; font-size: 16px; }.opportunity-grid p:not(.eyebrow) { font-size: 10px; }.opportunity-grid .outline-button { margin-top: auto; margin-left: 0; justify-self: start; }.portal-signout { display: block; margin: 22px auto 0; padding: 7px; border: 0; color: #8a7478; background: transparent; font-size: 10px; font-weight: 700; }
.student-hero { display: grid; min-height: 275px; padding: 36px; grid-template-columns: 1.2fr .8fr; overflow: hidden; border-radius: var(--radius-xl); color: white; background: linear-gradient(128deg, var(--red), var(--maroon)); }.student-hero .eyebrow { color: #ffd5d8; }.student-hero h2 { max-width: 440px; font-size: 29px; }.student-hero p:not(.eyebrow) { max-width: 480px; color: rgba(255,255,255,.77); font-size: 12px; }.student-hero .primary-button { color: var(--maroon); border-color: #fff; background: #fff; box-shadow: none; }.mentor-stack { position: relative; min-height: 180px; }.mentor-stack span { position: absolute; display: grid; width: 115px; height: 115px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 21px; color: white; background: rgba(255,255,255,.13); font-size: 10px; font-weight: 800; transform: rotate(13deg); }.mentor-stack span:nth-child(1) { top: 0; right: 30px; }.mentor-stack span:nth-child(2) { top: 62px; left: 0; transform: rotate(-9deg); }.mentor-stack span:nth-child(3) { right: 3px; bottom: -8px; transform: rotate(6deg); }.student-panel.soft { background: #fff0f0; }.student-panel h2 { font-size: 21px; }.student-event { display: flex; margin: 13px 0; padding-bottom: 12px; gap: 11px; align-items: center; border-bottom: 1px solid rgba(165,0,22,.09); }.student-event > b { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 10px; color: var(--red); background: #fff; font-family: var(--font-head); font-size: 14px; }.student-event strong, .student-event small { display: block; }.student-event strong { font-size: 10px; }.student-event small { margin-top: 3px; color: #8a7478; font-size: 9px; }
.admin-heading { margin-bottom: 23px; }.secure-admin-badge { color: #297052; border-color: rgba(25,166,106,.22); background: #edf8f1; }.secure-admin-badge::first-letter { color: #19a66a; }.admin-metric-grid article { min-height: 116px; }.admin-metric-grid b { margin-bottom: 2px; }.admin-metric-grid small { margin-top: auto; }.draft-indicator { padding: 5px 8px; border-radius: 99px; color: #836e72; background: var(--pink); font-size: 9px; font-weight: 800; }.article-form { margin-top: 16px; }.article-form .field-label small { color: #8b7578; font-size: 9px; font-weight: 500; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.admin-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 17px; }.admin-queue { padding: 22px; }.admin-queue > button { display: grid; width: 100%; min-height: 68px; padding: 9px 0; grid-template-columns: 35px 1fr 16px; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid rgba(165,0,22,.09); color: var(--ink); background: transparent; text-align: left; }.admin-queue > button:last-child { border-bottom: 0; }.admin-queue > button:hover b { color: var(--red); }.queue-count { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--red); background: var(--pink); font-size: 10px; font-weight: 800; }.admin-queue b, .admin-queue small { display: block; }.admin-queue b { font-size: 11px; }.admin-queue small { margin-top: 3px; color: #8b7578; font-size: 9px; }.admin-queue i { color: var(--red); font-style: normal; }.admin-published { margin-top: 18px; }.admin-article-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 16px; }.admin-article-item { padding: 13px; border: 1px solid rgba(165,0,22,.09); border-radius: 13px; background: #fff; }.admin-article-item .article-thumb { display: grid; height: 57px; margin-bottom: 10px; place-items: center; border-radius: 9px; background: var(--article-color, var(--pink)); font-size: 24px; overflow: hidden; }.admin-article-item .article-thumb img { width: 100%; height: 100%; object-fit: cover; }.admin-article-item b { display: block; font-size: 11px; line-height: 1.3; }.admin-article-item small { display: block; margin-top: 4px; color: #8a7478; font-size: 9px; }
.admin-session { display: grid; justify-items: end; gap: 5px; }.admin-session > small { color: #7d967f; font-size: 9px; font-weight: 700; }.content-library-actions { display: flex; align-items: center; gap: 13px; }.reset-demo-button { color: #8b7578; }.admin-article-item { position: relative; }.admin-article-item > button { margin-top: 10px; padding: 0; border: 0; color: #9b777b; background: transparent; font-size: 9px; font-weight: 800; }.admin-article-item > button:hover { color: var(--red); }
.article-image .article-photo { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 950px) { .member-stat-grid, .admin-metric-grid { grid-template-columns: repeat(2, 1fr); }.appointment-grid, .opportunity-grid, .admin-article-list { grid-template-columns: repeat(2, 1fr); }.auth-gate { grid-template-columns: 58px 1fr; }.auth-actions { grid-column: 2; justify-items: start; }.auth-note { grid-column: 1 / -1; }.care-layout, .portal-grid, .admin-layout, .student-grid { grid-template-columns: 1fr; }.telehealth-card { min-height: 215px; }.profile-completeness { min-height: 225px; } }
@media (max-width: 560px) { .care-heading, .portal-heading { align-items: flex-start; flex-direction: column; }.care-layout { gap: 12px; }.care-map { min-height: 286px; }.map-status small { display: none; }.appointment-grid, .opportunity-grid, .admin-article-list { grid-template-columns: 1fr; }.appointment-card { min-height: 192px; }.auth-gate { padding: 22px; grid-template-columns: 1fr; }.auth-actions, .auth-note { grid-column: 1; }.auth-actions { justify-items: stretch; }.portal-welcome { flex-wrap: wrap; }.portal-welcome .outline-button { margin-left: 0; }.member-stat-grid, .admin-metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.member-stat-grid article { min-height: 128px; padding: 13px; }.member-stat-grid b, .admin-metric-grid b { font-size: 21px; }.portal-panel, .student-panel, .content-studio, .admin-queue, .admin-published { padding: 17px; }.student-hero { min-height: 350px; padding: 25px; grid-template-columns: 1fr; }.student-hero h2 { font-size: 25px; }.mentor-stack { min-height: 85px; }.mentor-stack span { width: 80px; height: 64px; border-radius: 12px; font-size: 8px; }.mentor-stack span:nth-child(1) { top: 3px; right: 18px; }.mentor-stack span:nth-child(2) { top: 16px; left: 18%; }.mentor-stack span:nth-child(3) { right: auto; left: 47%; bottom: 5px; }.form-row { grid-template-columns: 1fr; gap: 0; }.admin-form-actions { justify-content: stretch; }.admin-form-actions button { flex: 1; }.secure-mark { display: none; } }

/* Experience switcher: keeps public discovery and the private dentist workspace
   visually distinct while reusing the approved GDA tokens and navigation style. */
.workspace-preview-note { display: flex; margin: -10px 0 18px; padding: 11px 13px; align-items: center; gap: 10px; border: 1px solid rgba(165,0,22,.1); border-radius: 13px; background: rgba(251,237,237,.62); }.workspace-preview-note > span { padding: 5px 7px; border-radius: 99px; color: var(--red); background: #fff; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.workspace-preview-note p { margin: 0; flex: 1; color: #755d61; font-size: 10px; line-height: 1.45; }.workspace-preview-note button { padding: 0; border: 0; color: var(--maroon); background: transparent; font-size: 10px; font-weight: 800; white-space: nowrap; }.workspace-preview-note button:hover { color: var(--red); }

@media (max-width: 850px) {
  .mobile-nav { display: none; grid-template-columns: repeat(5, 1fr); }
  body[data-experience="public"] .public-mobile-nav, body[data-experience="dentist"] .dentist-mobile-nav, body[data-experience="admin"] .admin-mobile-nav { display: grid; }
  .experience-switcher { margin-right: auto; }.experience-switcher button { padding: 0 10px; }
  .topbar { gap: 10px; }.topbar-actions { gap: 7px; }.workspace-status { display: none; }
}

/* Restored component styles used by the administration and membership previews. */
.service-list span { padding: 6px 8px; border-radius: 7px; color: var(--maroon); background: var(--pink); font-size: 10px; }
.member-card { position: relative; padding: 27px; overflow: hidden; border-radius: 25px; color: white; background: linear-gradient(135deg, var(--red), var(--maroon)); box-shadow: 0 15px 35px rgba(166,0,20,.24); }.member-card::after { position: absolute; right: -26px; bottom: -52px; color: rgba(255,255,255,.12); content: "✦"; font-size: 180px; }.member-card img { position: relative; z-index: 1; width: 180px; filter: brightness(0) invert(1); }.member-card .member-card-row { position: relative; z-index: 1; display: flex; margin-top: 50px; justify-content: space-between; }.member-card h3 { margin: 5px 0; font-size: 22px; }.member-card p { color: rgba(255,255,255,.72); font-size: 11px; }.member-card .qr { display: grid; width: 63px; height: 63px; place-items: center; color: var(--ink); background: white; font-size: 32px; }.member-card small { color: rgba(255,255,255,.7); font-size: 9px; }
.admin-preview { display: grid; gap: 13px; }.admin-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.admin-kpi { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: white; }.admin-kpi b { display: block; color: var(--red); font-family: var(--font-head); font-size: 24px; }.admin-kpi span { color: #887275; font-size: 10px; }.admin-actions { display: grid; gap: 8px; }.admin-actions button { display: flex; min-height: 45px; padding: 0 13px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; text-align: left; font-size: 11px; font-weight: 700; }.admin-actions button:hover { color: var(--red); background: var(--pink); }
.admin-heading { margin-bottom: 23px; }.secure-admin-badge { color: #297052; border-color: rgba(25,166,106,.22); background: #edf8f1; }.admin-metric-grid article { min-height: 116px; }.admin-metric-grid b { margin-bottom: 2px; }.admin-metric-grid small { margin-top: auto; }.draft-indicator { padding: 5px 8px; border-radius: 99px; color: #836e72; background: var(--pink); font-size: 9px; font-weight: 800; }.article-form { margin-top: 16px; }.article-form .field-label small { color: #8b7578; font-size: 9px; font-weight: 500; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.admin-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 17px; }.admin-queue { padding: 22px; }.admin-queue > button { display: grid; width: 100%; min-height: 68px; padding: 9px 0; grid-template-columns: 35px 1fr 16px; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid rgba(165,0,22,.09); color: var(--ink); background: transparent; text-align: left; }.admin-queue > button:last-child { border-bottom: 0; }.admin-queue > button:hover b { color: var(--red); }.queue-count { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--red); background: var(--pink); font-size: 10px; font-weight: 800; }.admin-queue b, .admin-queue small { display: block; }.admin-queue b { font-size: 11px; }.admin-queue small { margin-top: 3px; color: #8b7578; font-size: 9px; }.admin-queue i { color: var(--red); font-style: normal; }.admin-published { margin-top: 18px; }.admin-article-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 16px; }.admin-article-item { position: relative; padding: 13px; border: 1px solid rgba(165,0,22,.09); border-radius: 13px; background: #fff; }.admin-article-item .article-thumb { display: grid; height: 57px; margin-bottom: 10px; place-items: center; overflow: hidden; border-radius: 9px; background: var(--article-color, var(--pink)); font-size: 24px; }.admin-article-item .article-thumb img { width: 100%; height: 100%; object-fit: cover; }.admin-article-item b { display: block; font-size: 11px; line-height: 1.3; }.admin-article-item small { display: block; margin-top: 4px; color: #8a7478; font-size: 9px; }.admin-article-item > button { margin-top: 10px; padding: 0; border: 0; color: #9b777b; background: transparent; font-size: 9px; font-weight: 800; }.admin-article-item > button:hover { color: var(--red); }.admin-session { display: grid; justify-items: end; gap: 5px; }.admin-session > small { color: #7d967f; font-size: 9px; font-weight: 700; }.content-library-actions { display: flex; align-items: center; gap: 13px; }.reset-demo-button { color: #8b7578; }

@media (max-width: 950px) { .member-stat-grid, .admin-metric-grid { grid-template-columns: repeat(2, 1fr); }.appointment-grid, .opportunity-grid, .admin-article-list { grid-template-columns: repeat(2, 1fr); }.auth-gate { grid-template-columns: 58px 1fr; }.auth-actions { grid-column: 2; justify-items: start; }.auth-note { grid-column: 1 / -1; }.care-layout, .portal-grid, .admin-layout, .student-grid { grid-template-columns: 1fr; }.telehealth-card { min-height: 215px; }.profile-completeness { min-height: 225px; } }
@media (max-width: 560px) { .appointment-grid, .opportunity-grid, .admin-article-list { grid-template-columns: 1fr; }.member-stat-grid, .admin-metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.member-stat-grid article { min-height: 128px; padding: 13px; }.member-stat-grid b, .admin-metric-grid b { font-size: 21px; }.portal-panel, .student-panel, .content-studio, .admin-queue, .admin-published { padding: 17px; }.form-row { grid-template-columns: 1fr; gap: 0; }.admin-form-actions { justify-content: stretch; }.admin-form-actions button { flex: 1; }.admin-session { justify-items: start; }.admin-heading { margin-bottom: 16px; } }

.admin-data-note { margin: 12px 0 18px; padding: 10px 13px; border-left: 3px solid var(--red); border-radius: 0 12px 12px 0; color: #795f63; background: rgba(251,237,237,.76); font-size: 10px; line-height: 1.55; }
.admin-directory-management { margin: 18px 0; padding: 22px; border: 1px solid rgba(165,0,22,.11); border-radius: var(--radius-lg); background: rgba(255,255,255,.76); }.admin-directory-management .panel-heading > div > p:last-child { max-width: 610px; margin: 6px 0 0; font-size: 10px; line-height: 1.5; }.directory-management-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-top: 17px; }.directory-admin-form, .directory-import-panel { padding: 17px; border: 1px solid rgba(165,0,22,.1); border-radius: 15px; background: #fff; }.directory-admin-form .primary-button { margin-top: 6px; }.directory-import-panel { background: linear-gradient(145deg, #fff7f7, #fbeded); }.directory-import-panel h3 { margin-bottom: 7px; font-size: 18px; }.directory-import-panel p:not(.eyebrow) { margin-bottom: 14px; font-size: 10px; line-height: 1.55; }.directory-import-panel code { padding: 1px 3px; border-radius: 4px; color: var(--maroon); background: rgba(255,255,255,.75); font-family: var(--font-body); font-size: 9px; }.file-drop { display: grid; min-height: 122px; margin: 13px 0; padding: 15px; place-items: center; align-content: center; gap: 5px; border: 1px dashed rgba(165,0,22,.32); border-radius: 13px; color: var(--maroon); background: rgba(255,255,255,.68); text-align: center; cursor: pointer; }.file-drop > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; color: #fff; background: var(--red); font-weight: 800; }.file-drop b { font-size: 11px; }.file-drop small { color: #8a7478; font-size: 9px; }.file-drop input { width: 100%; max-width: 205px; color: #80676b; font-size: 9px; }.admin-import-status { min-height: 30px; margin: 13px 0 0; color: #80676b; font-size: 9px; line-height: 1.45; }.admin-directory-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 15px; }.admin-directory-list article { display: grid; padding: 10px; grid-template-columns: 31px 1fr; gap: 8px; align-items: center; border: 1px solid rgba(165,0,22,.09); border-radius: 11px; background: #fff; }.admin-directory-list article > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--red); background: var(--pink); font-size: 9px; font-weight: 800; }.admin-directory-list b, .admin-directory-list small { display: block; }.admin-directory-list b { font-size: 10px; }.admin-directory-list small { margin-top: 3px; color: #8a7478; font-size: 8px; line-height: 1.35; }.admin-directory-empty { grid-column: 1 / -1; margin: 0; padding: 11px; border: 1px dashed rgba(165,0,22,.18); border-radius: 10px; color: #8a7478; background: #fffafa; font-size: 10px; }
@media (max-width: 850px) { .directory-management-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .admin-directory-management { padding: 17px; }.admin-directory-list { grid-template-columns: 1fr; }.file-drop { min-height: 110px; } }

@media (max-width: 560px) {
  .experience-switcher button { min-height: 30px; padding: 0 9px; font-size: 9px; }
  .dentist-topbar-actions .avatar-button { width: 34px; height: 34px; }
  .workspace-preview-note { align-items: flex-start; flex-wrap: wrap; }.workspace-preview-note p { flex-basis: calc(100% - 90px); }.workspace-preview-note button { margin-left: auto; }
}

/* Appearance themes: Light is the GDA default; alternative themes retain the
   same component hierarchy, focus treatment and brand-red action language. */
:root { --liquid-glass: rgba(255,255,255,.64); --liquid-glass-strong: rgba(255,255,255,.78); --liquid-glass-tint: rgba(255,241,242,.68); --liquid-border: rgba(255,255,255,.78); --liquid-edge: rgba(165,0,22,.13); --liquid-shadow: 0 18px 42px rgba(92,18,26,.10), inset 0 1px 0 rgba(255,255,255,.78); }
.app-shell { position: relative; z-index: 1; }
.appearance-toolbar-button { display: inline-flex; min-height: 38px; padding: 0 10px; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 99px; color: var(--maroon); background: rgba(255,255,255,.72); font-size: 15px; transition: .2s ease; }.appearance-toolbar-button small { color: inherit; font-size: 9px; font-weight: 800; }.appearance-toolbar-button:hover { border-color: rgba(224,0,0,.3); color: var(--red); box-shadow: 0 7px 18px rgba(82,20,27,.08); transform: translateY(-1px); }

.theme-picker-grid { display: grid; gap: 10px; }.theme-choice { display: grid; width: 100%; padding: 11px; grid-template-columns: 68px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: rgba(255,255,255,.65); text-align: left; transition: .2s ease; }.theme-choice:hover, .theme-choice.active { border-color: rgba(224,0,0,.34); background: var(--pink); box-shadow: 0 7px 17px rgba(92,18,26,.07); }.theme-choice:disabled { cursor: not-allowed; opacity: .56; }.theme-choice:disabled:hover { border-color: var(--line); background: rgba(255,255,255,.65); box-shadow: none; }.theme-choice:focus-visible { outline-offset: 2px; }.theme-choice b, .theme-choice small { display: block; }.theme-choice b { font-size: 12px; }.theme-choice small { margin-top: 4px; color: #80686c; font-size: 9px; line-height: 1.38; }.theme-choice em { color: var(--red); font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }.theme-swatch { display: flex; height: 42px; padding: 6px; align-items: flex-end; gap: 4px; overflow: hidden; border: 1px solid rgba(43,20,22,.12); border-radius: 11px; }.theme-swatch i { display: block; border-radius: 6px 6px 3px 3px; }.theme-swatch i:nth-child(1) { width: 42%; height: 76%; }.theme-swatch i:nth-child(2) { width: 28%; height: 54%; }.theme-swatch i:nth-child(3) { flex: 1; height: 35%; }.theme-swatch-light { background: #fffafa; }.theme-swatch-light i { background: #e00000; }.theme-swatch-light i:nth-child(2) { background: #fbeded; }.theme-swatch-light i:nth-child(3) { background: #a50016; }.theme-swatch-dark { background: #170d0f; }.theme-swatch-dark i { background: #ef5962; }.theme-swatch-dark i:nth-child(2) { background: #352025; }.theme-swatch-dark i:nth-child(3) { background: #ffe9e9; }.theme-swatch-liquid { background: linear-gradient(135deg, #fff, #ffe9eb); }.theme-swatch-liquid i { background: rgba(224,0,0,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }.theme-swatch-liquid i:nth-child(2) { background: rgba(255,255,255,.75); }.theme-swatch-liquid i:nth-child(3) { background: rgba(165,0,22,.55); }.theme-swatch-dusty { background: #f2e8e1; }.theme-swatch-dusty i { background: #b9555e; }.theme-swatch-dusty i:nth-child(2) { background: #d9b9ae; }.theme-swatch-dusty i:nth-child(3) { background: #7d4146; }

body[data-theme="liquid"] { position: relative; isolation: isolate; background: radial-gradient(circle at 83% 5%, rgba(224,0,0,.075), transparent 23rem), radial-gradient(circle at 2% 78%, rgba(165,0,22,.05), transparent 24rem), #fffafa; }
body[data-theme="liquid"]::before { position: fixed; z-index: 0; top: -14rem; right: -13rem; width: 36rem; height: 36rem; border-radius: 44% 56% 52% 48%; background: radial-gradient(circle at 34% 38%, rgba(255,255,255,.88) 0 6%, rgba(255,229,232,.42) 28%, rgba(224,0,0,.10) 49%, transparent 70%); content: ""; filter: blur(4px); opacity: .74; pointer-events: none; }
body[data-theme="liquid"] :is(.liquid-glass, .experience-switcher, .location-pill, .icon-button, .sidebar, .sidebar-support, .sidebar-workspace-card, .sidebar-theme-button, .glass-card, .profile-stat, .appointment-card, .opportunity-grid article, .portal-panel, .student-panel, .content-studio, .admin-queue, .admin-published, .admin-directory-management, .directory-admin-form, .directory-import-panel, .admin-metric-grid article, .member-stat-grid article, .admin-kpi, .admin-actions button, .modal-sheet, .notice-panel, .verification-panel, .form-panel, .mini-result) { border-color: var(--liquid-edge); background: linear-gradient(135deg, var(--liquid-glass-strong), var(--liquid-glass) 58%, var(--liquid-glass-tint)); box-shadow: var(--liquid-shadow); -webkit-backdrop-filter: blur(20px) saturate(118%); backdrop-filter: blur(20px) saturate(118%); }
body[data-theme="liquid"] .sidebar { border-right-color: var(--liquid-border); background: linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,247,248,.58)); } body[data-theme="liquid"] .experience-switcher, body[data-theme="liquid"] .location-pill, body[data-theme="liquid"] .icon-button { border-color: var(--liquid-border); } body[data-theme="liquid"] .nav-item.active { background: linear-gradient(108deg, rgba(224,0,0,.13), rgba(255,255,255,.36)); box-shadow: inset 0 1px 0 rgba(255,255,255,.68); } body[data-theme="liquid"] :is(.glass-card,.portal-panel,.content-studio,.admin-directory-management,.modal-sheet) { position: relative; } body[data-theme="liquid"] :is(.glass-card,.portal-panel,.content-studio,.admin-directory-management,.modal-sheet)::after { position: absolute; top: 0; right: 10%; left: 10%; height: 1px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.94), transparent); content: ""; pointer-events: none; } body[data-theme="liquid"] .modal-sheet { background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,244,245,.76)); } body[data-theme="liquid"] :is(.secondary-button,.outline-button,.secure-admin-badge) { border-color: var(--liquid-edge); background: rgba(255,255,255,.58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

body[data-theme="dusty"] { --red: #b9555e; --maroon: #7d4146; --ink: #382529; --pink: #f0dcda; --white: #fffaf6; --line: rgba(125,65,70,.16); --glass: rgba(255,250,246,.78); --glass-soft: rgba(242,232,225,.82); --shadow: 0 16px 38px rgba(83,49,42,.10); background: radial-gradient(circle at 82% 5%, rgba(185,85,94,.10), transparent 24rem), #f2e8e1; } body[data-theme="dusty"] :is(.sidebar,.glass-card,.profile-stat,.appointment-card,.opportunity-grid article,.portal-panel,.student-panel,.content-studio,.admin-queue,.admin-published,.admin-directory-management,.directory-admin-form,.directory-import-panel,.admin-metric-grid article,.member-stat-grid article,.modal-sheet,.notice-panel,.verification-panel,.form-panel,.mini-result,.event-row,.article-card,.directory-row,.theme-choice) { border-color: rgba(125,65,70,.15); background: #fffaf6; } body[data-theme="dusty"] .hero-card { background: linear-gradient(120deg, #f4e5df, #fffaf6 60%, #ecd5cf); } body[data-theme="dusty"] .sidebar-theme-button { background: #fffaf6; } body[data-theme="dusty"] .workspace-preview-note, body[data-theme="dusty"] .admin-data-note { background: rgba(240,220,218,.76); }

body[data-theme="dark"] { --red: #f3666e; --maroon: #c74e58; --ink: #fff4f4; --charcoal: #f3e7e7; --pink: #352025; --white: #201317; --line: rgba(255,230,231,.17); --glass: rgba(39,23,28,.90); --glass-soft: rgba(53,32,37,.90); --shadow: 0 16px 42px rgba(0,0,0,.30); color: #fff4f4; background: radial-gradient(circle at 82% 3%, rgba(243,102,110,.18), transparent 26rem), radial-gradient(circle at 8% 86%, rgba(199,78,88,.12), transparent 25rem), #170d0f; } body[data-theme="dark"] :is(.sidebar,.glass-card,.profile-stat,.appointment-card,.opportunity-grid article,.portal-panel,.student-panel,.content-studio,.admin-queue,.admin-published,.admin-directory-management,.directory-admin-form,.directory-import-panel,.admin-metric-grid article,.member-stat-grid article,.modal-sheet,.notice-panel,.verification-panel,.form-panel,.mini-result,.event-row,.article-card,.directory-row,.theme-choice,.admin-article-item,.admin-directory-list article,.profile-menu,.admin-kpi,.admin-actions button,.sidebar-theme-button) { border-color: rgba(255,231,232,.14); color: #fff4f4; background: #27171b; box-shadow: 0 12px 30px rgba(0,0,0,.20); } body[data-theme="dark"] :is(h1,h2,h3,b,strong,.directory-main h3,.event-info h3,.admin-queue b,.profile-menu button span,.field-label) { color: #fff7f7; } body[data-theme="dark"] :is(p,.modal-subtitle,.directory-meta p,.event-info p,.event-detail,.article-meta,.admin-queue small,.theme-choice small,.field-label small,.admin-data-note,.workspace-preview-note p,.sidebar-footer,.admin-directory-list small) { color: #d7c1c4; } body[data-theme="dark"] .hero-card { background: radial-gradient(circle at 72% 25%, rgba(243,102,110,.18), transparent 25rem), linear-gradient(125deg, #2b171c, #1b1013); } body[data-theme="dark"] :is(.experience-switcher,.location-pill,.icon-button,.secondary-button,.outline-button,.secure-admin-badge,.sheet-search) { border-color: rgba(255,231,232,.18); color: #fff4f4; background: rgba(39,23,28,.93); } body[data-theme="dark"] :is(.nav-item,.profile-menu button,.admin-actions button) { color: #e6cccf; } body[data-theme="dark"] :is(.nav-item:hover,.profile-menu button:hover,.admin-actions button:hover,.theme-choice:hover,.theme-choice.active) { color: #fff; background: #3a2026; } body[data-theme="dark"] .nav-item.active { color: #fff; background: linear-gradient(110deg, rgba(243,102,110,.40), rgba(53,32,37,.82)); } body[data-theme="dark"] :is(.field-label input,.field-label select,.field-label textarea,.sheet-search input) { border-color: rgba(255,231,232,.16); color: #fff6f6; background: #1a1013; } body[data-theme="dark"] :is(.field-label input,.field-label textarea)::placeholder { color: #bca3a7; } body[data-theme="dark"] .workspace-preview-note, body[data-theme="dark"] .admin-data-note, body[data-theme="dark"] .directory-import-panel { background: #302027; } body[data-theme="dark"] .article-image, body[data-theme="dark"] .article-thumb { filter: saturate(.86) brightness(.86); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body[data-theme="liquid"] :is(.liquid-glass,.experience-switcher,.location-pill,.icon-button,.sidebar,.sidebar-support,.sidebar-workspace-card,.sidebar-theme-button,.glass-card,.profile-stat,.appointment-card,.opportunity-grid article,.portal-panel,.student-panel,.content-studio,.admin-queue,.admin-published,.admin-directory-management,.directory-admin-form,.directory-import-panel,.admin-metric-grid article,.member-stat-grid article,.admin-kpi,.admin-actions button,.modal-sheet,.notice-panel,.verification-panel,.form-panel,.mini-result) { background: rgba(255,255,255,.94); } }
@media (prefers-reduced-motion: no-preference) { body[data-theme="liquid"]::before { animation: liquid-drift 18s ease-in-out infinite alternate; } } @keyframes liquid-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2rem,1.5rem,0) scale(1.05); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media (max-width: 560px) { .theme-choice { grid-template-columns: 58px 1fr; }.theme-choice em { display: none; }.theme-swatch { height: 38px; } }

/* Bubble Purple is intentionally decorative in its surfaces only; GDA-red remains the action colour. */
.theme-swatch-bubblePurple { background: radial-gradient(circle at 70% 22%, #d8cbff 0 16%, transparent 17%), radial-gradient(circle at 32% 72%, #bea8f4 0 19%, transparent 20%), #eee9ff; }.theme-swatch-bubblePurple i { background: #d93055; }.theme-swatch-bubblePurple i:nth-child(2) { background: #9270cf; }.theme-swatch-bubblePurple i:nth-child(3) { background: #56347e; }
body[data-theme="bubblePurple"] { --red: #d93055; --maroon: #7a315b; --ink: #2e2144; --pink: #f0ebff; --white: #fffbff; --line: rgba(86,52,126,.16); --glass: rgba(255,251,255,.78); --glass-soft: rgba(240,235,255,.82); --shadow: 0 17px 40px rgba(70,42,110,.13); background: radial-gradient(circle at 84% 5%, rgba(188,168,244,.45) 0 7%, transparent 8%), radial-gradient(circle at 91% 13%, rgba(216,203,255,.54) 0 10%, transparent 11%), radial-gradient(circle at 10% 88%, rgba(146,112,207,.16) 0 14%, transparent 15%), #eee9ff; } body[data-theme="bubblePurple"] :is(.sidebar,.glass-card,.profile-stat,.appointment-card,.opportunity-grid article,.portal-panel,.student-panel,.content-studio,.admin-queue,.admin-published,.admin-directory-management,.directory-admin-form,.directory-import-panel,.admin-metric-grid article,.member-stat-grid article,.modal-sheet,.notice-panel,.verification-panel,.form-panel,.mini-result,.event-row,.article-card,.directory-row,.theme-choice) { border-color: rgba(86,52,126,.15); background: rgba(255,251,255,.88); } body[data-theme="bubblePurple"] .hero-card { background: radial-gradient(circle at 76% 24%, rgba(216,203,255,.86) 0 7%, transparent 8%), radial-gradient(circle at 86% 42%, rgba(190,168,244,.56) 0 14%, transparent 15%), linear-gradient(120deg, #f4efff, #fffbff 62%, #e7dcff); } body[data-theme="bubblePurple"] .appearance-toolbar-button { border-color: rgba(86,52,126,.16); background: #fffbff; } body[data-theme="bubblePurple"] .workspace-preview-note, body[data-theme="bubblePurple"] .admin-data-note { background: rgba(240,235,255,.84); }
body[data-theme="dark"] .appearance-toolbar-button { border-color: rgba(255,231,232,.18); color: #fff4f4; background: rgba(39,23,28,.93); } body[data-theme="dusty"] .appearance-toolbar-button { background: #fffaf6; } body[data-theme="liquid"] .appearance-toolbar-button { border-color: var(--liquid-border); background: rgba(255,255,255,.58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 850px) { .appearance-toolbar-button { display: none; } }

.workflow-list { display: grid; gap: 10px; margin-top: 16px; }.workflow-item { display: grid; padding: 13px; gap: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72); }.workflow-item b, .workflow-item small { display: block; }.workflow-item b { font-size: 12px; }.workflow-item small { margin-top: 4px; color: #80686c; font-size: 9px; }.workflow-item p { margin: 8px 0 0; font-size: 10px; line-height: 1.45; }.workflow-actions { display: flex; flex-wrap: wrap; gap: 7px; }.workflow-actions button { min-height: 33px; padding: 0 10px; font-size: 9px; }.empty-state.compact { min-height: 180px; }.empty-state.compact h2 { font-size: 17px; } body[data-theme="dark"] .workflow-item { border-color: rgba(255,231,232,.14); background: #27171b; } body[data-theme="dark"] .workflow-item small { color: #d7c1c4; }

/* Icy White: a cool, clean alternative to the warm GDA default. */
.theme-swatch-icyWhite { background: radial-gradient(circle at 72% 20%, rgba(255,255,255,.96) 0 17%, transparent 18%), linear-gradient(135deg, #dcefff, #f9fdff 58%, #d5eafd); }.theme-swatch-icyWhite i { background: #e00000; }.theme-swatch-icyWhite i:nth-child(2) { background: #a7cae6; }.theme-swatch-icyWhite i:nth-child(3) { background: #2f6089; }
body[data-theme="icyWhite"] { --red: #d90012; --maroon: #68232b; --ink: #192d3c; --pink: #e5f2fc; --white: #fbfdff; --line: rgba(38,105,150,.16); --glass: rgba(255,255,255,.76); --glass-soft: rgba(233,245,255,.82); --shadow: 0 18px 40px rgba(46,104,145,.12); background: radial-gradient(circle at 84% 4%, rgba(190,226,249,.72) 0 9%, transparent 23%), radial-gradient(circle at 10% 86%, rgba(206,232,250,.58) 0 11%, transparent 26%), #eef7ff; }
body[data-theme="icyWhite"] :is(.sidebar,.glass-card,.profile-stat,.appointment-card,.opportunity-grid article,.portal-panel,.student-panel,.content-studio,.admin-queue,.admin-published,.admin-directory-management,.directory-admin-form,.directory-import-panel,.admin-metric-grid article,.member-stat-grid article,.modal-sheet,.notice-panel,.verification-panel,.form-panel,.mini-result,.event-row,.article-card,.directory-row,.theme-choice,.admin-article-item,.admin-directory-list article,.workflow-item) { border-color: rgba(47,111,153,.15); background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(243,250,255,.84)); box-shadow: 0 12px 30px rgba(46,104,145,.08), inset 0 1px 0 rgba(255,255,255,.96); }
body[data-theme="icyWhite"] .hero-card { background: radial-gradient(circle at 74% 22%, rgba(235,249,255,.96) 0 10%, transparent 25%), linear-gradient(120deg, #e3f3ff, #fbfdff 60%, #d9edfc); } body[data-theme="icyWhite"] :is(.appearance-toolbar-button,.experience-switcher,.location-pill,.icon-button,.secondary-button,.outline-button,.secure-admin-badge,.sheet-search) { border-color: rgba(47,111,153,.17); background: rgba(255,255,255,.76); } body[data-theme="icyWhite"] .workspace-preview-note, body[data-theme="icyWhite"] .admin-data-note { background: rgba(226,241,252,.84); }

/* Dark-mode contrast repair: every light surface gets an intentional dark
   equivalent, so text never inherits a light foreground on a light card. */
body[data-theme="dark"] { color-scheme: dark; }
body[data-theme="dark"] :is(.sidebar-support,.trusted-tag,.quick-card:not(.featured),.dentist-card,.professional-badge,.directory-count,.directory-toolbar,.filter-button,.view-switch button,.chip,.map-legend,.topic-chip,.featured-article,.mobile-nav,.specialty-chip,.location-action,.map-status,.map-caption,.care-notice,.next-step-list button,.path-list button,.file-drop,.admin-directory-empty,.appearance-toolbar-button,.directory-search) { border-color: rgba(255,231,232,.16); color: #fff4f4; background: #27171b; box-shadow: 0 12px 30px rgba(0,0,0,.20); }
body[data-theme="dark"] :is(.quick-card.report-card,.care-notice,.student-panel.soft) { background: #302027; }
body[data-theme="dark"] :is(.quick-card:not(.featured),.dentist-card,.trusted-tag,.directory-count,.map-legend,.topic-chip,.featured-article,.map-status,.map-caption,.care-notice,.next-step-list button,.path-list button,.file-drop,.admin-directory-empty) :is(p,small,dt,dd,code,span:not(.quick-icon):not(.verified-badge):not(.professional-badge):not(.queue-count):not(.event-date):not(.event-date-chip):not(.calendar-date):not(.location-pin)) { color: #d7c1c4; }
body[data-theme="dark"] :is(.quick-card:not(.featured),.dentist-card,.trusted-tag,.directory-count,.featured-article,.next-step-list button,.path-list button) :is(h1,h2,h3,b,strong) { color: #fff7f7; }
body[data-theme="dark"] .trusted-tag :is(b,small) { color: #fff4f4; }
body[data-theme="dark"] :is(.filter-button,.view-switch button,.chip,.topic-chip,.specialty-chip,.location-action,.sheet-close,.save-button,.appearance-toolbar-button,.directory-search) { color: #f2e2e5; background: #2d1b20; }
body[data-theme="dark"] :is(.filter-button:hover,.view-switch button:hover,.chip:hover,.topic-chip:hover,.specialty-chip:hover,.location-action:hover,.save-button:hover) { color: #fff; border-color: rgba(243,102,110,.54); background: #3a2026; }
body[data-theme="dark"] .directory-search input { color: #fff6f6; -webkit-text-fill-color: #fff6f6; } body[data-theme="dark"] .directory-search input::placeholder { color: #c3aeb1; opacity: 1; }
body[data-theme="dark"] :is(.field-label input,.field-label select,.field-label textarea,.sheet-search input) { color-scheme: dark; color: #fff6f6; -webkit-text-fill-color: #fff6f6; caret-color: #fff; } body[data-theme="dark"] select option { color: #fff6f6; background: #1a1013; }
body[data-theme="dark"] input[type="file"] { color: #e7d8da; } body[data-theme="dark"] input[type="file"]::file-selector-button { border: 1px solid rgba(255,231,232,.18); border-radius: 8px; color: #fff4f4; background: #3a2026; }
body[data-theme="dark"] .secure-admin-badge { color: #9ce6bd; background: rgba(30,122,80,.25); } body[data-theme="dark"] .admin-session > small { color: #a9d9b9; }
body[data-theme="dark"] .empty-state { color: #d7c1c4; background: rgba(39,23,27,.72); }
:where(.nav-item > span,.location-pin,.icon-button,.appearance-icon,.quick-icon,.step-icon,.care-pin,.event-date,.queue-count,.verified-badge b,.sheet-close) { font-family: "Segoe UI Symbol", "Apple Symbols", "Arial Unicode MS", sans-serif; }

/* Dark, edge-lit Liquid Glass follows the supplied reference: dimensional,
   restrained and legible, with the GDA red reserved for meaningful actions. */
body[data-theme="liquid"] { --red: #ff5a64; --maroon: #ffe5e7; --ink: #f7f5f7; --charcoal: #ded9df; --pink: #4a3036; --white: #252429; --line: rgba(255,255,255,.17); --glass: rgba(48,47,53,.62); --glass-soft: rgba(39,38,43,.72); --shadow: 0 22px 48px rgba(0,0,0,.34); color: #f7f5f7; background: radial-gradient(circle at 77% 6%, rgba(255,255,255,.12) 0 2%, rgba(112,110,118,.12) 11%, transparent 31%), radial-gradient(circle at 10% 88%, rgba(10,10,13,.34) 0 11%, transparent 33%), #343337; }
body[data-theme="liquid"]::before { top: -18rem; right: -14rem; width: 45rem; height: 45rem; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: radial-gradient(circle at 35% 33%, rgba(255,255,255,.28), rgba(255,255,255,.07) 22%, rgba(39,38,44,.05) 46%, transparent 69%); box-shadow: -30px 30px 80px rgba(0,0,0,.28), inset 18px 10px 44px rgba(255,255,255,.05); filter: blur(1px); opacity: .9; }
body[data-theme="liquid"] :is(.sidebar,.glass-card,.profile-stat,.appointment-card,.opportunity-grid article,.portal-panel,.student-panel,.content-studio,.admin-queue,.admin-published,.admin-directory-management,.directory-admin-form,.directory-import-panel,.admin-metric-grid article,.member-stat-grid article,.modal-sheet,.notice-panel,.verification-panel,.form-panel,.mini-result,.event-row,.article-card,.directory-row,.theme-choice,.admin-article-item,.admin-directory-list article,.workflow-item,.experience-switcher,.location-pill,.icon-button,.secure-admin-badge) { border: 1px solid rgba(255,255,255,.18); color: #f7f5f7; background: linear-gradient(135deg, rgba(91,90,97,.54), rgba(45,44,50,.70) 45%, rgba(26,26,31,.76)); box-shadow: 0 19px 44px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.24); -webkit-backdrop-filter: blur(28px) saturate(112%); backdrop-filter: blur(28px) saturate(112%); }
body[data-theme="liquid"] :is(h1,h2,h3,b,strong,.directory-main h3,.event-info h3,.admin-queue b,.profile-menu button span,.field-label) { color: #fcfbfd; } body[data-theme="liquid"] :is(p,.modal-subtitle,.directory-meta p,.event-info p,.event-detail,.article-meta,.admin-queue small,.theme-choice small,.field-label small,.admin-data-note,.workspace-preview-note p,.sidebar-footer,.admin-directory-list small,.workflow-item small) { color: #d7d2d8; }
body[data-theme="liquid"] .sidebar { border-right-color: rgba(255,255,255,.21); background: linear-gradient(165deg, rgba(82,81,88,.68), rgba(37,36,41,.82)); } body[data-theme="liquid"] .hero-card { border: 1px solid rgba(255,255,255,.17); background: radial-gradient(circle at 77% 23%, rgba(255,255,255,.16) 0 7%, transparent 24%), linear-gradient(124deg, rgba(83,82,89,.76), rgba(39,38,44,.80) 62%, rgba(27,27,32,.87)); box-shadow: 0 26px 56px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.22); } body[data-theme="liquid"] .hero-card::before { background: radial-gradient(circle at 42% 40%, rgba(255,255,255,.17), rgba(255,255,255,.05) 43%, transparent 68%); } body[data-theme="liquid"] .hero-card::after { background: linear-gradient(110deg, transparent 30%, rgba(255,90,100,.48)); opacity: .42; }
body[data-theme="liquid"] :is(.secondary-button,.outline-button,.sheet-search) { border-color: rgba(255,255,255,.20); color: #f6f2f5; background: rgba(31,30,35,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.17); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } body[data-theme="liquid"] :is(.field-label input,.field-label select,.field-label textarea,.sheet-search input) { border-color: rgba(255,255,255,.16); color: #fff; background: rgba(18,18,22,.55); } body[data-theme="liquid"] :is(.field-label input,.field-label textarea)::placeholder { color: #bdb7bf; } body[data-theme="liquid"] :is(.nav-item,.profile-menu button,.admin-actions button) { color: #dbd6dc; } body[data-theme="liquid"] :is(.nav-item:hover,.profile-menu button:hover,.admin-actions button:hover,.theme-choice:hover,.theme-choice.active) { color: #fff; background: rgba(255,255,255,.13); } body[data-theme="liquid"] .nav-item.active { color: #fff; background: linear-gradient(105deg, rgba(255,90,100,.47), rgba(255,255,255,.13)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
body[data-theme="liquid"] .appearance-toolbar-button { min-height: 42px; padding: 3px 5px 3px 13px; border-color: rgba(255,255,255,.19); border-radius: 999px; color: #f3eef2; background: linear-gradient(130deg, rgba(28,28,33,.77), rgba(58,57,64,.72)); box-shadow: 0 10px 25px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); } body[data-theme="liquid"] .appearance-toolbar-button small { letter-spacing: .02em; } body[data-theme="liquid"] .appearance-toolbar-button .appearance-icon { display: grid; width: 34px; height: 34px; margin-left: 2px; place-items: center; order: 2; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; background: radial-gradient(circle at 33% 25%, rgba(255,255,255,.68), rgba(255,255,255,.16) 35%, rgba(15,15,19,.72) 77%); box-shadow: 0 8px 20px rgba(0,0,0,.33), inset 0 1px 1px rgba(255,255,255,.50); font-size: 17px; }
body[data-theme="liquid"] .workspace-preview-note, body[data-theme="liquid"] .admin-data-note, body[data-theme="liquid"] .directory-import-panel { color: #dfd9df; background: linear-gradient(125deg, rgba(67,66,73,.74), rgba(37,36,42,.79)); } body[data-theme="liquid"] .article-image, body[data-theme="liquid"] .article-thumb { filter: saturate(.82) brightness(.90); }

/* Liquid Glass Lite: touch devices avoid compositing a blur layer for every
   card. The frosted edge, gradient depth and red actions remain, without the
   scrolling jank caused by repeated backdrop filters and moving large blur. */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  body[data-theme="liquid"]::before { display: none; animation: none !important; }
  body[data-theme="liquid"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body[data-theme="liquid"] :is(.sidebar,.glass-card,.profile-stat,.appointment-card,.opportunity-grid article,.portal-panel,.student-panel,.content-studio,.admin-queue,.admin-published,.admin-directory-management,.directory-admin-form,.directory-import-panel,.admin-metric-grid article,.member-stat-grid article,.modal-sheet,.notice-panel,.verification-panel,.form-panel,.mini-result,.event-row,.article-card,.directory-row,.theme-choice,.admin-article-item,.admin-directory-list article,.workflow-item,.experience-switcher,.location-pill,.icon-button,.secure-admin-badge,.quick-card,.dentist-card,.directory-count,.directory-toolbar,.featured-article,.mobile-nav) { background: linear-gradient(135deg, #55545b, #302f35 52%, #222126); box-shadow: 0 10px 24px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.2); }
  body[data-theme="liquid"] .hero-card { background: linear-gradient(124deg, #59585f, #35343a 62%, #25242a); box-shadow: 0 16px 34px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.20); }
  body[data-theme="liquid"] .hero-card::before, body[data-theme="liquid"] .hero-card::after { display: none; }
  body[data-theme="liquid"] :is(.article-image,.article-thumb) { filter: none; }
  body[data-theme="liquid"] .mobile-nav { background: #29282e; box-shadow: 0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18); }
  body[data-theme="liquid"] .directory-row { content-visibility: auto; contain-intrinsic-size: auto 104px; }
}

/* Mobile and tablet layout: faster directory rendering, native-safe controls
   and room for the home-indicator / iPad touch affordances. */
.directory-load-more { display: grid; padding: 20px; place-items: center; gap: 10px; text-align: center; }.directory-load-more p, .directory-result-count { margin: 0; color: #806b6f; font-size: 11px; }.directory-result-count { padding: 15px; text-align: center; }
@media (max-width: 850px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: rgba(224,0,0,.16); }
  button, [role="button"] { touch-action: manipulation; }
  .main-content { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .mobile-nav { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); min-height: 68px; padding: 5px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mobile-nav .nav-item { min-height: 54px; }
  :is(.primary-button,.secondary-button,.outline-button,.filter-button,.location-action) { min-height: 46px; }
  :is(.icon-button,.avatar-button,.sheet-close) { width: 44px; height: 44px; }
  .field-label :is(input,select,textarea), .sheet-search input, .directory-search input { min-height: 46px; font-size: 16px; }
  .directory-row { content-visibility: auto; contain-intrinsic-size: auto 104px; }
  .directory-row:hover, .quick-card:hover, .article-card:hover, .dentist-card:hover { transform: none; }
  .modal-sheet { padding: calc(62px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .directory-load-more { padding-bottom: 28px; }
}
@media (max-width: 700px) {
  .location-pill { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .page-heading { margin-top: 8px; }
  .directory-count { min-width: 0; width: 100%; }
}
@media (max-width: 420px) {
  .main-content { padding-right: 14px; padding-left: 14px; }
  .topbar { min-height: 70px; }.experience-switcher button { padding: 0 8px; font-size: 9px; }
  .quick-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.quick-card { min-height: 124px; padding: 14px; }
  .hero-card { min-height: 448px; }.hero-copy { padding: 30px 22px; }.hero-description { margin-bottom: 19px; }
  .directory-row { grid-template-columns: 52px minmax(0,1fr) auto; padding: 11px; gap: 8px; }.directory-row .dentist-photo { width: 50px; height: 50px; }
  .directory-actions .primary-button { min-width: 0; padding: 0 9px; font-size: 10px; }
  .modal-actions { flex-direction: column; }.modal-actions button { min-height: 46px; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body[data-theme="liquid"] :is(.sidebar,.glass-card,.profile-stat,.appointment-card,.opportunity-grid article,.portal-panel,.student-panel,.content-studio,.admin-queue,.admin-published,.admin-directory-management,.directory-admin-form,.directory-import-panel,.admin-metric-grid article,.member-stat-grid article,.modal-sheet,.notice-panel,.verification-panel,.form-panel,.mini-result,.event-row,.article-card,.directory-row,.theme-choice,.admin-article-item,.admin-directory-list article,.workflow-item,.experience-switcher,.location-pill,.icon-button,.secure-admin-badge) { background: #302f34; } }

.campaign-item-heading { display: flex; gap: 8px; align-items: center; justify-content: space-between; }.campaign-status { padding: 4px 7px; border-radius: 99px; color: #765d61; background: var(--pink); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.campaign-status.live { color: #176649; background: #e3f7ed; }.campaign-status.scheduled { color: #315e86; background: #e6f2fb; }.campaign-status.paused { color: #8b6330; background: #fff1d7; } body[data-theme="dark"] .campaign-status.live, body[data-theme="liquid"] .campaign-status.live { color: #91edbd; background: rgba(50,156,108,.22); } body[data-theme="dark"] .campaign-status.scheduled, body[data-theme="liquid"] .campaign-status.scheduled { color: #abd9ff; background: rgba(84,140,190,.23); } body[data-theme="dark"] .campaign-status.paused, body[data-theme="liquid"] .campaign-status.paused { color: #ffd695; background: rgba(173,119,39,.22); }

/* --- Extended Profile Screen & My Appointments Care Tracker --- */
button.profile-stat { cursor: pointer; text-align: left; transition: .2s ease; border: 1px solid rgba(165,0,22,.1); }
button.profile-stat:hover { border-color: rgba(224,0,0,.3); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(78,22,25,.07); }
button.profile-stat.active { border-color: var(--red); background: linear-gradient(135deg, #fff7f7, #fdeded); }

.profile-tabs-nav { display: flex; gap: 8px; margin: 24px 0 20px; border-bottom: 2px solid rgba(165,0,22,.08); padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.profile-tabs-nav::-webkit-scrollbar { display: none; }
.profile-tab-button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #7a6569; font-size: 13px; font-weight: 700; transition: .2s ease; white-space: nowrap; cursor: pointer; }
.profile-tab-button:hover { color: var(--red); background: rgba(224,0,0,.03); border-radius: 8px 8px 0 0; }
.profile-tab-button.active { color: var(--red); border-bottom-color: var(--red); }
.tab-icon { font-size: 15px; }
.profile-tab-badge { display: inline-grid; min-width: 20px; height: 20px; padding: 0 6px; place-items: center; border-radius: 99px; background: var(--pink); color: var(--red); font-size: 10px; font-weight: 800; line-height: 1; }
.profile-tab-button.active .profile-tab-badge { background: var(--red); color: #fff; }
.profile-tab-badge.muted { background: rgba(0,0,0,.06); color: inherit; }

.appointments-control-bar { padding: 22px 24px; border-radius: var(--radius-lg); margin-bottom: 18px; border: 1px solid rgba(165,0,22,.1); }
.appointments-control-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.appointments-control-header h2 { margin: 2px 0 0; font-size: 22px; }
.appointments-lead { margin: 6px 0 0; color: #6e5a5e; font-size: 12px; max-width: 620px; line-height: 1.5; }
.appointments-filter-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(165,0,22,.08); }
.apt-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.apt-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,255,255,.8); color: #6e575b; font-size: 11px; font-weight: 700; transition: .2s ease; cursor: pointer; }
.apt-filter-chip b { display: inline-block; padding: 1px 6px; border-radius: 99px; background: var(--pink); color: var(--red); font-size: 9px; font-weight: 800; }
.apt-filter-chip:hover { border-color: rgba(224,0,0,.3); color: var(--red); }
.apt-filter-chip.active { border-color: var(--red); background: var(--red); color: white; }
.apt-filter-chip.active b { background: rgba(255,255,255,.25); color: white; }

.apt-status-legend { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; color: #7f6a6e; font-weight: 600; flex-wrap: wrap; }
.legend-badge { display: inline-flex; align-items: center; gap: 5px; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.confirmed, .legend-badge.confirmed .status-dot { background: #15803d; box-shadow: 0 0 0 3px rgba(21,128,61,.18); }
.status-dot.requested, .legend-badge.requested .status-dot { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.18); }
.status-dot.completed, .legend-badge.completed .status-dot { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.status-dot.cancelled, .legend-badge.cancelled .status-dot { background: #9ca3af; box-shadow: 0 0 0 3px rgba(156,163,175,.18); }
.status-dot.pulsing { animation: pulse-status-dot 2s infinite ease-in-out; }
@keyframes pulse-status-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.25); } }

.apt-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.apt-status-badge.status-confirmed { color: #14532d; background: #dcfce7; border: 1px solid rgba(21,128,61,.2); }
.apt-status-badge.status-requested { color: #78350f; background: #fef3c7; border: 1px solid rgba(217,119,6,.2); }
.apt-status-badge.status-completed { color: #1e3a8a; background: #dbeafe; border: 1px solid rgba(37,99,235,.2); }
.apt-status-badge.status-cancelled { color: #4b5563; background: #f3f4f6; border: 1px solid rgba(107,114,128,.2); }
.apt-status-badge.status-rescheduled { color: #581c87; background: #f3e8ff; border: 1px solid rgba(126,34,206,.2); }

.appointments-list-container { display: grid; gap: 14px; margin-top: 14px; }
.apt-card { padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(165,0,22,.1); background: rgba(255,255,255,.85); transition: .2s ease; display: grid; gap: 14px; position: relative; }
.apt-card.is-upcoming { border-left: 5px solid var(--red); }
.apt-card.is-past { border-left: 5px solid #94a3b8; }
.apt-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(78,22,25,.07); }

.apt-card-header { display: flex; gap: 16px; align-items: flex-start; }
.apt-date-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; min-height: 64px; padding: 6px; border-radius: 14px; border: 1px solid rgba(165,0,22,.12); background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.04); flex-shrink: 0; }
.apt-date-month { font-size: 10px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .06em; line-height: 1; }
.apt-date-day { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; margin-top: 2px; }
.apt-date-time { font-size: 8px; color: #876f73; font-weight: 700; margin-top: 2px; }

.apt-header-main { flex: 1; min-width: 0; }
.apt-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.apt-timeline-tag { font-size: 10px; font-weight: 700; color: #836e72; }
.apt-provider-name { margin: 0 0 3px; font-size: 16px; font-weight: 700; color: var(--ink); }
.apt-setting { margin: 0; font-size: 11px; color: #7f686c; font-weight: 500; }

.apt-card-body { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(251,237,237,.35); border: 1px solid rgba(165,0,22,.06); }
.apt-reason-box { margin: 0; }
.apt-reason-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: #8f7579; margin-bottom: 2px; }
.apt-reason-title { font-size: 12px; font-weight: 700; color: var(--ink); display: block; }
.apt-notes { margin: 4px 0 0; font-size: 11px; font-style: italic; color: #70585d; line-height: 1.4; }

.apt-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding-top: 8px; border-top: 1px solid rgba(165,0,22,.08); }
.apt-meta-label { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #8e777a; margin-bottom: 2px; }
.apt-meta-value { display: block; font-size: 11px; font-weight: 600; color: var(--ink); }

.apt-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-sm { min-height: 33px !important; padding: 0 12px !important; font-size: 11px !important; border-radius: 9px !important; }
.text-danger { color: #dc2626 !important; }
.text-danger:hover { color: #b91c1c !important; background: #fee2e2 !important; border-radius: 6px; }

.profile-saved-container { padding: 22px; border-radius: var(--radius-lg); border: 1px solid rgba(165,0,22,.1); }
.profile-saved-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.profile-saved-column h3 { font-size: 15px; margin-bottom: 10px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }
.profile-saved-column h3 span { font-size: 10px; color: #8b7578; font-weight: 600; }

/* Dark mode & Liquid theme adaptations */
body[data-theme="dark"] .apt-card,
body[data-theme="liquid"] .apt-card { background: rgba(39,23,28,.85); border-color: rgba(255,231,232,.14); }
body[data-theme="dark"] .apt-provider-name,
body[data-theme="liquid"] .apt-provider-name { color: #fff7f7; }
body[data-theme="dark"] .apt-card-body,
body[data-theme="liquid"] .apt-card-body { background: rgba(25,14,18,.55); border-color: rgba(255,231,232,.1); }
body[data-theme="dark"] .apt-date-badge,
body[data-theme="liquid"] .apt-date-badge { background: #27171b; border-color: rgba(255,231,232,.18); color: #fff; }
body[data-theme="dark"] .apt-date-day,
body[data-theme="liquid"] .apt-date-day { color: #fff; }
body[data-theme="dark"] .apt-filter-chip,
body[data-theme="liquid"] .apt-filter-chip { background: #27171b; border-color: rgba(255,231,232,.18); color: #d7c1c4; }
body[data-theme="dark"] .apt-filter-chip.active,
body[data-theme="liquid"] .apt-filter-chip.active { background: var(--red); color: #fff; }
body[data-theme="dark"] .apt-reason-title,
body[data-theme="liquid"] .apt-reason-title { color: #fff; }
body[data-theme="dark"] .apt-meta-value,
body[data-theme="liquid"] .apt-meta-value { color: #f2e2e5; }
body[data-theme="dark"] .profile-tab-button,
body[data-theme="liquid"] .profile-tab-button { color: #c9b4b7; }
body[data-theme="dark"] .profile-tab-button.active,
body[data-theme="liquid"] .profile-tab-button.active { color: var(--red); }
body[data-theme="dark"] button.profile-stat.active,
body[data-theme="liquid"] button.profile-stat.active { border-color: var(--red); background: #351c22; }

@media (max-width: 680px) {
  .profile-saved-grid { grid-template-columns: 1fr; }
  .apt-card-header { flex-direction: column; gap: 10px; }
  .apt-date-badge { flex-direction: row; min-width: auto; min-height: auto; width: 100%; justify-content: flex-start; gap: 10px; padding: 6px 12px; }
  .apt-date-day { margin-top: 0; }
  .appointments-control-header { flex-direction: column; align-items: stretch; }
  .appointments-header-actions button { width: 100%; }
}