/* v0.7.1: iOS Chrome ONLY. Safari keeps the v0.7.0 layout unchanged.
   CriOS WebKit toolbar resizing can desynchronize a detached fixed header
   from the scrolling document. This branch keeps chrome/hero in normal flow;
   a sticky (not fixed) brand and project bar remain attached to the DOM.
   Horizontal layouts stay responsive without a second scroll container. */
@media screen and (max-width:620px){
 html.tradeos-crios,
 html.tradeos-crios body.tradeos-shell,
 html.tradeos-crios body.tradeos-shell #app{
  height:auto!important;max-height:none!important;
  overflow-x:visible!important;overflow-y:visible!important;
  overscroll-behavior-y:auto!important;
  transform:none!important;contain:none!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout{
  display:block!important;position:static!important;
  padding:0!important;margin:0!important;
  min-height:100vh!important;height:auto!important;
  overflow:visible!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar{
  position:sticky!important;top:0!important;z-index:200!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  flex-direction:row!important;flex-wrap:nowrap!important;
  height:56px!important;min-height:56px!important;
  width:100%!important;max-width:100%!important;
  padding:7px max(10px,env(safe-area-inset-left,0px))!important;
  border:0!important;border-bottom:1px solid var(--line)!important;
  background:var(--sidebar-bg)!important;
  overflow:visible!important;transform:none!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar>.brand{
  display:flex!important;align-items:center!important;flex:1 1 auto!important;
  min-width:0!important;padding:0!important;margin:0!important;
  font-size:clamp(14px,4vw,18px)!important;white-space:nowrap!important;gap:7px!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar>.brand .brandmark{
  width:32px!important;height:32px!important;flex:0 0 32px!important;font-size:16px!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar>.quick-home,
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar>.mobile-menu-toggle{
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;height:39px!important;min-height:39px!important;
  margin:0!important;padding:7px 9px!important;
  border:1px solid var(--line)!important;border-radius:10px!important;
  background:var(--panel-bg)!important;color:var(--text)!important;
  font-size:13px!important;font-weight:750!important;white-space:nowrap!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar>.nav{
  display:none!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar.menu-open>.nav{
  position:absolute!important;display:grid!important;
  top:100%!important;left:0!important;right:0!important;z-index:225!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;max-height:65svh!important;overflow-y:auto!important;overflow-x:hidden!important;
  gap:5px!important;padding:10px!important;
  border:1px solid var(--line)!important;
  border-radius:0 0 12px 12px!important;
  background:var(--sidebar-bg)!important;
  box-shadow:0 16px 28px #000a!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar.menu-open>.nav button{
  min-width:0!important;white-space:normal!important;text-align:left!important;
  font-size:12px!important;padding:9px!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar.menu-open .nav-appearance{
  grid-column:1/-1!important;min-width:0!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.main{
  position:static!important;display:block!important;
  height:auto!important;overflow:visible!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.main>.top{
  position:sticky!important;top:56px!important;z-index:180!important;
  height:auto!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  gap:7px!important;margin:0!important;padding:9px 12px 10px!important;
  background:var(--top-bg)!important;border-bottom:1px solid var(--line)!important;
  overflow:visible!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.main>.top>.right{
  display:flex!important;flex-wrap:wrap!important;width:100%!important;
  align-items:center!important;gap:6px!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.main>.top>.right>select{
  flex:1 1 96px!important;min-width:90px!important;width:auto!important;
  min-height:40px!important;font-size:16px!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.main>.top .btn{
  flex:0 0 auto!important;padding:8px 9px!important;font-size:11px!important;
 }
 html.tradeos-crios body.tradeos-shell #app>.layout>.main>.page{
  position:relative!important;padding:17px 13px 80px!important;
  margin:0 auto!important;overflow:visible!important;
 }
 html.tradeos-crios body.tradeos-shell #app .intro{
  position:static!important;margin-bottom:18px!important;
  display:flex!important;flex-wrap:wrap!important;
 }
 html.tradeos-crios body.tradeos-shell #tradeosFixedChrome{display:none!important}
 html.tradeos-crios body.tradeos-shell #app :is(input,select,textarea,button){
  scroll-margin-top:170px!important;
 }
}
@media screen and (max-width:360px){
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar>.quick-home,
 html.tradeos-crios body.tradeos-shell #app>.layout>.sidebar>.mobile-menu-toggle{
  padding:6px 7px!important;font-size:12px!important;
 }
}
html.tradeos-crios #criosBackToTop{
 position:fixed;z-index:400;right:16px;
 bottom:calc(24px + env(safe-area-inset-bottom,0px));
 background:var(--accent,#ff974d);color:#101722;
 border:1px solid #ffca96;border-radius:99px;
 box-shadow:0 8px 24px #0008;padding:12px 16px;
 font-size:14px;font-weight:800;touch-action:manipulation;
}
html.tradeos-crios #criosBackToTop[hidden]{display:none!important}