/* —— App shell (logged-in only). Opened via body.app-open + #app-shell.is-open —— */ /* Critical hide also lives inline in index.html so FOUC never shows the menu. */ #app-shell:not(.is-open), body:not(.app-open) #app-shell { display: none !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; } /* Defeat Tailwind `fixed` / `grid` on chrome when logged out (fixed can paint outside display:none in edge cases) */ body:not(.app-open) .app-sidebar, body:not(.app-open) .app-bottom-nav, body:not(.app-open) .app-main-col { display: none !important; visibility: hidden !important; pointer-events: none !important; position: static !important; inset: auto !important; opacity: 0 !important; } #app-shell.is-open { display: flex !important; flex-direction: column; min-height: 100%; position: relative !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; visibility: visible !important; pointer-events: auto !important; } @media (min-width: 1024px) { body.app-open #app-shell.is-open { display: grid !important; grid-template-columns: 240px 1fr; } body.app-open .app-sidebar { display: flex !important; flex-direction: column; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body.app-open .app-bottom-nav { display: none !important; } body.app-open .app-main-col { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } } @media (max-width: 1023px) { body.app-open .app-sidebar { display: none !important; } body.app-open #app-shell.is-open .app-bottom-nav { display: grid !important; position: fixed !important; inset: auto 0 0 0 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body.app-open .app-main-col { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } } /* Phone mock frame for screenshots */ .phone-frame { position: relative; border-radius: 1.75rem; padding: 0.45rem; background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.08) inset; } .phone-frame::before { content: ''; position: absolute; top: 0.55rem; left: 50%; z-index: 2; width: 28%; height: 0.35rem; transform: translateX(-50%); border-radius: 999px; background: rgb(15 23 42 / 0.55); pointer-events: none; } .phone-frame img { display: block; border-radius: 1.35rem; background: #fff; } /* Minimal extras for logos + toast animations (Tailwind handles the rest) */ .inst-logo { --logo-size: 48px; width: var(--logo-size); height: var(--logo-size); border-radius: 0.85rem; background: transparent; display: grid; place-items: center; flex-shrink: 0; position: relative; overflow: hidden; box-shadow: none; } .inst-logo__img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; } .inst-logo__letter { display: none; font-weight: 700; font-size: calc(var(--logo-size) * 0.36); line-height: 1; color: #256fe9; } .inst-logo--badge { background: linear-gradient(145deg, #dbeefe, #f1f5f9); box-shadow: none; border: 1px solid #e2e8f0; } .dark .inst-logo--badge { background: linear-gradient(145deg, #172854, #1e293b); border-color: #334155; } .dark .inst-logo--badge .inst-logo__letter { color: #93cafd; } .inst-logo--badge .inst-logo__img { display: none; } .inst-logo--badge .inst-logo__letter { display: grid; place-items: center; } /* Active nav (desktop sidebar + mobile bottom) */ aside .nav-item.is-active { background: rgb(239 246 255); color: rgb(29 88 214); } .dark aside .nav-item.is-active { background: rgb(23 40 84 / 0.55); color: rgb(147 202 253); } aside .nav-item.is-active > span:first-child { background: rgb(219 238 254); color: rgb(29 88 214); } .dark aside .nav-item.is-active > span:first-child { background: rgb(23 40 84); color: rgb(147 202 253); } nav.fixed .nav-item.is-active { color: rgb(37 111 233); } .dark nav.fixed .nav-item.is-active { color: rgb(147 202 253); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } .toast-anim { animation: toast-in 0.22s ease-out; }