/* ================= App shell ================= */
.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ================= Sidebar (icon rail, collapsible) ================= */
.app-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 8px;
  gap: 6px;
  position: sticky;
  top: 0;
  /* min-height (not height) — a fixed height combined with an open dropdown
     taller than the viewport would just clip/scroll internally instead of
     letting the sidebar grow, which is exactly the "squashed into a tiny
     scrolling box" behavior this is fixing. With min-height, the sidebar is
     always at least a full screen tall but can grow past that when the
     Markets/Help sub-lists are open, pushing the page taller so the browser's
     own scroll (not an internal one) is what reveals the rest. */
  min-height: 100vh;
  overflow-y: visible;
  overflow-x: hidden;
  transition: width 0.25s ease;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
  min-height: 40px;
}
/* logo-dark.png is a wide wordmark (1024x341), not a square icon — sizing it
   by height alone (like a square icon) squashed it down to a barely-visible
   sliver. Size by width instead and let height follow the image's own aspect
   ratio, so it reads as a proper logo instead of a tiny fragment of one.
   Collapsed (icon-rail) width stays modest so it never overflows the narrow
   64px rail; expanded width matches the wider sidebar for a prominent
   wordmark, matching the icon-only vs. label-visible pattern used everywhere
   else in this sidebar (see .sidebar-label/.sidebar-chevron above). */
.sidebar-logo img {
  width: 36px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
  transition: width 0.25s ease;
}
.app-sidebar.expanded .sidebar-logo img {
  width: 140px;
}
.sidebar-btn {
  width: 100%;
  min-height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  /* No `gap` here on purpose — gap reserves fixed space between EVERY pair of
     flex children regardless of their own width, so a 3-child row (icon +
     label + chevron, used only by Markets/Help) would always reserve one
     more gap than the 2-child rows (icon + label) everywhere else, shifting
     just those two icons off the shared center line. Spacing instead comes
     from .sidebar-label's own margin-left below, which — like its width —
     collapses to 0 until expanded, so it costs nothing when collapsed. The
     chevron needs no equivalent margin: its margin-left:auto is self-
     contained and, combined with width:0 while collapsed, contributes
     nothing to the row's layout either. */
  padding: 0 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
/* Icon wrapper spans default to inline, which lets an inline SVG's baseline
   nudge it a few px off-center even though the parent row is already
   align-items:center — forcing inline-flex here centers the icon within its
   own box too, so every sidebar icon (search/markets down to the bottom
   actions) lines up on the same vertical center. */
.sidebar-btn > span:first-child,
.sidebar-sublist a > span:first-child,
.sidebar-sublist button > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.sidebar-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.sidebar-label {
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, margin-left 0.2s ease;
}
.sidebar-chevron {
  /* No margin-left:auto here while collapsed — an auto margin on a flex item
     consumes ALL leftover free space on that side before justify-content
     ever gets a say, so even at width:0 it was silently overriding the
     parent's justify-content:center and shoving the icon to the row's left
     edge instead of its center. It only makes sense once expanded (to push
     the chevron to the row's far right, past the label), so it's set there
     instead — see .app-sidebar.expanded .sidebar-chevron below. */
  opacity: 0;
  /* width:0 (mirroring .sidebar-label above) matters too — without it, this
     span still occupies its rendered icon width even while invisible, which
     would widen the row's total content and throw off centering on its own. */
  width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, width 0.2s ease, margin-left 0.2s ease;
  flex-shrink: 0;
}
.sidebar-chevron.flipped {
  transform: rotate(180deg);
}

/* Expanded state — sidebar widens (JS also sets --sidebar-w to match),
   icons left-align with room for a label, labels fade in. */
.app-sidebar.expanded {
  align-items: stretch;
}
.app-sidebar.expanded .sidebar-btn {
  justify-content: flex-start;
}
.app-sidebar.expanded .sidebar-label,
.app-sidebar.expanded .sidebar-chevron {
  opacity: 1;
  width: auto;
}
.app-sidebar.expanded .sidebar-label {
  margin-left: 12px;
}
.app-sidebar.expanded .sidebar-chevron {
  margin-left: auto;
}

/* Generic collapsible sub-list — used by both the Markets category list
   and the Help sub-menu (FAQs/Live Chat/Email/WhatsApp). Closed state stays
   a max-height:0/overflow:hidden collapse (so it's actually hidden and the
   height change can transition); the open state deliberately does NOT cap
   height or scroll internally — it expands to its full natural content
   height so the sidebar itself grows and the rest of the menu gets pushed
   down the page, matching how the rest of this multi-page app scrolls. */
.sidebar-sublist {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
}
.sidebar-sublist.open {
  max-height: none;
  overflow: visible;
}
.sidebar-sublist button,
.sidebar-sublist a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.sidebar-sublist button:hover,
.sidebar-sublist a:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.sidebar-sublist button.active {
  color: var(--accent);
}

/* Section groupings — the label only reads as a heading once expanded;
   collapsed, only its buttons (icon-only) show, same as ungrouped items. */
.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.sidebar-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 11px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.app-sidebar.expanded .sidebar-group-label {
  opacity: 1;
  height: auto;
  margin-bottom: 2px;
}

.sidebar-spacer {
  flex: 1;
}
.sidebar-toggle-btn {
  transform: rotate(180deg);
}
.app-sidebar.expanded .sidebar-toggle-btn {
  transform: none;
}

/* Guest vs authed vs verified conditional visibility */
body.guest-mode #sidebar-group-trading,
body.guest-mode #sidebar-group-account,
body.guest-mode #sidebar-logout-btn,
body.guest-mode #sidebar-admin-link {
  display: none !important;
}
body:not(.guest-mode) #sidebar-signin-btn {
  display: none !important;
}
body.kyc-verified #sidebar-verification-link,
body.kyc-verified #header-menu-verification-link,
body.kyc-verified #more-verification-link {
  display: none !important;
}

