/* Shared Copper presentation for live React routes. The page data and scripts remain unchanged. */
@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/Vazirmatn.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

html:has([data-copper-layout]) {
  background: #0b1112;
}

body:has([data-copper-layout]) {
  --bg: #0b1112;
  --bg-2: #101819;
  --bg-soft: #111b1c;
  --panel: #142021;
  --panel-2: #192729;
  --panel-strong: #172426;
  --line: rgba(180, 199, 188, .17);
  --text: #f5f0e8;
  --muted: #a5b4ae;
  --dim: #84958e;
  --cyan: #dbad7c;
  --blue: #c69e79;
  --accent: #dbad7c;
  --accent-2: #b68d67;
  --green: #69dbad;
  --red: #ed8581;
  --amber: #e5b968;
  --gold: #dbad7c;
  --notification-panel: #142021;
  --notification-panel-2: #192729;
  --notification-line: rgba(180, 199, 188, .17);
  --notification-muted: #a5b4ae;
  background: #0b1112;
  color: var(--text);
  font-family: Vazirmatn, Tahoma, sans-serif;
  font-variant-numeric: normal;
}

body:has([data-copper-layout]) :where(button, input, select, textarea) {
  font-family: inherit;
}

[data-copper-layout].app-shell {
  position: relative;
  z-index: 1;
  width: min(1560px, calc(100% - 44px));
  max-width: none;
  margin-inline: auto;
  padding: 0;
  color: var(--text);
}

[data-copper-layout] > .topbar.topbar--command {
  display: grid;
  grid-template-columns: minmax(135px, .8fr) minmax(360px, 1.25fr) minmax(335px, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 62px;
  margin: 0;
  padding: 7px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #0b1112;
  box-shadow: none;
}

[data-copper-layout] > .topbar.topbar--command::before,
[data-copper-layout] > .topbar.topbar--command::after {
  display: none;
}

[data-copper-layout] > .topbar .brand {
  min-width: 0;
  gap: 9px;
}

[data-copper-layout] > .topbar .brand strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 750;
}

[data-copper-layout] > .topbar .brand small { display: none; }

[data-copper-layout] > .topbar .brand-mark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 25px;
  height: 25px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

[data-copper-layout] > .topbar .brand-mark img { display: none; }
[data-copper-layout] > .topbar .brand-mark::before,
[data-copper-layout] > .topbar .brand-mark::after {
  width: 5px;
  border-radius: 2px;
  background: #dbad7c;
  content: '';
}
[data-copper-layout] > .topbar .brand-mark::before { height: 14px; box-shadow: 8px -7px #dbad7c; }
[data-copper-layout] > .topbar .brand-mark::after { height: 21px; margin-left: 6px; }

[data-copper-layout] > .topbar .command-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  padding: 0;
}

[data-copper-layout] > .topbar .command-nav > a,
[data-copper-layout] > .topbar .command-nav .nav-menu > summary {
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  padding: 5px 9px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

[data-copper-layout] > .topbar .command-nav > a:hover,
[data-copper-layout] > .topbar .command-nav .nav-menu > summary:hover,
[data-copper-layout] > .topbar .command-nav .nav-menu[open] > summary {
  color: var(--accent);
  background: rgba(219, 173, 124, .08);
}

[data-copper-layout] > .topbar .command-nav .ui-icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

[data-copper-layout] > .topbar .command-search,
[data-copper-layout] > .topbar .icon-button,
[data-copper-layout] > .topbar .auth-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #121b1c;
  box-shadow: none;
  color: var(--text);
}

[data-copper-layout] > .topbar .command-search {
  width: min(250px, 19vw);
}

[data-copper-layout] > .topbar .command-search input,
[data-copper-layout] > .topbar .command-search input::placeholder { color: var(--muted); }
[data-copper-layout] > .topbar .command-search kbd { color: var(--muted); border-color: var(--line); }
[data-copper-layout] > .topbar .command-actions { gap: 7px; }

