/* Pilot app demo shell (demo.html) — hosts the console, resident and family apps */
html, body { margin: 0; height: 100%; overflow: hidden; background: #FFFFFF; }
[hidden] { display: none !important; }
::-webkit-scrollbar { display: none; }
.dm { position: fixed; inset: 0; overflow: hidden; background: #FFFFFF; font-family: Manrope, system-ui, sans-serif; color: #0B0F12; }
.dm.phone-desk { background: linear-gradient(180deg, #FFFFFF 0%, #EAF1F2 100%); }

.dm-stage { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.dm-stage::-webkit-scrollbar { display: none; }
.dm.mobile .dm-stage { top: calc(56px + env(safe-area-inset-top, 0px)); }
.dm-sizer { position: relative; }
.dm-clip { position: absolute; overflow: hidden; visibility: hidden; }
.dm-clip.ready { visibility: visible; }
.dm-mount { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dm-mount .ios-device { box-shadow: none; }

.dm-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 100; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 99px; background: rgba(11,15,18,0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(9,16,20,0.28); max-width: calc(100vw - 16px); box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; }
.dm-bar::-webkit-scrollbar { display: none; }
.dm.mobile .dm-bar { bottom: auto; top: calc(8px + env(safe-area-inset-top, 0px)); }
.dm-back { display: flex; align-items: center; gap: 6px; padding: 9px 13px 9px 11px; border-radius: 99px; color: #FFFFFF; font-size: 12.5px; font-weight: 800; white-space: nowrap; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.16); margin-right: 2px; text-decoration: none; }
.dm-back span { font-size: 15px; line-height: 1; }
.dm-back:hover { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.dm-tab { all: unset; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; cursor: pointer; color: rgba(255,255,255,0.82); font-family: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap; flex-shrink: 0; }
.dm-tab:focus-visible { outline: 2px solid #3E9FD1; outline-offset: 1px; }
.dm-tab[aria-selected="true"] { background: #FFFFFF; color: #0B0F12; }
.dm-tab .tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.7; }

.dm-warn { position: absolute; left: 10px; right: 10px; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 101; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; border: 1px solid #CFE4F0; box-shadow: 0 12px 30px rgba(9,16,20,0.18); }
.dm-warn .dot { width: 7px; height: 7px; border-radius: 50%; background: #3E9FD1; flex-shrink: 0; margin-top: 6px; }
.dm-warn p { flex: 1; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: #22424F; }
.dm-warn button { all: unset; width: 26px; height: 26px; border-radius: 50%; background: #F1F5F6; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #40525A; cursor: pointer; flex-shrink: 0; }