/* Nexus UI kit — screen-level layout styles (kit-specific; tokens come from styles.css). */

.nxPage { display: flex; flex-direction: column; gap: var(--gutter); max-width: var(--content-max); margin: 0 auto; }
.nxPage__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.nxPage__head h1 { font-size: 30px; letter-spacing: -.02em; }
.nxPage__sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.nxPage__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Live price chips */
.nxPrices { display: flex; gap: 8px; margin-right: 4px; }
.nxPrice { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-xs); font-family: var(--font-mono); }
.nxPrice__sym { font-size: 11px; font-weight: 700; color: var(--muted); }
.nxPrice__px { font-size: 13px; font-weight: 700; color: var(--ink); }
.nxPrice__chg { font-size: 11px; font-weight: 700; }
.nxPrice__chg.up { color: var(--pos); } .nxPrice__chg.dn { color: var(--neg); }

/* KPI strip */
.nxKpi .nxCard__body { display: flex; align-items: center; gap: 28px; }
.nxKpi .nxCard__body > .nxMetric { flex: 1; }
.nxKpi__div { width: 1px; align-self: stretch; background: var(--line); flex: none !important; }

/* Hero chart */
.nxChart { display: flex; flex-direction: column; gap: 8px; }
.nxChart__legend { display: flex; gap: 18px; }
.nxChart__legend .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.nxChart__legend .lg i { width: 9px; height: 9px; border-radius: 999px; }
.nxChart__plot { position: relative; }
.nxChart__tip { position: absolute; top: 18%; left: 60%; }

/* Bottom grids */
.nxGrid2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--gutter); align-items: start; }
.nxGrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); align-items: start; }
.nxGrid12 { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gutter); align-items: start; }

/* Quick post */
.nxQP { display: flex; flex-direction: column; gap: 16px; }
.nxQP__asset { display: flex; flex-direction: column; gap: 7px; }
.nxSelect { display: flex; gap: 6px; flex-wrap: wrap; }
.nxSelect__opt { height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .14s ease; }
.nxSelect__opt:hover { color: var(--ink); border-color: var(--muted-2); }
.nxSelect__opt.on { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.nxQP__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nxQP__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.nxQP__exp { font-size: 12px; color: var(--muted); }

/* Active signals */
.nxSigs { display: flex; flex-direction: column; }
.nxSig { display: grid; grid-template-columns: 1.1fr .9fr .9fr 1fr auto; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); }
.nxSig:last-child { border-bottom: 0; }
.nxSig__asset { display: flex; align-items: center; gap: 9px; }
.nxSig__sym { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.nxSig__dir { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; letter-spacing: .03em; }
.nxSig__dir.buy { background: var(--pos-soft); color: var(--pos); }
.nxSig__dir.sell { background: var(--neg-soft); color: var(--neg); }
.nxSig__col { display: flex; flex-direction: column; gap: 1px; }
.nxSig__k { font-size: 10px; color: var(--muted-2); font-weight: 600; }
.nxSig__v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.nxSig__spark { width: 80px; }
.nxSig__pnl { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.nxSig__pips { font-size: 11px; font-weight: 600; }
.nxSig__pips.up { color: var(--pos); } .nxSig__pips.dn { color: var(--neg); }

/* Generic stat list / rows used by client/agent/admin */
.nxList { display: flex; flex-direction: column; }
.nxLi { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nxLi:last-child { border-bottom: 0; }
.nxLi__main { flex: 1; min-width: 0; }
.nxLi__t { font-size: 14px; font-weight: 600; color: var(--ink); }
.nxLi__s { font-size: 12px; color: var(--muted); margin-top: 1px; }
.nxLi__v { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Feed (client) */
.nxFeed { display: flex; flex-direction: column; gap: 14px; }
.nxFeedCard { display: flex; flex-direction: column; gap: 12px; }
.nxFeedCard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nxFeedCard__sym { display: flex; align-items: center; gap: 10px; }
.nxFeedCard__symtxt { font-family: var(--font-mono); font-size: 16px; font-weight: 700; }
.nxLevels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.nxLevel { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 12px; background: var(--surface-sunken); }
.nxLevel__k { font-size: 10.5px; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .04em; }
.nxLevel__v { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.nxLevel--tp .nxLevel__v { color: var(--pos); }
.nxLevel--sl .nxLevel__v { color: var(--neg); }

/* Calculator (client) */
.nxCalc { display: flex; flex-direction: column; gap: 16px; }
.nxCalc__out { display: flex; align-items: baseline; gap: 8px; padding: 16px 0 4px; }

/* Recruit / agent cards */
.nxRank { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nxRank:last-child { border-bottom: 0; }
.nxRank__pos { width: 26px; height: 26px; border-radius: 999px; background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.nxRank__pos.top { background: var(--gold); color: var(--on-gold); }
.nxRank__main { flex: 1; min-width: 0; }

/* Directory table (admin) */
.nxTable { width: 100%; border-collapse: collapse; }
.nxTable th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); padding: 0 12px 12px; }
.nxTable td { padding: 13px 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.nxTable tr:hover td { background: var(--surface-sunken); }
.nxTable__num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.nxCellUser { display: flex; align-items: center; gap: 10px; }
.nxCellUser__n { font-weight: 600; }

.nxRank--you { margin: 0 -12px; padding: 12px; border-radius: 12px; background: var(--surface-sunken); border-bottom: 0; }
.nxRank--you + .nxRank { border-top: 1px solid var(--line); }

/* Horizontal bar breakdowns */
.nxBars { display: flex; flex-direction: column; gap: 14px; }
.nxBar { display: flex; flex-direction: column; gap: 6px; }
.nxBar__top { display: flex; justify-content: space-between; align-items: baseline; }
.nxBar__lbl { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--muted); }
.nxBar__val { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.nxBar__track { height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.nxBar__fill { height: 100%; border-radius: 999px; }

/* Request / approval rows */
.nxReq { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nxReq:last-child { border-bottom: 0; }
.nxReq__main { flex: 1; min-width: 0; }

/* Key/value rows */
.nxKV { display: flex; flex-direction: column; }
.nxKV__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.nxKV__row:last-child { border-bottom: 0; }
.nxKV__k { font-size: 13px; color: var(--muted); }
.nxKV__v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Forms */
.nxForm { display: flex; flex-direction: column; gap: 16px; }
.nxForm__grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nxField__lbl { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: -.01em; }
.nxTextarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; resize: vertical;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-inset);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink); }
.nxTextarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.nxTextarea::placeholder { color: var(--muted-2); }

/* Recruit type picker */
.nxTypePick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nxTypeCard { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer; transition: all .14s ease; }
.nxTypeCard:hover { border-color: var(--muted-2); }
.nxTypeCard.on { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.nxTypeCard__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.nxTypeCard__s { font-size: 12px; color: var(--muted); }

/* Commission rate rows */
.nxRates { display: flex; flex-direction: column; }
.nxRate { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nxRate:last-child { border-bottom: 0; }
.nxRate__dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.nxRate__main { flex: 1; min-width: 0; }
.nxRate__val { display: flex; align-items: center; gap: 4px; }
.nxRate__inp { width: 54px; height: 40px; text-align: right; padding: 0 8px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-inset);
  font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--ink); }
.nxRate__inp:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px var(--focus-ring); }
.nxRate__pct { font-size: 15px; font-weight: 700; color: var(--muted); }

/* Steps */
.nxSteps { display: flex; flex-direction: column; gap: 16px; }
.nxStep { display: flex; gap: 14px; align-items: flex-start; }
.nxStep__n { width: 26px; height: 26px; border-radius: 999px; flex: none; background: var(--ink); color: var(--panel);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }

/* Toggle rows */
.nxToggleRow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nxToggleRow--bd { padding: 14px 0; border-bottom: 1px solid var(--line); }
.nxToggleRow--bd:last-child { border-bottom: 0; }

/* Profile / MT5 / Auto / Expert hero rows */
.nxProfile { display: flex; align-items: center; gap: 16px; }
.nxMt5 { display: flex; align-items: center; gap: 16px; }
.nxMt5__icn { width: 48px; height: 48px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--ink); }
.nxMt5__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--pos); }
.nxAuto { display: flex; align-items: center; gap: 16px; }
.nxAuto__icn { width: 52px; height: 52px; border-radius: 16px; flex: none; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, currentColor 12%, transparent); }
.nxExpertHero { display: flex; align-items: center; gap: 16px; }