[data-copper-layout] > .topbar .nav-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #142021;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .4);
}

[data-copper-layout] > .topbar .nav-panel__card,
[data-copper-layout] > .topbar .nav-panel__tool {
  color: var(--text);
  border-color: var(--line);
  background: #182527;
}

[data-copper-layout] > .topbar .nav-panel__card:hover,
[data-copper-layout] > .topbar .nav-panel__tool:hover {
  border-color: rgba(219, 173, 124, .5);
  background: #202b2a;
}

[data-copper-layout] > .topbar .nav-panel__eyebrow,
[data-copper-layout] > .topbar .nav-panel__card-icon { color: var(--accent); }

[data-copper-layout] .copper-bank-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #10191a;
  overflow: hidden;
}

[data-copper-layout] .copper-bank-strip > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  min-width: 0;
  padding: 9px 11px;
  border-left: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
[data-copper-layout] .copper-bank-strip > a:last-child { border-left: 0; }
[data-copper-layout] .copper-bank-strip > a:hover,
[data-copper-layout] .copper-bank-strip > a:focus-visible { background: #202a27; }

[data-copper-layout] .copper-bank-strip__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

[data-copper-layout] .copper-bank-strip__name svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--accent);
}

[data-copper-layout] .copper-bank-strip small {
  overflow: hidden;
  margin: 3px 23px 0 0;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-copper-layout] > .footer {
  display: flex;
  gap: 15px;
  align-items: center;
  min-height: 75px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
[data-copper-layout] > .footer .brand-mark { display: none; }
[data-copper-layout] > .footer a { color: var(--accent); }

/* Existing page bodies keep their data/actions. Only duplicate site chrome is replaced. */
[data-copper-content] > :is(.ambient, .xa-ambient, .fx-ambient, .pro-ambient),
[data-copper-content] :is(header, footer) { display: none !important; }
[data-copper-content] :is(.app-shell, .xa-shell, .fx-shell, .pro-shell) {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: auto;
}
[data-copper-content] .app-shell { padding: 0; }
[data-copper-content] :is(main, .notification-shell, .auth-layout, .register-layout, .account-layout, .alert-center-main, .alert-main) {
  width: 100%;
  max-width: none;
  padding-top: 25px;
  color: var(--text);
}
[data-copper-content] :is(.xa-hero, .fx-hero, .pro-hero, .events-hero, .decision-hero, .opportunity-hero, .whale-hero, .wave-hero, .credit-hero, .portfolio-hero) {
  padding-top: 25px;
}

body:has([data-copper-layout]) :is(.ambient, .xa-ambient, .fx-ambient, .pro-ambient) { opacity: 0; }

[data-copper-layout] :where(h1, h2, h3) { color: var(--text); font-family: Vazirmatn, Tahoma, sans-serif; }
[data-copper-layout] :where(main h1) {
  font-size: clamp(1.85rem, 3vw, 2.9rem);
  line-height: 1.42;
  letter-spacing: -.045em;
}
[data-copper-layout] :where(main h2) { font-size: clamp(1rem, 1.45vw, 1.3rem); }
[data-copper-layout] :where(.eyebrow, .xa-eyebrow, .fx-eyebrow, .pro-eyebrow) {
  color: var(--accent);
  font-family: Vazirmatn, Tahoma, sans-serif;
  letter-spacing: 0;
}
[data-copper-layout] :where(main h1 span, .events-hero h1 span, .fx-hero h1 em) {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}

[data-copper-layout] :where(.panel, .panel-surface, .xa-panel, .fx-panel, .pro-panel, .decision-control, .opportunity-control, .settings-card, .status-card, .notification-guide, .market-card, .event-card, .portfolio-card, .credit-card, .wave-card, .whale-card) {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #142021;
  box-shadow: none;
}

[data-copper-layout] :where(.opportunity-stat, .decision-stat, .xa-kpi, .fx-kpi, .pro-kpi, .status-card, .market-card, .summary-card, .metric-card) {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #162223;
  box-shadow: none;
}

[data-copper-layout] :where(.hero-button--primary, .button--primary, .refresh-button, .xa-refresh, .fx-refresh, .scan-button) {
  border: 1px solid #d9aa79;
  border-radius: 5px;
  background: #d9aa79;
  color: #181714;
  box-shadow: none;
}

[data-copper-layout] :where(.hero-button--secondary, .button--ghost, .mini-action, .event-details-toggle, .segment-control button, .segmented-control button) {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #182426;
  color: var(--text);
  box-shadow: none;
}

[data-copper-layout] :where(input, select, textarea) {
  border-color: var(--line);
  border-radius: 5px;
  background-color: #101a1c;
  color: var(--text);
}

[data-copper-layout] :where(.opportunity-hero__copy, .events-hero-copy, .decision-hero__copy > p, .xa-hero p, .fx-hero p, .pro-hero p) {
  color: var(--muted);
}

[data-copper-layout] :where(.opportunity-risk-note, .decision-blockers, .fx-disclaimer) {
  border-color: rgba(219, 173, 124, .35);
  border-radius: 5px;
  background: rgba(219, 173, 124, .07);
}

[data-copper-layout] :where(.events-page, .decision-page, .notification-page) {
  background: transparent;
}
[data-copper-layout] :where(.events-hero-card, .fx-live-card, .xa-live-card, .hero-status) {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #162223;
  box-shadow: none;
}

[data-copper-layout] :where(.event-card--high, .opportunity-stat--amber) { border-right-color: var(--red); }
[data-copper-layout] :where(.event-card--medium) { border-right-color: var(--amber); }

/* Route families that still carry literal blue surfaces in their legacy CSS. */
[data-copper-layout] :where(.notification-page .page-message, .notification-page .feature-rule, .notification-page .sms-preview,
  .events-page .language-switch, .events-page .segmented-control, .events-page .event-analysis,
  .decision-page .decision-control, .decision-page .decision-card,
  .fx-decision, .fx-plan, .xa-decision, .xa-asset-card) {
  border-color: var(--line);
  border-radius: 6px;
  background: #172425;
  box-shadow: none;
}

body:has([data-copper-layout]) :where(.is-positive, .up) { color: var(--green); }
body:has([data-copper-layout]) :where(.is-negative, .down) { color: var(--red); }

/* Legacy pages ship literal navy gradients with their own late-loaded stylesheets.
   These route-scoped rules intentionally win over those paint rules without
   changing the page's data, controls, or state transitions. */
[data-copper-layout] .opportunity-hero,
[data-copper-layout] .decision-hero {
  align-items: center;
  padding: 35px 0 27px;
}
[data-copper-layout] .opportunity-hero h1,
[data-copper-layout] .decision-hero h1 {
  max-width: 600px;
  margin-bottom: 9px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.5;
}
[data-copper-layout] .opportunity-hero h1 span,
[data-copper-layout] .decision-hero h1 span {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
}
[data-copper-layout] .opportunity-hero__copy,
[data-copper-layout] .decision-hero__copy > p:not(.eyebrow) {
  max-width: 680px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.9;
}
[data-copper-layout] .opportunity-control,
[data-copper-layout] .decision-control {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #172122;
  box-shadow: none;
}
[data-copper-layout] .opportunity-summary { gap: 8px; }
[data-copper-layout] .opportunity-stat {
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #142021;
}
[data-copper-layout] .opportunity-stat strong {
  font-size: 1.32rem;
  color: var(--text);
}
[data-copper-layout] .opportunity-stat--green strong { color: var(--green); }
[data-copper-layout] .opportunity-stat--amber strong { color: var(--amber); }
[data-copper-layout] .opportunity-feed,
[data-copper-layout] .opportunity-method,
[data-copper-layout] .opportunity-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #142021;
  box-shadow: none;
}
[data-copper-layout] .opportunity-card::before { display: none; }
[data-copper-layout] .opportunity-card--buy { border-right: 2px solid var(--green); }
[data-copper-layout] .opportunity-card--sell { border-right: 2px solid var(--red); }
[data-copper-layout] .opportunity-card__thesis { color: var(--muted); }
[data-copper-layout] .decision-control__button,
[data-copper-layout] .opportunity-control .hero-button {
  border: 1px solid #dbad7c;
  border-radius: 4px;
  background: #dbad7c;
  color: #191613;
  box-shadow: none;
}
[data-copper-layout] .decision-control :is(input, select),
[data-copper-layout] .opportunity-control :is(input, select) {
  border-color: var(--line);
  border-radius: 4px;
  background: #10191a;
  color: var(--text);
}
[data-copper-layout] .decision-state {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #142021;
}

