/*
 * NEXUS Terminal — Market Overview
 * Frontend-only, scoped to the Figma 1440×1050 market screen.
 * Shared tokens and styles are compatible with ASP.NET Core MVC Razor Views.
 */
:root {
  --bg:#090f21;
  --sidebar:#0c142a;
  --card:#111a33;
  --raised:#182341;
  --line:#293351;
  --purple:#855bff;
  --violet:#b9a6ff;
  --cyan:#59d4f1;
  --green:#38d8ae;
  --red:#ff718f;
  --white:#f5f6ff;
  --muted:#95a3c4;
  --muted2:#657496;
  --radius:17px;
  color-scheme:dark
}
 *, *::before, *::after {
  box-sizing:border-box
}
 html {
  scroll-behavior:smooth
}
 body {
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--white);
  font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif;
  font-size:13px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
 button, input, a {
  font:inherit
}
 button {
  color:inherit;
  cursor:pointer
}
 a {
  color:inherit;
  text-decoration:none
}
 a:hover, button:hover {
  filter:brightness(1.1)
}
 button:focus-visible, a:focus-visible, input:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px
}
svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
 bdi, [dir=ltr], .english {
  font-family:"Inter",Arial,sans-serif
}
 input {
  outline:none
}
 [hidden] {
  display:none!important
}
 .app-shell {
  display:flex;
  flex-direction:row;
  align-items:stretch;
  min-height:100vh;
  direction:rtl
}
 .sidebar {
  background:var(--sidebar);
  width:240px;
  flex:0 0 240px;
  border-left:1px solid var(--line);
  min-height:100vh;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:29px 16px 22px;
  z-index:4
}
 .brand {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  width:100%;
  padding:0 11px;
  line-height:1.1
}
 .brand-mark {
  height:42px;
  width:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--purple);
  border-radius:13px;
  font-family:Inter,Arial,sans-serif;
  font-size:22px;
  font-weight:700;
  order:0
}
 .brand-name {
  display:flex;
  flex-direction:column;
  gap:4px;
  direction:ltr;
  text-align:right
}
 .brand-name strong {
  font-family:Inter,Arial,sans-serif;
  font-size:21px;
  font-weight:600;
  letter-spacing:-.45px
}
 .brand-name small {
  font-family:Inter,Arial,sans-serif;
  font-size:9px;
  color:var(--violet);
  letter-spacing:.2px
}
 .nav-caption {
  font-size:11px;
  color:var(--muted2);
  margin:52px 17px 23px
}
 .side-nav {
  display:flex;
  flex-direction:column;
  gap:13px
}
 .nav-link {
  width:100%;
  height:47px;
  border:0;
  background:transparent;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 17px;
  color:var(--muted);
  font-size:13px;
  text-align:right
}
 .nav-link.active, .nav-link:hover {
  background:#261f4c;
  color:var(--white)
}
 .nav-link.active svg {
  color:var(--violet)
}
 .nav-link svg {
  height:18px;
  width:18px
}
 .sidebar-footer {
  margin-top:auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  height:105px;
  padding:17px 15px 8px;
  display:flex;
  flex-direction:column
}
 .provider-title {
  font-weight:700;
  font-size:12px;
  display:flex;
  gap:9px;
  align-items:center
}
 .status-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
  background:var(--green);
  flex-shrink:0
}
 .status-dot.inactive {
  background:var(--muted2)
}
 .provider-sub {
  font-size:11px;
  color:var(--muted);
  margin-top:14px;
  text-align:right
}
 .provider-foot {
  font-size:10px;
  color:var(--muted2);
  margin-top:auto;
  text-align:right
}
 .main-stage {
  flex:1;
  min-width:0;
  max-width:calc(100vw - 240px);
  min-height:100vh
}
 .topbar {
  height:82px;
  border-bottom:1px solid var(--line);
  margin:0 31px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
 .topbar-status {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:13px
}
 .topbar-status svg {
  width:20px;
  height:20px;
  color:var(--green)
}
 .topbar-crumb {
  font-size:12px;
  color:var(--muted);
  text-align:left
}
 .mobile-topbar, .mobile-bottom {
  display:none
}
 .market-intro {
  position:relative;
  height:140px;
  margin:0 32px
}
 .mode-badge {
  position:absolute;
  top:11px;
  left:0;
  padding:5px 17px;
  min-width:115px;
  height:27px;
  border-radius:9px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  direction:ltr;
  font:600 10px Inter,Arial,sans-serif;
  letter-spacing:.1px
}
 .mode-badge.is-demo {
  background:#2a2345;
  color:var(--violet)
}
 .mode-badge.is-live {
  background:#183b39;
  color:var(--green)
}
 .headline {
  position:absolute;
  right:0;
  top:25px;
  text-align:right
}
 .headline h1 {
  font-size:31px;
  line-height:1.55;
  margin:0 0 5px;
  font-weight:700;
  letter-spacing:-.6px
}
 .headline p {
  font-size:13px;
  color:var(--muted);
  margin:0
}
 .mobile-heading, .mobile-subheading {
  display:none
}
 .data-notice {
  margin:-3px 32px 15px;
  color:var(--violet);
  border:1px solid #3b3064;
  background:#191632;
  padding:8px 14px;
  border-radius:9px;
  font-size:11px
}
 .stats-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  direction:rtl;
  gap:16px;
  margin:0 32px
}
 .stat-card {
  height:123px;
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:17px;
  padding:16px 22px 13px;
  text-align:right
}
 .stat-card p {
  margin:0;
  font-size:12px;
  color:var(--muted);
  font-weight:400
}
 .stat-card strong {
  display:block;
  margin-top:13px;
  font:600 28px/1.4 Inter,"Noto Sans Arabic",sans-serif;
  text-align:right;
  direction:ltr
}
 .stat-card small {
  display:block;
  margin-top:7px;
  font-size:11px;
  color:var(--muted2)
}
 .stat-spot {
  position:absolute;
  top:22px;
  left:18px;
  width:8px;
  height:8px;
  border-radius:50%
}
 .stat-spot.purple {
  background:var(--purple)
}
 .stat-spot.green {
  background:var(--green)
}
 .stat-spot.violet {
  background:var(--violet)
}
 .stat-spot.cyan {
  background:var(--cyan)
}
 .market-card {
  margin:29px 32px 34px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:17px;
  padding:23px 22px 17px;
  min-height:639px
}
 .market-card-head {
  height:73px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between
}
 .market-card-head h2 {
  margin:0;
  font-size:20px;
  line-height:1.5
}
 .market-card-head p {
  margin:2px 0 0;
  font-size:12px;
  color:var(--muted)
}
 .filter-link {
  border:0;
  background:none;
  color:var(--violet);
  display:flex;
  gap:9px;
  align-items:center;
  font-size:12px;
  font-weight:700;
  padding:6px 4px
}
 .filter-link svg {
  width:18px;
  height:18px
}
 .mobile-market-header {
  display:none
}
 .market-tools {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  height:44px;
  margin-bottom:16px
}
 .quote-switch {
  background:var(--raised);
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  min-width:335px;
  height:44px
}
 .quote-option {
  height:36px;
  flex:1;
  min-width:0;
  border-radius:9px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap
}
 .quote-option.selected {
  background:var(--purple);
  color:var(--white);
  font-weight:700
}
 .quote-option bdi {
  font-size:11px
}
 .search-form {
  height:44px;
  width:454px;
  max-width:100%;
  border-radius:11px;
  background:var(--bg);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 15px
}
 .search-form svg {
  width:18px;
  height:18px;
  color:var(--muted)
}
 .search-form input {
  color:var(--white);
  background:transparent;
  border:0;
  width:100%;
  min-width:0;
  font-size:12px
}
 .search-form input::placeholder {
  color:var(--muted)
}
 .search-form input::-webkit-search-cancel-button {
  filter:invert(1)
}
 .extra-filters {
  background:#17213b;
  padding:10px 12px;
  border-radius:10px;
  display:flex;
  gap:12px;
  margin-bottom:8px
}
 .chip {
  display:inline-block;
  background:var(--raised);
  border-radius:8px;
  padding:5px 12px;
  font-size:11px
}
 .market-table {
  border-top:1px solid var(--line);
  width:100%;
  margin-top:0
}
 .table-row {
  display:grid;
  grid-template-columns:minmax(160px,224px) minmax(145px,182px) minmax(125px,150px) minmax(135px,160px) minmax(140px,182px) minmax(116px,190px);
  direction:rtl;
  align-items:center
}
 .table-heading {
  height:55px;
  border-bottom:1px solid var(--line);
  color:var(--muted2);
  font-size:11px;
  padding:0 12px
}
 .table-heading span {
  text-align:right;
  padding-right:6px
}
 .market-row {
  height:62px;
  min-height:62px;
  position:relative;
  margin:0 -11px;
  padding:0 23px;
  border-bottom:1px solid rgba(41,51,81,.7)
}
 .market-row:nth-of-type(odd) {
  background:#141d37;
  border-radius:8px
}
 .market-row:hover {
  background:#1b2743
}
 .coin-identity {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0
}
 .coin-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--coin-bg,#4d649c);
  font-family:Inter,"Noto Sans Arabic",sans-serif;
  font-size:16px;
  color:white;
  font-weight:600;
  direction:ltr
}
 .coin-logo.large {
  width:49px;
  height:49px;
  flex-basis:49px;
  font-size:24px
}
 .coin-name {
  display:flex;
  flex-direction:column;
  line-height:1.4
}
 .coin-name strong {
  font-size:13px
}
 .coin-name small {
  font:11px Inter,Arial,sans-serif;
  color:var(--muted);
  margin-top:4px
}
 .price-value {
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  direction:rtl;
  text-align:right
}
 .change-value {
  font-size:13px;
  font-weight:700;
  direction:ltr;
  text-align:right
}
 .up {
  color:var(--green)!important
}
 .down {
  color:var(--red)!important
}
 .volume-value {
  font-size:12px;
  color:var(--muted);
  white-space:nowrap
}
 .spark-cell {
  height:55px;
  display:flex;
  align-items:center
}
 .sparkline {
  width:126px;
  height:40px;
  overflow:visible
}
 .spark-cell small, .mobile-price-currency {
  display:none
}
 .alert-cell {
  display:flex;
  justify-content:center;
  align-items:center
}
 .alert-pill {
  background:#252c46;
  border:0;
  border-radius:9px;
  min-width:89px;
  height:31px;
  font-size:10px;
  color:var(--muted)
}
 .alert-pill.active {
  background:#183d3a;
  color:var(--green)
}
 .favorite-button {
  position:absolute;
  right:7px;
  top:20px;
  background:none;
  border:0;
  color:#7180a6;
  opacity:0;
  transition:opacity .15s;
  padding:4px
}
 .market-row:hover .favorite-button, .favorite-button.on, .favorite-button:focus-visible {
  opacity:1
}
 .favorite-button svg {
  height:16px;
  width:16px
}
 .favorite-button.on {
  color:#b9a6ff
}
 .favorite-button.on svg {
  fill:#b9a6ff
}
 .market-footer {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 5px 0;
  min-height:44px;
  color:var(--muted2);
  font-size:11px
}
 .pages {
  display:flex;
  gap:13px;
  direction:ltr
}
 .pages a {
  font:600 12px Inter,"Noto Sans Arabic",sans-serif;
  color:var(--violet)
}
 .pages a.active {
  color:var(--white)
}
 .empty-state {
  padding:36px;
  text-align:center;
  color:var(--muted)
}
 .mini-toggle {
  position:absolute;
  bottom:12px;
  left:14px;
  font-size:10px;
  color:var(--violet);
  background:transparent;
  border:0
}
 .primary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  background:var(--purple);
  border-radius:12px;
  color:var(--white);
  font-size:13px;
  font-weight:700;
  padding:13px 20px
}
 .primary-button svg {
  width:17px;
  height:17px
}
 .drawer-backdrop {
  position:fixed;
  inset:0;
  background:#020613ad;
  opacity:0;
  pointer-events:none;
  z-index:15;
  transition:opacity .2s
}
 .drawer-backdrop.open {
  opacity:1;
  pointer-events:auto
}
 .drawer {
  position:fixed;
  z-index:16;
  inset:0 0 0 auto;
  right:0;
  width:min(410px,100vw);
  background:var(--sidebar);
  border-left:1px solid var(--line);
  transform:translateX(105%);
  transition:transform .23s ease;
  box-shadow:-10px 0 60px #0005;
  display:flex;
  flex-direction:column
}
 .drawer.open {
  transform:translateX(0)
}
 .drawer-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:23px;
  border-bottom:1px solid var(--line)
}
 .drawer-heading h2 {
  margin:0;
  font-size:18px
}
 .icon-button {
  border:1px solid var(--line);
  background:var(--card);
  border-radius:8px;
  width:34px;
  height:34px;
  font-size:20px
}
 .drawer-body {
  padding:24px;
  overflow:auto
}
 .drawer-body p {
  color:var(--muted);
  font-size:12px
}
 .drawer-body label {
  display:block;
  margin:18px 0;
  color:var(--white);
  font-size:12px
}
 .drawer-body input, .drawer-body select {
  display:block;
  width:100%;
  padding:12px 14px;
  margin:8px 0 0;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--white);
  border-radius:10px
}
 .drawer-body .primary-button {
  width:100%;
  margin-top:10px
}
 .drawer-empty {
  padding:18px;
  background:var(--card);
  border-radius:12px;
  color:var(--muted)
}
 .drawer-record {
  padding:14px;
  margin-bottom:9px;
  border-radius:10px;
  background:var(--card);
  border:1px solid var(--line)
}
 .drawer-record strong {
  display:block
}
 .drawer-record small {
  color:var(--muted)
}
 .drawer-record button {
  background:transparent;
  border:0;
  color:var(--violet);
  padding:5px 0
}
 .drawer-warning {
  color:var(--violet)!important
}
 .toast {
  position:fixed;
  bottom:32px;
  left:30px;
  z-index:25;
  background:#28204e;
  color:var(--white);
  border:1px solid #6856a1;
  border-radius:10px;
  padding:12px 18px;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:.2s
}
 .toast.show {
  opacity:1;
  transform:translateY(0)
}
 @media (max-width:700px) {
   body {
    font-size:12px
  }
   .app-shell {
    display:block
  }
   .sidebar, .topbar {
    display:none
  }
   .main-stage {
    max-width:100%;
    width:100%
  }
   .mobile-topbar {
    height:80px;
    border-bottom:1px solid var(--line);
    margin:0 17px;
    display:flex;
    justify-content:space-between;
    align-items:center
  }
   .mobile-topbar .brand {
    padding:0;
    width:auto;
    gap:10px;
    margin-right:10px
  }
   .mobile-topbar .brand-mark {
    height:40px;
    width:40px;
    border-radius:12px;
    font-size:21px
  }
   .mobile-topbar .brand-name strong {
    font-size:20px
  }
   .mobile-topbar .brand-name small {
    font-size:9px
  }
   .mobile-action {
    width:40px;
    height:39px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--violet)
  }
   .mobile-action svg {
    width:19px;
    height:19px
  }
   .mobile-bottom {
    display:flex;
    height:46px;
    position:fixed;
    z-index:5;
    bottom:0;
    left:0;
    right:0;
    background:#0e1730;
    border-top:1px solid var(--line);
    align-items:center;
    justify-content:space-around
  }
   .mobile-bottom>a, .mobile-bottom>button {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    height:100%;
    background:none;
    border:0;
    color:var(--muted);
    font-size:11px
  }
   .mobile-bottom .active {
    color:var(--violet);
    font-weight:700
  }
   .market-page {
    padding-bottom:67px
  }
   .market-intro {
    height:104px;
    margin:0 19px
  }
   .mode-badge {
    top:24px;
    left:0;
    background:#1d3b3b!important;
    color:var(--green)!important;
    min-width:107px;
    height:28px;
    font-size:9px
  }
   .headline {
    top:18px;
    right:0
  }
   .headline h1 {
    font-size:25px;
    line-height:1.65
  }
   .desktop-heading, .desktop-subheading {
    display:none
  }
   .mobile-heading, .mobile-subheading {
    display:block
  }
   .headline .mobile-heading {
    font-size:25px
  }
   .headline .mobile-subheading {
    max-width:290px
  }
   .headline p {
    font-size:12px;
    max-width:290px
  }
   .data-notice {
    font-size:10px;
    margin:0 19px 11px
  }
   .stats-grid {
    margin:0 19px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px
  }
   .stat-card {
    height:101px;
    border-radius:13px;
    padding:16px 12px
  }
   .stat-card p {
    font-size:11px
  }
   .stat-card strong {
    font-size:23px;
    margin-top:16px
  }
   .stat-card small {
    display:none
  }
   .stat-spot {
    display:none
  }
   .stat-markets, .stat-favorites {
    display:none
  }
   .stat-exchange {
    grid-column:2;
    grid-row:1
  }
   .stat-alerts {
    grid-column:1;
    grid-row:1
  }
   .market-card {
    margin:17px 19px 0;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    min-height:0
  }
   .market-card-head {
    display:none
  }
   .mobile-market-header {
    display:block;
    text-align:right;
    height:80px;
    padding-top:14px
  }
   .mobile-market-header h2 {
    font-size:20px;
    margin:0;
    line-height:1.5
  }
   .mobile-market-header p {
    margin:3px 0 0;
    font-size:11px;
    color:var(--muted)
  }
   .market-tools {
    height:auto;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:17px
  }
   .quote-switch {
    min-width:0;
    width:100%;
    height:48px;
    border-radius:11px
  }
   .quote-option {
    height:40px;
    font-size:12px
  }
   .search-form {
    width:100%;
    height:48px;
    background:var(--card);
    border-radius:11px
  }
   .search-form {
    flex-direction:row-reverse
  }
   .search-form input {
    text-align:right
  }
   .market-table {
    border:0;
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:9px
  }
   .table-heading {
    display:none
  }
   .market-row {
    height:100px;
    min-height:100px;
    border:1px solid var(--line);
    border-radius:12px!important;
    margin:0;
    padding:9px 12px;
    background:var(--card)!important;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:27px 28px 34px;
    grid-template-areas:"coin price" "coin change" "spark spark";
    overflow:hidden;
    position:relative;
    direction:rtl
  }
   .coin-identity {
    grid-area:coin;
    align-self:start;
    gap:9px;
    margin-top:2px
  }
   .coin-logo {
    flex-basis:33px;
    width:33px;
    height:33px
  }
   .coin-name strong {
    font-size:12px
  }
   .coin-name small {
    font-size:10px
  }
   .price-value {
    grid-area:price;
    text-align:left;
    font-size:15px;
    align-self:start;
    direction:ltr
  }
   .change-value {
    grid-area:change;
    text-align:left;
    font-size:11px;
    align-self:start;
    direction:ltr
  }
   .volume-value, .alert-cell, .favorite-button {
    display:none
  }
   .spark-cell {
    grid-area:spark;
    border-top:1px solid var(--line);
    height:36px;
    display:flex;
    flex-direction:row-reverse;
    align-items:center;
    justify-content:space-between
  }
   .sparkline {
    width:126px;
    height:36px
  }
   .spark-cell small {
    display:inline;
    color:var(--muted2);
    font-size:10px
  }
   .market-footer {
    margin-top:9px;
    flex-wrap:wrap;
    gap:10px;
    font-size:10px
  }
   .market-footer>span {
    display:none
  }
   .empty-state {
    border:1px solid var(--line);
    border-radius:12px
  }
   .drawer {
    width:min(390px,100vw)
  }
   .toast {
    bottom:60px;
    left:13px;
    right:13px
  }
  
}
 @media (max-width:375px) {
   .headline h1 {
    font-size:23px
  }
  
}
 @media (min-width:701px) {
   .topbar-detail {
     flex-direction:row;
    
  }
   .topbar-detail .topbar-crumb {
     text-align:right;
    
  }
   .topbar-return {
     color:var(--violet);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    
  }
   .market-intro .headline {
     top:43px;
    
  }
  
}
 .mobile-provider-badge {
   display:none;
  
}
 @media (max-width:700px) {
   .market-intro .mode-badge {
     display:none;
    
  }
   .market-intro .mobile-provider-badge {
         display:inline-flex;
    align-items:center;
    flex-direction:row;
    justify-content:space-between;
         direction:rtl;
    position:absolute;
    top:24px;
    left:0;
    background:#1d3b3b;
    color:#38d8ae;
         border-radius:9px;
    min-width:107px;
    height:28px;
    padding:0 12px;
         font:600 9px Inter,Arial,sans-serif;
    letter-spacing:.1px;
    
  }
   .mobile-provider-badge .provider-dot {
     background:#38d8ae;
    width:8px;
    height:8px;
    border-radius:50%;
    
  }
   .figma-mobile-action-icon {
     font:400 27px/1 Inter,Arial,sans-serif;
    color:var(--violet);
    
  }
  
}
 .visually-hidden {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}
 .mobile-quote-code {
  display:none
}
 @media (max-width:700px) {
   .desktop-quote-code {
    display:none
  }
   .mobile-quote-code {
    display:inline
  }
  
}
 :root {
   --market-design-width: 1440;
  
}
 html {
   background:var(--bg);
  
}
 body {
   overflow-x:hidden;
  
}
 @media (min-width:701px) and (max-width:1439px) {
   #nexus-app {
     width:1440px;
     min-width:1440px;
     max-width:none;
         zoom:var(--nexus-scale,1);
    
  }
   #nexus-app .main-stage {
     max-width:1200px;
    
  }
   #nexus-app .sidebar {
     width:240px;
     flex-basis:240px;
    
  }
   #nexus-app .stats-grid {
     grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    
  }
   #nexus-app .market-card {
     overflow:visible;
    
  }
   #nexus-app .market-table {
     min-width:0;
    display:block;
    
  }
   #nexus-app .table-row {
     grid-template-columns:minmax(160px,224px) minmax(145px,182px) minmax(125px,150px) minmax(135px,160px) minmax(140px,182px) minmax(116px,190px);
    
  }
  
}
 @media (min-width:1440px) {
   #nexus-app {
    width:1440px;
    margin:0 auto;
    
  }
  
}
 @media (max-width:700px) {
   #nexus-app {
    width:100%;
    min-width:0;
    zoom:1;
    
  }
  
}
 @media (min-width:701px) {
   .market-intro .headline {
    top:43px;
    
  }
   .market-row .spark-cell svg {
    transform:translateX(-11px);
    
  }
  
}
 .sr-only {
   position:absolute!important;
   width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
  
}
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important
  }
  
}
 .drawer:focus {
  outline:none
}
 .quote-option {
  border:0;
  cursor:pointer
}
 .quote-option:hover {
  filter:brightness(1.08)
}
 .market-footer .pages button {
  border:0;
  background:none;
  color:var(--violet);
  font:600 12px Inter,"Noto Sans Arabic",sans-serif;
  cursor:pointer
}
 .market-footer .pages button:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px
}
 @media (min-width:701px) {
   .market-card-head {
    height:73px
  }
   .market-footer {
    padding-top:12px
  }
  
}
 @media (min-width:701px) {
   #nexus-app {
     min-height:1050px;
     height:1050px;
    
  }
   #nexus-app .sidebar {
    height:1050px;
     min-height:1050px;
    position:relative;
    
  }
   .favorite-button.on {
    opacity:0
  }
   .market-row:hover .favorite-button, .favorite-button:focus-visible {
    opacity:1
  }
   .quote-option:not(.selected) {
    background:transparent
  }
  
}
 .quote-option:not(.selected) {
  background:transparent
}
 @media (min-width:701px) {
   .sidebar-footer {
     margin-bottom:48px;
    
  }
   .market-card {
    height:639px;
    min-height:639px;
    overflow:hidden;
    
  }
   .market-card .search-form {
    transform:translateX(6px)
  }
   .market-card .filter-link {
    transform:translateX(6px)
  }
   .market-card-head > div:first-child {
    transform:translateX(6px)
  }
   .market-row .coin-identity {
    transform:translateX(-15px)
  }
   .market-row .price-value {
    transform:translateX(24px)
  }
   .market-row .volume-value {
    transform:translateX(9px)
  }
   .market-row .change-value {
    transform:translateX(-4px)
  }
   .market-row .spark-cell svg {
    transform:translateX(-17px)
  }
  
}
 .drawer-body input[type="radio"], .drawer-body input[type="checkbox"] {
     display:inline-block;
  width:16px;
  height:16px;
  vertical-align:middle;
  margin:0 0 0 10px;
     accent-color:var(--purple);
  cursor:pointer
}
 .drawer-body .drawer-record label {
  display:flex;
  align-items:center;
  margin:0;
  cursor:pointer
}
 .drawer-body select {
  cursor:pointer
}