/* Calculator breakdown */
.nxCalcBreak { display: flex; flex-direction: column; margin-top: 16px; }
.nxCalcBreak__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 13px; font-weight: 600;
  color: var(--on-gold); opacity: .82; font-variant-numeric: tabular-nums; }
.nxCalcBreak__row--tot { opacity: 1; font-weight: 800; font-size: 15px; border-top: 1px solid rgba(26,21,5,.18); margin-top: 4px; padding-top: 12px; }

/* Post-signal success */
.nxPosted { display: flex; align-items: center; gap: 16px; }
.nxPosted__icn { width: 48px; height: 48px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--pos-soft); color: var(--pos); }

/* Empty / placeholder */
.nxEmpty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 56px 20px; }
.nxEmpty__icn { font-size: 40px; color: var(--gold); line-height: 1; }
.nxEmpty__t { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 4px; }
.nxEmpty__s { font-size: 13px; color: var(--muted); }

/* Auth (login gate) */
.nxAuth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--surface-sunken); }
.nxAuth__card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.nxAuth__brand { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; text-align: center; }
.nxAuth__sub { font-size: 14px; color: var(--muted); text-align: center; margin-bottom: 4px; }
.nxAuth__err { font-size: 13px; font-weight: 600; color: var(--neg, #d23f3f);
  background: var(--neg-soft, color-mix(in srgb, #d23f3f 10%, transparent)); padding: 9px 12px; border-radius: 10px; }
.nxAuth__switch { background: none; border: 0; cursor: pointer; color: var(--muted); font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; padding: 6px; text-align: center; }
.nxAuth__switch:hover { color: var(--ink); }

/* Active-trades / live-status rows on the MT5 manager screen */
.nxMt5Bar { display: flex; align-items: center; gap: 10px; }
.nxMt5__warn { font-size: 13px; font-weight: 600; color: var(--neg, #d23f3f); }
.nxMt5__muted { font-size: 13px; color: var(--muted); }

/* Responsive */
@media (max-width: 1080px) {
  .nxGrid2, .nxGrid12 { grid-template-columns: 1fr; }
  .nxGrid3 { grid-template-columns: 1fr 1fr; }
  .nxForm__grid3 { grid-template-columns: 1fr 1fr; }
  .nxKpi .nxCard__body { flex-wrap: wrap; }
  .nxKpi__div { display: none; }
}