/* Reviewed member presentation, mapped to the existing Dashboard, Markets and
   Wallet DOM. No navigation, grids, state visibility or quote motion changes.
   Page fingerprints keep these rules out of administration and authentication. */
#app:has(> .main > #page-content > .dashboard-page, > .main > #page-content > .market-search-bar, > .main > #page-content > .design-tabs [data-action="design-wallet-mode"]) {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) {
  --member-teal:#08786a;
  --member-teal-soft:#e7f5f1;
  --member-account:#345fd1;
  --member-account-soft:#edf2ff;
  --member-card-shadow:0 3px 16px rgba(23,43,58,.045);
  --globe-background:#071823;
  font-size:14px;
  line-height:1.55;
}

#app:has(> .main > #page-content > .dashboard-page, > .main > #page-content > .market-search-bar, > .main > #page-content > .design-tabs [data-action="design-wallet-mode"]) .nav-item {
  font-size:14px;
  border-radius:10px;
}

#app:has(> .main > #page-content > .dashboard-page, > .main > #page-content > .market-search-bar, > .main > #page-content > .design-tabs [data-action="design-wallet-mode"]) .top-search {
  border-radius:10px;
}

/* Shared surfaces retain their existing padding exceptions and layout roles. */
#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) :is(.card,.summary-metric) {
  border-radius:14px;
  border-color:var(--line);
  box-shadow:var(--member-card-shadow);
}

#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) .card h2 {
  font-size:17px;
  line-height:1.4;
  letter-spacing:-.025em;
}

#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) .card-head {
  gap:12px;
}

#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) :is(.btn,.icon-button) {
  border-radius:10px;
}

#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) .btn {
  font-size:13px;
  font-weight:600;
  min-height:44px;
  line-height:1.4;
}

#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) .btn.primary {
  background:var(--member-teal);
  border-color:var(--member-teal);
  color:#fff;
}

#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) :is(.period-switch button,.design-tabs .tab) {
  min-height:40px;
  font-size:12px;
  border-radius:8px;
}

#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) :is(.metric-icon,.route-summary-icon,.design-metric-icon) {
  color:var(--member-teal);
  background:var(--member-teal-soft);
  border-radius:11px;
}

#page-content:has(> .dashboard-page, > .market-search-bar, > .design-tabs [data-action="design-wallet-mode"]) :is(.completed-route-table,table.responsive) th {
  font-size:11px;
  font-weight:600;
  letter-spacing:.045em;
  text-transform:uppercase;
  line-height:1.5;
}

/* The live price's fx-quote-* classes and timing remain untouched. */
#page-content > .dashboard-page .market-ticker {
  border-radius:14px;
}

#page-content > .dashboard-page .ticker-item {
  padding:14px 12px;
  gap:9px;
}

#page-content > .dashboard-page .ticker-pair {
  font-size:12px;
  font-weight:600;
}

#page-content > .dashboard-page .ticker-pair > small {
  font-size:11px;
  font-weight:400;
}

#page-content > .dashboard-page .ticker-numbers {
  flex-wrap:wrap;
  gap:6px 8px;
}

#page-content > .dashboard-page .ticker-numbers > strong {
  font-size:18px;
  letter-spacing:-.025em;
}

#page-content > .dashboard-page .ticker-numbers > [data-market-daychange] {
  border-radius:6px;
  padding:3px 6px;
  min-width:60px;
  font-size:11px;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
  background:var(--surface-soft);
}

#page-content > .dashboard-page .ticker-numbers > [data-market-daychange].positive {
  background:#e7f5ed;
  color:#087c42;
}

#page-content > .dashboard-page .ticker-numbers > [data-market-daychange].negative {
  background:#fff0f0;
  color:#b83240;
}

#page-content > .dashboard-page .summary-metric {
  gap:12px;
}

#page-content > .dashboard-page .summary-metric .metric-copy > span {
  font-size:12px;
  line-height:1.45;
}

#page-content > .dashboard-page .summary-metric .metric-copy > small {
  font-size:11px;
  line-height:1.5;
}

#page-content > .dashboard-page .summary-metric.positive .metric-copy > strong {
  color:#087c42;
}

#page-content > .dashboard-page .auto-summary .status-reason {
  font-size:13px;
  line-height:1.6;
}

#page-content > .dashboard-page .dashboard-route-summary {
  border-radius:10px;
}

#page-content > .dashboard-page .route-summary-icon {
  padding:7px;
}

#page-content > .dashboard-page .completed-route-table td {
  line-height:1.6;
}

/* Account charts are blue; market charts keep the existing market palette. */
#page-content > .dashboard-page #performance-chart .chart-line {
  stroke:var(--member-account);
}

#page-content > .dashboard-page #performance-chart :is(.chart-point,.chart-cursor circle) {
  fill:var(--member-account);
}

#page-content > .dashboard-page .fx-dashboard-chart-tabs [data-mode="profit"][aria-selected="true"] {
  color:var(--member-account);
  border-color:var(--member-account);
  background:var(--member-account-soft);
}

#page-content > .dashboard-page .fx-dashboard-chart-tabs [data-mode="market"][aria-selected="true"] {
  color:var(--member-teal);
  border-color:var(--member-teal);
  background:var(--member-teal-soft);
}