/* ==========================================
   NEXUS — Dynamic Pagination
   ========================================== */

.market-footer .pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

    .market-footer .pages button {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: var(--violet);
        font-family: "Inter", "Noto Sans Arabic", sans-serif;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

        .market-footer .pages button:hover:not(:disabled) {
            background: #261f4c;
            border-color: var(--line);
        }

        .market-footer .pages button[aria-current="page"] {
            background: var(--purple);
            color: var(--white);
        }

        .market-footer .pages button:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }

    .market-footer .pages span {
        color: var(--muted);
        padding: 0 3px;
    }

@media (max-width: 700px) {
    .market-footer {
        flex-wrap: wrap;
        gap: 10px;
    }

        .market-footer .pages {
            width: 100%;
            justify-content: center;
        }

            .market-footer .pages button {
                min-width: 30px;
                height: 30px;
            }
}

/* ==========================================
   NEXUS — Top Pagination & Coin Icons
   ========================================== */

/* Pagination placed above the market table */
.market-pagination-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 44px;
    margin: 4px 0 12px;
    color: var(--muted);
    font-size: 11px;
}

    .market-pagination-top .pages {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
        direction: ltr;
    }

        /* Match existing pagination visual language */
        .market-pagination-top .pages button {
            min-width: 31px;
            height: 31px;
            padding: 0 8px;
            border: 1px solid transparent;
            border-radius: 8px;
            background: transparent;
            color: var(--violet);
            font-family: Inter, Arial, sans-serif;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }

            .market-pagination-top .pages button:hover:not(:disabled) {
                background: #261f4c;
                border-color: var(--line);
            }

            .market-pagination-top .pages button[aria-current="page"] {
                background: var(--purple);
                color: var(--white);
            }

            .market-pagination-top .pages button:disabled {
                opacity: 0.35;
                cursor: not-allowed;
            }

        .market-pagination-top .pages span {
            color: var(--muted);
        }