/* The live /markets route uses a separate React card component. */
[data-copper-layout] .page-main .page-hero {
  min-height: 130px;
  padding: 23px 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #142021;
  box-shadow: none;
}
[data-copper-layout] .page-main .page-hero::before { display: none; }
[data-copper-layout] .page-main .page-hero h1 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
[data-copper-layout] .page-main .market-toolbar {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #142021;
}
[data-copper-layout] .page-main .market-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
[data-copper-layout] .market-grid > .market-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-rows: 1fr 1fr;
  min-height: 88px;
  padding: 12px;
  align-items: center;
  gap: 0 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #142021;
  text-align: right;
  box-shadow: none;
}
[data-copper-layout] .market-grid > .market-card::after { display: none; }
[data-copper-layout] .market-grid > .market-card:hover {
  border-color: rgba(219, 173, 124, .55);
  background: #1b2928;
  transform: translateY(-2px);
}
[data-copper-layout] .market-grid > .market-card .market-card-icon {
  display: grid;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #1f2b2b;
  color: var(--accent);
  box-shadow: none;
  font: 800 .62rem Arial, sans-serif;
}
[data-copper-layout] .market-grid > .market-card > div {
  grid-row: 1 / 3;
  align-self: center;
  min-width: 0;
}
[data-copper-layout] .market-grid > .market-card small {
  color: var(--muted);
  text-align: right;
  font: .58rem Arial, sans-serif;
}
[data-copper-layout] .market-grid > .market-card strong {
  overflow: hidden;
  color: var(--text);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-copper-layout] .market-grid > .market-card > b,