/* Markets retain List, Heatmap, Map, ordering and all status/source details. */
#page-content:has(> .market-search-bar) .market-search-bar {
  border-radius:14px;
}

#page-content:has(> .market-search-bar) .market-results {
  font-size:12px;
  font-weight:600;
  letter-spacing:.025em;
}

#page-content:has(> .market-search-bar) .market-currency-row .currency-select b {
  font-size:13px;
  line-height:1.45;
}

/* Existing compact lists set these font sizes with !important. */
#page-content:has(> .market-search-bar) .market-currency-row .currency-select small {
  font-size:11px!important;
  line-height:1.5;
}

#page-content:has(> .market-search-bar) .market-search-bar :is(input,select,.tab,.view-switch button) {
  min-height:40px;
  border-radius:8px;
}

/* Wallet overview and the two existing history modes share the same scope. */
#page-content:has(> .design-tabs [data-action="design-wallet-mode"]) .design-metric {
  padding-top:18px;
  padding-bottom:18px;
}

#page-content:has(> .design-tabs [data-action="design-wallet-mode"]) .design-metric-icon {
  padding:6px;
  left:12px;
  top:20px;
}

#page-content:has(> .design-tabs [data-action="design-wallet-mode"]) .design-metric-icon svg {
  width:24px;
  height:24px;
}

#page-content:has(> .design-tabs [data-action="design-wallet-mode"]) .design-value > span {
  font-size:12px;
  line-height:1.5;
}

#page-content:has(> .design-tabs [data-action="design-wallet-mode"]) .design-metric small {
  font-size:11px;
  line-height:1.5;
}

#page-content:has(> .design-tabs [data-action="design-wallet-mode"]) :is(.wallet-allocation,.wallet-actions,.design-inset) {
  border-radius:14px;
}

#page-content:has(> .design-tabs [data-action="design-wallet-mode"]) .ledger-amount {
  font-variant-numeric:tabular-nums;
}

/* The current globe canvas is transparent (WebGL alpha and 2D clearRect).
   Set the consumed background variable as well as the visible viewport; leave
   white controls, labels, information panels and all globe mechanics intact. */
#page-content:has(> .dashboard-page, > .market-search-bar) .exchange-globe {
  background:#071823;
}

#page-content:has(> .dashboard-page, > .market-search-bar) .exchange-globe .eg-viewport {
  background-color:#071823;
  background-image:radial-gradient(ellipse at 50% 80%,#123b46 0%,#0b2531 48%,#071823 78%);
}

#page-content:has(> .dashboard-page, > .market-search-bar) .exchange-globe .eg-credit {
  background:#071823;
  color:#bad4dc;
  font-size:11px;
  line-height:1.5;
  padding-top:6px;
  padding-bottom:8px;
}

#page-content:has(> .dashboard-page, > .market-search-bar) .exchange-globe .eg-error {
  color:#bad4dc;
}

@media(min-width:768px) {
  #page-content > .dashboard-page .summary-metric {
    min-height:108px;
    padding:17px 14px;
  }

  #page-content > .dashboard-page .summary-metric .metric-copy > strong {
    font-size:26px;
    line-height:1.2;
    letter-spacing:-.035em;
  }

  #page-content > .dashboard-page .metric-icon {
    width:42px;
    height:42px;
  }

  #page-content > .dashboard-page .metric-icon svg {
    width:24px;
    height:24px;
  }
}

@media(width < 768px) {
  /* These existing full-width summary strips are intentionally not cards. */
  #page-content > .dashboard-page .summary-metric:is([data-key="metric-today"],[data-key="metric-return"]) {
    box-shadow:none;
    border-radius:0;
  }

  #app:has(> .main > #page-content > .dashboard-page, > .main > #page-content > .market-search-bar, > .main > #page-content > .design-tabs [data-action="design-wallet-mode"]) .mobile-nav button {
    font-size:11px;
    line-height:1.35;
    min-height:62px;
  }

  #page-content > .dashboard-page .ticker-item {
    padding:12px 10px;
  }

  #page-content > .dashboard-page .ticker-numbers > strong {
    font-size:17px;
  }

  #page-content > .dashboard-page .ticker-numbers > [data-market-daychange] {
    min-width:56px;
    padding:3px 5px;
  }

  /* Keep the established full-width Today/Return blocks and two balance cards. */
  #page-content > .dashboard-page .summary-metric .metric-copy > small {
    font-size:11px;
  }

  #page-content:has(> .design-tabs [data-action="design-wallet-mode"]) .design-metric {
    padding-top:14px;
    padding-bottom:14px;
    padding-left:46px;
  }

  #page-content:has(> .design-tabs [data-action="design-wallet-mode"]) .design-metric-icon {
    padding:4px;
    left:9px;
    top:15px;
    border-radius:8px;
  }

  #page-content:has(> .design-tabs [data-action="design-wallet-mode"]) .design-metric-icon svg {
    width:22px;
    height:22px;
  }

  #page-content:has(> .dashboard-page, > .market-search-bar) .exchange-globe .eg-credit {
    font-size:10px;
  }
}