/* Real coin logo images */
.coin-logo {
    overflow: hidden;
    flex-shrink: 0;
    font-family: Inter, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.coin-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}

/* Keep dynamic numbers readable in RTL */
.price-value,
.change-value,
.volume-value,
.stat-card strong,
.market-footer,
.market-pagination-top .pages {
    font-variant-numeric: tabular-nums;
}

/* Mobile adjustments */
@media (max-width: 700px) {
    .market-pagination-top {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
    }

        .market-pagination-top .pages {
            width: 100%;
        }

            .market-pagination-top .pages button {
                min-width: 29px;
                height: 29px;
                font-size: 11px;
            }
}

/* ==========================================
   NEXUS — Market Sorting
   ========================================== */

/* Interactive table headings */
.table-heading .market-sort {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 7px 4px;
    background: transparent;
    border: 0;
    color: var(--muted2);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

    .table-heading .market-sort:hover {
        color: var(--white);
    }

    .table-heading .market-sort.sort-active {
        color: var(--violet);
        font-weight: 700;
    }

.market-sort .sort-indicator {
    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--muted2);
}

.market-sort.sort-active .sort-indicator {
    color: var(--purple);
}

.market-sort[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Quote switch now supports ALL, IRT, USDT */
.quote-switch {
    gap: 4px;
}

    .quote-switch .quote-option {
        min-width: 0;
        padding-inline: 8px;
    }

/* Correct price unit in mixed market mode */
.market-price-unit {
    display: inline-block;
    margin-inline-start: 6px;
    color: var(--muted2);
    font-family: Inter, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
}

/* Clearly identify inactive markets */
.market-row.is-inactive {
    opacity: 0.65;
}

    .market-row.is-inactive:hover {
        opacity: 0.95;
    }

/* Keep mixed symbol text and numbers readable */
.market-row .coin-name small {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}

.market-row .price-value {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .quote-switch {
        min-width: 0;
        width: 100%;
    }

        .quote-switch .quote-option {
            flex: 1 1 0;
            padding-inline: 4px;
            font-size: 11px;
        }

    .market-price-unit {
        font-size: 9px;
    }
}

/* NEXUS — live EMA notification */

.nexus-live-ema-toast {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9999;
    width: min(360px, calc(100vw - 32px));
    padding: 17px 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #15213d;
    color: #f5f6ff;
    border: 1px solid #394868;
    border-right: 4px solid #855bff;
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
    direction: rtl;
}

    .nexus-live-ema-toast[hidden] {
        display: none !important;
    }

    .nexus-live-ema-toast.bullish {
        border-right-color: #38d8ae;
    }

    .nexus-live-ema-toast.bearish {
        border-right-color: #ff718f;
    }

    .nexus-live-ema-toast strong {
        font-size: 14px;
    }

    .nexus-live-ema-toast span {
        font-size: 13px;
    }

    .nexus-live-ema-toast small {
        color: #95a3c4;
        font-family: Inter, sans-serif;
        font-size: 11px;
        line-height: 1.8;
    }

@media (max-width: 700px) {
    .nexus-live-ema-toast {
        left: 16px;
        right: 16px;
        bottom: 64px;
        width: auto;
    }
}

/* ==========================================
   NEXUS - Dynamic Market Layout Fix
   Keep original Figma design
   ========================================== */

/* Desktop: support 20 market rows per page */
@media (min-width: 701px) {

    /* Remove the old fixed 1050px screen height */
    #nexus-app {
        height: auto;
        min-height: 100vh;
    }

        /* Keep sidebar visible while scrolling */
        #nexus-app .sidebar {
            position: sticky;
            top: 0;
            height: 100vh;
            min-height: 100vh;
        }

        #nexus-app .sidebar-footer {
            margin-bottom: 0;
        }

        /* The original 639px card clipped dynamic rows */
        #nexus-app .market-card {
            height: auto;
            min-height: 639px;
            overflow: visible;
        }
}

