/* Unmask ADHD — PWA / mobile-app styling
   Bottom tab bar, install prompt, iOS hint, push opt-in. Brand: teal #5BC0BE,
   navy #1F2A44, amber #F59E0B. */

:root { --pwa-nav-h: 62px; }

/* ── Bottom tab bar (patients, mobile only) ───────────────────────── */
.pwa-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--pwa-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #ffffff;
  border-top: 1px solid rgba(31, 42, 68, 0.10);
  box-shadow: 0 -6px 20px rgba(31, 42, 68, 0.06);
}
.pwa-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #7A8699;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 0 4px;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pwa-tab .pwa-tab-icon { position: relative; font-size: 1.35rem; line-height: 1; }
.pwa-tab.is-active { color: #5BC0BE; }
.pwa-tab.is-active .pwa-tab-icon { transform: translateY(-1px); }
.pwa-tab:active { opacity: 0.7; }
.pwa-tab-badge {
  position: absolute;
  top: -5px; right: -9px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #EF4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Give portal content room so the fixed bar never covers it (mobile only).
   Keyed off data-role (set at header render) since the portal-page class is
   only applied at footer time on these pages. */
@media (max-width: 991.98px) {
  body[data-role="patient"],
  body[data-role="clinician"],
  body[data-role="admin"] { padding-bottom: calc(var(--pwa-nav-h) + env(safe-area-inset-bottom, 0px)); }
}
/* Desktop keeps the existing sidebar layout — hide the mobile bar. */
@media (min-width: 992px) {
  .pwa-bottom-nav { display: none; }
}

/* ── Install chip (Android / desktop) ─────────────────────────────── */
.pwa-install-chip {
  position: fixed;
  right: 16px;
  bottom: calc(var(--pwa-nav-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  background: #1F2A44;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(31, 42, 68, 0.28);
  cursor: pointer;
}
@media (min-width: 992px) {
  .pwa-install-chip { bottom: 20px; }
}

/* ── iOS "Add to Home Screen" hint ────────────────────────────────── */
.pwa-ios-hint {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--pwa-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 1055;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1F2A44;
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.85rem;
  box-shadow: 0 10px 30px rgba(31, 42, 68, 0.3);
}
.pwa-ios-hint b { color: #5BC0BE; }
.pwa-ios-hint button {
  margin-left: auto;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

/* ── Push opt-in prompt ───────────────────────────────────────────── */
.pwa-push-prompt {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--pwa-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 1055;
  background: #fff;
  border: 1px solid rgba(31, 42, 68, 0.10);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 12px 36px rgba(31, 42, 68, 0.18);
  max-width: 460px;
  margin: 0 auto;
}
.pwa-push-body { display: flex; align-items: center; gap: 10px; color: #1F2A44; font-size: 0.9rem; font-weight: 600; }
.pwa-push-body i { color: #F59E0B; font-size: 1.25rem; }
.pwa-push-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pwa-btn-ghost, .pwa-btn-solid {
  border-radius: 999px; padding: 7px 16px; font-size: 0.82rem; font-weight: 700; cursor: pointer; border: none;
}
.pwa-btn-ghost { background: transparent; color: #7A8699; }
.pwa-btn-solid { background: #5BC0BE; color: #fff; }

@media (min-width: 992px) {
  .pwa-ios-hint, .pwa-push-prompt { left: auto; right: 20px; bottom: 20px; width: 360px; }
}

/* ═══════════════════════════════════════════════════════════════════
   NATIVE-APP POLISH — preloader, drawer/bottom-nav coordination,
   sidebar alignment, touch feel, page transitions.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Launch splash / preloader (premium) ──────────────────────────── */
.app-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(140% 120% at 50% -10%, #2B3A5C 0%, #1F2A44 46%, #131D33 100%);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
  padding: env(safe-area-inset-top,0px) 24px env(safe-area-inset-bottom,0px);
  overflow: hidden;
}
.app-preloader.is-visible { opacity: 1; visibility: visible; }
.app-preloader.is-hiding  { opacity: 0; visibility: hidden; }

/* soft teal glow that breathes behind the logo */
.app-preloader-glow {
  position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,192,190,.22) 0%, rgba(91,192,190,0) 68%);
  animation: preGlow 3.2s ease-in-out infinite;
}
@keyframes preGlow { 0%,100% { transform: scale(.9); opacity:.65; } 50% { transform: scale(1.12); opacity:1; } }

.app-preloader-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  width: 100%; max-width: 300px;
}
.app-preloader-logo img {
  width: 220px; max-width: 72vw; height: auto; display: block;
  animation: preLogoIn .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes preLogoIn {
  0%   { opacity: 0; transform: translateY(10px) scale(.92); }
  100% { opacity: 1; transform: none; }
}
/* slim indeterminate progress bar */
.app-preloader-bar {
  width: 190px; max-width: 66vw; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.app-preloader-bar span {
  display: block; height: 100%; width: 42%; border-radius: 999px;
  background: linear-gradient(90deg, #5BC0BE, #7FE3E1);
  animation: preBar 1.15s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes preBar {
  0%   { transform: translateX(-130%); }
  60%  { transform: translateX(170%); }
  100% { transform: translateX(170%); }
}
.app-preloader-tag {
  color: rgba(255,255,255,.55); font-size: .8rem; font-weight: 500;
  letter-spacing: .04em; text-align: center;
  animation: preTagIn 1s ease .25s both;
}
@keyframes preTagIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .app-preloader-glow, .app-preloader-logo img, .app-preloader-bar span, .app-preloader-tag { animation: none; }
  .app-preloader-bar span { width: 100%; }
}

/* ── Mobile navigation: bottom bar + hamburger drawer only ─────────── */
@media (max-width: 991.98px) {
  /* The old horizontal scroll strip is replaced by the bottom tab bar
     (primary 5) + the hamburger drawer (full menu). */
  .p-mobile-nav { display: none !important; }

  /* Drawer must sit ABOVE the fixed bottom tab bar, and cover full height. */
  body.sidebar-open .p-sidebar { bottom: 0; height: calc(100vh - 80px); z-index: 1100; }
  body.sidebar-open .sidebar-backdrop { z-index: 1090; display: block; }
  /* Hide the bottom bar while the drawer is open to avoid a visual clash. */
  body.sidebar-open .pwa-bottom-nav { display: none; }
}

/* ── Bottom tab bar: active indicator + press feel ────────────────── */
.pwa-tab { position: relative; }
.pwa-tab.is-active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: #5BC0BE;
}
.pwa-tab.is-active .pwa-tab-icon { animation: tabPop .22s ease; }
@keyframes tabPop { 0% { transform: scale(.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ── Desktop sidebar: cleaner alignment + active accent ───────────── */
.p-nav-link { align-items: center; }
.p-nav-link.active { box-shadow: inset 3px 0 0 #5EEAD4; }
.p-sidebar-profile { align-items: center; }
.p-nav-group { padding-bottom: 16px; }

/* ── App-like touch feel & momentum scrolling ─────────────────────── */
body[data-authed="1"] { -webkit-tap-highlight-color: transparent; }
body[data-authed="1"] a, body[data-authed="1"] button { -webkit-tap-highlight-color: transparent; }
.pwa-standalone, .pwa-standalone body { overscroll-behavior-y: contain; }

/* Buttons/cards give subtle feedback when pressed (mobile). */
@media (max-width: 991.98px) {
  .btn:active { transform: scale(.98); }
  .glass-card, .p-widget, .p-stat { -webkit-tap-highlight-color: transparent; }
}

/* ── Standalone (installed): pad the fixed top bar for the status bar ── */
/* Installed app: drop the fixed navbar below the status bar / notch, and
   reserve matching space so page content is never hidden behind it. */
.pwa-standalone .navbar.fixed-top { padding-top: calc(0.6rem + env(safe-area-inset-top, 0px)); }
.pwa-standalone body.portal-page { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }

/* ── Gentle page-content fade-in (native screen transition) ───────── */
/* Content entrance is handled per-card in pwa.js (graceful stagger). A plain
   fade remains as a fallback only where JS can't set the per-card animation. */
@keyframes appFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .p-content, .p-content-grid { animation: none; }
  .pwa-tab.is-active .pwa-tab-icon { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   TOASTS — action feedback (window.toast + server flash messages)
   ═══════════════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed; z-index: 4000;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px;
  width: calc(100% - 24px); max-width: 440px;
  pointer-events: none;
}
.toast-item {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px;
  background: #fff; color: #1F2A44;
  border-radius: 14px; padding: 13px 14px 15px;
  box-shadow: 0 14px 38px rgba(31,42,68,.20);
  border: 1px solid rgba(31,42,68,.06);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(-14px) scale(.98);
  transition: opacity .28s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.toast-item.in  { opacity: 1; transform: none; }
.toast-item.out { opacity: 0; transform: translateY(-10px) scale(.98); }
.toast-ic  { font-size: 1.2rem; line-height: 1.25; flex-shrink: 0; }
.toast-msg { font-size: .86rem; font-weight: 600; line-height: 1.42; flex: 1; word-break: break-word; }
.toast-msg a { color: inherit; text-decoration: underline; font-weight: 700; }
.toast-x { background: none; border: none; color: #98A2B3; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; margin: -2px -2px 0 0; }
.toast-x:hover { color: #64748B; }
.toast-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; }
.toast-prog span { display: block; height: 100%; width: 100%; }
.toast-success { border-left: 4px solid #16A34A; } .toast-success .toast-ic { color: #16A34A; } .toast-success .toast-prog span { background: #16A34A; }
.toast-error   { border-left: 4px solid #EF4444; } .toast-error   .toast-ic { color: #EF4444; } .toast-error   .toast-prog span { background: #EF4444; }
.toast-warning { border-left: 4px solid #F59E0B; } .toast-warning .toast-ic { color: #F59E0B; } .toast-warning .toast-prog span { background: #F59E0B; }
.toast-info    { border-left: 4px solid #5BC0BE; } .toast-info    .toast-ic { color: #3FA7A5; } .toast-info    .toast-prog span { background: #5BC0BE; }
@media (min-width: 992px) {
  .toast-stack { left: auto; right: 20px; transform: none; }
  .toast-item.out { transform: translateX(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast-item { transition: opacity .2s ease; }
  .toast-prog span { transition: none !important; }
}

/* Navigation loader — the splash reused on internal link/form clicks. Faster
   fade and no tagline, so it reads as "loading" rather than a fresh launch. */
.app-preloader.nav-mode { transition: opacity .16s ease, visibility .16s ease; }
.app-preloader.nav-mode .app-preloader-tag { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   ENHANCED SIDEBAR — premium look + animation (drawer & desktop)
   ═══════════════════════════════════════════════════════════════════ */

/* Container: subtle vertical gradient + refined scrollbar */
.p-sidebar { background: linear-gradient(180deg, #111C33 0%, #0D1526 100%); }

/* Profile header: gentle accent gradient + avatar ring */
.p-sidebar-profile {
  background: linear-gradient(180deg, rgba(91,192,190,.10), rgba(91,192,190,0));
}
.p-avatar { box-shadow: 0 0 0 3px rgba(91,192,190,.18), 0 3px 10px rgba(0,0,0,.3); }

/* Group labels a touch brighter */
.p-nav-label { color: #47597a; }

/* Nav links: springy micro-interactions */
.p-sidebar .p-nav-link {
  transition: background .18s ease, color .18s ease, transform .16s ease, box-shadow .2s ease;
}
.p-sidebar .p-nav-link i { transition: transform .18s ease, color .18s ease; }
.p-sidebar .p-nav-link:hover { transform: translateX(3px); }
.p-sidebar .p-nav-link:hover i { transform: scale(1.14); }
.p-sidebar .p-nav-link:active { transform: scale(.975); }

/* Active link: teal gradient pill + accent bar + soft glow */
.p-sidebar .p-nav-link.active {
  background: linear-gradient(90deg, rgba(91,192,190,.22), rgba(91,192,190,.05));
  color: #8CEEEC;
  box-shadow: inset 3px 0 0 #5BC0BE, 0 6px 18px rgba(91,192,190,.12);
}
.p-sidebar .p-nav-link.active i { color: #8CEEEC; transform: scale(1.08); }

/* Badges inside nav pop a little */
.p-sidebar .n-badge { box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* ── Drawer (mobile) — smoother slide, blurred backdrop, staggered items ── */
.sidebar-backdrop {
  background: rgba(9,14,26,.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@media (max-width: 991.98px) {
  body.sidebar-open .p-sidebar {
    border-radius: 0 20px 20px 0;
    box-shadow: 10px 0 44px rgba(0,0,0,.5);
    animation: sidebarSlideIn .36s cubic-bezier(.16,.84,.34,1);
  }
  body.sidebar-open .sidebar-backdrop { animation: bdFade .32s ease both; }

  /* staggered reveal of profile + each nav row */
  body.sidebar-open .p-sidebar-profile,
  body.sidebar-open .p-sidebar .p-nav-group > * {
    animation: navItemIn .44s cubic-bezier(.2,.7,.2,1) both;
  }
  body.sidebar-open .p-sidebar-profile { animation-delay: .02s; }
  body.sidebar-open .p-nav-group > *:nth-child(1){animation-delay:.06s}
  body.sidebar-open .p-nav-group > *:nth-child(2){animation-delay:.09s}
  body.sidebar-open .p-nav-group > *:nth-child(3){animation-delay:.12s}
  body.sidebar-open .p-nav-group > *:nth-child(4){animation-delay:.15s}
  body.sidebar-open .p-nav-group > *:nth-child(5){animation-delay:.18s}
  body.sidebar-open .p-nav-group > *:nth-child(6){animation-delay:.21s}
  body.sidebar-open .p-nav-group > *:nth-child(7){animation-delay:.24s}
  body.sidebar-open .p-nav-group > *:nth-child(8){animation-delay:.27s}
  body.sidebar-open .p-nav-group > *:nth-child(9){animation-delay:.30s}
  body.sidebar-open .p-nav-group > *:nth-child(10){animation-delay:.33s}
  body.sidebar-open .p-nav-group > *:nth-child(11){animation-delay:.36s}
  body.sidebar-open .p-nav-group > *:nth-child(n+12){animation-delay:.39s}
}
@keyframes bdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes navItemIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.sidebar-open .p-sidebar,
  body.sidebar-open .p-sidebar-profile,
  body.sidebar-open .p-nav-group > * { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PORTAL UI POLISH — inputs, buttons, cards, focus, skeletons
   ═══════════════════════════════════════════════════════════════════ */

/* Inputs: rounded + teal focus ring across the portal */
.p-main .form-control, .p-main .form-select, .p-main textarea.form-control {
  border-radius: 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.p-main .form-control:focus, .p-main .form-select:focus, .p-main textarea.form-control:focus {
  border-color: #5BC0BE;
  box-shadow: 0 0 0 .2rem rgba(91,192,190,.18);
}

/* Buttons: smooth, tactile press + subtle hover; keyboard focus ring */
.btn { transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, filter .18s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-teal:hover, .btn-premium:hover, .btn-navy:hover { filter: brightness(1.05); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .p-nav-link:focus-visible {
  outline: 2px solid rgba(91,192,190,.65); outline-offset: 2px;
}

/* Cards: consistent, gentle hover lift (desktop only) */
@media (hover: hover) {
  .p-main .glass-card, .p-main .p-widget { transition: transform .18s ease, box-shadow .2s ease; }
  .p-main .glass-card:hover, .p-main .p-widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(31,42,68,.09);
  }
}

/* Skeleton shimmer — utility for loading placeholders (add class="skeleton") */
.skeleton {
  background: linear-gradient(90deg, #eef2f7 25%, #e3e8ef 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: skelShimmer 1.3s ease infinite;
  border-radius: 8px; color: transparent !important; pointer-events: none;
}
@keyframes skelShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE ACTION ROWS — stop two-button rows (Back/Next, Cancel/Save)
   from overflowing and clipping on small screens (root-cause fix).
   Uses :has() (all current mobile browsers) to target only rows that
   actually contain buttons, so ordinary flex rows are untouched.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  .d-flex.justify-content-between:has(> .btn),
  .d-flex.justify-content-end:has(> .btn),
  .d-flex.justify-content-center:has(> .btn),
  .form-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  /* Two buttons share the row and shrink to fit; a third wraps cleanly. */
  .d-flex.justify-content-between:has(> .btn) > .btn,
  .d-flex.justify-content-between:has(> a.btn) > a.btn,
  .form-actions > .btn {
    flex: 1 1 auto;
    min-width: 0;                 /* allow shrinking below content width */
  }
  /* Rein in oversized pill padding so labels fit on 320–390px screens. */
  .btn.px-5 { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
  .btn.px-4 { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }
  /* A button must never exceed its container. */
  .btn { max-width: 100%; }
}

/* Global safety net: nothing should force the page wider than the screen. */
img, svg, video, canvas, table { max-width: 100%; }
.container, .container-fluid { overflow-x: clip; }

/* ═══════════════════════════════════════════════════════════════════
   TABLE & OVERFLOW SAFETY (portal) — any table scrolls inside its own
   container on small screens instead of widening the page.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .p-main :has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .p-main .table-responsive { -webkit-overflow-scrolling: touch; }
  /* Keep table cells on one line so columns don't collapse to vertical, one-
     letter-per-line text. The table scrolls horizontally inside its wrapper. */
  .p-main table th, .p-main table td { white-space: nowrap; }
  /* Long unbreakable strings inside CARDS (not tables) still wrap gracefully. */
  .p-main .p-widget, .p-main .glass-card { overflow-wrap: anywhere; }
}

/* ═══════════════════════════════════════════════════════════════════
   AOS ON MOBILE — fade-left/right use horizontal transforms that push
   content off-screen and clip it on phones (before/if the scroll trigger
   fires). Show AOS content immediately and untransformed on small screens.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   INSTALL GUIDE SHEET — shown when native install isn't available
   (iOS Safari, or a browser not yet eligible). Bottom sheet on mobile.
   ═══════════════════════════════════════════════════════════════════ */
.pwa-guide-overlay {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(9,14,26,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: guideFade .2s ease;
}
.pwa-guide {
  width: 100%; max-width: 460px; background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(0,0,0,.25);
  animation: guideUp .3s cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 576px) {
  .pwa-guide-overlay { align-items: center; }
  .pwa-guide { border-radius: 20px; }
}
.pwa-guide-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pwa-guide-head img { border-radius: 13px; box-shadow: 0 4px 14px rgba(31,42,68,.2); flex-shrink: 0; }
.pwa-guide-title { font-weight: 800; color: #1F2A44; font-size: 1.05rem; }
.pwa-guide-sub { color: #6c757d; font-size: .82rem; line-height: 1.4; margin-top: 2px; }
.pwa-guide-steps { margin: 0 0 18px; padding-left: 1.2rem; color: #1F2A44; font-size: .9rem; line-height: 1.75; }
.pwa-guide-steps b { font-weight: 700; }
.pwa-guide-steps i { color: #5BC0BE; }
.pwa-guide-close { width: 100%; border: none; border-radius: 999px; padding: 12px; background: #5BC0BE; color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; }
@keyframes guideFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes guideUp { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Install affordances (drawer link + floating chip) disappear once the app is
   installed — the pwa-standalone class is set on <html> in standalone mode. */
.pwa-standalone [data-pwa-install],
.pwa-standalone .pwa-install-chip { display: none !important; }
/* The drawer "Install App" link inherits nav styling; give its icon a hint of teal. */
.p-nav-link.pwa-install-link i { color: #5EEAD4; }