.sidebar-signin-btn {
  background: var(--accent);
  color: var(--accent-ink);
}
.sidebar-signin-btn:hover {
  background: var(--accent);
  filter: brightness(1.08);
  color: var(--accent-ink);
}

/* "Need help?" card — sits above Log Out, always visible (guest or authed).
   Collapses to just its icon in icon-rail mode, same fade pattern already
   used for .sidebar-label/.sidebar-chevron elsewhere in this file. */
.sidebar-help-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
}
.sidebar-help-card:hover {
  border-color: var(--accent);
}
.sidebar-help-card.active {
  border-color: var(--accent);
  background: var(--bg-elevated-2);
}
.sidebar-help-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--accent);
  flex-shrink: 0;
}
.sidebar-help-card-text {
  flex: 1;
  min-width: 0;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.sidebar-help-card-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.sidebar-help-card-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.sidebar-help-card-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}
.app-sidebar.expanded .sidebar-help-card-text,
.app-sidebar.expanded .sidebar-help-card-chevron {
  opacity: 1;
  width: auto;
}

/* Blue verified checkmark badge — header avatar + profile page */
.verified-badge {
  display: none;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #1d9bf0;
  color: #fff;
  flex-shrink: 0;
}
.verified-badge svg {
  width: 9px;
  height: 9px;
}
body.kyc-verified .verified-badge {
  display: inline-flex;
}
.avatar-with-badge {
  position: relative;
  display: inline-flex;
}
.avatar-with-badge .verified-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  border: 2px solid var(--bg-elevated);
  box-sizing: content-box;
}

/* ================= Main column ================= */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ================= Top bar ================= */
/* Purely decorative market ticker — pointer-events:none means no click
   inside the (cross-origin, so unscriptable from here) TradingView iframe
   can ever reach the page, which is the only reliable way to stop an
   iframe's own internal links from opening TradingView's site.
   !important because the TradingView embed script writes its own inline
   styles onto the iframe it injects — an unqualified rule here could lose
   that specificity fight on some browsers. touch-action:none additionally
   stops the iframe from ever becoming a touch-gesture target on mobile.
   .ticker-tape-shield is an invisible, positioned-on-top sibling that
   explicitly opts back into pointer-events (it's not a descendant of the
   iframe, so the parent's `none` never applies to it) and silently swallows
   every click/touch before it can reach the iframe underneath — a second,
   belt-and-suspenders layer on top of the CSS in case any device/browser
   ever fails to honor pointer-events on the iframe itself. */
.ticker-tape-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  pointer-events: none !important;
  touch-action: none !important;
}
.ticker-tape-wrap iframe {
  pointer-events: none !important;
  touch-action: none !important;
}
.ticker-tape-shield {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  cursor: default;
}
.app-topbar {
  height: var(--header-h);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 16px;
}
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  width: 320px;
  max-width: 40vw;
  color: var(--text-muted);
  cursor: text;
}
.topbar-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--text);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.auth-buttons-mobile {
  display: none;
}
.theme-toggle {
  display: flex;
  align-items: center;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.theme-toggle button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-muted);
}
.theme-toggle button.active {
  background: var(--bg-hover);
  color: var(--warning);
}
.header-user-name {
  font-weight: 600;
  font-size: 13px;
}