/* Keep the table and footer in normal document flow */
#nexus-app .market-table {
    height: auto;
    max-height: none;
}

#nexus-app .market-footer {
    position: relative;
    height: auto;
    margin-top: 12px;
}

/* A compact pagination strip above the table */
#nexus-app .market-pagination-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 4px 4px 12px;
    color: var(--muted2);
    font-size: 11px;
}

    /* Both pagination controls remain consistent */
    #nexus-app .market-pagination-top .pages,
    #nexus-app .market-footer .pages {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        flex-wrap: wrap;
        direction: ltr;
    }

#nexus-app .pages button {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--violet);
    font: 600 12px Inter, Arial, sans-serif;
    cursor: pointer;
}

    #nexus-app .pages button[aria-current="page"] {
        background: var(--purple);
        color: var(--white);
    }

    #nexus-app .pages button:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* Keep sortable headers aligned with original columns */
#nexus-app .table-heading .market-sort {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

    #nexus-app .table-heading .market-sort.sort-active {
        color: var(--violet);
    }

#nexus-app .sort-indicator {
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
}

/* Keep dynamic coin images inside their original circles */
#nexus-app .coin-logo {
    overflow: hidden;
}

    #nexus-app .coin-logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 50%;
    }

/* Mobile: retain the original stacked market cards */
@media (max-width: 700px) {

    #nexus-app {
        height: auto;
        min-height: 100vh;
    }

        #nexus-app .market-card {
            height: auto;
            overflow: visible;
        }

        #nexus-app .market-pagination-top {
            flex-direction: column;
            align-items: center;
            gap: 8px;
            margin: 10px 0 0;
        }

            #nexus-app .market-pagination-top .pages {
                width: 100%;
            }

        #nexus-app .market-footer {
            padding-bottom: 72px;
        }
}

