:root{ --dh-safe-top: env(safe-area-inset-top, 0px); --dh-safe-bottom: env(safe-area-inset-bottom, 0px); --dh-bottomnav-height: 58px} .dh-install{ position: fixed; inset-inline-end: 16px; bottom: calc(16px + var(--dh-safe-bottom)); z-index: 1080; display: flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid var(--dh-border, #e6ebf2); border-radius: 999px; box-shadow: 0 10px 26px rgba(16, 35, 58, 0.18); padding: 6px 8px; font-family: inherit; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s} .dh-install.is-visible{ opacity: 1; visibility: visible; transform: translateY(0)} .dh-install__btn{ display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--dh-primary, #0b7285); color: #ffffff; border-radius: 999px; padding: 9px 16px; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer} .dh-install__icon{ font-size: 1rem; line-height: 1} .dh-install__close{ border: 0; background: transparent; color: #7b8aa1; font-size: 1.15rem; line-height: 1; padding: 4px 8px; cursor: pointer} .dh-bottomnav{ position: fixed; inset-inline: 0; bottom: 0; z-index: 1040; display: flex; justify-content: space-around; align-items: stretch; gap: 2px; padding: 4px 6px calc(4px + var(--dh-safe-bottom)); min-height: var(--dh-bottomnav-height); background: var(--dh-surface, #ffffff); border-top: 1px solid var(--dh-border, #e6ebf2); box-shadow: 0 -6px 18px rgba(16, 35, 58, 0.08)} .dh-bottomnav__item{ flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--dh-muted, #6b7c93); font-size: 0.72rem; font-weight: 600; border-radius: 12px; padding: 6px 4px} button.dh-bottomnav__item{ background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer} .dh-bottomnav__item.is-active{ color: var(--dh-primary, #0b7285); background: var(--dh-primary-soft, rgba(11, 114, 133, 0.1))} .dh-bottomnav__icon{ font-size: 1.15rem; line-height: 1} .dh-has-bottomnav{ padding-bottom: calc(var(--dh-bottomnav-height) + 12px)} .dh-has-bottomnav .dh-install{ bottom: calc(var(--dh-bottomnav-height) + 18px + var(--dh-safe-bottom))} .dh-offline-badge{ position: fixed; inset-inline-start: 50%; transform: translateX(50%); top: calc(10px + var(--dh-safe-top)); z-index: 1090; background: #b45309; color: #ffffff; font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18)} @media (max-width: 575.98px){ .dh-install{ inset-inline: 12px; justify-content: space-between} .btn-sm{ padding: 0.4rem 0.7rem; font-size: 0.86rem} .dh-table{ font-size: 0.86rem} .dh-hero{ padding: 18px 16px} .dh-hero__title{ font-size: 1.15rem}} @media (display-mode: standalone){ body{ padding-top: var(--dh-safe-top)} .main-header, .navbar{ padding-top: var(--dh-safe-top)} a, button{ -webkit-tap-highlight-color: rgba(11, 114, 133, 0.18)}} html.dark-mode .dh-install, body.dark-mode .dh-install{ background: #1e1e1e; border-color: #33383f} body.dark-mode .dh-bottomnav{ background: #1b1b1b; border-top-color: #33383f} body.dark-mode .dh-bottomnav__item{ color: #a8b3c4} body.dark-mode button.dh-bottomnav__item{ background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer} .dh-bottomnav__item.is-active{ color: #7dd3e0; background: rgba(125, 211, 224, 0.12)} body.dark-mode .dh-install__close{ color: #a8b3c4} @media (prefers-reduced-motion: reduce){ .dh-install{ transition: none}}