:root { --brand-blue: #1964a5; --brand-blue-dark: #145183; --brand-gold: #fdbb18; --brand-slate: #2d4353; --brand-slate-dark: #223542; --brand-gray-light: #f2f6f8; --brand-white: #ffffff; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Native-app-like mobile shell with room for the fixed bottom navigation. */
.mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: .45rem .5rem calc(.45rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid #dbe5eb; box-shadow: 0 -8px 24px rgba(34,53,66,.10); backdrop-filter: blur(14px); }
.mobile-bottom-nav__item { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 3.35rem; padding: .35rem .2rem; color: #64748b; border-radius: .75rem; font-size: .68rem; font-weight: 600; text-decoration: none; transition: color .2s, background-color .2s, transform .2s; }
.mobile-bottom-nav__item svg { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
.mobile-bottom-nav__item.is-active { color: var(--brand-blue); background: var(--brand-gray-light); }
.mobile-bottom-nav__item:active { transform: scale(.96); }
.app-menu-button { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border: 1px solid #dbe5eb; border-radius: .9rem; background: var(--brand-gray-light); color: var(--brand-slate); box-shadow: 0 4px 12px rgba(34,53,66,.08); transition: background-color .2s, color .2s, transform .2s; }
.app-menu-button:hover, .app-menu-button.is-open { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.app-menu-button:active { transform: scale(.94); }
.mobile-app-menu { margin: 0 -.25rem; padding: .75rem .25rem 1rem; border-top: 1px solid #eef2f4; background: linear-gradient(180deg, #f8fbfd 0%, #fff 100%); }
.mobile-app-menu__header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .35rem .75rem .75rem; color: var(--brand-slate); font-size: .95rem; font-weight: 800; }
.mobile-app-menu__hint { color: #64748b; font-size: .68rem; font-weight: 500; text-align: right; }
.mobile-app-menu__links { display: grid; gap: .4rem; }
.mobile-app-menu__item { display: flex; align-items: center; gap: .75rem; min-height: 3.65rem; padding: .65rem .75rem; border: 1px solid transparent; border-radius: 1rem; color: var(--brand-slate); text-decoration: none; transition: background-color .2s, border-color .2s, transform .2s; }
.mobile-app-menu__item:hover, .mobile-app-menu__item.is-active { border-color: #dceaf5; background: #fff; box-shadow: 0 5px 16px rgba(34,53,66,.07); }
.mobile-app-menu__item:active { transform: scale(.985); }
.mobile-app-menu__icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .75rem; background: var(--brand-gray-light); color: var(--brand-blue); }
.mobile-app-menu__icon svg { width: 1.15rem; height: 1.15rem; }
.mobile-app-menu__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .12rem; }
.mobile-app-menu__copy strong { font-size: .86rem; }
.mobile-app-menu__copy small { color: #64748b; font-size: .7rem; }
.mobile-app-menu__arrow { width: 1rem; height: 1rem; color: #94a3b8; }
.mobile-emergency-card { margin: .8rem 0 .2rem; padding: .8rem; border: 1px solid #f7c86b; border-radius: 1rem; background: linear-gradient(135deg, #fff8e7, #fff); box-shadow: 0 5px 16px rgba(180,116,0,.08); }
.mobile-emergency-card__copy { display: flex; align-items: center; gap: .55rem; color: #9a6700; }
.mobile-emergency-card__copy > svg { width: 1.2rem; height: 1.2rem; }
.mobile-emergency-card__copy span { display: flex; flex-direction: column; gap: .1rem; }
.mobile-emergency-card__copy strong { font-size: .8rem; }
.mobile-emergency-card__copy small { color: #a16207; font-size: .68rem; }
.mobile-emergency-card__actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.mobile-emergency-card__actions a { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .6rem; border-radius: .65rem; background: #fff; color: #9a6700; font-size: .7rem; font-weight: 700; text-decoration: none; box-shadow: 0 2px 8px rgba(180,116,0,.1); }
.mobile-emergency-card__actions a:last-child { background: #16a34a; color: #fff; }
.mobile-emergency-card__actions svg { width: .9rem; height: .9rem; }
.mobile-app-menu__account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #e5edf2; }
.mobile-app-menu__account a { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.65rem; border-radius: .75rem; font-size: .75rem; font-weight: 700; text-decoration: none; }
.mobile-app-menu__account a svg { width: 1rem; height: 1rem; }
.mobile-app-menu__account-primary { background: var(--brand-blue); color: #fff; }
.mobile-app-menu__account-secondary { border: 1px solid #cbdde9; background: #fff; color: var(--brand-blue); }
@media (display-mode: standalone) {
  .app-menu-button { width: 3.15rem; height: 3.15rem; border-radius: 1rem; background: var(--brand-slate); color: #fff; box-shadow: 0 6px 16px rgba(34,53,66,.18); }
  .app-menu-button:hover, .app-menu-button.is-open { background: var(--brand-blue); }
  .mobile-app-menu { padding-top: 1rem; }
}
.pwa-install-banner { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; display: flex; align-items: center; gap: .75rem; width: min(25rem, calc(100vw - 2rem)); padding: .75rem; border: 1px solid #dbe5eb; border-radius: 1rem; background: rgba(255,255,255,.98); box-shadow: 0 12px 34px rgba(34,53,66,.2); backdrop-filter: blur(14px); }
.pwa-install-banner[hidden] { display: none; }
.pwa-install-banner__icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: .7rem; background: #fff; }
.pwa-install-banner__icon img { width: 100%; height: 100%; object-fit: cover; }
.pwa-install-banner__content { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .15rem; }
.pwa-install-banner__content strong { color: var(--brand-slate); font-size: .875rem; }
.pwa-install-banner__content span { color: #64748b; font-size: .72rem; line-height: 1.25; }
.pwa-install-banner__action { flex: 0 0 auto; border: 0; border-radius: .6rem; background: var(--brand-blue); color: #fff; padding: .55rem .75rem; font-size: .75rem; font-weight: 700; }
.pwa-install-banner__action:hover { background: var(--brand-blue-dark); color: #fff; }
.pwa-install-banner__close { display: grid; flex: 0 0 auto; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0 !important; background: transparent !important; color: #64748b; }
.pwa-install-banner__close:hover { color: var(--brand-slate); background: var(--brand-gray-light) !important; }
.pwa-install-banner__close svg { width: 1rem; height: 1rem; }
@media (max-width: 1023px) {
  .app-shell { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  .app-shell > footer { margin-bottom: 0; }
  .pwa-install-banner { right: .75rem; bottom: calc(4.75rem + env(safe-area-inset-bottom)); width: calc(100vw - 1.5rem); }
}

/* Logo-derived palette: service blue, warm gold, and slate. */
.bg-blue-900, .bg-blue-800, .bg-blue-700 { background-color: var(--brand-blue) !important; }
.bg-blue-50, .bg-blue-100 { background-color: var(--brand-gray-light) !important; }
.text-blue-900, .text-blue-800, .text-blue-700, .text-blue-600 { color: var(--brand-blue) !important; }
.text-blue-200, .text-blue-100 { color: #dceaf5 !important; }
.border-blue-700, .border-blue-600 { border-color: var(--brand-blue) !important; }
.bg-orange-500, .bg-orange-600 { background-color: var(--brand-gold) !important; }
.text-orange-600, .text-orange-500, .text-orange-400 { color: var(--brand-gold) !important; }
.from-blue-900, .from-blue-800, .from-blue-700 { --tw-gradient-from: var(--brand-blue) var(--tw-gradient-from-position); --tw-gradient-to: rgb(25 100 165 / 0) var(--tw-gradient-to-position); }
.via-blue-800 { --tw-gradient-via: var(--brand-blue); }
.to-blue-800, .to-blue-700, .to-blue-900 { --tw-gradient-to: var(--brand-blue-dark) var(--tw-gradient-to-position); }
.from-orange-500, .from-orange-600 { --tw-gradient-from: var(--brand-gold) var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 187 24 / 0) var(--tw-gradient-to-position); }
.to-orange-600, .to-orange-700 { --tw-gradient-to: var(--brand-gold) var(--tw-gradient-to-position); }
.bg-gray-900 { background-color: var(--brand-slate) !important; }
.border-gray-800 { border-color: var(--brand-slate-dark) !important; }
.hover\:bg-blue-800:hover, .hover\:bg-blue-700:hover { background-color: var(--brand-blue-dark) !important; }
.hover\:bg-orange-600:hover { background-color: #e3a500 !important; }
.hover\:text-blue-700:hover { color: var(--brand-blue) !important; }

/* Keep decorative service tiles within the logo palette. */
.from-pink-500, .from-purple-500, .from-green-500, .from-slate-500 { --tw-gradient-from: var(--brand-blue) var(--tw-gradient-from-position); --tw-gradient-to: rgb(25 100 165 / 0) var(--tw-gradient-to-position); }
.to-rose-500, .to-violet-500, .to-emerald-500, .to-cyan-500, .to-cyan-600 { --tw-gradient-to: var(--brand-blue-dark) var(--tw-gradient-to-position); }
.from-yellow-500, .from-amber-600 { --tw-gradient-from: var(--brand-gold) var(--tw-gradient-from-position); --tw-gradient-to: rgb(253 187 24 / 0) var(--tw-gradient-to-position); }
.to-amber-500, .to-yellow-600 { --tw-gradient-to: #e3a500 var(--tw-gradient-to-position); }
.to-red-500 { --tw-gradient-to: var(--brand-gold) var(--tw-gradient-to-position); }

.card { border: 1px solid #f3f4f6; border-radius: .75rem; background: #fff; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; background:var(--brand-blue); color:#fff; padding:.625rem 1rem; border-radius:.5rem; font-size:.875rem; font-weight:600; transition:background-color .2s, box-shadow .2s; }
.btn-primary:hover { background:var(--brand-blue-dark); box-shadow:0 4px 12px rgba(25,100,165,.18); }
button.provider-profile-completion-button { color:#fff !important; }
.field-label { display:flex; min-width:0; flex-direction:column; gap:.4rem; color:var(--brand-slate); font-size:.82rem; font-weight:600; line-height:1.25; }
.field { display:block; width:100%; min-height:2.7rem; padding:.65rem .75rem; border:1px solid #cbd5e1; border-radius:.55rem; background:#fff; color:#1f2937; font:inherit; font-size:.875rem; font-weight:400; line-height:1.35; box-sizing:border-box; }
textarea.field { min-height:6rem; resize:vertical; }
.field::placeholder { color:#94a3b8; opacity:1; }
.field:hover { border-color:#94a3b8; }
.field[type="file"] { padding:.35rem; color:var(--brand-slate); background:var(--brand-white); }
.field[type="file"]::file-selector-button { margin-right:.75rem; border:0; border-radius:.4rem; background:var(--brand-blue); color:var(--brand-white); padding:.5rem .85rem; font-size:.8rem; font-weight:600; cursor:pointer; transition:background-color .2s, color .2s; }
.field[type="file"]::file-selector-button:hover { background:var(--brand-blue-dark); }
button:not(.btn-primary):not(.admin-tab):not(.worker-tab):not(.provider-tab):not([class*="bg-"]):not([class*="text-red-"]):not([aria-label^="Close"]):not([data-menu-button]) { border:1px solid var(--brand-blue); border-radius:.5rem; background:var(--brand-white); color:var(--brand-blue); font-weight:600; transition:background-color .2s, color .2s, border-color .2s; }
button:not(.btn-primary):not(.admin-tab):not(.worker-tab):not(.provider-tab):not([class*="bg-"]):not([class*="text-red-"]):not([aria-label^="Close"]):not([data-menu-button]):hover { background:var(--brand-gray-light); border-color:var(--brand-blue-dark); color:var(--brand-blue-dark); }
.provider-tab { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:#4b5563; font-weight:500; }
.provider-tab:hover { border-bottom-color:var(--brand-blue); background:transparent; color:var(--brand-blue); }
.provider-tab.border-blue-600 { border-bottom-color:var(--brand-blue); color:var(--brand-blue); }
.badge { font-size:.72rem; padding:.2rem .5rem; border-radius:999px; }
select, input, textarea { outline: none; }
select:focus, input:focus, textarea:focus { border-color:var(--brand-blue); box-shadow:0 0 0 2px rgba(25,100,165,.12); }