/* YOOBIZZ mobile UX v2 — trading rooms + navigation */
@media(max-width:680px){
  body{padding-bottom:18px}
  .top{height:58px!important;padding:8px 12px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important}
  .brand{font-size:22px!important}
  .nav{top:58px!important;height:52px!important;padding:6px 12px!important;gap:7px!important;background:#fff!important}
  .nav:after{content:'›';position:sticky;right:0;display:grid;place-items:center;flex:0 0 28px;height:40px;border-radius:20px;background:linear-gradient(90deg,rgba(255,255,255,.3),#fff 55%);font-size:25px;font-weight:900;color:#56708f;pointer-events:none}
  .nav a{min-height:40px!important;padding:0 14px!important;font-size:12px!important}

  .mobileMenuBtn{display:grid!important;place-items:center;width:42px;height:42px;border:1px solid #dde6f1;border-radius:13px;background:#fff;color:#102a4c;font-size:22px;font-weight:900;box-shadow:0 4px 12px rgba(16,42,76,.06)}
  .mobileDrawerBack{position:fixed;inset:0;background:rgba(7,25,48,.42);z-index:200;display:none}.mobileDrawerBack.open{display:block}
  .mobileDrawer{position:absolute;top:0;right:0;width:min(86vw,340px);height:100%;background:#fff;padding:18px;box-shadow:-14px 0 40px rgba(7,25,48,.18);overflow:auto}
  .mobileDrawerHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.mobileDrawerHead b{font-size:18px}.mobileDrawerClose{width:38px;height:38px;border:0;border-radius:12px;background:#f1f5fa;font-size:24px}
  .mobileDrawer a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:11px 10px;border-bottom:1px solid #edf1f6;font-weight:850;color:#102a4c}.mobileDrawer a:after{content:'›';color:#8190a3;font-size:20px}

  .hero{padding:18px 14px!important;gap:14px!important}
  .hero h1{font-size:31px!important;line-height:1.05!important;margin-bottom:8px!important}
  .hero p{font-size:14px!important;line-height:1.45!important}
  .heroFeatures{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:4px!important}
  .heroFeature{min-height:78px!important;padding:11px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;background:rgba(255,255,255,.05)!important;cursor:pointer!important;touch-action:manipulation}
  .heroFeature strong{font-size:13px!important}.heroFeature span{font-size:11px!important;line-height:1.25!important}

  .wrap{padding:10px!important}
  .proStrip{margin-left:-10px!important;margin-right:-10px!important;padding-left:10px!important;padding-right:10px!important}
  .proSubnav{margin:8px 0!important;padding-bottom:3px!important}
  .proSubnav a{min-height:44px!important}
  .proDesk{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .proDeskItem{padding:12px!important;min-height:98px!important}
  .proDeskItem b{font-size:19px!important;overflow-wrap:anywhere}

  .actionGrid{display:flex!important;overflow-x:auto!important;gap:9px!important;margin:0 0 12px!important;padding-bottom:3px!important;scroll-snap-type:x proximity}
  .actionGrid::-webkit-scrollbar{display:none}.actionCard{flex:0 0 76%!important;min-height:112px!important;padding:14px!important;scroll-snap-align:start}.actionCard strong{font-size:15px!important}.actionCard span{font-size:11px!important;line-height:1.35!important}

  .grid2,.grid3,.grid4{grid-template-columns:1fr!important;gap:10px!important}
  .grid2>.card.section:first-child{order:1}.grid2>.tradePanel{order:2}
  .chart{height:210px!important;border-radius:14px!important}
  .toolbar{align-items:flex-start!important;gap:8px!important}.toolbar>div{max-width:100%}.times,.tools{width:100%;overflow-x:auto!important;white-space:nowrap!important}.times::-webkit-scrollbar,.tools::-webkit-scrollbar{display:none}
  .pillBtn{min-height:40px!important;padding:9px 12px!important;display:inline-flex;align-items:center;justify-content:center}

  .tradePanel{padding:13px!important;border:2px solid #d9e6f5!important;box-shadow:0 10px 24px rgba(16,42,76,.07)!important}
  .tradePanel h3{font-size:20px;margin:2px 0 10px}
  .field{grid-template-columns:1fr!important;gap:5px!important;padding:8px 0!important}.field span{font-size:11px;font-weight:850;color:#60718a}.field input,.field select,.field .input{min-height:46px!important;font-size:16px!important;text-align:left!important}
  .buySell{position:sticky;bottom:8px;z-index:8;gap:8px!important;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);padding:7px 0;margin-bottom:8px!important}.buySell button{min-height:54px!important;font-size:15px!important}
  .cta{min-height:52px!important;font-size:15px!important;border-radius:14px!important}

  .kpis{grid-template-columns:1fr 1fr!important;gap:8px!important}.kpi{padding:11px!important}.kpi b{font-size:20px!important}
  .tableCard{overflow-x:auto!important;-webkit-overflow-scrolling:touch}.tableCard table{min-width:720px!important}
  .tabs{overflow-x:auto!important;scrollbar-width:none!important}.tabs::-webkit-scrollbar{display:none}

  #summary{grid-template-columns:1fr 1fr!important;gap:8px!important;padding:13px!important}#summary>div{padding:9px!important;border:1px solid #e3eaf2;border-radius:13px}#summary>div:first-child,#summary>div:last-child{grid-column:1/-1}#summary>div:first-child>div:nth-child(2){font-size:27px!important}

  .marketStrip{margin-left:-10px!important;margin-right:-10px!important;padding:0 10px 5px!important;scroll-snap-type:x proximity}.marketPill{min-width:155px!important;scroll-snap-align:start;padding:11px 12px!important}.marketPill .px{font-size:17px!important}

  .tradeTabs span{min-height:42px!important;display:grid;place-items:center}.statusBox{font-size:12px!important;line-height:1.4!important}
  .footerNote{padding:14px!important;font-size:12px!important}
}
@media(max-width:390px){
  .heroFeatures{grid-template-columns:1fr!important}.heroFeature{min-height:auto!important}.proDesk{grid-template-columns:1fr 1fr!important}.proDeskItem{min-height:92px!important}.actionCard{flex-basis:84%!important}#summary{grid-template-columns:1fr!important}#summary>div{grid-column:1!important}.kpis{grid-template-columns:1fr 1fr!important}
}
