#app{height:100%;width:100%;max-width:100vw;overflow:hidden;display:flex;flex-direction:column;padding-top:var(--safe-t);padding-bottom:var(--safe-b);position:relative}
.screen{display:none;flex-direction:column;flex:1;overflow:hidden;position:absolute;inset:0;top:var(--safe-t);bottom:0;width:100%;max-width:100vw}
.screen.active{display:flex;position:relative}
.ss{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.topnav{flex-shrink:0;display:flex;align-items:center;padding:12px 16px;gap:12px;min-height:52px;position:relative;border-bottom:1px solid var(--b0)}
.topnav-back{width:36px;height:36px;border-radius:12px;background:var(--card);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;flex-shrink:0;z-index:1}
.topnav-back:active{transform:scale(.9)}
.topnav-title{position:absolute;left:0;right:0;text-align:center;font-family:var(--fd);font-size:17px;font-weight:700;letter-spacing:-.3px;pointer-events:none;padding:0 60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav-action{font-size:13px;font-weight:600;color:var(--lime);cursor:pointer;white-space:nowrap;margin-left:auto;z-index:1}
#bottom-nav{flex-shrink:0;display:none;background:var(--bg1);border-top:1px solid var(--b1);padding:6px 0 calc(6px + var(--safe-b));width:100%;max-width:100vw}
#bottom-nav.visible{display:flex}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;cursor:pointer}
.bnav-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.bnav-icon .material-symbols-outlined{font-size:24px}.bnav-label{font-size:10px;font-weight:600;color:var(--t3)}
.bnav-item.active .bnav-label{color:var(--lime)}
.bnav-item.active .bnav-icon{transform:scale(1.15)}
.bnav-item:active{transform:scale(.85)}
.sticky-bottom{position:sticky;bottom:0;background:var(--bg1);border-top:1px solid var(--b1);padding:12px 16px;flex-shrink:0}

/* ── Desktop responsive: sidebar + top bar offsets ── */
@media(min-width:1024px){
  #app{margin-left:240px;padding-top:64px;overflow:visible;height:auto;min-height:100vh}
  .screen{position:relative;inset:auto;top:auto;bottom:auto;width:100%;max-width:100%}
  .screen.active{display:flex}
  #bottom-nav{display:none!important}
  #bottom-nav.visible{display:none!important}
  .bnav-item.active .bnav-label{color:var(--lime)}
}
.glass-header{background:rgba(7,9,10,0.4);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}