/* Palette pinned to the TERMINAL values so the shared bar looks identical
   on pages whose token set differs (owner: "colors not load correctly"). */
.msx-nav{--mint:#00D68F;--bg:#0B0E11;--card:#101419;--elevated:#14181E;
  --line:#252A33;--snow:#EDF1F5;--muted:#8B95A3;--danger:#F6465D}
.msx-nav .tbtn.pri{background:#00D68F;color:#06231A;border-color:#00D68F;font-weight:700}
.msx-nav .av{background:#00D68F;color:#06231A;font-weight:800}
.msx-nav .am-total,.msx-nav .am-row strong{color:#EDF1F5}
/* mSamex global navbar — CSS lifted verbatim from the trading terminal
   (desktop/app.css) so static pages render the IDENTICAL bar. */
[dir="rtl"] .term, [dir="rtl"] .ticker, [dir="rtl"] .pair-strip, [dir="rtl"] .chart-stage, [dir="rtl"] .ob-scroll{direction: ltr;}
[dir="rtl"] .nav, [dir="rtl"] .top-right{direction: rtl;}
.brand{display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0;}
.brand .wm{font-weight: 700; font-size: 16px; letter-spacing: -0.03em; color: var(--snow);}
.brand .wm-s{color: var(--mint);}
.nav{display: flex; gap: 2px;}
.nav button{background: none; border: none; color: var(--snow-dim); font-size: 13.5px; font-weight: 500; padding: 7px 12px; border-radius: 6px; cursor: pointer;}
.nav button:hover{color: var(--snow);}
.nav button.active{color: var(--mint);}
.top-right{margin-left: auto; display: flex; align-items: center; gap: 10px;}
.tsearch{position: relative; display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; width: 200px;}
.tsearch svg{width: 15px; height: 15px; color: var(--mute);}
.tsearch input{flex: 1; min-width: 0; background: none; border: none; color: var(--snow); font-size: 13px;}
.tsearch input:focus{outline: none;}
.tsearch:focus-within{border-color: var(--mint);}
.tsearch-results{position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-width: 80vw; max-height: 380px; overflow-y: auto; background: var(--card, var(--surface)); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.45); z-index: 220; display: none;}
.tsearch-results.open{display: block;}
.tsearch-row{display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;}
.tsearch-row:hover, .tsearch-row.on{background: var(--elevated);}
.tsearch-row .ts-pair strong{font-size: 13px; display: block;}
.tsearch-row .ts-pair small{font-size: 11px;}
.tsearch-row .ts-px{font-size: 12.5px;}
.tsearch-empty{padding: 20px; text-align: center; color: var(--snow-dim); font-size: 13px;}
.ibtn{width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--line); background: none; color: var(--snow-dim); display: grid; place-items: center; cursor: pointer;}
.ibtn:hover{color: var(--snow); border-color: var(--mute);}
.ibtn svg{width: 16px; height: 16px;}
.tbtn{border: none; border-radius: 7px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;}
.tbtn.pri{background: var(--mint); color: var(--ink);}
.tbtn.ghost{background: var(--surface); color: var(--snow); border: 1px solid var(--line);}
.av{width: 32px; height: 32px; border-radius: 7px; background: var(--mint); color: var(--ink); border: none; font-weight: 700; font-size: 12px; cursor: pointer;}
.ticker:hover .ticker-track{animation-play-state: paused;}
[dir="rtl"] .ticker-track{animation-direction: reverse;}
.ticker-track{animation: none;}
.ticker::-webkit-scrollbar{display: none;}
.ticker button{display: flex; align-items: center; gap: 6px; padding: 0 14px; background: none; border: none; border-right: 1px solid var(--line-soft); white-space: nowrap; cursor: pointer; font-size: 12px; color: var(--snow-dim);}
.ticker button:hover{background: var(--elevated);}
.ticker strong{color: var(--snow); font-weight: 600;}
.tbtn.xs{padding: 3px 10px; font-size: 11px;}
.tbtn.xs.danger{color: var(--down); border-color: var(--down);}
.am-tab{flex: 1; background: transparent; border: none; border-radius: 6px; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--mute); cursor: pointer; transition: background .12s, color .12s;}
.am-tab.up.active{background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up);}
.am-tab.down.active{background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down);}
.am-max{background: var(--elevated); border: 1px solid var(--line); border-radius: 5px; color: var(--mint); font-size: 11px; font-weight: 600; padding: 4px 9px; margin: 0 8px; cursor: pointer;}
.am-max:hover{border-color: var(--mint);}
.am-proj{margin-top: 2px;}
.am-warn{background: color-mix(in srgb, var(--down) 11%, transparent); color: var(--down);}
.nav{display: none;}
.tbtn.ghost{background:transparent; border:1px solid var(--line); color:var(--snow);}
.tbtn.ghost:hover{border-color:var(--mint); color:var(--mint);}
.signin-gate .sg-cta .tbtn{min-width:120px;}
.ntf-bell{position: relative;}
.ntf-badge{position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--down, #f6465d); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 16px;}
.ntf-panel{position: absolute; top: 42px; right: 0; width: 360px; max-width: 92vw; 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;}
.ntf-panel.open{display: block;}
.ntf-head{display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line);}
.ntf-head strong{font-size: 14px;}
.ntf-allread{background: none; border: none; color: var(--mint); font-size: 12px; font-weight: 600; cursor: pointer;}
.ntf-list{max-height: 420px; overflow-y: auto;}
.ntf-empty{padding: 32px 18px; text-align: center; color: var(--snow-dim); font-size: 13px; line-height: 1.5;}
.ntf-row{display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft, var(--line)); cursor: pointer;}
.ntf-row:hover{background: var(--elevated);}
.ntf-row.unread{background: color-mix(in srgb, var(--mint) 7%, transparent);}
.ntf-dot{width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-top: 6px; flex-shrink: 0;}
.ntf-dot.r{background: transparent;}
.ntf-body{flex: 1; min-width: 0;}
.ntf-t{font-size: 13px; font-weight: 600; color: var(--snow);}
.ntf-m{font-size: 12.5px; color: var(--snow-dim); margin-top: 2px; line-height: 1.45;}
.ntf-ts{font-size: 11px; color: var(--mute, var(--snow-dim)); margin-top: 4px;}
.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;}
.assets-btn:hover{border-color: var(--mint);}
.assets-btn .assets-ic{width: 16px; height: 16px; display: inline-flex; color: var(--mint);}
.assets-btn .assets-ic svg{width: 16px; height: 16px;}
.assets-btn .assets-car{width: 12px; height: 12px; display: inline-flex; color: var(--mute);}
.assets-btn .assets-car svg{width: 12px; height: 12px;}
.am-panel{position: absolute; top: 42px; right: 0; width: 300px; max-width: 92vw; 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;}
.am-panel.open{display: block;}
.am-head{display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-bottom: 1px solid var(--line);}
.am-head .am-total{font-size: 22px;}
.am-rows{padding: 8px 6px;}
.am-row{display: flex; align-items: center; justify-content: space-between; padding: 9px 10px;}
.am-row .am-k{display: flex; flex-direction: column;}
.am-row .am-k span{font-size: 13px; color: var(--snow);}
.am-row .am-k small{font-size: 11px;}
.am-row strong{font-size: 13px;}
.am-row.am-nav{cursor: pointer; border-radius: 8px;}
.am-row.am-nav:hover{background: var(--elevated, #1a1d24);}
.am-car, .legi-car{width: 11px; color: var(--mute); display: inline-flex; opacity: .7;}
.legi.legi-nav{cursor: pointer; padding: 4px 6px; border-radius: 6px; margin: -4px -6px;}
.legi.legi-nav:hover{background: var(--elevated, #1a1d24);}
.am-acts{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 12px 4px; border-top: 1px solid var(--line);}
.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; cursor: pointer;}
.am-act:hover{border-color: var(--mint); color: var(--mint);}
.am-act svg{width: 17px; height: 17px;}
.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; cursor: pointer; text-align: center;}
.am-wallet:hover{text-decoration: underline;}

/* component shell (host gets .msx-nav): the terminal gets these from its .app layout — supply the
   minimum so the lifted bar sits correctly on a plain page. */
.msx-nav{position:sticky;top:0;z-index:70;background:var(--bg,#0B0E11)}
.msx-nav .topbar{max-width:none}
.msx-nav .tsearch-results{display:none}
.msx-nav .tsearch-results.open{display:block}
.msx-nav .tsr-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;color:var(--snow,#EDF1F5);text-decoration:none;font:600 12.5px Geist,system-ui,sans-serif}
.msx-nav .tsr-row:hover{background:var(--elevated,#14181E)}
.msx-nav .ntf-panel,.msx-nav .am-panel{display:none}
.msx-nav .ntf-panel.open,.msx-nav .am-panel.open{display:block}
.msx-nav .ntf-wrap,.msx-nav .assets-wrap{position:relative}
.msx-nav .ntf-empty{padding:16px;color:var(--muted,#8B95A3);font:500 12.5px Geist,system-ui,sans-serif}
.msx-nav .ticker-track{display:inline-block;white-space:nowrap;animation:msxTk 90s linear infinite}
.msx-nav .ticker:hover .ticker-track{animation-play-state:paused}
@keyframes msxTk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.msx-nav .tk{display:inline-flex;gap:7px;align-items:baseline;margin:0 18px;font:600 12px "Geist Mono",ui-monospace,monospace;color:var(--snow,#EDF1F5);text-decoration:none}
.msx-nav .tk .up{color:var(--mint,#00D68F)}.msx-nav .tk .dn{color:#F6465D}
.msx-nav .am-panel{position:absolute;right:0;top:115%;min-width:290px;background:var(--card,#101419);border:1px solid var(--line,#252A33);border-radius:14px;padding:12px;box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:80}
.msx-nav .am-head{display:flex;justify-content:space-between;align-items:baseline;padding:4px 6px 10px;border-bottom:1px solid var(--line,#252A33);margin-bottom:6px}
.msx-nav .am-row{display:flex;justify-content:space-between;align-items:center;padding:9px 6px;border-radius:9px}
.msx-nav .am-row.am-nav{cursor:pointer}.msx-nav .am-row.am-nav:hover{background:var(--elevated,#14181E)}
.msx-nav .am-k{display:flex;flex-direction:column}.msx-nav .am-k small{font-size:10.5px}
.msx-nav .am-cta{display:flex;gap:8px;margin-top:8px}
.msx-nav .am-cta .tbtn{flex:1;text-align:center;text-decoration:none;padding:9px 0}
.msx-nav .ntf-panel{position:absolute;right:0;top:115%;width:330px;max-height:420px;overflow:auto;background:var(--card,#101419);border:1px solid var(--line,#252A33);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:80}
.msx-nav .ntf-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;border-radius:9px;background:#F6465D;color:#fff;font:700 10px Geist,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;padding:0 4px}
@media (max-width:900px){.msx-nav .tsearch input{width:120px}.msx-nav .oldsite-btn{display:none!important}}


/* brand wordmark: terminal uses pure white */
.msx-nav .brand .wm{color:#FFFFFF}
.msx-nav .topbar{height:52px}

@media (max-width:820px){ .msx-nav .ticker{display:none} }


/* The terminal hides .nav in some of its own layout states (owner saw a BLANK
   bar at 1728px). Inside the shared component the nav must ALWAYS show. */
.msx-nav .nav{display:flex!important;align-items:center;gap:2px;flex-wrap:nowrap}   /* 2px = terminal value; buttons carry their own 7px/12px padding */
.msx-nav .nav button{display:inline-block!important;white-space:nowrap}
@media (max-width:1000px){ .msx-nav .nav{gap:0} }

/* BASE LAYOUT (added 2026-09-06). navbar.css shipped only overrides —
   .msx-nav .topbar{max-width}/{height} — while the actual flex layout stayed
   in desktop/app.css. Any page that does not load app.css rendered the bar
   stacked. /ai/ and /docs/api/ were the first such consumers. */
.msx-nav .topbar{display: flex; align-items: center; gap: 22px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--bg);}
.msx-nav .tsearch{position: relative; display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; width: 200px;}
.msx-nav .tsearch input{flex: 1; min-width: 0; background: none; border: none; color: var(--snow); font-size: 13px;}
.msx-nav .av{width: 32px; height: 32px; border-radius: 7px; background: var(--mint); color: var(--ink); border: none; font-weight: 700; font-size: 12px; cursor: pointer;}
.msx-nav .ntf-bell{position: relative;}


/* The marquee track is intentionally many screens wide. Without overflow:hidden
   on its container the PAGE scrolls sideways — the terminal gets this from
   app.css, which a standalone page does not load. Added 2026-09-06.
   Deliberately does NOT redeclare .ticker-track: line ~118 already sets
   inline-block + the msxTk animation, and a later duplicate would override it. */
.msx-nav .ticker{overflow:hidden;height:30px;flex-shrink:0;border-bottom:1px solid var(--line);background:var(--surface)}

/* Rendered by paintAuthZone when a user is signed in. Without .auth-zone the
   Assets button and avatar stack instead of sitting in a row — the signed-out
   bar looked fine because that path renders plain buttons. Added 2026-09-06. */
.msx-nav .auth-zone{display:flex; align-items:center; gap:8px;}
.msx-nav .mono{font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;}