/* traders.xcr9.online — orange skin over ui/xcr9.css plus the page's own components.
   Loaded after xcr9.css; only tokens and new classes, no overrides of shared layout. */

:root {
  --bg: #f8f6f2;
  --surface-2: #f0ece5;
  --accent: #c2410c;
  --accent-ink: #fff4eb;
  --accent-soft: rgba(194, 65, 12, 0.1);
  --dot: rgba(60, 35, 10, 0.11);
  --glow: rgba(234, 120, 30, 0.16);
  --c-trace: rgba(80, 45, 10, .10);
  --c-node: rgba(80, 45, 10, .2);
  --c-ctrl: rgba(80, 45, 10, .3);
  --c-ctrl-fill: rgba(80, 45, 10, .02);
  --c-lit: rgba(194, 65, 12, .8);
  --c-pulse: #ea580c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0b09;
    --surface: #161310;
    --surface-2: #1e1a16;
    --accent: #ff9a3d;
    --accent-ink: #1f0f00;
    --accent-soft: rgba(255, 154, 61, 0.12);
    --dot: rgba(255, 255, 255, 0.07);
    --glow: rgba(255, 140, 50, 0.15);
    --c-trace: rgba(230, 190, 150, .13);
    --c-node: rgba(240, 200, 160, .3);
    --c-ctrl: rgba(250, 210, 170, .42);
    --c-ctrl-fill: rgba(220, 160, 100, .05);
    --c-lit: rgba(255, 154, 61, .9);
    --c-pulse: #ff9a3d;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0b09;
  --surface: #161310;
  --surface-2: #1e1a16;
  --accent: #ff9a3d;
  --accent-ink: #1f0f00;
  --accent-soft: rgba(255, 154, 61, 0.12);
  --dot: rgba(255, 255, 255, 0.07);
  --glow: rgba(255, 140, 50, 0.15);
  --c-trace: rgba(230, 190, 150, .13);
  --c-node: rgba(240, 200, 160, .3);
  --c-ctrl: rgba(250, 210, 170, .42);
  --c-ctrl-fill: rgba(220, 160, 100, .05);
  --c-lit: rgba(255, 154, 61, .9);
  --c-pulse: #ff9a3d;
}

/* brand mark */
.mark-glyph { background: var(--accent); color: var(--accent-ink); }
.mark-sub { font-family: var(--mono); font-size: 13px; color: var(--muted); font-weight: 500; padding-inline-start: 10px; border-inline-start: 1px solid var(--line-strong); direction: ltr; unicode-bidi: isolate; }
@media (max-width: 420px) { .mark-sub { display: none; } }
.nav a.out { color: var(--faint); }
[id] { scroll-margin-top: 76px; }

/* hero art: same circuit classes as the main site, drawn by ui/trade.js into #tradeBase / #tradeLit */
#tradeLit .c-trace, #tradeLit .c-ctrl { stroke: var(--c-lit); }
#tradeLit .c-node { stroke: var(--c-lit); }
#tradeLit .c-via { fill: var(--c-lit); }
#tradeLit {
  -webkit-mask-image: radial-gradient(circle 230px at var(--mx, 50%) var(--my, 45%), #000 0%, rgba(0,0,0,.45) 42%, transparent 72%);
          mask-image: radial-gradient(circle 230px at var(--mx, 50%) var(--my, 45%), #000 0%, rgba(0,0,0,.45) 42%, transparent 72%);
}
.hero h1 .h1-big { font-size: clamp(40px, 8.2vw, 84px); }

/* live chart layer (ui/trade.js). Same box and viewBox as the board, but not edge-masked. */
.chart-layer { display: none; -webkit-mask-image: none; mask-image: none; }
@media (min-width: 1100px) {
  .chart-layer { display: block; }
  #tradeBase .c-chart-outline { display: none; }
}
#tradeChart { filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .5)); }
.k-win { fill: #100d0a; stroke: rgba(255, 154, 61, .3); stroke-width: 1; }
.k-rule { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.k-dot { fill: rgba(255, 255, 255, .15); }
.k-title, .k-status, .k-axis, .k-ohlc, .k-tag-text, .k-msg, .k-sub { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; white-space: pre; }
.k-title, .k-status { font-size: 11px; fill: #8f877d; }
.k-axis { font-size: 9.5px; fill: #7d756b; }
.k-ohlc { font-size: 9.5px; fill: #a39a8e; }
.k-grid { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.k-up { fill: #4cc38a; stroke: #4cc38a; }
.k-down { fill: #f0616d; stroke: #f0616d; }
.k-vol { opacity: .32; stroke: none; }
.k-ma { fill: none; stroke: #ff9a3d; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.k-last { stroke: #ff9a3d; stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.k-tag { fill: #ff9a3d; }
.k-tag-text { font-size: 10px; font-weight: 700; fill: #1f0f00; }
.k-live { fill: #4cc38a; }
.k-err { fill: #ff8f8f; }
.k-acc { fill: #ff9a3d; }
.k-plot { transition: opacity .7s ease; }
.k-plot.dim { opacity: .16; }
.k-msg { font-size: 16px; font-weight: 700; }
.k-sub { font-size: 11px; fill: #a39a8e; }
.k-overlay { transition: opacity .5s ease; }
.k-overlay.off { opacity: 0; }

/* gateway status under the route diagram */
.gw-grid { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .gw-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .gw-grid { grid-template-columns: repeat(3, 1fr); } }
.gw { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); min-width: 0; transition: border-color .15s; }
.gw:hover { border-color: var(--line-strong); }
.gw b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw .ms { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--muted); direction: ltr; white-space: nowrap; }
.gw-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

.cover-3 { display: grid; gap: 14px; }
@media (min-width: 880px) { .cover-3 { grid-template-columns: repeat(3, 1fr); } }
.cover-3 .card { padding: 22px; }
.cover-3 h3 { margin: 0 0 14px; font-size: 16px; color: var(--muted); font-weight: 500; }

.cta-band { padding: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta-band h2 { margin: 0; font-size: 22px; }
.cta-band p { margin: 6px 0 0; color: var(--muted); }