:root {
  --primary-blue: #357982;
  --dark-blue: #285d65;
  --light-blue: #edf7f5;
  --primary-green: #16804a;
  --dark-green: #106438;
  --light-green: #e3f5e9;
  --pure-white: #ffffff;
  --off-white: #f5faf5;
  --slate-100: #eef6ef;
  --slate-200: #d9e9dc;
  --slate-400: #94a3b8;
  --slate-600: #52675a;
  --slate-700: #3e5948;
  --slate-800: #294b37;
  --slate-900: #173d28;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.05);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--off-white);
  color: var(--slate-800);
  line-height: 1.5;
  scroll-behavior: smooth;
}

/* Strobe Alert Overlay Class */
body.strobe-alert {
  animation: strobePulse 0.4s infinite;
}

@keyframes strobePulse {
  0% { background-color: #edf7f5; }
  50% { background-color: #ffffff; }
  100% { background-color: #edf7f5; }
}

/* Top SOS Hotlines */
.top-sos-bar {
  background-color: var(--dark-green);
  color: var(--pure-white);
  padding: 8px 16px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.sos-ticker-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sos-pill-pulse {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.pulse-beacon {
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: beaconPulse 1.6s infinite;
}

@keyframes beaconPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.8); }
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.sos-hotlines {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hotline-btn {
  background-color: var(--primary-green);
  color: var(--pure-white);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  border: 1px solid rgba(255,255,255,0.3);
}

.hotline-btn:hover {
  background-color: var(--pure-white);
  color: var(--dark-green);
}

/* Header */
.app-header {
  background-color: var(--pure-white);
  border-bottom: 2px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #30965c, var(--dark-green));
  color: var(--pure-white);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 10px rgba(22, 128, 74, 0.18);
}

.brand-text h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--slate-900);
  line-height: 1.1;
}

.brand-text h1 span {
  color: var(--primary-green);
}

.brand-text p {
  font-size: 12px;
  color: var(--slate-600);
}

.nav-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.nav-links a {
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-600);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.nav-links a:hover {
  background-color: var(--light-green);
  color: var(--dark-green);
}

.nav-user-badge {
  background-color: var(--slate-100);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-800);
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--slate-200);
}

/* Main Content Layout */
.main-content {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Section styling */
.content-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.section-title h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--slate-900);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title p {
  font-size: 13px;
  color: var(--slate-600);
}

/* Cards & Generic Components */
.card {
  background-color: var(--pure-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-clean {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate-200);
}

.card-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Emergency Console Card */
.emergency-console-card {
  background-color: var(--pure-white);
  border: 2px solid var(--primary-green);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  box-shadow: var(--shadow-md);
}

.console-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--slate-900);
  margin-bottom: 4px;
}

.dot-green {
  width: 10px;
  height: 10px;
  background-color: var(--primary-green);
  border-radius: 50%;
  display: inline-block;
}

.console-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.gps-status-banner {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-green);
}

/* Buttons */
.btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-blue {
  background-color: var(--primary-green);
  color: var(--pure-white);
}

.btn-blue:hover {
  background-color: var(--dark-green);
}

.btn-green {
  background-color: var(--primary-green);
  color: var(--pure-white);
}

.btn-green:hover {
  background-color: var(--dark-green);
}

.btn-dark {
  background-color: var(--slate-800);
  color: var(--pure-white);
}

.btn-dark:hover {
  background-color: var(--slate-900);
}

.btn-blue-outline {
  background-color: var(--light-green);
  color: var(--dark-green);
  border: 1px solid var(--primary-green);
}

.btn-blue-outline:hover {
  background-color: var(--primary-green);
  color: var(--pure-white);
}

/* Badges */
.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-green {
  background-color: var(--light-green);
  color: var(--dark-green);
}

.badge-blue {
  background-color: var(--light-green);
  color: var(--dark-green);
}

.badge-slate {
  background-color: var(--slate-100);
  color: var(--slate-800);
}

/* Map Section */
.map-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

@media (max-width: 850px) {
  .map-wrapper {
    grid-template-columns: 1fr;
  }
}

.map-container {
  height: 380px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-side-card {
  background-color: var(--pure-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--slate-200);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.map-controls-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--slate-200);
  background-color: var(--pure-white);
  color: var(--slate-600);
  cursor: pointer;
  transition: all 0.2s;
}

.pill.active, .pill:hover {
  background-color: var(--primary-green);
  color: var(--pure-white);
  border-color: var(--primary-green);
}

/* Hospitals Grid */
.hospitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.hospital-card {
  background-color: var(--pure-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--slate-200);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.2s;
}

.hospital-card:hover {
  border-color: var(--primary-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hospital-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.hospital-card-header h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--slate-900);
}

.hospital-card-header .distance-badge {
  font-size: 11px;
  font-weight: 700;
  background-color: var(--light-green);
  color: var(--dark-green);
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.hospital-meta {
  font-size: 12px;
  color: var(--slate-600);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bed-telemetry-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background-color: var(--slate-100);
  padding: 10px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.bed-stat-val {
  font-size: 16px;
  font-weight: 800;
}

.bed-stat-lbl {
  font-size: 11px;
  color: var(--slate-600);
  font-weight: 600;
}

.hospital-card-actions {
  display: flex;
  gap: 8px;
}

/* Inspector Section */
.inspector-card {
  background-color: var(--pure-white);
  border: 2px solid var(--primary-green);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-md);
}

/* Blood & Organ Section */
.blood-organ-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .blood-organ-grid {
    grid-template-columns: 1fr;
  }
}

.blood-group-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.blood-chip {
  background-color: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: center;
}

.blood-chip.critical {
  background-color: var(--light-green);
  border-color: var(--primary-green);
}

.blood-chip strong {
  display: block;
  font-size: 14px;
  color: var(--slate-900);
}

