/* design/navbar-common.css — the rules BOTH top bars share, loaded by the static pages (design/topmenu.js shim) AND the
 * terminal (desktop/index.html), together with design/navbar-motion.css. Owner 2026-09-29: "you again cannot handle
 * global menu bar" — one set of files for the landing, every inner page and the terminal. Both bars carry .msx-nav
 * (the static host #msx-topmenu, the terminal's .app root). */

/* FIT EVERY WIDTH (owner 2026-09-28). At 1440 px the bar needed 1522 px: the Assets button was cut off and
   opening it scrolled the page 42 px sideways. Now:
   - 1601 px and up: as before (the bar needs ~1540 px);
   - 1600 px and below: nav links 9 px padding, tighter gaps, a 160 px search, "Old Platform" as its icon
     (the title and aria-label stay);
   - 1366 px and below: a 124 px search and the Assets button as its icon + caret;
   - and whatever the width, brand and the right-hand group never shrink while the link row may: below
     ~1280 px it scrolls sideways inside itself instead of pushing the bar past the window. */
.msx-nav { --nav-pad-x: 12px; }
.msx-nav .topbar .nav button { padding-left: var(--nav-pad-x); padding-right: var(--nav-pad-x); }
.msx-nav .topbar .brand, .msx-nav .top-right { flex-shrink: 0; }
.msx-nav .topbar .nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.msx-nav .topbar .nav::-webkit-scrollbar { display: none; }
@media (max-width: 1600px) {
  .msx-nav { --nav-pad-x: 9px; }
  .msx-nav .topbar { gap: 16px; }
  .msx-nav .top-right { gap: 8px; }
  .msx-nav .topbar .tsearch { width: 160px; }
  .msx-nav .oldsite-btn { font-size: 0 !important; gap: 0 !important; padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 1366px) {
  .msx-nav .topbar .tsearch { width: 124px; }
  .msx-nav .assets-btn .assets-lbl { display: none; }
}

/* Trade menu (owner 2026-09-29): Spot · Futures · Copy trade. The link row scrolls sideways when narrow (overflow-x
   above), which CLIPPED an absolutely placed menu — it opened invisibly on every static page. It is placed FIXED under
   its button by navbar.js / app.js on open, so no scroller can clip it. */
.msx-nav .nav-trade{position:relative;display:inline-flex}
.msx-nav .nav-trade-menu{position:fixed;top:0;left:0;width:280px;max-width:92vw;padding:6px;background:var(--card,var(--surface,#14181E));border:1px solid var(--line,#252A33);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.45);z-index:300;display:none}
.msx-nav .nav-trade-menu.open{display:block}
.msx-nav .ntm-row{display:flex;align-items:center;padding:9px 10px;border-radius:8px;cursor:pointer}
.msx-nav .ntm-row:hover,.msx-nav .ntm-row:focus-visible{background:var(--elevated,#1C2127);outline:none}
.msx-nav .ntm-k{display:flex;flex-direction:column;gap:2px}
.msx-nav .ntm-k span{font-size:13px;color:var(--snow,#EDF1F5)}
.msx-nav .ntm-k small{font-size:11px;color:var(--mute,#8B95A3)}
/* a small down-chevron after every item that opens a menu */
.msx-nav .nav-car{display:inline-block;margin-left:4px;font-size:10px;line-height:1;opacity:.7;transition:transform .15s}
.msx-nav .nav-trade.open .nav-car{transform:rotate(180deg)}

/* Assets menu (owner 2026-10-14: "asset menu in landing home different with terminal … need to be same"). ONE component,
   design/assets-menu.js, builds it in both bars; these are its rules, the terminal's own (desktop/app.css "Assets menu"),
   here in the file both bars load so the panel, its rows and its Deposit / Withdraw / Transfer buttons look the same on
   every page. */
.msx-nav .am-wrap{position:relative;display:inline-grid}
.msx-nav .assets-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;height:auto;width:auto;border-radius:7px;background:var(--surface);border:1px solid var(--line);color:var(--snow);cursor:pointer;font-size:13px;font-weight:600}
.msx-nav .assets-btn:hover{border-color:var(--mint)}
.msx-nav .assets-btn .assets-ic{width:16px;height:16px;display:inline-flex;color:var(--mint)}
.msx-nav .assets-btn .assets-ic svg{width:16px;height:16px}
.msx-nav .assets-btn .assets-car{width:12px;height:12px;display:inline-flex;color:var(--mute)}
.msx-nav .assets-btn .assets-car svg{width:12px;height:12px}
.msx-nav .am-panel{position:absolute;top:42px;right:0;width:300px;min-width:0;max-width:92vw;padding:0;background:var(--card,var(--surface));border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.45);z-index:200;display:none;overflow:hidden;text-align:left}
.msx-nav .am-panel.open{display:block}
.msx-nav .am-panel .mono{font-family:var(--mono,"Geist Mono",ui-monospace,monospace);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.msx-nav .am-head{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:2px;margin:0;padding:14px 16px;border-bottom:1px solid var(--line)}
.msx-nav .am-head .am-total{font-size:22px}
.msx-nav .am-rows{padding:8px 6px}
.msx-nav .am-row{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:0}
.msx-nav .am-row .am-k{display:flex;flex-direction:column}
.msx-nav .am-row .am-k span{font-size:13px;color:var(--snow)}
.msx-nav .am-row .am-k small{font-size:11px}
.msx-nav .am-row strong{font-size:13px}
.msx-nav .am-row.am-nav{cursor:pointer;border-radius:8px}
.msx-nav .am-row.am-nav:hover{background:var(--elevated,#1a1d24)}
.msx-nav .am-car{width:11px;color:var(--mute);display:inline-flex;opacity:.7}
.msx-nav .am-acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px 12px 4px;border-top:1px solid var(--line)}
.msx-nav .am-act{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--snow);font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer}
.msx-nav .am-act:hover{border-color:var(--mint);color:var(--mint)}
.msx-nav .am-act svg{width:17px;height:17px}
.msx-nav .am-wallet{width:calc(100% - 24px);margin:8px 12px 12px;padding:9px;background:none;border:none;color:var(--mint);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;text-align:center}
.msx-nav .am-wallet:hover{text-decoration:underline}