[data-copper-layout] .market-grid > .market-card > em {
  align-self: end;
  color: var(--text);
  direction: ltr;
  text-align: left;
  font: 700 .75rem Arial, sans-serif;
}
[data-copper-layout] .market-grid > .market-card > em {
  align-self: start;
  font-size: .65rem;
}
[data-copper-layout] .market-grid > .market-card > em.up { color: var(--green); }
[data-copper-layout] .market-grid > .market-card > em.down { color: var(--red); }
[data-copper-layout] .market-grid > .market-card .card-arrow { display: none; }

/* Editorial scale and restrained colour across all legacy route families. */
[data-copper-layout] [data-copper-content] main h1 {
  max-width: 740px;
  font-size: clamp(1.8rem, 3vw, 2.85rem);
  line-height: 1.48;
  letter-spacing: -.035em;
}
[data-copper-layout] [data-copper-content] main h1 :is(span, em) {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
}
[data-copper-layout] [data-copper-content] :is(
  .performance-hero, .portfolio-hero, .alertban-hero, .fx-hero,
  .xa-hero, .pro-hero, .credit-hero, .whale-hero, .wave-hero,
  .events-hero, .auth-hero
) { padding-top: 25px; }
[data-copper-layout] [data-copper-content] :is(
  .performance-hero__copy, .portfolio-hero__copy, .alertban-hero > div > p:not(.eyebrow),
  .fx-hero p, .xa-hero p, .pro-hero p
) {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.9;
}
[data-copper-layout] [data-copper-content] :is(
  .performance-stat, .portfolio-stat, .fx-kpi, .xa-kpi, .pro-kpi,
  .alertban-intelligence > div, .alertban-card, .alertban-hero__card,
  .performance-record, .performance-scope, .performance-simulation,
  .fx-live-card, .fx-market-card, .xa-live-card, .xa-asset-card,
  .portfolio-switcher, .portfolio-modal, .alertban-rule, .alertban-sms,
  .alertban-event, .opportunity-state, .decision-state
) {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #142021;
  box-shadow: none;
}
[data-copper-layout] [data-copper-content] :is(
  .performance-scope__tab, .performance-filter-grid select,
  .portfolio-switcher select, .portfolio-form input, .portfolio-form select,
  .portfolio-form-grid input, .portfolio-form-grid select,
  .alertban-form input, .alertban-form select, .alertban-form textarea
) {
  border-color: var(--line);
  border-radius: 4px;
  background: #10191a;
  color: var(--text);
}
[data-copper-layout] [data-copper-content] :is(
  .performance-scope__tab.is-active, .performance-simulation__chart,
  .performance-chart, .portfolio-chart
) {
  border-color: rgba(219, 173, 124, .45);
  background: #1a2726;
  box-shadow: none;
}
[data-copper-layout] [data-copper-content] :is(
  .alertban-primary, .portfolio-button--primary, .fx-primary,
  .xa-primary, .pro-primary
) {
  border: 1px solid #dbad7c;
  border-radius: 4px;
  background: #dbad7c;
  color: #191613;
  box-shadow: none;
}
[data-copper-layout] [data-copper-content] .alertban-orbit {
  border-color: var(--line);
  background: #192625;
}
[data-copper-layout] [data-copper-content] .alertban-orbit::before,
[data-copper-layout] [data-copper-content] .alertban-orbit::after { border-color: rgba(219, 173, 124, .3); }

