/* Mobile trading workspace. Loaded last so it can normalize the legacy desktop rules. */
.fx-mobile-nav{display:none}

@media (max-width:759px){
  body.fx-focus-mode{
    background:#f1f5f9;
    overflow:hidden;
    overscroll-behavior:none;
  }

  body.fx-focus-mode .app,
  body.fx-focus-mode .workspace{height:100svh;height:100dvh;min-height:0}

  body.fx-focus-mode .content{
    width:100%;
    height:100svh;
    height:100dvh;
    padding:0 0 calc(78px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    overflow-anchor:none;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
  }

  #content .fx-pro-header{
    position:sticky;
    top:0;
    z-index:50;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    width:100%;
    min-height:116px;
    margin:0;
    padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;
    border:0;
    border-radius:0;
    background:linear-gradient(145deg,#0b1f3a 0%,#143b68 100%);
    color:#fff;
    box-shadow:0 7px 24px rgba(11,31,58,.18);
  }

  #content .fx-pro-header .fx-controls{
    display:grid;
    grid-template-columns:auto minmax(116px,1fr);
    gap:7px;
    min-width:0;
  }

  #content .fx-pro-header .fx-symbol-locked{
    min-width:104px;
    height:40px;
    justify-content:flex-start;
    padding:0 12px;
    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.1);
    color:#fff;
    font-size:15px;
    letter-spacing:.02em;
  }

  #content .fx-pro-header .fx-symbol-locked::before{background:#45d68a;box-shadow:0 0 0 4px rgba(69,214,138,.14)}
  #content .fx-pro-header .fx-profile-select{
    min-width:0;
    max-width:none;
    height:40px;
    border-color:rgba(255,255,255,.2);
    background:#fff;
    color:#0f2540;
    font-size:12px;
  }

  #content .fx-pro-header .fx-feed,
  #content .fx-pro-header .fx-quote{
    grid-column:1/-1;
    min-width:0;
    height:27px;
    justify-content:flex-start;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.1);
    color:#dbeafe;
    font-size:10px;
  }

  #content .fx-pro-header .fx-feed.live{color:#7ff0ae}
  #content .fx-pro-header .fx-toolbar-right{width:auto;align-items:flex-start;justify-content:flex-end}
  #content .fx-pro-header .fx-tabs{display:none}
  #content .fx-pro-header .fx-focus-toggle{
    width:40px;
    height:40px;
    padding:0;
    justify-content:center;
    border-color:rgba(255,255,255,.18);
    background:rgba(255,255,255,.1);
    color:#fff;
  }

  #content .fx-analysis-grid,
  #content .fx-method-grid,
  #content .fx-journal-layout,
  #content .fx-learning-layout,
  #content .fx-autonomy-dashboard-host + *{
    margin:10px;
  }

  #content .panel{
    border-color:#dbe3ec;
    border-radius:12px;
    box-shadow:0 1px 2px rgba(15,37,64,.04);
    overflow:hidden;
  }

  #content .panel-head{min-height:54px;padding:11px 12px}
  #content .panel-title b{font-size:13px}
  #content .panel-title span{font-size:11px;line-height:1.4}
  #content .fx-chart-wrap{
    height:360px!important;
    min-height:360px!important;
    padding:0;
    contain:layout paint;
    background:#fff;
  }

  #content .fx-chart-wrap canvas{touch-action:pan-y pinch-zoom}
  #content .fx-workstation-bar,
  #content .fx-wave-legend,
  #content .fx-degree-map,
  #content .fx-entry-seq,
  #content .fx-scenarios{
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  #content .fx-scenario{min-width:min(86vw,330px);scroll-snap-align:start}
  #content .fx-workstation-bar{padding:7px 9px}
  #content .fx-core-tool,
  #content .fx-work-btn,
  #content .fx-tool,
  #content .fx-tab,
  #content button,
  #content select{min-height:40px}

  #content .fx-degree-map{display:flex!important;overflow-x:auto;padding:9px}
  #content .fx-degree-summary{min-width:260px;scroll-snap-align:start}
  #content .fx-degree-slot{min-width:245px;scroll-snap-align:start}
  #content .fx-degree-fit{min-width:132px;min-height:64px;justify-content:center;scroll-snap-align:start}
  #content .fx-position-management{grid-template-columns:1fr}
  #content .fx-position-management header,
  #content .fx-position-management p{grid-column:1}
  #content .fx-plan-actions,
  #content .fx-plan-actions.three,
  #content .fx-plan-actions.four{grid-template-columns:1fr 1fr}

  .fx-mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:80;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:68px;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(148,163,184,.35);
    background:rgba(255,255,255,.96);
    box-shadow:0 -8px 30px rgba(15,37,64,.09);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .fx-mobile-nav button{
    min-width:0;
    min-height:52px;
    padding:5px 2px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#64748b;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font:600 10px/1.15 "Be Vietnam Pro",sans-serif;
  }

  .fx-mobile-nav button .icon{width:20px;height:20px}
  .fx-mobile-nav button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .fx-mobile-nav button.active{background:#eaf2fd;color:#0b5dcc;font-weight:700}
  .fx-mobile-nav button:active{transform:scale(.97)}
}

@media (max-width:390px){
  #content .fx-pro-header{min-height:112px;padding-left:10px;padding-right:10px}
  #content .fx-analysis-grid,
  #content .fx-method-grid,
  #content .fx-journal-layout,
  #content .fx-learning-layout{margin:8px}
  #content .fx-chart-wrap{height:330px!important;min-height:330px!important}
  .fx-mobile-nav button{font-size:9px}
}