/* Platform-specific shell. The browser gets a desktop workspace; Flutter keeps a native dock. */
:root{
  --brand:#0ea5e9;
  --brand-strong:#0284c7;
  --brand-soft:rgba(14,165,233,.11);
  --shell-border:rgba(15,23,42,.09);
  --shell-shadow:0 24px 64px rgba(15,23,42,.13);
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

button,[role="button"],.nitem,.nadd{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
button:focus-visible,[role="button"]:focus-visible,.nitem:focus-visible,.nadd:focus-visible{
  outline:3px solid rgba(14,165,233,.28)!important;
  outline-offset:3px!important;
}

@media (min-width:500px){
  .outer:not(.mobily-webview){align-items:center!important;padding:20px!important;}
  .outer:not(.mobily-webview) .frame{height:calc(100dvh - 40px)!important;max-height:980px!important;border-radius:28px!important;border:1px solid var(--shell-border)!important;box-shadow:var(--shell-shadow)!important;}
}
@media (min-width:760px){
  .outer:not(.mobily-webview) .frame{max-width:1180px!important;}
  .outer:not(.mobily-webview) .scr{padding-inline:clamp(16px,2.5vw,34px)!important;padding-bottom:40px!important;}
  .outer:not(.mobily-webview) .hd,.outer:not(.mobily-webview) .srch,.outer:not(.mobily-webview) .cats,.outer:not(.mobily-webview) .sh{max-width:1060px!important;width:calc(100% - 40px)!important;margin-inline:auto!important;}
  .outer:not(.mobily-webview) .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;max-width:1060px!important;margin-inline:auto!important;width:100%!important;}
  .outer:not(.mobily-webview) .ctop{height:220px!important;}
  .outer:not(.mobily-webview) .card{border-radius:20px!important;}
}

.bnav{left:16px!important;right:16px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;width:auto!important;height:76px!important;min-height:76px!important;transform:none!important;padding:7px 9px!important;border-radius:32px!important;border:1px solid rgba(94,211,255,.22)!important;background:linear-gradient(165deg,rgba(15,20,42,.92),rgba(7,10,24,.95) 55%,rgba(5,7,18,.97))!important;box-shadow:0 18px 42px rgba(2,6,20,.55),0 0 34px rgba(14,165,233,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;backdrop-filter:blur(22px) saturate(160%)!important;-webkit-backdrop-filter:blur(22px) saturate(160%)!important;}
.bnav::before,.bnav::after{display:none!important;}
.nitem{min-height:60px!important;padding:7px 3px!important;border-radius:18px!important;gap:5px!important;transition:background .22s var(--ease-out),transform .22s var(--ease-out),outline .2s ease,box-shadow .22s ease!important;}
.nitem:active{transform:scale(.92)!important;background:rgba(56,189,248,.22)!important;outline:2px solid #38BDF8!important;outline-offset:-2px!important;}
.nitem.active{background:rgba(56,189,248,.16)!important;outline:2px solid #38BDF8!important;outline-offset:-2px!important;box-shadow:0 0 16px rgba(56,189,248,.35)!important;}
.nico-wrap{transition:transform .24s cubic-bezier(.34,1.56,.64,1)!important;}
.nlbl{font-size:10px!important;font-weight:850!important;}
.nadd{width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important;flex-basis:68px!important;margin-top:0!important;align-self:center!important;border:none!important;box-shadow:0 12px 26px rgba(14,165,233,.5),0 0 32px rgba(56,189,248,.42),inset 0 2px 0 rgba(255,255,255,.5),inset 0 -6px 12px rgba(2,64,120,.3)!important;}
.nadd:hover{transform:translateX(-50%) translateY(-2px)!important;box-shadow:0 16px 30px rgba(14,165,233,.55),0 0 38px rgba(56,189,248,.52)!important;}

.mobily-webview .frame{max-width:none!important;height:100dvh!important;border-radius:0!important;box-shadow:none!important;}
.mobily-webview .scr{padding-bottom:calc(98px + env(safe-area-inset-bottom))!important;overscroll-behavior-y:contain!important;}
.mobily-webview .bnav{direction:ltr!important;flex-direction:row-reverse!important;box-sizing:border-box!important;height:70px!important;padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;bottom:max(9px,env(safe-area-inset-bottom))!important;left:10px!important;right:10px!important;width:auto!important;transform:none!important;border-radius:22px!important;}
.mobily-webview .nitem{direction:rtl!important;flex:1!important;min-width:0!important;padding:6px 4px!important;gap:3px!important;border-radius:15px!important;}
.mobily-webview .nitem:active{background:rgba(56,189,248,.22)!important;outline:2px solid #38BDF8!important;outline-offset:-2px!important;}
.mobily-webview .nitem.active{background:rgba(56,189,248,.18)!important;outline:2px solid #38BDF8!important;outline-offset:-2px!important;box-shadow:0 0 16px rgba(56,189,248,.35)!important;transform:none!important;}
.mobily-webview .nitem.active .nico-wrap{transform:translateY(-1px) scale(1.05)!important;}
.mobily-webview .nitem.active .nlbl{color:var(--brand-strong)!important;}
.mobily-webview .nitem.active::after{display:none!important;}
.mobily-webview .nadd{flex:0 0 62px!important;width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;margin-inline:4px!important;margin-top:0!important;align-self:center!important;}

/* Desktop web uses a side rail, clearly different from the APK. */
@media (min-width:900px){
  .outer:not(.mobily-webview) .frame{padding-inline-start:94px!important;}
  .outer:not(.mobily-webview) .bnav{top:20px!important;bottom:20px!important;inset-inline-start:18px!important;inset-inline-end:auto!important;left:auto!important;right:auto!important;width:68px!important;height:auto!important;transform:none!important;flex-direction:column!important;justify-content:flex-start!important;gap:10px!important;padding:12px 8px!important;border-radius:22px!important;}
  .outer:not(.mobily-webview) .nitem{width:52px!important;min-width:52px!important;min-height:52px!important;justify-content:center!important;gap:3px!important;padding:6px 3px!important;}
  .outer:not(.mobily-webview) .nitem:active{background:rgba(56,189,248,.22)!important;outline:2px solid #38BDF8!important;outline-offset:-2px!important;}
  .outer:not(.mobily-webview) .nitem.active{background:rgba(56,189,248,.18)!important;outline:2px solid #38BDF8!important;outline-offset:-2px!important;box-shadow:0 0 16px rgba(56,189,248,.35)!important;}
  .outer:not(.mobily-webview) .nitem.active::after{display:none!important;}
  .outer:not(.mobily-webview) .nadd{order:10!important;margin:8px 0 0!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;flex:0 0 48px!important;box-shadow:0 8px 18px rgba(2,132,199,.28)!important;}
  .outer:not(.mobily-webview) .nlbl{font-size:9px!important;}
}

@media (min-width:1280px){
  .outer:not(.mobily-webview) .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (prefers-reduced-motion:reduce){.nitem,.nico-wrap,.scr,.awrap{animation:none!important;transition:none!important;}}