/* One viewport, one safe-area reservation and one mobile header. */
.mobile-more-head,.mobile-pull-indicator{display:none}
@media(max-width:900px){
 :root{--app-viewport-height:100vh;--mobile-header-height:60px;--mobile-nav-h:66px;--mobile-nav-bottom:max(16px,var(--safe-bottom))}
 @supports(height:100dvh){:root{--app-viewport-height:100dvh}}
 html,body{width:100%;height:100%;min-height:0;max-height:none;overflow:hidden}
 html{background:var(--bg)}
 /* Avoid the fixed-root viewport gap in iOS Home Screen apps. */
 body{position:relative;inset:auto;height:100vh;height:100dvh;padding:0!important;overscroll-behavior-y:none;background:var(--bg)}
 html.mobile-installed,html.mobile-installed body{height:100vh}
 #app.shell{position:relative;inset:auto;height:100%;min-height:0;max-height:none;width:100%;overflow:hidden}
 #app .main{position:relative;height:100%;min-height:0;max-height:none;width:100%;padding:0;scroll-padding-bottom:calc(var(--mobile-nav-h) + var(--mobile-nav-bottom) + 16px);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:none;-webkit-overflow-scrolling:touch}
 #app .main .topbar{position:sticky;top:0;z-index:370;flex:0 0 auto;height:calc(var(--mobile-header-height) + var(--safe-top));min-height:calc(var(--mobile-header-height) + var(--safe-top));padding:var(--safe-top) max(16px,var(--safe-right)) 0 max(16px,var(--safe-left));background:var(--bg);border-bottom:1px solid var(--border);box-shadow:none}
 #app .topbar-right{flex:none;gap:8px;align-items:center}
 #app .topbar #notif-wrapper{position:relative!important;inset:auto!important;flex:none;z-index:auto}
 #app .topbar #btn-notif{width:40px;height:40px;min-width:40px;margin:0;box-shadow:none;background:transparent;border:0}
 #app .topbar-profile{width:40px;height:40px;margin:0}
 #notif-panel{top:calc(var(--mobile-header-height) + var(--safe-top) + 8px)!important;bottom:auto!important;left:max(12px,var(--safe-left))!important;right:max(12px,var(--safe-right))!important;max-height:calc(var(--app-viewport-height) - var(--mobile-header-height) - var(--safe-top) - var(--mobile-nav-h) - var(--safe-bottom) - 24px)!important;border-radius:16px!important;box-shadow:0 16px 40px #0005}
 #notif-list{max-height:calc(var(--app-viewport-height) - var(--mobile-header-height) - var(--safe-top) - var(--mobile-nav-h) - var(--safe-bottom) - 78px)!important;overscroll-behavior:contain}
 .mobile-bottom-nav{position:absolute;top:auto;bottom:var(--mobile-nav-bottom);left:max(12px,var(--safe-left));right:max(12px,var(--safe-right));width:auto;max-width:520px;height:var(--mobile-nav-h);margin:0 auto;padding:5px;gap:2px;border:1px solid #ffffff26;border-radius:40px;background:linear-gradient(160deg,#ffffff0d,transparent 55%),rgba(24,23,34,.72);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);box-shadow:inset 0 1px 0 #ffffff0d,0 8px 28px #0004}
 .mobile-tab{min-height:0;border-radius:30px;gap:3px;color:#c0bdce}
 .mobile-tab.active{color:#f0e9ff;background:linear-gradient(160deg,#d7c2ff33,#b798ef1a);box-shadow:inset 0 1px 0 #ffffff1a}
 .mobile-tab.active::before{display:none;content:none}
 .mobile-tab-icon{width:25px;height:25px;opacity:.9}
 .mobile-tab-icon svg{width:23px;height:23px}
 .mobile-tab.active .mobile-tab-icon{color:#d3baff}
 .mobile-tab-label{font-size:10px!important;font-weight:500;line-height:1.2;letter-spacing:-.15px}
 .mobile-tab:focus-visible{outline:2px solid var(--violet3);outline-offset:-2px}
 #support-whatsapp{position:absolute;bottom:calc(var(--mobile-nav-h) + var(--mobile-nav-bottom) + 16px)}
 body:has(#pg-solutions.page.active .solution-custom-cta) #support-whatsapp{bottom:calc(var(--mobile-nav-h) + var(--mobile-nav-bottom) + 96px)}
 .toast{bottom:calc(var(--mobile-nav-h) + var(--mobile-nav-bottom) + 10px)}
 #auth-screen{height:100%;min-height:0;max-height:none;overflow-y:auto}
 .mobile-sidebar-backdrop{position:absolute;inset:0;height:auto;background:#03030999;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
 #app .sidebar{position:absolute;inset:auto max(12px,var(--safe-right)) calc(var(--mobile-nav-h) + var(--mobile-nav-bottom) + 10px) max(12px,var(--safe-left));width:auto;min-width:0;height:auto;max-height:calc(var(--app-viewport-height) - var(--mobile-nav-h) - var(--mobile-nav-bottom) - var(--safe-top) - 26px);padding:0;border:1px solid var(--border2);border-radius:24px;background:var(--bg2);box-shadow:0 20px 70px #0008;transform:translateY(20px);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;overflow:hidden}
 #app .sidebar::before{display:none}
 #app .sidebar.mobile-open{transform:none;opacity:1;visibility:visible}
 .mobile-more-head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;padding:22px 20px 17px;border-bottom:1px solid var(--border)}
 .mobile-more-head h2{font:600 20px/1.25 'Poppins',sans-serif;color:var(--text);letter-spacing:-.4px}
 .mobile-more-head p{margin-top:4px;font-size:12px;color:var(--text2)}
 .mobile-more-close{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--border);border-radius:50%;background:var(--bg3);color:var(--text2);cursor:pointer}
 #app .sidebar .sb-nav{flex:0 1 auto;min-height:0;padding:18px 12px 14px;display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 #app .sidebar .sb-group+.sb-group{margin-top:20px}
 #app .sidebar .sb-group-title{margin:0 10px 8px;font-size:10px;letter-spacing:.09em;color:var(--text3)}
 #app .sidebar .sb-group-items{display:flex;flex-direction:column;gap:3px}
 #app .sidebar .sb-item{display:flex;align-items:center;gap:13px;width:100%;height:auto;min-height:54px;padding:7px 10px;border:1px solid transparent;border-radius:14px;background:transparent;white-space:normal;overflow:visible}
 #app .sidebar .sb-item:hover{background:var(--bg3)}
 #app .sidebar .sb-item.active{background:var(--violetbg);border-color:var(--violetborder)}
 #app .sidebar .sb-icon{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--bg3);color:var(--text2);opacity:1}
 #app .sidebar .sb-icon svg{width:18px;height:18px}
 #app .sidebar .sb-item.active .sb-icon{background:var(--violetbg);color:var(--violet3)}
 #app .sidebar .sb-label{flex:1;min-width:0;font-size:14px!important;font-weight:500;white-space:normal;line-height:1.4}
 #app .sidebar .sb-label::after{display:none;content:none}
 #app .sidebar .sb-badge{position:static;flex:none;margin-left:auto}
 #app .sidebar .mobile-direct-item,#app .sidebar .mobile-group-empty{display:none!important}
 #app .main .content{min-height:0;padding-bottom:calc(var(--mobile-nav-h) + var(--mobile-nav-bottom) + 16px);transform:translateY(var(--mobile-pull-distance,0px));transition:transform .38s cubic-bezier(.2,.75,.25,1)}
 #app .main.mobile-pulling .content{transition:none}
 .mobile-pull-indicator{position:absolute;z-index:365;top:calc(var(--mobile-header-height) + var(--safe-top) + 14px);left:50%;display:grid;place-items:center;width:26px;height:26px;transform:translateX(-50%);pointer-events:none}
 .mobile-pull-indicator[hidden]{display:none!important}
 .mobile-pull-icon{display:block;width:22px;height:22px;border:2.5px solid #cbb5ff30;border-top-color:var(--violet3);border-right-color:var(--violet3);border-radius:50%}
 #mobile-pull-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .mobile-pull-indicator.is-refreshing .mobile-pull-icon{animation:mobile-refresh-spin .8s linear infinite}
 html body.mobile-keyboard-open{height:var(--app-viewport-height)}
 body.mobile-keyboard-open #app .main{padding-bottom:0}
 body.mobile-keyboard-open .mobile-bottom-nav{display:none!important}
 @keyframes mobile-refresh-spin{to{transform:rotate(360deg)}}
}
@media(max-width:900px) and (display-mode:standalone), (max-width:900px) and (display-mode:fullscreen){
 html,body{height:100vh}
}
@media(max-width:900px) and (prefers-reduced-transparency:reduce){
 .mobile-bottom-nav{background:#1b1926;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(max-width:900px) and (max-height:500px){
 :root{--mobile-header-height:52px;--mobile-nav-h:58px}
 .mobile-more-head{padding:14px 18px 12px}
 #app .sidebar .sb-nav{padding-top:10px}
 #app .sidebar .sb-item{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
 #app .sidebar,#app .main .content{transition:none!important}
 .mobile-pull-indicator.is-refreshing .mobile-pull-icon{animation-duration:1.6s}
}