.blood-chip span {
  font-size: 11px;
  color: var(--slate-600);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.data-table th, .data-table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--slate-200);
}

.data-table th {
  background-color: var(--slate-100);
  font-weight: 700;
  color: var(--slate-800);
}

.organ-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.organ-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background-color: var(--slate-100);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--primary-green);
}

/* Forms & Inputs */
.divider {
  border: 0;
  border-top: 1px solid var(--slate-200);
  margin: 16px 0;
}

.form-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-subtext {
  font-size: 12px;
  color: var(--slate-600);
  margin-bottom: 12px;
}

.inpage-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-col {
  flex: 1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label, .form-col label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-700);
}

.form-input, .form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background-color: var(--pure-white);
  color: var(--slate-800);
  outline: none;
  transition: border-color 0.2s;
}

.form-input:focus, .form-select:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 2px rgba(22, 128, 74, 0.15);
}

.form-notice {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}

/* Doctors Section */
.doctor-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.doctor-card {
  background-color: var(--pure-white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.doctor-info-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doctor-avatar {
  width: 44px;
  height: 44px;
  background-color: var(--light-green);
  color: var(--dark-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.doctor-name-title h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
}

.doctor-name-title span {
  font-size: 12px;
  color: var(--slate-600);
}

/* Auth Section */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 850px) {
  .auth-grid {
    grid-template-columns: 1fr;
  }
}

.quick-credentials {
  background-color: var(--slate-100);
  padding: 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 12px;
}

.btn-group {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.staff-intro {
  font-size: 12px;
  color: var(--slate-600);
  margin-bottom: 12px;
}

/* Footer */
.app-footer {
  background-color: var(--pure-white);
  color: var(--slate-900);
  border-top: 3px solid var(--primary-green);
  padding: 30px 20px;
  margin-top: 40px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand h3 {
  font-size: 16px;
  font-weight: 700;
}

.footer-brand p {
  font-size: 12px;
  color: var(--slate-600);
}

.footer-copy {
  text-align: right;
  font-size: 12px;
  color: var(--slate-600);
}

@media (max-width: 700px) {
  .footer-copy {
    text-align: left;
  }
}

/* Helper text colors */
.text-blue { color: var(--primary-green) !important; }
.text-green { color: var(--primary-green) !important; }

/* Family care theme: leafy green actions, soft mint accents, white surfaces. */
.top-sos-bar { background: linear-gradient(110deg, #106438, #24844e); }
.app-header { border-bottom-color: var(--light-green); }
.btn-dark { background-color: var(--dark-green); }
.btn-dark:hover { background-color: var(--primary-green); }
.emergency-console-card { background: linear-gradient(110deg, var(--pure-white), var(--light-green)); }
.brand-text h1 { color: var(--dark-green); }
.btn:focus-visible, .pill:focus-visible, a:focus-visible { outline: 3px solid var(--primary-green); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Gentle accents and soft surfaces for the family care palette. */
.text-blue { color: var(--primary-blue) !important; }
.emergency-console-card { border-color: #9acbab; box-shadow: 0 4px 16px rgba(23, 61, 40, 0.05); }
.inspector-card { border-color: #a6d3b4; }
.card, .hospital-card, .doctor-card, .map-side-card { box-shadow: 0 3px 12px rgba(23, 61, 40, 0.04); }
.brand-icon { border-radius: 14px; }
.nav-user-badge { background-color: var(--light-green); color: var(--dark-green); }
.app-footer { background-color: #eef7ef; }

/* PulsePoint+ / Emerald and Coral — production layout layer */
:root { --primary-green:#087f5b; --dark-green:#075e45; --light-green:#e7f7ef; --primary-blue:#2563eb; --dark-blue:#1e40af; --light-blue:#edf4ff; --off-white:#f6fbf8; --slate-900:#103c30; --slate-800:#23463d; --slate-600:#526b64; --slate-200:#dfebe5; --slate-100:#f0f7f3; --radius-md:18px; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { font-size:15px; -webkit-font-smoothing:antialiased; background:linear-gradient(#f0faf5,#fff 1500px); }
button,input,select { font:inherit; }
.top-sos-bar { background:linear-gradient(110deg,#075d43,#087b58); padding:9px 24px; }
.sos-ticker-container,.header-container,.footer-container { max-width:1360px; }
.hotline-btn { border-radius:10px; padding:8px 12px; min-height:40px; font-size:12px; border:1px solid #ffffff35; box-shadow:inset 0 1px 0 #ffffff30,0 3px 8px #00332120; }
.hotline-btn[href="tel:108"] { background:#ce3547; }
.hotline-btn[href="tel:102"] { background:#7044bd; }
.hotline-btn[href="tel:112"] { background:#255ad1; }
.hotline-btn[href="tel:104"] { background:#007d86; }
.hotline-btn:hover { color:white; filter:brightness(1.08); }
.app-header { border-bottom:1px solid #e0efe7; box-shadow:0 3px 20px #103c3005; }
.header-container { padding:20px 24px; gap:18px; }
.brand { gap:12px; }
.brand-icon { width:52px; height:52px; border-radius:17px; font-size:26px; background:linear-gradient(135deg,#29b67d,#006848); box-shadow:inset 0 1px 0 #ffffff80,0 7px 16px #087f5b25; }
.brand-text h1 { font-size:32px; letter-spacing:-1.4px; line-height:1.1; white-space:nowrap; }
.brand-text h1 .wordmark { color:#25864b; background:linear-gradient(110deg,#55a735,#19864b 58%,#087f5b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand-text h1 .brand-plus { color:#ed625c; display:inline-block; font-size:39px; line-height:0.8; margin-left:2px; vertical-align:-2px; }
.brand-text p { font-size:13px; margin-top:4px; }
.nav-links { gap:8px; margin-left:auto; }
.nav-links a { padding:11px 13px; border:1px solid var(--slate-200); border-radius:11px; min-height:44px; font-size:13px; }
.nav-links a[href="#section-map"] { color:#1c52c5; background:#edf4ff; border-color:#d6e5ff; }
.nav-links a[href="#section-hospitals"] { color:#076649; background:#edf9f2; border-color:#cfeedd; }
.nav-links a[href="#section-blood-organ"] { color:#b52845; background:#fff1f3; border-color:#f7d5dd; }
.nav-links a[href="#section-doctors"] { color:#6534ae; background:#f4efff; border-color:#e4d9fb; }
.nav-links a[href="#section-auth"] { background:#fff; }
.nav-user-badge { font-size:11px; padding:4px 9px; max-width:190px; overflow-wrap:anywhere; }
.main-content { max-width:1360px; padding:0 24px; margin:0 auto; gap:30px; }
.hero { position:relative; min-height:340px; isolation:isolate; padding:40px 0 30px; display:flex; align-items:center; }
.hero-copy { position:relative; z-index:1; width:100%; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:2px; color:#147754; display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.hero h2 { font-size:clamp(36px,4vw,56px); line-height:1.08; letter-spacing:-2.3px; color:#103c30; max-width:700px; }
.hero h2 span { color:#087f5b; }
.hero-description { margin:15px 0; font-size:16px; color:#49675d; max-width:600px; }
.location-tag { display:inline-flex; gap:7px; align-items:center; background:#ddf4e9; border:1px solid #c5e9d9; color:#075e45; padding:6px 12px; border-radius:50px; font-size:12px; }
.hero-art { position:absolute; right:-24px; bottom:0; width:59%; height:100%; object-fit:cover; object-position:65% center; z-index:-1; opacity:.9; mask-image:linear-gradient(to right,transparent,black 30%); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:23px; }
.btn { min-height:44px; padding:11px 16px; border-radius:11px; font-size:13px; font-weight:700; justify-content:center; text-align:center; }
.hero-actions .btn { min-height:52px; font-size:14px; padding:13px 18px; }
.btn-green { background:linear-gradient(135deg,#079567,#07754f); box-shadow:0 4px 12px #087f5b20,inset 0 1px 0 #ffffff35; }
.btn-green:hover { background:linear-gradient(135deg,#078359,#056644); }
.btn-location { background:#f4f8ff; border:1px solid #a9c5ff; color:#1f52c6; }
.btn-emergency { background:linear-gradient(135deg,#e6505a,#cb2f42); color:#fff; box-shadow:0 5px 13px #ce35471a,inset 0 1px 0 #ffffff40; }
.btn-blue { background:#2461d6; }
.btn-blue:hover { background:#1c4fb5; }
.btn-blue-outline { background:#f1f6ff; color:#1e4ca5; border-color:#b8cff4; }
.btn-blue-outline:hover { background:#e4efff; color:#1e4ca5; }
.btn-dark { background:#135d48; }
.quick-services { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.quick-card { --accent:#087f5b; --tint:#f0fbf5; display:flex; align-items:center; gap:13px; padding:20px 17px; background:var(--tint); color:var(--slate-900); border:1px solid color-mix(in srgb,var(--accent) 20%,white); border-radius:15px; text-decoration:none; box-shadow:0 6px 18px #123d3005; }
.quick-card strong { display:block; font-size:15px; letter-spacing:-.3px; }
.quick-card small { display:block; font-size:11px; color:#536c63; margin-top:4px; }
.quick-card>span:last-child { color:var(--accent); margin-left:auto; font-size:25px; }
.service-icon { color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,white); min-width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:21px; }
.service-red { --accent:#bd3451; --tint:#fff5f6; }
.service-purple { --accent:#7141c3; --tint:#f8f5ff; }
.service-teal { --accent:#007f89; --tint:#effbfc; }
.emergency-tools { border-bottom:1px solid var(--slate-200); padding-bottom:12px; }
.emergency-tools summary { cursor:pointer; color:#526b64; font-size:12px; padding:3px 0; }
.emergency-tools .console-actions { margin:15px 0 10px; }
.demo-notice { font-size:12px; color:#526b64; background:#fff; border:1px solid #e2ece5; padding:11px 15px; border-radius:10px; margin-top:-16px; }
.section-title h2 { font-size:27px; letter-spacing:-.8px; }
.section-title p { margin-top:6px; }
.content-section { scroll-margin-top:20px; gap:20px; margin-bottom:10px; }
.map-wrapper { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:20px; }
.map-container { height:350px; border-radius:18px; }
.map-side-card { padding:24px; gap:20px; }
.map-side-card h3 { font-size:23px!important; letter-spacing:-.5px; }
.bed-telemetry-row { padding:15px 8px; border-radius:12px; }
.bed-stat-val { font-size:21px; }
.hospitals-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); }
.hospital-card { padding:22px; border-radius:18px; }
.hospital-card-header h3 { font-size:18px; }
.filter-controls { display:flex; gap:8px; }
.form-input,.form-select { min-height:44px; font-size:14px; }
.form-input:focus,.form-select:focus { box-shadow:0 0 0 4px #087f5b12; }
.card-header { gap:12px; align-items:flex-start; flex-wrap:wrap; }
.card-header h3 { font-size:17px; flex:1 1 180px; }
.card-header>.badge { max-width:160px; }
.organ-item { align-items:flex-start; gap:14px; border-left-width:3px; border-radius:12px; padding:15px; }
.organ-item>div { min-width:0; flex:1; }
.organ-item .badge { max-width:120px; flex-shrink:0; white-space:normal; }
.inspector-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.inspector-card { padding:24px; border:1px solid #d8e9df; background:#fff; }
.table-container { overflow-x:auto; }
.blood-organ-grid>* { min-width:0; }
.doctor-avatar { color:#7044bd; background:#f0eafa; }
#section-doctors .pill.active { background:#7044bd; border-color:#7044bd; }
#section-blood-organ .form-heading i,#section-blood-organ .section-title i { color:#bd3451!important; }
#requisitionForm>.btn { background:#b8304a; }
.footer-container { gap:24px; }
.app-footer { border-top:1px solid #dbece1; padding:35px 24px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; color:#fff; background:#103c30; padding:14px 20px; border-radius:13px; box-shadow:0 8px 30px #103c3030; z-index:2000; max-width:calc(100% - 32px); width:max-content; transition:opacity .2s,transform .2s; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.empty-state { padding:30px; border:1px dashed #c5ded0; border-radius:16px; }
/* Input feedback works for mouse, touch and keyboard. */
.btn,.hotline-btn,.nav-links a,.pill,.quick-card { position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,filter .18s ease; }
@media(hover:hover) { .btn:not(:disabled):hover,.hotline-btn:hover,.nav-links a:hover,.pill:hover,.quick-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px #103c3015; } }
.btn:not(:disabled):active,.hotline-btn:active,.nav-links a:active,.pill:active,.quick-card:active { transform:translateY(1px) scale(.97); box-shadow:inset 0 2px 5px #103c3020; }
:where(a,button,summary):focus-visible { outline:3px solid #2860cd; outline-offset:4px; }
.touch-ripple { position:absolute; border-radius:50%; background:currentColor; opacity:0; pointer-events:none; transform:scale(0); animation:touchRipple .6s ease-out; }
@keyframes touchRipple { from { transform:scale(0); opacity:.18; } to { transform:scale(1); opacity:0; } }
/* Beacon is steady illumination, never a rapid page flash. */
body.strobe-alert { animation:none; }
body.strobe-alert::after { content:''; position:fixed; inset:0; box-shadow:inset 0 0 60px 12px #f1bd47aa; pointer-events:none; z-index:1500; border:5px solid #edbc50; }
@media(max-width:1200px) { .nav-user-badge { display:none; } .header-container { gap:14px; } .nav-links a { padding:10px; font-size:12px; } .hero-art { opacity:.6; } }
@media(max-width:900px) { .header-container { flex-direction:column; align-items:stretch; } .brand { justify-content:center; } .nav-links { margin:0; justify-content:center; } .quick-services { grid-template-columns:repeat(2,minmax(0,1fr)); } .map-wrapper { grid-template-columns:1fr; } .hero-art { opacity:.22; width:100%; right:0; } .map-side-card { gap:8px; } .blood-organ-grid,.auth-grid { grid-template-columns:1fr; } }
@media(max-width:600px) {
  html { scroll-padding-top:16px; }
  .top-sos-bar { position:static; padding:10px 16px; }
  .sos-ticker-container { gap:8px; }
  .sos-pill-pulse { font-size:11px; }
  .sos-hotlines { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:7px; }
  .hotline-btn { font-size:11px; padding:8px; justify-content:center; }
  .header-container { padding:18px 16px 14px; }
  .brand { justify-content:flex-start; }
  .brand-text h1 { font-size:31px; }
  .nav-links { display:flex; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:3px 0 7px; }
  .nav-links a { flex-shrink:0; font-size:11px; padding:9px 11px; }
  .main-content { padding:0 16px; gap:22px; }
  .hero { min-height:0; padding:30px 0 22px; }
  .hero h2 { font-size:39px; letter-spacing:-1.6px; }
  .hero-description { font-size:14px; max-width:330px; }
  .eyebrow { font-size:9px; letter-spacing:1.3px; }
  .hero-art { opacity:.16; height:100%; }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .hero-actions .btn { font-size:12px; padding:12px 9px; }
  .hero-actions .btn:first-child { grid-column:1/-1; }
  .quick-services { gap:9px; }
  .quick-card { padding:14px 10px; gap:8px; align-items:flex-start; }
  .quick-card strong { font-size:12px; }
  .quick-card small { font-size:10px; }
  .service-icon { min-width:30px; height:33px; font-size:16px; border-radius:10px; }
  .quick-card>span:last-child { display:none; }
  .section-title h2 { font-size:23px; }
  .section-title p { font-size:12px; }
  .map-container { height:290px; }
  .map-side-card,.card-clean,.inspector-card { padding:18px; }
  .filter-controls { width:100%; flex-direction:column; }
  .form-row { flex-direction:column; }
  .form-col { min-width:0; }
  .inspector-columns { grid-template-columns:1fr; }
  .organ-item { flex-direction:column; gap:9px; }
  .organ-item .badge { max-width:none; }
  .hospital-card-actions { flex-wrap:wrap; }
  .card-header h3 { font-size:16px; }
  .badge { font-size:10px; }
  .footer-copy { text-align:left; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .btn:active,.hotline-btn:active,.nav-links a:active,.pill:active,.quick-card:active { transform:none; } }

/* Revision 5: red facade plus and translucent jelly hotline controls. */
.hero-art { height:auto; aspect-ratio:2048/745; overflow:hidden; }
.hero-art img { display:block; width:100%; height:auto; }
.hospital-red-plus { position:absolute; left:61.52%; top:40.25%; width:3.23%; height:9.27%; background:linear-gradient(135deg,#f04b54,#cf2639); clip-path:polygon(30% 0,69% 0,69% 30%,100% 30%,100% 69%,69% 69%,69% 100%,30% 100%,30% 69%,0 69%,0 30%,30% 30%); }
.top-sos-bar { background:linear-gradient(110deg,#edf8f1,#f5fbf8); color:#174f3a; border-bottom:1px solid #d9e9e0; box-shadow:0 3px 16px #0b553a08; }
.sos-hotlines .hotline-btn { --jelly-ink:#126653; --jelly-tint:rgba(64,181,149,.16); color:var(--jelly-ink); background:linear-gradient(180deg,rgba(255,255,255,.95),var(--jelly-tint)); border:1px solid color-mix(in srgb,var(--jelly-ink) 19%,transparent); border-radius:14px; padding:9px 14px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:inset 0 2px 0 #fff,inset 0 -3px 5px #ffffff80,0 3px 8px #103c3008; transition:transform .3s cubic-bezier(.2,.9,.3,1.5),box-shadow .2s,filter .2s; }
.sos-hotlines .hotline-btn[href="tel:108"] { --jelly-ink:#a9213d; --jelly-tint:rgba(244,108,135,.19); }
.sos-hotlines .hotline-btn[href="tel:102"] { --jelly-ink:#6840a3; --jelly-tint:rgba(158,121,231,.19); }
.sos-hotlines .hotline-btn[href="tel:112"] { --jelly-ink:#2655ab; --jelly-tint:rgba(102,160,244,.19); }
.sos-hotlines .hotline-btn[href="tel:104"] { --jelly-ink:#006b73; --jelly-tint:rgba(65,196,194,.19); }
.sos-hotlines .hotline-btn::before { content:''; position:absolute; left:8px; right:8px; top:3px; height:40%; background:linear-gradient(#ffffffa0,#ffffff00); border-radius:10px; pointer-events:none; }
.sos-hotlines .hotline-btn i { position:relative; }
@media(hover:hover) { .sos-hotlines .hotline-btn:hover { color:var(--jelly-ink); transform:translateY(-2px) scale(1.025); filter:brightness(1.02); box-shadow:inset 0 2px 0 #fff,0 7px 16px #174f3a13; } }
.sos-hotlines .hotline-btn:active { transform:translateY(1px) scale(.95,.92); box-shadow:inset 0 2px 6px #174f3a15,0 1px 2px #174f3a08; }
@media(max-width:600px) { .sos-hotlines .hotline-btn { padding:9px; } }
@media(prefers-reduced-motion:reduce) { .sos-hotlines .hotline-btn:hover,.sos-hotlines .hotline-btn:active { transform:none; transition:none; } }

/* Mobile refinement — compact, readable and thumb-friendly. */
@media (max-width: 600px) {
  body { overflow-x:hidden; }
  .top-sos-bar { padding:12px 12px 13px; }
  .sos-ticker-container { display:block; }
  .sos-pill-pulse { justify-content:flex-start; margin-bottom:9px; font-size:12px; letter-spacing:.2px; }
  .sos-hotlines { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .sos-hotlines .hotline-btn { min-width:0; width:100%; min-height:42px; font-size:11px; line-height:1.15; white-space:normal; text-align:center; }
  .sos-hotlines .hotline-btn i { margin-right:3px; }
  .header-container { display:block; padding:15px 14px 10px; }
  .brand { display:flex; align-items:center; gap:10px; }
  .brand-icon { flex:0 0 45px; width:45px; height:45px; font-size:22px; border-radius:14px; }
  .brand-text h1 { font-size:27px; letter-spacing:-1px; }
  .brand-text h1 .brand-plus { font-size:33px; }
  .brand-text p { font-size:10px; line-height:1.25; white-space:normal; }
  .nav-links { margin:13px -14px 0; padding:2px 14px 9px; gap:7px; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-links a { flex:0 0 auto; min-height:38px; padding:8px 10px; border-radius:10px; font-size:10px; white-space:nowrap; }
  .main-content { width:100%; padding:0 13px; gap:18px; }
  .hero { width:100%; padding:25px 3px 19px; overflow:hidden; }
  .hero-copy { width:100%; }
  .hero h2 { max-width:330px; font-size:36px; line-height:1.03; letter-spacing:-1.7px; }
  .hero-description { max-width:310px; margin:12px 0; font-size:13px; line-height:1.45; }
  .location-tag { max-width:100%; font-size:11px; padding:6px 10px; }
  .hero-art { right:-25%; width:125%; max-width:none; opacity:.14; }
  .hospital-red-plus { left:61.52%; top:40.25%; }
  .hero-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:19px; }
  .hero-actions .btn { width:100%; min-height:47px; padding:10px 7px; font-size:11px; line-height:1.2; }
  .hero-actions .btn:first-child { grid-column:1/-1; }
  .hero-actions .btn i { margin-right:2px; }
  .quick-services { width:100%; grid-template-columns:1fr 1fr; gap:8px; }
  .quick-card { min-height:101px; padding:13px 10px; border-radius:14px; gap:8px; }
  .quick-card strong { font-size:12px; line-height:1.15; }
  .quick-card small { font-size:9.5px; line-height:1.25; }
  .service-icon { flex:0 0 32px; min-width:32px; height:32px; }
  .emergency-tools { margin:0 3px; }
  .emergency-tools .console-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .emergency-tools .btn { width:100%; min-width:0; padding:10px 7px; font-size:11px; }
  .demo-notice { margin:0 3px; font-size:10px; line-height:1.45; padding:10px 11px; }
  .section-title { align-items:flex-start; }
  .section-title h2 { font-size:21px; line-height:1.14; letter-spacing:-.4px; }
  .section-title p { font-size:11px; line-height:1.4; }
  .section-title .badge { margin-top:3px; }
  .map-controls-pills,.doctor-filter-pills { width:100%; display:flex; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .map-controls-pills::-webkit-scrollbar,.doctor-filter-pills::-webkit-scrollbar { display:none; }
  .map-controls-pills .pill,.doctor-filter-pills .pill { flex:0 0 auto; white-space:nowrap; font-size:10px; padding:8px 10px; }
  .map-container { height:245px; }
  .map-side-card { padding:15px; }
  .map-side-card h3 { font-size:19px!important; line-height:1.15; }
  .map-side-card .bed-telemetry-row { margin:11px 0!important; gap:3px; }
  .bed-stat-val { font-size:17px; }
  .bed-stat-lbl { font-size:9px; }
  .hospital-card { padding:16px; }
  .hospital-card-header { gap:5px; }
  .hospital-card-header h3 { font-size:16px; line-height:1.2; }
  .hospital-meta { font-size:11px; }
  .hospital-card-actions .btn { flex:1 1 120px; font-size:11px; padding:10px 7px; }
  .blood-organ-grid,.auth-grid { gap:14px; }
  .card-clean,.inspector-card { padding:15px; }
  .card-header { margin-bottom:12px; padding-bottom:10px; }
  .card-header h3 { font-size:15px; line-height:1.25; }
  .card-header>.badge { max-width:100%; }
  .table-container { margin:0 -15px; padding:0 15px; }
  .data-table { min-width:590px; font-size:11px; }
  .data-table th,.data-table td { padding:8px 6px; }
  .inpage-form { gap:10px; }
  .form-group label,.form-col label { font-size:11px; }
  .form-input,.form-select { min-height:43px; font-size:13px; }
  .organ-item { padding:12px; }
  .organ-item strong { font-size:13px; line-height:1.25; }
  .organ-item span { font-size:11px; }
  .inspector-card > div:first-child { gap:9px!important; }
  .inspector-card > div:first-child > div:last-child { width:100%; display:grid!important; grid-template-columns:1fr 1fr; }
  .inspector-card > div:first-child > div:last-child .btn { font-size:10px; padding:9px 5px; }
  .doctors-grid { grid-template-columns:1fr; gap:10px; }
  .doctor-card { padding:14px; }
  .app-footer { padding:24px 16px; }
  .footer-brand h3 { font-size:14px; }
  .footer-brand p,.footer-copy { font-size:10px; line-height:1.4; }
}

/* Uploaded desktop concept preserved: jelly contact pills only. */
.top-sos-bar { background:linear-gradient(110deg,#075d43,#087b58); color:#fff; border-bottom:0; box-shadow:0 3px 12px #063e2a30; }
.sos-ticker-container { align-items:center; }
.sos-pill-pulse { color:#fff; }
.sos-hotlines .hotline-btn { --jelly-ink:#fff; --jelly-bg:rgba(255,255,255,.16); color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.30),var(--jelly-bg)); border:1px solid rgba(255,255,255,.42); border-radius:999px; padding:8px 13px; min-height:38px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 8px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.13); }
.sos-hotlines .hotline-btn[href="tel:108"] { --jelly-bg:rgba(238,76,91,.54); }
.sos-hotlines .hotline-btn[href="tel:102"] { --jelly-bg:rgba(122,77,202,.55); }
.sos-hotlines .hotline-btn[href="tel:112"] { --jelly-bg:rgba(42,104,224,.56); }
.sos-hotlines .hotline-btn[href="tel:104"] { --jelly-bg:rgba(0,151,158,.55); }
.sos-hotlines .hotline-btn::before { content:''; position:absolute; left:9px; right:9px; top:3px; height:42%; background:linear-gradient(180deg,rgba(255,255,255,.45),transparent); border-radius:999px; pointer-events:none; }
.sos-hotlines .hotline-btn:hover { color:#fff; filter:brightness(1.1); }
@media(max-width:600px) { .top-sos-bar { padding:10px 12px 12px; } .sos-hotlines .hotline-btn { padding:8px 7px; } }

/* Final emergency contact chips: compact jewel-glass controls. */
.sos-hotlines .hotline-btn { color:#fff; font-weight:800; letter-spacing:.05px; border:1px solid rgba(255,255,255,.72); border-radius:999px; padding:8px 13px; min-height:38px; box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -4px 7px rgba(0,0,0,.17),0 4px 10px rgba(0,0,0,.17); }
.sos-hotlines .hotline-btn[href="tel:108"] { background:linear-gradient(180deg,#ed6373 0%,#d9364e 53%,#b9273e 100%); }
.sos-hotlines .hotline-btn[href="tel:102"] { background:linear-gradient(180deg,#9a72e0 0%,#7044bd 53%,#59339e 100%); }
.sos-hotlines .hotline-btn[href="tel:112"] { background:linear-gradient(180deg,#568bea 0%,#2865d3 53%,#1d4fae 100%); }
.sos-hotlines .hotline-btn[href="tel:104"] { background:linear-gradient(180deg,#36c2c5 0%,#078e96 53%,#00747c 100%); }
.sos-hotlines .hotline-btn::before { left:8px; right:8px; top:3px; height:38%; background:linear-gradient(180deg,rgba(255,255,255,.52),transparent); border-radius:999px; }
.sos-hotlines .hotline-btn:active { transform:translateY(2px) scale(.96); box-shadow:inset 0 3px 7px rgba(0,0,0,.24),0 1px 3px rgba(0,0,0,.12); }

/* Premium visual polish — subtle depth, light and motion. */
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-2; background:radial-gradient(circle at 92% 12%,rgba(44,181,126,.10),transparent 23%),radial-gradient(circle at 4% 48%,rgba(37,99,235,.055),transparent 24%); }
.top-sos-bar { position:relative; }
.top-sos-bar::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,#8ae2ba,transparent); opacity:.65; }
.app-header { position:relative; }
.brand-icon { position:relative; overflow:hidden; }
.brand-icon::after { content:''; position:absolute; width:26px; height:100px; background:rgba(255,255,255,.22); transform:rotate(35deg) translateX(-65px); animation:brandSweep 7s ease-in-out infinite; }
@keyframes brandSweep { 0%,68% { transform:rotate(35deg) translateX(-65px); } 82%,100% { transform:rotate(35deg) translateX(65px); } }
.hero { border-radius:0 0 24px 24px; }
.hero::before { content:''; position:absolute; inset:16px -28px 0; z-index:-1; border-radius:28px; background:linear-gradient(115deg,rgba(231,247,239,.85),rgba(255,255,255,.2) 56%,rgba(217,245,235,.62)); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
.hero::after { content:''; position:absolute; width:220px; height:220px; right:25%; top:20px; z-index:-1; border-radius:50%; background:rgba(125,218,177,.13); filter:blur(2px); animation:softFloat 8s ease-in-out infinite; }
@keyframes softFloat { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(0,-9px,0) scale(1.04); } }
.hero h2 { text-shadow:0 2px 0 rgba(255,255,255,.75); }
.eyebrow { background:rgba(255,255,255,.58); width:max-content; padding:6px 10px; border-radius:999px; border:1px solid rgba(8,127,91,.12); }
.hero-actions .btn { box-shadow:0 9px 20px rgba(16,60,48,.09),inset 0 1px 0 rgba(255,255,255,.4); }
.hero-actions .btn:first-child span { display:inline-block; transition:transform .2s ease; }
.hero-actions .btn:first-child:hover span { transform:translateX(4px); }
.quick-services { position:relative; z-index:2; }
.quick-card { transform:translateY(0); }
.quick-card::before { content:''; position:absolute; inset:0; opacity:0; background:linear-gradient(120deg,rgba(255,255,255,.5),transparent 40%); transition:opacity .2s ease; pointer-events:none; }
.quick-card:hover::before { opacity:1; }
.quick-card:hover .service-icon { transform:rotate(-4deg) scale(1.08); }
.service-icon { transition:transform .2s ease; }
.section-title h2 { position:relative; width:max-content; max-width:100%; }
.section-title h2::after { content:''; display:block; width:42px; height:3px; margin-top:8px; border-radius:3px; background:linear-gradient(90deg,#087f5b,#73c89c); }
.map-container,.map-side-card,.hospital-card,.card,.inspector-card { box-shadow:0 10px 28px rgba(16,60,48,.065),0 2px 5px rgba(16,60,48,.035); }
.map-side-card { background:linear-gradient(145deg,#fff,#f5fbf7); }
.hospital-card:hover,.doctor-card:hover,.map-side-card:hover { border-color:#8dcaae; box-shadow:0 16px 30px rgba(16,60,48,.11); }
.badge-green { box-shadow:inset 0 1px 0 rgba(255,255,255,.75); }
.form-input,.form-select { box-shadow:inset 0 1px 3px rgba(16,60,48,.035); }
.app-footer { position:relative; overflow:hidden; }
.app-footer::before { content:''; position:absolute; width:300px; height:300px; right:-90px; top:-170px; border-radius:50%; background:rgba(8,127,91,.08); }
@media (max-width:600px) {
  .hero::before { inset:9px -10px 0; border-radius:20px; }
  .hero::after { width:150px; height:150px; right:0; top:70px; }
  .eyebrow { font-size:8px; }
  .section-title h2::after { margin-top:6px; }
  .quick-card:hover .service-icon { transform:none; }
}
@media(prefers-reduced-motion:reduce) {
  .brand-icon::after,.hero::after { animation:none; }
  .hero-actions .btn:first-child span,.service-icon { transition:none; }
}

/* Reference style pass — Emerald + Coral medical dashboard. */
body { background:linear-gradient(180deg,#f2fbf7 0 390px,#ffffff 820px,#f8fcfa); }
.top-sos-bar { background:linear-gradient(110deg,#075d43,#087f5b); color:#fff; border:0; }
.sos-hotlines .hotline-btn { color:#fff; font-weight:800; border:1px solid rgba(255,255,255,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 8px rgba(0,45,27,.16); }
.app-header { background:#fff; border-bottom:2px solid #e6f2ec; }
.brand-text h1 .wordmark { color:#087f5b; background:none; -webkit-text-fill-color:initial; }
.brand-text h1 .brand-plus { color:#e34b55; }
.nav-links a { box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.hero { background:linear-gradient(115deg,#e6f8ef 0%,#f7fcfa 58%,#e9f8f1 100%); border-radius:0; margin:0 -24px; padding-left:24px; padding-right:24px; overflow:hidden; }
.hero::before { background:linear-gradient(115deg,rgba(233,249,240,.72),rgba(255,255,255,.25) 60%,rgba(221,246,232,.65)); }
.hero h2 { font-size:clamp(39px,4vw,58px); color:#103c30; }
.hero h2 span { color:#087f5b; }
.hero-art { opacity:.94; }
.location-tag { background:#ddf6e9; border-color:#c0e9d4; }
.hero-actions .btn:first-child { background:linear-gradient(135deg,#078b5c,#08744f); }
.quick-card { background:#fff; border-color:#e0ece5; box-shadow:0 4px 14px rgba(16,60,48,.055); }
.quick-card.service-green { background:#f2fbf6; border-color:#bfe8d1; }
.quick-card.service-red { background:#fff6f7; border-color:#f2bec8; }
.quick-card.service-purple { background:#faf7ff; border-color:#d7c9f3; }
.quick-card.service-teal { background:#f3fcfc; border-color:#b9e8e8; }
.map-wrapper { gap:18px; }
.map-container { border:1px solid #d4e8dc; }
.map-side-card { border:1px solid #d9eae0; }
.section-title h2 { color:#103c30; }
.hospital-card,.card,.doctor-card,.inspector-card { border-color:#deebe3; }
@media(max-width:600px) { .hero { margin:0 -13px; padding-left:16px; padding-right:16px; } }

/* Solid emergency contact buttons: no glass, blur, jelly shine or gradient. */
.sos-hotlines .hotline-btn,
.sos-hotlines .hotline-btn:hover,
.sos-hotlines .hotline-btn:active {
  color:#fff;
  border:0;
  border-radius:10px;
  background:#126f50;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  filter:none;
  transform:none;
}
.sos-hotlines .hotline-btn[href="tel:108"] { background:#d7374e; }
.sos-hotlines .hotline-btn[href="tel:102"] { background:#6842ad; }
.sos-hotlines .hotline-btn[href="tel:112"] { background:#245ac5; }
.sos-hotlines .hotline-btn[href="tel:104"] { background:#087f86; }
.sos-hotlines .hotline-btn::before { display:none; }
.sos-hotlines .hotline-btn:hover { filter:brightness(.94); }
.sos-hotlines .hotline-btn:active { filter:brightness(.86); }


/* === PulsePoint interaction polish: neon-glass button effect === */
.btn,
.hotline-btn,
.pill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.btn::before,
.hotline-btn::before,
.pill::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.34) 45%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .65s ease;
  pointer-events: none;
}

.btn:hover::before,
.hotline-btn:hover::before,
.pill:hover::before {
  transform: translateX(130%);
}

.btn:hover,
.hotline-btn:hover,
.pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(22,128,74,.24), 0 0 0 1px rgba(120,255,184,.16), 0 0 18px rgba(54,211,112,.14);
}

.btn:active,
.hotline-btn:active,
.pill:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 3px 10px rgba(22,128,74,.18);
}

.btn-green,
.btn-blue {
  background: linear-gradient(135deg, var(--primary-green), #0f6d42);
  border: 1px solid rgba(112,255,167,.18);
  box-shadow: 0 4px 14px rgba(22,128,74,.18);
}

.btn-green:hover,
.btn-blue:hover {
  background: linear-gradient(135deg, #199b58, var(--dark-green));
}

.btn-blue-outline:hover {
  box-shadow: 0 8px 22px rgba(22,128,74,.20), 0 0 16px rgba(54,211,112,.12);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .hotline-btn,
  .pill {
    transition: none !important;
  }
  .btn::before,
  .hotline-btn::before,
  .pill::before {
    display: none;
  }
}

/* === Profile photos === */
.profile-photo-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  background: linear-gradient(135deg, #f7fcf8, #edf7f5);
}

.profile-photo-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
}

.profile-photo,
.profile-photo-fallback {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
}

.profile-photo-fallback {
  background: linear-gradient(135deg, #dff5e7, #c9ead7);
  color: var(--dark-green);
  font-size: 25px;
  border: 2px solid rgba(22,128,74,.18);
}

.profile-photo-camera,
.doctor-photo-edit {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--dark-green);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 3px 9px rgba(0,0,0,.16);
  font-size: 11px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.profile-photo-camera:hover,
.doctor-photo-edit:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(54,211,112,.12), 0 4px 12px rgba(0,0,0,.18);
}

.profile-photo-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-photo-copy strong {
  font-size: 13px;
  color: var(--slate-900);
}

.profile-photo-copy span {
  font-size: 11px;
  color: var(--slate-600);
  margin-bottom: 5px;
}

.visually-hidden-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.nav-user-badge.has-profile-photo {
  padding-left: 7px;
}

.nav-user-badge.has-profile-photo::before {
  content: "";
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background-image: var(--profile-image);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(22,128,74,.25);
}

.doctor-avatar-photo {
  position: relative;
  overflow: visible;
  flex: 0 0 44px;
}

.doctor-avatar-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.doctor-photo-edit {
  width: 21px;
  height: 21px;
  right: -4px;
  bottom: -3px;
  font-size: 9px;
}

.doctor-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.doctor-card:hover {
  transform: translateY(-3px);
  border-color: rgba(22,128,74,.35);
  box-shadow: 0 12px 28px rgba(23,61,40,.10), 0 0 20px rgba(54,211,112,.08);
}

@media (max-width: 600px) {
  .profile-photo-panel {
    align-items: flex-start;
  }
  .profile-photo-copy .btn {
    align-self: flex-start;
  }
}


/* === FIXED BUTTON EFFECT: visible shine + press/ripple === */
.btn, .hotline-btn, .pill { position:relative; overflow:hidden; isolation:isolate; }
.btn::before, .hotline-btn::before, .pill::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 0%,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%,transparent 100%);
  background-size:260% 100%; background-position:140% 0; transition:background-position .65s ease; border-radius:inherit;
}
.btn:hover::before, .hotline-btn:hover::before, .pill:hover::before,
.btn:focus-visible::before, .hotline-btn:focus-visible::before, .pill:focus-visible::before { background-position:-40% 0; }
.btn > *, .hotline-btn > *, .pill > * { position:relative; z-index:1; }
.btn:not(:disabled):hover, .hotline-btn:hover, .pill:hover { transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 10px 26px rgba(16,60,48,.20),0 0 0 1px rgba(54,211,112,.16),0 0 18px rgba(54,211,112,.12); }
.btn:not(:disabled):active, .hotline-btn:active, .pill:active { transform:translateY(1px) scale(.975); filter:brightness(.96); }
.touch-ripple { z-index:3; background:rgba(255,255,255,.42); }
.profile-photo-actions { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.profile-upload-btn { cursor:pointer; }
@media (max-width:600px) { .profile-photo-panel{align-items:flex-start;} .profile-photo-actions{width:100%;} }


/* Profile-photo controls */
.doctor-photo-actions { display:flex; gap:7px; flex-wrap:wrap; margin:9px 0; }
.btn-danger-outline { background:#fff; color:#b42318; border:1px solid #f0b4ae; }
.btn-danger-outline:hover { background:#fff5f4; box-shadow:0 8px 18px rgba(180,35,24,.12); }
.profile-upload-btn { display:inline-flex; align-items:center; gap:6px; }
@media (max-width:600px) { .doctor-photo-actions .btn { flex:1 1 auto; justify-content:center; } }