@media(max-width:768px){
  .header{padding:0 16px;height:56px}
  .nav-tabs{display:none!important}
  .logo h1{font-size:12px;letter-spacing:1px}
  .clock{font-size:13px}
  .mrow{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .crow{grid-template-columns:1fr!important;gap:12px}
  .page{padding:12px 12px 90px!important}
  .hright{gap:8px}
  .live-b{display:none}
}
#app-bnav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:rgba(5,11,20,0.98);
  border-top:1px solid #0d2040;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:6px 0 calc(8px + env(safe-area-inset-bottom));
}
#app-bnav .bi{
  display:flex;justify-content:space-around;align-items:flex-end;max-width:480px;margin:0 auto;
}
#app-bnav .b{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  flex:1;padding:6px 4px;background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:all .15s;
}
#app-bnav .b .i{font-size:22px;line-height:1;transition:all .2s;filter:grayscale(1) opacity(0.4)}
#app-bnav .b .l{font-size:9px;font-weight:700;letter-spacing:.4px;color:#4a6080;text-transform:uppercase;transition:color .2s}
#app-bnav .b.on .i{filter:none;transform:scale(1.1)}
#app-bnav .b.on .l{color:#00d4ff}
#app-bnav .b:active .i{transform:scale(0.85)}
@media(max-width:768px){#app-bnav{display:block}}