/* داشبورد در دسکتاپ تمام عرض مرورگر را بگیرد */
@media (min-width: 1440px) {

    #nexus-app {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
    }

        #nexus-app .main-stage {
            max-width: none;
            min-width: 0;
        }

        #nexus-app .sidebar {
            flex: 0 0 240px;
            width: 240px;
        }
}

/* ==========================================
   NEXUS - Always Visible Watchlist Stars
   ========================================== */

.market-table .market-row .favorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    padding: 4px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1 !important;
    visibility: visible;
    background: #202b46;
    color: #b9a6ff;
    border-radius: 8px;
    z-index: 2;
    transition: background .15s, color .15s;
}

/* فضای کافی کنار لوگوی ارز */
.market-table .market-row .coin-identity {
    padding-right: 14px;
}

.market-table .market-row .favorite-button:hover {
    background: #352759;
    color: #ffffff;
}

/* ستاره ارزهای انتخاب‌نشده */
.market-table .favorite-button:not(.on) svg {
    fill: none;
    stroke: currentColor;
}

/* ستاره ارزهای داخل واچ‌لیست */
.market-table .favorite-button.on {
    background: #30234e;
    color: #b9a6ff;
}

    .market-table .favorite-button.on svg {
        fill: #b9a6ff;
        stroke: currentColor;
    }