/* ---- Notification bell ---- */
.notif-bell-btn {
  position: relative;
}
.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--bg-elevated);
}
.notif-menu {
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  right: 0;
  left: auto;
}
.notif-menu-header {
  font-weight: 700;
  font-size: 13px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.notif-item {
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.notif-item:hover {
  background: var(--bg-hover);
}
.notif-item .notif-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.notif-item.unread {
  background: rgba(0, 212, 170, 0.06);
}
.notif-item-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.notif-item-page:last-child {
  border-bottom: none;
}
.notif-item-body {
  flex: 1;
  min-width: 0;
}
.notif-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.notif-view-all {
  display: block;
  text-align: center;
  padding: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.notif-view-all:hover {
  background: var(--bg-hover);
}
.notif-empty {
  padding: 24px 10px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ================= Trade layout (3 columns under the topbar) ================= */
.trade-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* ---- Market search modal (centered popup, replaces the old slide-out
   drawer) — built on the shared .modal-overlay/.modal pattern used
   everywhere else in the app, with size/overflow overrides so only the
   asset list scrolls while the header/search/tabs stay pinned. ---- */
.market-modal-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.market-modal {
  width: 100%;
  max-width: 550px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.market-modal .modal-header {
  padding: 20px 20px 0;
  margin-bottom: 0;
  flex-shrink: 0;
}
.market-modal-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 20px 0;
  padding: 10px 14px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.market-modal-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
}
.market-modal-search input:focus {
  outline: none;
}
.watchlist-category-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  margin: 10px 0 12px;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.watchlist-category-chips button {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-elevated-2);
  color: var(--text-secondary);
  white-space: nowrap;
}
.watchlist-category-chips button.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.watchlist-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.watchlist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.watchlist-row:hover {
  background: var(--bg-elevated-2);
}
.watchlist-row.active {
  background: var(--bg-elevated-2);
  border-left-color: var(--accent);
}
.watchlist-row .star {
  color: var(--text-muted);
  flex-shrink: 0;
}
.watchlist-row .star.favorited {
  color: var(--warning);
}
.icon-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.icon-badge.dual-flag {
  position: relative;
  background: transparent;
  overflow: visible;
}
.icon-badge-flag,
.icon-badge-logo {
  background: #fff;
}
.icon-single-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.icon-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  box-sizing: border-box;
}
.icon-flag,
.icon-flag-fallback {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--bg-elevated);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a3f47;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  object-fit: cover;
}
.flag-a {
  top: -2px;
  left: -2px;
  z-index: 2;
}
.flag-b {
  bottom: -2px;
  right: -2px;
  z-index: 1;
}

/* Full-badge letter/glyph fallback for stocks/ETF/crypto — distinct from
   .icon-flag-fallback above (forex's tiny position:absolute composite-flag
   piece, sized for two overlapping mini-badges). Reusing that class here
   previously left the badge visually blank: it's absolutely positioned and
   only 15px, so without a position:relative parent (only forex's dual-flag
   wrapper sets that) it renders outside/clipped by .icon-badge's
   overflow:hidden. This one fills the parent circle completely instead. */
.icon-solid-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.icon-solid-fallback.fallback-stocks,
.icon-badge.fallback-stocks {
  background: #1e3a8a;
}
.icon-solid-fallback.fallback-etf,
.icon-badge.fallback-etf {
  background: #7c3aed;
}
.icon-solid-fallback.fallback-commodities,
.icon-badge.fallback-commodities {
  background: #eab308;
  color: #1a1200;
}
.icon-solid-fallback.fallback-indices,
.icon-badge.fallback-indices {
  background: #15803d;
}
.icon-solid-fallback.fallback-crypto,
.icon-badge.fallback-crypto {
  background: #f7931a;
}
.watchlist-row .names {
  flex: 1;
  min-width: 0;
}
.watchlist-row .names .sym {
  font-weight: 700;
  font-size: 13px;
}
.watchlist-row .quote {
  text-align: right;
}
.watchlist-row .quote .price {
  font-weight: 700;
  font-size: 13px;
}

/* ---- Center column ---- */
.trade-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.instrument-stat-strip {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.isr-symbol {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 16px;
}
.isr-symbol .icon-badge {
  width: 34px;
  height: 34px;
}
.isr-name {
  font-weight: 800;
  font-size: 14px;
}
.isr-price {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}
.isr-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.isr-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 16px;
}
.isr-stat .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.isr-stat .value {
  font-size: 13px;
  font-weight: 700;
}

/* Balance stat card — relocated from the top header into the Asset Info Bar,
   reusing the same .isr-stat shape as Day High/Low/24H/Spread. */
.isr-stat.balance-chip {
  margin-left: auto;
}
.isr-stat.balance-chip .value {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
}
.balance-deposit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.balance-deposit-btn:hover {
  filter: brightness(1.08);
}

/* Desktop-only refinements — explicitly scoped to min-width:769px so the
   mobile Deposit button/Balance card (already the way the user wants them)
   are never touched by these rules. */
@media (min-width: 769px) {
  .balance-deposit-btn {
    border-radius: var(--radius-md);
    padding: 10px 24px;
  }
  /* Fixed to Day High/Day Low's own natural rendered height (measured live at
     1440px) rather than left to size from content — .instrument-stat-strip's
     align-items:stretch means EVERY card in the row is only ever as tall as
     the tallest one, so an oversized value here previously dragged Day
     High/Day Low/24H/Spread up to match it too. overflow:hidden is a safety
     net, not the mechanism — the font-size/line-height/icon-size below are
     tuned to actually fit, not rely on clipping. */
  .isr-stat.balance-chip {
    height: 54px;
    padding: 8px 16px;
    gap: 1px;
    overflow: hidden;
  }
  .isr-stat.balance-chip .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.1;
  }
  .isr-stat.balance-chip .value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
  }
  .isr-stat.balance-chip .value #balance-chip-icon svg {
    width: 14px;
    height: 14px;
  }
}