/* The admin page has its own React markup and CSS, not canonical HTML. */
[data-copper-layout] .shadow-control-page {
  margin-top: 26px;
  background: transparent;
  color: var(--text);
}
[data-copper-layout] .shadow-state {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #142021;
}
[data-copper-layout] .shadow-state button {
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: #1e2928;
  color: var(--accent);
}

@media (max-width: 1100px) {
  [data-copper-layout] .page-main .market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  [data-copper-layout] .page-main .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-copper-layout] .opportunity-hero,
  [data-copper-layout] .decision-hero { align-items: stretch; flex-direction: column; }
}
@media (max-width: 490px) {
  [data-copper-layout] .page-main .market-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1140px) {
  [data-copper-layout] > .topbar.topbar--command {
    grid-template-columns: auto 1fr;
    gap: 7px 12px;
  }
  [data-copper-layout] > .topbar .command-actions { grid-column: 2; grid-row: 1; }
  [data-copper-layout] > .topbar .command-nav { grid-column: 1 / -1; grid-row: 2; }
  [data-copper-layout] .copper-bank-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-copper-layout] .copper-bank-strip > a:nth-child(4) { border-left: 0; }
}

@media (max-width: 700px) {
  [data-copper-layout].app-shell { width: calc(100% - 24px); }
  [data-copper-layout] > .topbar.topbar--command { padding: 8px 0; }
  [data-copper-layout] > .topbar .command-actions { gap: 4px; }
  [data-copper-layout] > .topbar .command-search { display: none; }
  [data-copper-layout] > .topbar .command-nav {
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: thin;
  }
  [data-copper-layout] .copper-bank-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-copper-layout] .copper-bank-strip > a:nth-child(even) { border-left: 0; }
  [data-copper-layout] .copper-bank-strip > a { min-height: 56px; }
  [data-copper-content] :is(main, .notification-shell, .auth-layout, .register-layout, .account-layout, .alert-center-main, .alert-main) { padding-top: 18px; }
  [data-copper-layout] > .footer { flex-wrap: wrap; }
}