.market-table .market-row:not([hidden]) {
    cursor: pointer;
}

/* ==========================================
   NEXUS — Market Final Layout Fix
   ========================================== */

/* هدر دسکتاپ */
@media (min-width: 701px) {
    #nexus-app .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        height: 82px;
        min-height: 82px;
    }

    #nexus-app .topbar-status {
        display: flex;
        align-items: center;
        gap: 12px;
        white-space: nowrap;
    }

    #nexus-app .topbar-crumb {
        white-space: nowrap;
    }
}

/* هدر موبایل باید جای هدر دسکتاپ قرار بگیرد */
@media (max-width: 700px) {
    #nexus-app .topbar {
        display: none;
    }

    #nexus-app .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* جدول 10 ردیفی بدون محدودیت ارتفاع قدیمی */
#nexus-app .market-card {
    height: auto;
    overflow: visible;
}

#nexus-app .market-table {
    width: 100%;
    min-width: 0;
}

    #nexus-app .market-table .table-row > * {
        min-width: 0;
    }

#nexus-app .market-row:not([hidden]) {
    cursor: pointer;
}

#nexus-app .coin-name {
    min-width: 0;
}

    #nexus-app .coin-name strong,
    #nexus-app .coin-name small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* ==========================================
   ستاره‌ها همیشه قابل مشاهده باشند
   ========================================== */