.chart-panel {
  flex-shrink: 0;
}
.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  height: 48px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.chart-toolbar .tabs {
  gap: 20px;
}
.chart-toolbar .toggles {
  display: flex;
  align-items: center;
  gap: 16px;
}
.chart-body {
  height: var(--chart-body-h);
  position: relative;
}
#lw-chart-container {
  position: absolute;
  inset: 0;
}
.chart-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  gap: 10px;
}
.info-tab-body {
  padding: 24px;
  display: none;
}
.info-tab-body.active {
  display: block;
}
.chart-body.hidden-tab {
  display: none;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.info-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.info-cell .label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.info-cell .value {
  font-size: 18px;
  font-weight: 700;
}
.info-panel-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--warning);
  margin-bottom: 16px;
}
.info-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.info-hours-row:last-child {
  border-bottom: none;
}
.info-hours-row span:first-child {
  color: var(--text-secondary);
}
.info-hours-row span:last-child {
  font-weight: 700;
}

/* ---- FAQ page ---- */
.faq-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.faq-item .q {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.faq-item .a {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* ---- Transaction history page ---- */
.transaction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  gap: 12px;
}
.transaction-row .t-desc {
  font-weight: 700;
  font-size: 13px;
}
.transaction-row .t-date {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---- Positions (card-based) ---- */
.positions-panel {
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  padding-bottom: 16px;
}
body.guest-mode .positions-panel {
  display: none;
}
.positions-tabs {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 44px;
  border-bottom: 1px solid var(--border);
}
.positions-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px 0;
}
.position-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.position-card-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.position-card-row1 .names {
  flex: 1;
  min-width: 0;
}
.position-card-row1 .sym {
  font-weight: 700;
  font-size: 13px;
}
.position-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.position-card-meta {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.position-card-meta .m {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.position-card-meta .m .l {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.position-card-meta .m .v {
  font-size: 13px;
  font-weight: 700;
}
.margin-usage-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-elevated-2);
  overflow: hidden;
  margin-top: 10px;
}
.margin-usage-bar > div {
  height: 100%;
  background: var(--accent);
}
.position-card-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* ================= Order card (right column) ================= */
.order-card {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.order-card-head {
  display: flex;
  justify-content: flex-end;
}
.leverage-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-elevated-2);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}
.buy-sell-toggle {
  display: flex;
  gap: 6px;
}
.buy-sell-toggle button {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-md);
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-elevated-2);
}
.buy-sell-toggle button[data-side='buy'].active {
  background: var(--accent);
  color: var(--accent-ink);
}
.buy-sell-toggle button[data-side='sell'].active {
  background: var(--danger);
  color: #fff;
}
.order-type-tabs {
  gap: 0;
  background: var(--bg-elevated-2);
  border-radius: var(--radius-md);
  padding: 3px;
}
.order-type-tabs button {
  flex: 1;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: none;
}
.order-type-tabs button.active {
  background: var(--bg-elevated);
  color: var(--text);
}
.tp-sl-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tp-sl-block .row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
.order-summary {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.order-summary .row {
  display: flex;
  justify-content: space-between;
}
.one-click-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 768px) {
  /* Lives in the More -> Settings drawer on mobile instead (see
     #mobile-one-click-trade-toggle) — kept in the order ticket on desktop,
     where there's room and it's the natural place to reach it mid-trade. */
  .one-click-row {
    display: none;
  }
}
.margin-usage-card {
  margin-top: 4px;
}
.margin-usage-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.margin-usage-card .account-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}
.margin-usage-card .account-stat .label {
  font-size: 12px;
  color: var(--text-secondary);
}
.margin-usage-card .account-stat .value {
  font-size: 13px;
  font-weight: 700;
}
.account-stat .value.positive {
  color: var(--accent);
}
.account-stat .value.negative {
  color: var(--danger);
}
body.guest-mode .order-card {
  display: none;
}