#nexus-app .market-row .favorite-button,
#nexus-app .market-row .favorite-button.on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3;
    color: #a89acb;
    cursor: pointer;
}

    #nexus-app .market-row .favorite-button:hover {
        color: #d8c9ff;
    }

    #nexus-app .market-row .favorite-button.on {
        color: #b9a6ff;
    }

        #nexus-app .market-row .favorite-button.on svg {
            fill: currentColor;
        }

/* ستاره در نسخه موبایل هم قابل کلیک باشد */
@media (max-width: 700px) {
    #nexus-app .market-row .favorite-button {
        display: inline-flex !important;
        position: absolute;
        right: 8px;
        top: auto;
        bottom: 7px;
        width: 28px;
        height: 28px;
        padding: 5px;
        border-radius: 8px;
        background: #222
    }
}
/* ==========================================
   NEXUS — FIX 7 COLUMN MARKET TABLE
   ========================================== */

@media (min-width: 701px) {

    #nexus-app .market-table .table-row {
        display: grid;
        grid-template-columns: minmax(180px, 1.55fr) minmax(125px, 1.1fr) minmax(120px, 1fr) minmax(120px, 1.1fr) minmax(135px, 1.2fr) minmax(120px, 1.05fr) 52px;
        direction: rtl;
        align-items: center;
        gap: 0;
    }

    /* جلوگیری از شکستن عنوان ستون‌ها */

    #nexus-app .market-table .table-heading > span {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* عنوان واچ‌لیست */

    #nexus-app .market-table .watchlist-heading {
        text-align: center !important;
        padding: 0 !important;
        justify-self: center;
    }

    /* ستاره به‌عنوان ستون هفتم */

    #nexus-app .market-table .market-row > .favorite-button {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        justify-self: center;
        align-self: center;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 7px;
        opacity: 1 !important;
        visibility: visible !important;
        background: #202b46;
        color: #b9a6ff;
        border-radius: 8px;
        z-index: 2;
    }

        #nexus-app .market-table .market-row > .favorite-button svg {
            width: 17px;
            height: 17px;
        }

        #nexus-app .market-table .market-row > .favorite-button.on svg {
            fill: currentColor;
        }

    /* فضای اضافی کنار نام ارز دیگر لازم نیست */

    #nexus-app .market-table .market-row > .coin-identity {
        padding-right: 0 !important;
        min-width: 0;
    }

    #nexus-app .market-table .market-row > * {
        min-width: 0;
    }
}
/* فاصله بین "همه بازارها" و "سیگنال‌های امروز" */
.quote-switch [data-view-option="today-signals"] {
    margin-inline-start: 8px;
}