/* ================= Mobile bottom nav ================= */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 58px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  z-index: 130;
  align-items: center;
  justify-content: space-around;
}
.mobile-bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  min-width: 48px;
  min-height: 48px;
  justify-content: center;
}
.mobile-bottom-nav button.active {
  color: var(--accent);
}
body.guest-mode .mobile-bottom-nav [data-nav='trades'] {
  display: none;
}

.mobile-quick-trade-bar {
  display: none;
}

.drag-handle {
  display: none;
  width: 100%;
  padding: 8px 0;
  cursor: pointer;
}
.drag-handle span {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  margin: 0 auto;
}
.mobile-sheet-backdrop,
.mobile-sheet {
  display: none;
}
.mobile-sheet-view {
  display: none;
}
.mobile-sheet-view.active {
  display: block;
}
.more-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.more-sheet-item:hover {
  background: var(--bg-elevated-2);
}
.more-sheet-back {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.more-sheet-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
}
.more-sheet-hint {
  margin: -6px 20px 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.more-sheet-lang-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.more-sheet-lang-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.more-sheet-lang-list button:hover {
  background: var(--bg-elevated-2);
}

/* ================= Support chat panel ================= */
/* No more floating bubble — opened via the sidebar's own Support button,
   so it anchors just to the right of the sidebar near the bottom instead
   of a separate fixed-position trigger competing for screen space with
   the order card. */
.chat-panel {
  display: none;
  position: fixed;
  bottom: 16px;
  left: calc(var(--sidebar-w) + 12px);
  width: 340px;
  max-height: 480px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  z-index: 150;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel.open {
  display: flex;
}
.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}
.chat-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.4;
}
.chat-bubble.mine {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-ink);
}
.chat-bubble.theirs {
  align-self: flex-start;
  background: var(--bg-elevated-2);
}
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}
.chat-input-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
}
.chat-bubble-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.chat-sender-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.chat-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 800;
}
.chat-system-notice {
  align-self: center;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  padding: 2px 8px;
}
.chat-session-banner {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--warning);
  background: rgba(240, 185, 11, 0.1);
  border-bottom: 1px solid var(--border);
}
.chat-typing-indicator {
  padding: 4px 16px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
}

/* Floating trigger for the shared chat widget (core/chat-widget.js) —
   fixed bottom-right on every trader-facing page except the dashboard,
   which keeps its own long-standing chat entry point via the sidebar. */
.chat-bubble-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-modal);
  z-index: 150;
}
.chat-bubble-btn:hover {
  filter: brightness(1.08);
}
#chat-widget-panel {
  right: 20px;
  left: auto;
  bottom: 84px;
}
@media (max-width: 768px) {
  /* Clears the fixed 58px bottom nav bar every trader-facing page shares. */
  .chat-bubble-btn {
    bottom: 74px;
  }
  #chat-widget-panel {
    right: 12px;
    left: 12px;
    bottom: 134px;
    width: auto;
  }
}

/* ================= Auth pages (login / signup) ================= */
.auth-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
}
.auth-back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}
.auth-back-link:hover {
  color: var(--text);
}
.auth-logo {
  height: 32px;
  margin-bottom: 24px;
}
.auth-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}
.auth-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 24px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-error {
  display: none;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(246, 70, 93, 0.12);
  border: 1px solid rgba(246, 70, 93, 0.3);
  color: var(--danger);
  font-size: 13px;
}
.auth-error.visible {
  display: block;
}
.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}
.auth-footer a {
  color: var(--accent);
  font-weight: 700;
}
.auth-demo-note {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated-2);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.otp-code-input {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 10px;
  padding: 14px;
}

/* ================= KYC page ================= */
.kyc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 13px;
}
.kyc-status-badge.unverified {
  background: var(--bg-elevated-2);
  color: var(--text-muted);
}
.kyc-status-badge.pending {
  background: rgba(240, 185, 11, 0.15);
  color: var(--warning);
}
.kyc-status-badge.approved {
  background: rgba(0, 212, 170, 0.15);
  color: var(--accent);
}
.kyc-status-badge.declined {
  background: rgba(246, 70, 93, 0.15);
  color: var(--danger);
}
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
}
.dropzone:hover {
  border-color: var(--accent);
  color: var(--text);
}
.dropzone.dragging {
  border-color: var(--accent);
  background: rgba(0, 212, 170, 0.05);
}

/* ================= Wallet page ================= */
.wallet-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.wallet-tabs button {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 13px;
  background: var(--bg-elevated-2);
  color: var(--text-secondary);
}
.wallet-tabs button.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.wallet-view {
  display: none;
}
.wallet-view.active {
  display: block;
}
.crypto-wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--bg-elevated-2);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.crypto-address {
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
}
.crypto-address-box {
  margin-top: 8px;
  background: #16171a;
  border: 1px solid #2a2b33;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.crypto-address-box:hover {
  border-color: var(--accent);
}
.crypto-address-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.crypto-address-value {
  font-family: monospace;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
}
.qr-image {
  width: 160px;
  height: 160px;
  margin: 16px auto;
  display: block;
  border-radius: var(--radius-md);
  background: #fff;
  padding: 8px;
}
.deposit-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 20px;
  margin-top: 16px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.deposit-success-icon {
  color: var(--accent);
  margin-bottom: 12px;
}
.deposit-success-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}
.deposit-success-message {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 380px;
}
.unavailable-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

/* Segmented pill grid — withdrawal method (Credit Card/Wire/E-Transfer are
   permanently disabled, only Crypto is selectable) and the crypto coin
   picker underneath it share this same layout. */
.withdrawal-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.withdrawal-type-btn {
  padding: 10px 8px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 13px;
}
.withdrawal-type-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.withdrawal-type-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ================= Profile page ================= */
.profile-page {
  flex: 1;
  padding: 40px 48px;
  max-width: 1280px;
}
.profile-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.profile-grid {
  display: grid;
  grid-template-columns: minmax(260px, 30%) 1fr;
  gap: 28px;
  align-items: stretch;
}

/* ---- Left column: identity card ---- */
.profile-identity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 28px 20px;
}
.profile-avatar-wrap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  margin-bottom: 12px;
}
.profile-avatar-xl {
  width: 96px;
  height: 96px;
  font-size: 32px;
}
.profile-avatar-camera {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--bg-elevated);
}
.profile-identity-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.profile-identity-name {
  font-size: 20px;
  font-weight: 800;
}
.profile-verified-text {
  display: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
body.kyc-verified .profile-verified-text {
  display: block;
}
.profile-country-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  width: 100%;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.profile-country-flag {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
}

/* ---- Right column: editable field cards ---- */
.profile-fields-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  height: 100%;
}
.profile-field-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.profile-field-main {
  flex: 1;
  min-width: 0;
}
.profile-field-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.profile-field-value {
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.profile-field-value-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-field-edit-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.profile-field-edit-row .input {
  flex: 1;
  min-width: 120px;
}
.profile-field-edit-btn {
  flex-shrink: 0;
}
.pending-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(240, 185, 11, 0.15);
  color: var(--warning);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.link-btn {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  min-height: 24px;
}
.link-btn:hover {
  filter: brightness(1.15);
}
.field-hint {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* ---- Account actions card ---- */
.profile-actions-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
  padding: 24px;
}
.profile-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.profile-action-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.profile-action-text {
  flex: 1;
  min-width: 0;
}
.profile-action-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}
.profile-action-title-danger {
  color: var(--danger);
}
.profile-action-desc {
  color: var(--text-secondary);
  font-size: 12px;
}
.profile-action-desc-danger {
  color: var(--danger);
  opacity: 0.85;
}

@media (max-width: 768px) {
  .profile-page {
    padding: 20px 16px;
  }
  .profile-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .profile-field-card {
    flex-wrap: wrap;
  }
  .profile-field-edit-btn {
    width: 100%;
  }
  .profile-action-row {
    flex-direction: column;
    align-items: stretch;
  }
  .profile-action-row .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ================= Admin layout ================= */
.admin-shell {
  display: flex;
  min-height: 100vh;
}
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-sidebar .brand {
  font-weight: 800;
  font-size: 15px;
  padding: 0 10px 20px;
}
.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
}
.admin-nav-link:hover {
  background: var(--bg-hover);
}
.admin-nav-link.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.admin-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  justify-content: center;
}
.admin-main {
  flex: 1;
  min-width: 0;
  padding: 28px 32px;
  overflow-y: auto;
}
.admin-page-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 20px;
}

/* ================= Admin — Dashboard command center ================= */
.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.stat-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(0, 212, 170, 0.12);
  color: var(--accent);
}
.stat-card-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.stat-card-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.quick-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.quick-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quick-action-btn:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.dashboard-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.activity-feed-card {
  max-height: 520px;
  display: flex;
  flex-direction: column;
}
.activity-feed {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child {
  border-bottom: none;
}
.activity-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-elevated-2);
  color: var(--accent);
}
.activity-item-text {
  font-size: 13px;
  line-height: 1.4;
}
.activity-item-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .dashboard-lower-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= Admin — Trade Control ================= */
.trades-filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.trades-filter-bar #trades-search-input {
  flex: 1;
  min-width: 220px;
}
.trade-modal {
  max-width: 720px;
  width: 100%;
}
.trade-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.trade-modal-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.trade-modal-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.trade-modal-row .field {
  flex: 1;
  min-width: 0;
}
.trade-modal-row .btn {
  flex-shrink: 0;
  height: 42px;
}
.trade-modal-preview {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.trade-modal-preview .label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.trade-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.trade-modal-actions .btn {
  width: 100%;
}
@media (max-width: 700px) {
  .trade-modal-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .trade-modal-actions {
    grid-template-columns: 1fr;
  }
}

/* ================= Admin — Live Chat ================= */
.admin-chat-layout {
  display: flex;
  gap: 16px;
  height: calc(100vh - 140px);
  min-height: 400px;
}
.admin-chat-conversations {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 8px;
}
.conversation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.conversation-item:hover {
  background: var(--bg-hover);
}
.conversation-item.active {
  background: var(--bg-elevated-2);
}
.conversation-item-name {
  font-weight: 700;
  font-size: 13px;
}
.conversation-item-preview {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-chat-thread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.admin-chat-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.admin-chat-thread .chat-messages {
  flex: 1;
  min-height: 0;
}
.admin-chat-reply-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.admin-chat-reply-form input {
  flex: 1;
  min-width: 0;
}
#chat-thread-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-md);
}
.profile-list-item:hover {
  background: var(--bg-hover);
}
.profile-list-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ================= Responsive ================= */
@media (max-width: 900px) {
  .app-sidebar {
    display: none;
  }
  .market-modal {
    width: 95%;
    max-height: 85vh;
  }
  .watchlist-row {
    min-height: 48px;
  }
  .watchlist-category-chips {
    height: 44px;
    gap: 10px;
  }
  .watchlist-category-chips button {
    min-height: 44px;
    padding: 8px 14px;
  }
  .topbar-search {
    width: auto;
    max-width: none;
    flex: 1;
  }
  .auth-buttons-desktop {
    display: none !important;
  }
  .auth-buttons-mobile {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  body.guest-mode .auth-buttons-mobile {
    display: flex;
  }
  .auth-mobile-subtext {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .lang-select {
    display: none;
  }

  .chart-body {
    height: 340px;
  }
  .chart-toolbar {
    padding: 10px 16px;
    height: auto;
  }
  .instrument-stat-strip {
    padding: 10px 16px;
    gap: 12px;
    width: 100%;
    flex: 1;
  }
  .isr-stats {
    gap: 12px;
    width: 100%;
    flex: 1 1 100%;
  }
  .isr-symbol {
    flex: 1 1 100%;
  }
  /* Day High/Day Low/24H/Spread fill each wrapped row edge-to-edge in pairs
     instead of leaving a ragged gap on the right once a row wraps — flex-basis
     just under 50% (minus half the gap) puts exactly two per row. */
  .isr-stats .isr-stat {
    flex: 1 1 calc(50% - 6px);
  }
  /* Balance (+ its Deposit button) leads the info bar on mobile instead of
     trailing off to the right on its own wrapped line — order:-1 (lower than
     every other .instrument-stat-strip child's default order:0) moves both
     to the front, side by side; margin-left:0 cancels the desktop rule that
     pushes balance-chip to the row's far right, which would otherwise fight
     the reordering. */
  .isr-stat.balance-chip {
    order: -1;
    margin-left: 0;
    flex: 1 1 calc(50% - 6px);
  }
  .balance-deposit-btn {
    order: -1;
    flex: 1 1 calc(50% - 6px);
  }
  /* Mobile balance figure — font only, the container/button box itself is
     untouched (no width/height/padding/margin here). */
  .isr-stat.balance-chip .label {
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  .isr-stat.balance-chip .value {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    font-weight: 800;
    line-height: 1.1;
  }

  .trade-layout {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    overflow-y: auto;
  }
  .trade-center {
    overflow-y: visible;
  }
  /* Open/Pending cards flow naturally with the rest of the page on mobile
     (see .trade-layout/.trade-center above) rather than sitting in their own
     scroll box — but the two fixed bottom bars (.mobile-bottom-nav, 58px, and
     .mobile-quick-trade-bar, another 64px stacked above it) aren't part of
     that flow, so without reserved clearance the last card's price/close
     button ends up hidden underneath them once scrolled all the way down.
     min-height/overflow-y are a harmless safety net — they only matter if
     this panel is ever given a hard height elsewhere, which it isn't. */
  .positions-panel {
    padding-bottom: 140px;
    min-height: 200px;
    overflow-y: auto;
  }

  /* Order card becomes the mobile slide-up sheet, reached via the sticky
     Buy/Sell pills instead of sitting inline in the column flow. On desktop
     it never needed its own background — it just sits in-flow next to the
     chart against the same page background. As a fixed-position overlay on
     mobile, though, the lack of one let the chart show straight through it;
     --bg-elevated is already fully opaque, so no backdrop-filter is needed
     on top of it. */
  .order-card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border-left: none;
    z-index: 210;
    max-height: 85vh;
    background: var(--bg-elevated);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-modal);
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .order-card.open {
    transform: translateY(0);
  }
  .order-card .drag-handle {
    display: block;
  }
  .order-ticket-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 205;
  }
  .order-ticket-backdrop.open {
    display: block;
  }

  .mobile-bottom-nav {
    display: flex;
  }
  /* Every page now carries the bottom nav — reserve clearance so the last
     bit of scrollable content (e.g. the Delete Account button on Profile)
     never ends up hidden underneath the fixed 58px bar. The dashboard
     already reserves its own space via .positions-panel's padding-bottom,
     so this is additive there, not a conflicting override. */
  .app-main {
    padding-bottom: 74px;
  }
  .mobile-quick-trade-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 58px;
    height: 64px;
    z-index: 125;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  }
  .mobile-quick-trade-bar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
  }
  .mobile-quick-trade-bar button span:last-child {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
  }
  .qtb-buy {
    background: var(--accent);
  }
  .qtb-sell {
    background: var(--danger);
  }

  .mobile-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 205;
  }
  .mobile-sheet-backdrop.open {
    display: block;
  }
  .mobile-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 210;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-elevated);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-modal);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding-bottom: 16px;
  }
  .mobile-sheet.open {
    transform: translateY(0);
  }
  .mobile-sheet .drag-handle {
    display: block;
  }

  .chat-panel {
    /* Clears the bottom nav (58px) + the sticky Buy/Sell quick-trade bar
       (64px) sitting above it. */
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 134px;
  }

  .admin-shell {
    flex-direction: column;
  }
  .admin-sidebar {
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .app-topbar {
    padding: 0 12px;
    gap: 6px;
  }
}

/* Trade History's "Save to PDF" is just window.print() — no client-side PDF
   library needed, since every browser's print dialog already offers "Save
   as PDF" as a destination. This just hides the app chrome so only the
   table itself ends up in the output. */
@media print {
  .app-sidebar,
  .auth-back-link,
  #trade-history-account-select,
  #save-pdf-btn {
    display: none !important;
  }
  body,
  .app-main,
  .auth-shell {
    background: #fff !important;
    color: #000 !important;
  }
  .data-table th,
  .data-table td {
    color: #000 !important;
    border-color: #ccc !important;
  }
}