/* ===== NavcorX tokens (inlined from colors_and_type.css) ===== */
/* =====================================================================
   NavcorX Design Tokens — colors, typography, spacing
   ---------------------------------------------------------------------
   The NavcorX system is dual-personality:

   1. BROADSHEET (primary)  — dark warm cream paper, amber accent.
                              Used by navcorx.com (public newspaper)
                              and the internal Pit Wall / War Room.

   2. SCOREBOARD (lite)     — bright paper, navy ink, cyan accent.
                              Used for the print business card and
                              presentation-ready light-mode artifacts.

   Both share the same primitive token names so components can be
   themed by wrapping them in `.theme-broadsheet` (default) or
   `.theme-scoreboard`.
   ===================================================================== */

/* ---------- 1. PALETTE PRIMITIVES (broadsheet, default) ------------- */
:root,
.theme-broadsheet {
  /* paper — five-step night scale */
  --nx-bg:        #0A0A0A;          /* page floor */
  --nx-bg-1:      #111111;          /* card */
  --nx-bg-2:      #181818;          /* raised card / table header */
  --nx-bg-3:      #1F1F1F;          /* chip / button face */
  --nx-rule:      #262626;          /* 1px hairline */
  --nx-rule-2:    #353535;          /* 1px hairline, stronger */

  /* ink — warm cream, never #FFF */
  --nx-ink:       #ECE6D7;          /* primary text */
  --nx-ink-2:     #BDB6A5;          /* secondary text */
  --nx-muted:     #6F6A5F;          /* tertiary / labels */
  --nx-muted-2:   #4A463E;          /* disabled / strokes */
  --nx-paper:     #F2EBDD;          /* light page (rare, for print) */

  /* accents */
  --nx-amber:     #FF9F1C;          /* PRIMARY accent — the brand */
  --nx-amber-soft:#FFB845;          /* hover / highlight */
  --nx-amber-edge:#C97A0E;           /* 1px border under amber bar */

  /* semantic data colors */
  --nx-green:     #2FBE6E;          /* PnL up, active, live */
  --nx-green-soft:#74D89F;
  --nx-red:       #E8543D;          /* PnL down, stop-loss, error */
  --nx-cyan:      #5AC8E0;          /* tertiary tag, neutral signal */
  --nx-violet:    #B388FF;          /* experimental / AI driver */
  --nx-rose:      #FF6B9D;
  --nx-lime:      #A8E063;
  --nx-blue:      #5B8FFF;
  --nx-gold:      #FFD27F;
}

/* ---------- 1b. PALETTE — scoreboard light theme -------------------- */
.theme-scoreboard {
  --nx-bg:        #F0F2F7;
  --nx-bg-1:      #FFFFFF;
  --nx-bg-2:      #F4F6FA;
  --nx-bg-3:      #E6EAF2;
  --nx-rule:      rgba(14,22,34,0.10);
  --nx-rule-2:    rgba(14,22,34,0.18);

  --nx-ink:       #0E1622;
  --nx-ink-2:     #182437;
  --nx-muted:     #6B7585;
  --nx-muted-2:   #8FA0B8;

  --nx-amber:     #5FA6FF;          /* in this theme, "amber" slot is blue */
  --nx-amber-soft:#7BB8FF;
  --nx-amber-edge:#2C7BD8;
  --nx-cyan:      #18C2D9;          /* secondary blue accent */
}

/* ---------- 2. TYPOGRAPHY PRIMITIVES -------------------------------- */
:root {
  /* Families */
  --nx-font-display:  "Fraunces", "Noto Serif TC", Georgia, serif;
  --nx-font-body:     "Inter", "Noto Serif TC", system-ui, -apple-system, sans-serif;
  --nx-font-body-tc:  "Noto Sans TC", "Inter", system-ui, sans-serif;
  --nx-font-mono:     "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
  --nx-font-hand:     "Caveat", "Brush Script MT", cursive;

  /* Optical-size variations (Fraunces is variable) */
  --nx-fr-display:   "opsz" 144, "SOFT" 0;     /* masthead, hero */
  --nx-fr-headline:  "opsz" 72;                 /* H2 / section */
  --nx-fr-title:     "opsz" 32;                 /* card title, H3 */
  --nx-fr-deck:      "opsz" 24;                 /* italic deck/sub */
  --nx-fr-text:      "opsz" 18;                 /* long-form body */

  /* Type ramp — broadsheet rhythm.
     Display sizes use clamp() so they breathe on mobile. */
  --nx-fz-masthead:  clamp(48px, 9vw, 116px);   /* the wordmark */
  --nx-fz-hero:      clamp(38px, 5.4vw, 74px);  /* page hero */
  --nx-fz-h1:        clamp(40px, 6vw, 84px);
  --nx-fz-h2:        clamp(28px, 3.6vw, 44px);
  --nx-fz-h3:        22px;
  --nx-fz-h4:        19px;
  --nx-fz-deck:      19px;                       /* italic standfirst */
  --nx-fz-lede:      15.5px;                     /* opening paragraph */
  --nx-fz-body:      15px;
  --nx-fz-small:     13px;
  --nx-fz-caption:   12px;
  --nx-fz-meta:      11px;                       /* mono uppercase labels */
  --nx-fz-micro:     10px;                       /* hairline metadata */
  --nx-fz-tag:       10.5px;                     /* driver tags VL / DR */

  --nx-lh-tight:     0.92;
  --nx-lh-display:   1.0;
  --nx-lh-snug:      1.2;
  --nx-lh-body:      1.6;
  --nx-lh-prose:     1.7;

  --nx-ls-tight:     -0.025em;
  --nx-ls-display:   -0.015em;
  --nx-ls-snug:      -0.01em;
  --nx-ls-meta:      0.16em;
  --nx-ls-tag:       0.14em;
  --nx-ls-eyebrow:   0.22em;

  /* Spacing — 4px base */
  --nx-sp-1:  4px;
  --nx-sp-2:  8px;
  --nx-sp-3:  12px;
  --nx-sp-4:  16px;
  --nx-sp-5:  22px;
  --nx-sp-6:  32px;
  --nx-sp-7:  48px;
  --nx-sp-8:  64px;

  /* Radii (broadsheet is mostly square — keep small) */
  --nx-radius-0: 0;          /* default — sharp newsprint */
  --nx-radius-1: 2px;
  --nx-radius-2: 6px;        /* rare — used for soft chips only */

  /* Shadows are extremely rare on the dark theme; rules carry the weight. */
  --nx-shadow-card:   0 1px 0 0 var(--nx-rule);
  --nx-shadow-pop:    0 8px 28px rgba(0,0,0,.55);

  /* Durations */
  --nx-dur-fast:  120ms;
  --nx-dur-base:  180ms;
  --nx-dur-slow:  600ms;
  --nx-ease:      cubic-bezier(.2,.7,.2,1);
}

/* ---------- 3. SEMANTIC ELEMENT STYLES ------------------------------ */
/* Use these by adding the class to an element, OR copy the body of the
   rule into your own component CSS. They cover the most common cases
   so a designer can drop a card together without re-deriving values. */

/* Masthead wordmark (only used once per page, top centered) */
.nx-masthead {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-display);
  font-weight: 700;
  font-size: var(--nx-fz-masthead);
  line-height: var(--nx-lh-tight);
  letter-spacing: var(--nx-ls-tight);
  color: var(--nx-ink);
  text-align: center;
}
.nx-masthead .x { color: var(--nx-amber); font-style: italic; font-weight: 600; }

/* Hero / page H1 */
.nx-h1 {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-display);
  font-weight: 700;
  font-size: var(--nx-fz-h1);
  line-height: 0.95;
  letter-spacing: var(--nx-ls-tight);
  color: var(--nx-ink);
}
.nx-h1 em { font-style: italic; color: var(--nx-amber); font-weight: 500; }

/* Section H2 */
.nx-h2 {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-headline);
  font-weight: 700;
  font-size: var(--nx-fz-h2);
  line-height: var(--nx-lh-display);
  letter-spacing: var(--nx-ls-display);
  color: var(--nx-ink);
}
.nx-h2 em { font-style: italic; color: var(--nx-amber); font-weight: 500; }

/* Card / article title H3 */
.nx-h3 {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-title);
  font-weight: 600;
  font-size: var(--nx-fz-h3);
  line-height: 1.15;
  letter-spacing: var(--nx-ls-snug);
  color: var(--nx-ink);
}

/* Italic "deck" / standfirst — always Fraunces italic */
.nx-deck {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-deck);
  font-style: italic;
  font-size: var(--nx-fz-deck);
  line-height: 1.45;
  color: var(--nx-ink-2);
}

/* Body paragraph — Inter for product UI, Fraunces for long-form essays */
.nx-body  { font-family: var(--nx-font-body); font-size: var(--nx-fz-body);  line-height: var(--nx-lh-body); color: var(--nx-ink); }
.nx-lede  { font-family: var(--nx-font-body); font-size: var(--nx-fz-lede);  line-height: var(--nx-lh-prose); color: var(--nx-ink); }
.nx-prose { font-family: var(--nx-font-display); font-size: 17px; line-height: var(--nx-lh-prose); color: var(--nx-ink); }
.nx-prose strong { color: var(--nx-amber); font-weight: 600; }

/* Eyebrow / kicker — mono ALLCAPS in amber */
.nx-eyebrow {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fz-meta);
  color: var(--nx-amber);
  letter-spacing: var(--nx-ls-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
}

/* Metadata label — mono ALLCAPS in muted gray */
.nx-meta {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fz-micro);
  color: var(--nx-muted);
  letter-spacing: var(--nx-ls-meta);
  text-transform: uppercase;
}

/* Tabular numeric — for PnL, prices, percents */
.nx-num {
  font-family: var(--nx-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Pull-quote */
.nx-pullquote {
  font-family: var(--nx-font-display);
  font-variation-settings: var(--nx-fr-headline);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nx-ink);
  border-left: 3px solid var(--nx-amber);
  padding: 8px 0 8px 28px;
}
.nx-pullquote em { font-style: italic; color: var(--nx-amber); }

/* The "amber pill" — small ALLCAPS chip used as a category stamp */
.nx-pill {
  display: inline-block;
  background: var(--nx-amber);
  color: black;
  padding: 2px 8px;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-fz-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Driver tag — bold 2-letter mono chip used everywhere (VL, DR, NX...) */
.nx-tag {
  display: inline-block;
  background: var(--nx-bg-3);
  color: var(--nx-ink);
  border: 1px solid var(--nx-rule-2);
  padding: 2px 7px;
  font-family: var(--nx-font-mono);
  font-weight: 700;
  font-size: var(--nx-fz-tag);
  letter-spacing: 0.05em;
}
.nx-tag--lead { background: var(--nx-amber); color: black; border-color: var(--nx-amber); }

/* "Live" dot — pulses */
.nx-live::before {
  content: "●";
  color: var(--nx-green);
  margin-right: 6px;
  animation: nx-pulse 1.6s infinite;
}
@keyframes nx-pulse { 50% { opacity: 0.35; } }

/* Hairline newsprint divider */
.nx-rule         { border: 0; border-top: 1px solid var(--nx-rule); }
.nx-rule--double { border: 0; border-top: 3px double var(--nx-rule-2); }
.nx-rule--amber  { border: 0; border-top: 3px double var(--nx-amber); }
.nx-rule--dashed { border: 0; border-top: 1px dashed var(--nx-rule-2); }

/* ===== War Room components ===== */
/* NavcorX War Room — UI Kit styles
   Pulls primitive tokens from ../../colors_and_type.css.
   The War Room is a denser, real-time sibling to the public newspaper:
   same ink/amber/mono vocabulary, but multi-panel and live. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--nx-bg);
  color: var(--nx-ink);
  font-family: var(--nx-font-body);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--nx-amber); color: black; }
button { font-family: inherit; cursor: pointer; }

/* ───── TICKER (WAR ROOM variant) ───── */
.wr-ticker {
  background: var(--nx-amber); color: #000;
  height: 28px; overflow: hidden;
  border-bottom: 1px solid var(--nx-amber-edge);
  position: sticky; top: 0; z-index: 60;
}
.wr-ticker__track {
  display: flex; align-items: center; gap: 30px; height: 100%;
  white-space: nowrap;
  animation: wr-scroll 60s linear infinite;
  font-family: var(--nx-font-mono);
  font-size: 11.5px; font-weight: 600;
  width: max-content; padding: 0 20px;
}
@keyframes wr-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wr-ticker__item { font-style: normal; }
.wr-ticker__item::after { content: "│"; color: rgba(0,0,0,.35); margin-left: 30px; }
.wr-ticker__item b { font-weight: 700; }
.wr-ticker__pin { background: #000; color: var(--nx-amber); padding: 2px 8px; font-weight: 700; letter-spacing: .12em; flex-shrink: 0; }

@keyframes wr-pulse { 50% { opacity: .3; } }

/* ───── MASTHEAD ───── */
.wr-mast { padding: 14px 0; border-bottom: 2px solid var(--nx-rule); background: var(--nx-bg); }
.wr-mast__inner {
  max-width: 1480px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
}
.wr-brand {
  font-family: var(--nx-font-display);
  font-weight: 700; font-size: 26px;
  letter-spacing: -.02em; line-height: 1;
  display: flex; align-items: center; gap: 12px;
}
.wr-brand .x { color: var(--nx-amber); font-style: italic; font-weight: 600; }
.wr-brand__sub {
  font-family: var(--nx-font-mono);
  font-size: 10px; color: var(--nx-muted);
  letter-spacing: .28em; font-weight: 600;
  text-transform: uppercase;
}
.wr-nav { display: flex; gap: 0; justify-self: center; }
.wr-nav a {
  padding: 8px 16px;
  font-family: var(--nx-font-mono);
  font-size: 11px; color: var(--nx-ink-2);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  border-right: 1px solid var(--nx-rule);
  cursor: pointer; transition: color .12s;
}
.wr-nav a:last-child { border-right: none; }
.wr-nav a:hover, .wr-nav a.act { color: var(--nx-amber); }

.wr-session {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--nx-font-mono);
  font-size: 11px; color: var(--nx-ink-2);
  letter-spacing: .12em;
}
.wr-session__beta { background: var(--nx-amber); color: #000; padding: 2px 8px; font-weight: 700; letter-spacing: .16em; }
.wr-session__clock { color: var(--nx-amber); font-weight: 700; font-size: 13px; }
.wr-session__live { color: var(--nx-green); font-weight: 700; }
.wr-session__live::before { content: "●"; margin-right: 5px; animation: wr-pulse 1.4s infinite; }
.wr-session__nxt { color: var(--nx-amber); font-weight: 700; }

.wr-wrap { max-width: 1480px; margin: 0 auto; padding: 18px 24px 32px; }

/* ───── SCOREBOARD HERO ───── */
.wr-sb {
  border: 1px solid var(--nx-rule);
  background: linear-gradient(180deg, var(--nx-bg-1), var(--nx-bg));
  margin-bottom: 18px; position: relative; overflow: hidden;
}
.wr-sb::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--nx-amber) 0%, var(--nx-amber) 40%, transparent 100%);
}
.wr-sb__grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 1px; background: var(--nx-rule);
}
@media (max-width: 900px) { .wr-sb__grid { grid-template-columns: 1fr 1fr; } }
.wr-sb__cell { background: var(--nx-bg-1); padding: 22px 26px; }
.wr-sb__cell--hero { background: var(--nx-bg); padding: 24px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.wr-sb__lbl {
  font-family: var(--nx-font-mono);
  font-size: 10px; color: var(--nx-muted);
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.wr-sb__lbl .tag { font-size: 9px; background: var(--nx-bg-3); color: var(--nx-ink-2); padding: 2px 6px; letter-spacing: .14em; font-weight: 700; }
.wr-sb__lbl .tag--live { background: var(--nx-red); color: #fff; animation: wr-pulse 1.4s infinite; }
.wr-sb__v {
  font-family: var(--nx-font-display);
  font-weight: 700; font-size: 44px; line-height: 1;
  letter-spacing: -.02em; color: var(--nx-ink);
}
.wr-sb__v--amb { color: var(--nx-amber); font-style: italic; }
.wr-sb__v--g   { color: var(--nx-green); }
.wr-sb__v--r   { color: var(--nx-red); }
.wr-sb__v sup { font-family: var(--nx-font-mono); font-size: 14px; color: var(--nx-muted); font-weight: 500; margin-left: 6px; vertical-align: 14px; }
.wr-sb__v sup.g { color: var(--nx-green); }
.wr-sb__sub { margin-top: 10px; font-family: var(--nx-font-mono); font-size: 11px; color: var(--nx-ink-2); letter-spacing: .04em; line-height: 1.55; }
.wr-sb__sub b { color: var(--nx-ink); font-weight: 600; }

.wr-sb__heading {
  font-family: var(--nx-font-display); font-weight: 700; font-style: italic;
  font-size: 32px; letter-spacing: -.02em; line-height: 1;
}
.wr-sb__heading em { color: var(--nx-amber); font-style: italic; }
.wr-sb__desc {
  font-family: var(--nx-font-display); font-style: italic;
  font-size: 14px; color: var(--nx-ink-2); line-height: 1.45; max-width: 340px;
}
.wr-sb__stamp {
  font-family: var(--nx-font-mono); font-size: 10px; color: var(--nx-amber);
  letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  border: 1px solid var(--nx-amber); padding: 5px 11px; width: fit-content;
}
.wr-sb__stamp::before { content: "●"; margin-right: 6px; animation: wr-pulse 1.4s infinite; }

/* ───── 5M SYNC RIBBON ───── */
.wr-sync {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; background: var(--nx-bg-2);
  border: 1px solid var(--nx-rule); margin-bottom: 18px;
  font-family: var(--nx-font-mono); font-size: 11px; letter-spacing: .1em;
}
.wr-sync__lab { color: var(--nx-amber); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.wr-sync__lab::before { content: "●"; margin-right: 6px; animation: wr-pulse 1.4s infinite; }
.wr-sync__bar { flex: 1; height: 4px; background: var(--nx-bg-3); position: relative; overflow: hidden; }
.wr-sync__bar i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--nx-amber), var(--nx-amber-soft));
  transition: width .6s linear;
}
.wr-sync__nxt { color: var(--nx-ink); font-weight: 700; font-size: 12px; }
.wr-sync__nxt b { color: var(--nx-amber); }
.wr-sync__meta { color: var(--nx-muted); font-size: 10.5px; }

/* ───── DRIVER TILES ───── */
.wr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 1200px) { .wr-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .wr-tiles { grid-template-columns: 1fr; } }

.wr-tile {
  background: var(--nx-bg-1);
  border: 1px solid var(--nx-rule);
  padding: 16px 18px;
  cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; gap: 10px;
}
.wr-tile:hover { border-color: var(--nx-amber); transform: translateY(-2px); }
.wr-tile__top { display: flex; justify-content: space-between; align-items: center; }
.wr-tile__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wr-tile__id {
  font-family: var(--nx-font-mono); font-weight: 700; font-size: 11px;
  color: #000; padding: 3px 7px; letter-spacing: .08em; flex-shrink: 0;
}
.wr-tile__nm {
  font-family: var(--nx-font-display);
  font-weight: 700; font-style: italic; font-size: 17px;
  letter-spacing: -.01em; color: var(--nx-ink); line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-tile__nm .sub {
  display: block;
  font-family: var(--nx-font-mono); font-size: 9px;
  color: var(--nx-muted); letter-spacing: .12em;
  text-transform: uppercase; margin-top: 3px;
  font-style: normal; font-weight: 600;
}
.wr-tile__stat {
  font-family: var(--nx-font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 3px 7px; border: 1px solid; white-space: nowrap;
}
.wr-tile__stat--long  { color: var(--nx-green); border-color: var(--nx-green); }
.wr-tile__stat--short { color: var(--nx-red); border-color: var(--nx-red); }
.wr-tile__stat--flat  { color: var(--nx-muted); border-color: var(--nx-muted-2); }
.wr-tile__stat--pit   { color: var(--nx-cyan); border-color: var(--nx-cyan); }

.wr-tile__desc {
  font-family: var(--nx-font-display); font-style: italic;
  font-size: 12.5px; color: var(--nx-ink-2); line-height: 1.5;
  min-height: 48px;
}
.wr-tile__mid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--nx-rule);
  border-bottom: 1px dashed var(--nx-rule);
}
.wr-tile__mid .l {
  font-family: var(--nx-font-mono); font-size: 8.5px;
  color: var(--nx-muted); letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 3px;
}
.wr-tile__mid .v {
  font-family: var(--nx-font-mono); font-weight: 700;
  font-size: 12.5px; color: var(--nx-ink);
}
.wr-tile__mid .v.g { color: var(--nx-green); }
.wr-tile__mid .v.r { color: var(--nx-red); }
.wr-tile__mid .v.a { color: var(--nx-amber); }

.wr-tile__scored {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px;
  background: var(--nx-bg-2); border: 1px solid var(--nx-rule);
  font-family: var(--nx-font-mono); font-size: 10.5px;
}
.wr-tile__scored .l { color: var(--nx-muted); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.wr-tile__scored .v {
  font-family: var(--nx-font-display); font-weight: 700; font-style: italic;
  font-size: 17px; color: var(--nx-green);
}
.wr-tile__scored .v.r    { color: var(--nx-red); }
.wr-tile__scored .v.beta { color: var(--nx-amber); font-size: 13px; }

/* Live PnL row — the eye-catching "即時損益" number, bigger than scored,
   with a pulsing green dot. */
.wr-tile__live {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 10px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-amber);
  position: relative;
}
.wr-tile__live::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--nx-amber) 0%, var(--nx-amber) 60%, transparent 100%);
}
.wr-tile__live .l {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--nx-font-mono); font-size: 9px;
  color: var(--nx-amber); letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700;
}
.wr-tile__live .l::before {
  content: "●"; color: var(--nx-green); animation: wr-pulse 1.2s infinite;
}
.wr-tile__live .v {
  font-family: var(--nx-font-display); font-weight: 700; font-style: italic;
  font-size: 26px; line-height: 1; color: var(--nx-green);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.wr-tile__live .v.r { color: var(--nx-red); }
.wr-tile__live .v.b { color: var(--nx-amber); font-size: 18px; }
.wr-tile__live .v sup {
  font-family: var(--nx-font-mono); font-style: normal;
  font-size: 10px; font-weight: 600;
  color: var(--nx-muted); letter-spacing: .12em;
  margin-left: 4px; vertical-align: 8px;
}

.wr-tile__hint {
  font-family: var(--nx-font-mono); font-size: 9.5px;
  color: var(--nx-amber-soft); letter-spacing: .14em;
  font-weight: 700; text-align: center; text-transform: uppercase;
}
.wr-tile__hint::after { content: " →"; display: inline-block; transition: transform .2s; }
.wr-tile:hover .wr-tile__hint::after { transform: translateX(4px); }

/* ───── TRADE LOG ───── */
.wr-panel { background: var(--nx-bg-1); border: 1px solid var(--nx-rule); }
.wr-panel__head {
  padding: 12px 18px; background: var(--nx-bg-2);
  border-bottom: 1px solid var(--nx-rule);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.wr-panel__t {
  font-family: var(--nx-font-display);
  font-weight: 700; font-style: italic; font-size: 18px;
  letter-spacing: -.01em;
}
.wr-panel__t em { color: var(--nx-amber); font-style: italic; }
.wr-panel__meta {
  font-family: var(--nx-font-mono); font-size: 10px;
  color: var(--nx-muted); letter-spacing: .14em;
  text-transform: uppercase;
  display: flex; gap: 14px; align-items: center;
}
.wr-panel__live { color: var(--nx-green); }
.wr-panel__live::before { content: "●"; margin-right: 5px; animation: wr-pulse 1.4s infinite; }

.wr-filter { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.wr-filter button {
  font-family: inherit; background: transparent;
  border: 1px solid var(--nx-rule-2); color: var(--nx-ink-2);
  font-size: 9.5px; padding: 3px 8px;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; font-weight: 600;
}
.wr-filter button.on { background: var(--nx-amber); color: #000; border-color: var(--nx-amber); }

.wr-trades-wrap {
  max-height: 560px; overflow-y: auto; scroll-behavior: smooth;
}
.wr-trades-wrap::-webkit-scrollbar       { width: 8px; }
.wr-trades-wrap::-webkit-scrollbar-track { background: var(--nx-bg); }
.wr-trades-wrap::-webkit-scrollbar-thumb { background: var(--nx-rule-2); border-radius: 4px; }
.wr-trades-wrap::-webkit-scrollbar-thumb:hover { background: var(--nx-amber); }

.wr-trade {
  display: grid; grid-template-columns: 60px 48px auto 1fr auto auto auto;
  gap: 12px; padding: 10px 18px; align-items: center;
  border-bottom: 1px solid var(--nx-rule);
  font-family: var(--nx-font-mono); font-size: 11.5px;
  animation: wr-slidein .35s ease-out;
}
@keyframes wr-slidein { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.wr-trade__t { color: var(--nx-muted); font-weight: 600; }
.wr-trade__who { font-weight: 700; color: #000; padding: 2px 6px; font-size: 10px; letter-spacing: .08em; text-align: center; white-space: nowrap; }
.wr-trade__verb {
  font-family: var(--nx-font-display); font-style: italic;
  font-weight: 600; font-size: 13px; white-space: nowrap;
}
.wr-trade__verb.in   { color: var(--nx-green); }
.wr-trade__verb.out  { color: var(--nx-amber); }
.wr-trade__verb.stop { color: var(--nx-red); }
.wr-trade__verb.watch{ color: var(--nx-cyan); }
.wr-trade__verb.hold { color: var(--nx-ink-2); }
.wr-trade__verb.flat { color: var(--nx-muted); }
.wr-trade__verb.pit  { color: var(--nx-cyan); }
.wr-trade__px { font-family: var(--nx-font-mono); color: var(--nx-ink-2); background: var(--nx-bg-2); padding: 1px 6px; font-size: 11px; white-space: nowrap; }
.wr-trade__why { font-family: var(--nx-font-display); font-style: italic; font-size: 12px; color: var(--nx-ink-2); line-height: 1.4; }
.wr-trade__pts {
  font-family: var(--nx-font-display); font-style: italic;
  font-weight: 700; font-size: 18px; color: var(--nx-green);
  text-align: right; min-width: 90px; white-space: nowrap;
}
.wr-trade__pts.r { color: var(--nx-red); }
.wr-trade__pts.open {
  color: var(--nx-cyan); font-size: 11px;
  font-family: var(--nx-font-mono); font-style: normal; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.wr-trade__pts.hold {
  color: var(--nx-muted); font-size: 10px;
  font-family: var(--nx-font-mono); font-style: normal; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.wr-trade:hover { background: var(--nx-bg-2); }
.wr-trade.hold  { opacity: .7; }

/* ───── DRIVER MODAL ───── */
.wr-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.86); backdrop-filter: blur(8px);
  z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto;
  animation: wr-fadein .25s ease-out;
}
@keyframes wr-fadein { from { opacity: 0; } to { opacity: 1; } }
.wr-modal__shell {
  background: var(--nx-bg); border: 1px solid var(--nx-amber);
  max-width: 1340px; width: 100%;
  animation: wr-modalin .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes wr-modalin { from { opacity: 0; transform: scale(.96) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.wr-m-top {
  padding: 16px 24px; background: var(--nx-bg-2);
  border-bottom: 1px solid var(--nx-rule);
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
}
.wr-m-top__info { display: flex; align-items: center; gap: 16px; min-width: 0; }
.wr-m-top__id { font-family: var(--nx-font-mono); font-weight: 700; font-size: 18px; color: #000; padding: 7px 14px; letter-spacing: .08em; }
.wr-m-top__nm { font-family: var(--nx-font-display); font-weight: 700; font-style: italic; font-size: 28px; letter-spacing: -.01em; line-height: 1; }
.wr-m-top__sub { font-family: var(--nx-font-mono); font-size: 10px; color: var(--nx-ink-2); letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; font-weight: 600; }
.wr-m-top__close {
  background: transparent; border: 1px solid var(--nx-rule-2);
  color: var(--nx-ink-2);
  font-family: var(--nx-font-mono); font-size: 11px;
  padding: 6px 12px; letter-spacing: .14em;
  font-weight: 700; text-transform: uppercase; white-space: nowrap;
}
.wr-m-top__close:hover { border-color: var(--nx-amber); color: var(--nx-amber); }

.wr-m-row1 {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 22px; background: var(--nx-bg-1);
  border-bottom: 1px solid var(--nx-rule);
  flex-wrap: wrap; font-family: var(--nx-font-mono); font-size: 12px;
}
.wr-m-date {
  background: var(--nx-bg-2); border: 1px solid var(--nx-rule-2);
  color: var(--nx-ink); font-family: inherit; font-size: 12px;
  padding: 6px 10px; letter-spacing: .04em; color-scheme: dark;
}
.wr-m-latest {
  background: transparent; border: 1px solid var(--nx-green);
  color: var(--nx-green); font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  padding: 6px 12px; cursor: pointer; text-transform: uppercase;
}
.wr-m-latest:hover { background: var(--nx-green); color: #000; }
.wr-m-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--nx-red); color: var(--nx-red);
  font-weight: 700; font-size: 11px; letter-spacing: .14em;
}
.wr-m-live .dot { width: 7px; height: 7px; background: var(--nx-red); border-radius: 50%; animation: wr-pulse 1.2s infinite; }
.wr-m-bars { color: var(--nx-ink-2); font-size: 11px; letter-spacing: .08em; }
.wr-m-bars b { color: var(--nx-ink); font-weight: 700; }

.wr-m-summary {
  padding: 14px 22px; background: var(--nx-bg);
  border-bottom: 1px solid var(--nx-rule);
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  font-family: var(--nx-font-body); font-size: 14px; color: var(--nx-ink);
}
.wr-m-summary__l { font-weight: 600; }
.wr-m-summary__l b {
  color: var(--nx-amber); font-family: var(--nx-font-display);
  font-style: italic; font-weight: 700; font-size: 18px; margin-left: 4px;
}
.wr-m-summary__it { color: var(--nx-ink-2); font-family: var(--nx-font-mono); font-size: 12.5px; letter-spacing: .04em; }
.wr-m-summary__it b { color: var(--nx-ink); font-weight: 700; margin-left: 2px; }
.wr-m-summary__it b.g { color: var(--nx-green); }
.wr-m-summary__it b.r { color: var(--nx-red); }

.wr-m-stats {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--nx-rule);
  border-bottom: 1px solid var(--nx-rule);
}
@media (max-width: 900px) { .wr-m-stats { grid-template-columns: 1fr 1fr; } }
.wr-m-stats__c { background: var(--nx-bg-1); padding: 14px 18px; font-family: var(--nx-font-mono); }
.wr-m-stats__c .l { font-size: 10px; color: var(--nx-muted); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; }
.wr-m-stats__c .v {
  font-family: var(--nx-font-display); font-weight: 700; font-style: italic;
  font-size: 24px; letter-spacing: -.01em; line-height: 1;
}
.wr-m-stats__c .v.g { color: var(--nx-green); }
.wr-m-stats__c .v.r { color: var(--nx-red); }
.wr-m-stats__c .v.a { color: var(--nx-amber); }

.wr-m-grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 1px; background: var(--nx-rule);
}
@media (max-width: 900px) { .wr-m-grid { grid-template-columns: 1fr; } }
.wr-m-col { background: var(--nx-bg); }

/* indicators bottom row */
.wr-m-ind-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--nx-rule);
  border-top: 1px solid var(--nx-rule);
}
.wr-m-ind { background: var(--nx-bg-1); padding: 14px 18px; font-family: var(--nx-font-mono); }
.wr-m-ind .l {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 9.5px; color: var(--nx-muted); letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 7px; font-weight: 600;
}
.wr-m-ind .v {
  font-family: var(--nx-font-display); font-weight: 700; font-style: italic;
  font-size: 22px; letter-spacing: -.01em; line-height: 1;
}
.wr-m-ind .v.g { color: var(--nx-green); }
.wr-m-ind .v.r { color: var(--nx-red); }
.wr-m-ind .v.a { color: var(--nx-amber); }
.wr-m-ind .v.n { color: var(--nx-ink); }
.wr-m-ind .bar { height: 4px; background: var(--nx-bg-3); margin-top: 9px; position: relative; }
.wr-m-ind .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--nx-amber); }
.wr-m-ind .note {
  font-size: 10px; color: var(--nx-ink-2);
  letter-spacing: .04em; margin-top: 6px;
  font-style: italic; font-family: var(--nx-font-display);
}

/* Live PnL banner — inside the modal, synced with tile's amber row. */
.wr-m-livebanner {
  display: grid; grid-template-columns: 1fr auto; gap: 18px;
  align-items: center;
  padding: 16px 22px;
  background: var(--nx-bg);
  border-bottom: 1px solid var(--nx-rule);
  position: relative;
}
.wr-m-livebanner::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--nx-amber) 0%, var(--nx-amber) 40%, transparent 100%);
}
.wr-m-livebanner__l {
  display: flex; flex-direction: column; gap: 4px;
}
.wr-m-livebanner__lbl {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--nx-font-mono); font-size: 10px;
  color: var(--nx-amber); letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700;
}
.wr-m-livebanner__lbl::before {
  content: "●"; color: var(--nx-green); animation: wr-pulse 1.2s infinite;
}
.wr-m-livebanner__sub {
  font-family: var(--nx-font-mono); font-size: 10.5px;
  color: var(--nx-muted); letter-spacing: .04em;
}
.wr-m-livebanner__sub b { color: var(--nx-ink-2); font-weight: 700; margin: 0 4px; }
.wr-m-livebanner__sub b.g { color: var(--nx-green); }
.wr-m-livebanner__sub b.r { color: var(--nx-red); }
.wr-m-livebanner__v {
  font-family: var(--nx-font-display);
  font-weight: 700; font-style: italic;
  font-size: 56px; line-height: 1;
  letter-spacing: -.02em;
  color: var(--nx-green);
  font-variant-numeric: tabular-nums;
}
.wr-m-livebanner__v.r { color: var(--nx-red); }
.wr-m-livebanner__v.b { color: var(--nx-amber); font-size: 36px; }
.wr-m-livebanner__v sup {
  font-family: var(--nx-font-mono); font-style: normal;
  font-size: 14px; font-weight: 600;
  color: var(--nx-muted); letter-spacing: .12em;
  margin-left: 6px; vertical-align: 14px;
}

/* livestrip — 即時參考價 / 淨部位 / 強平倒數 */
.wr-m-livestrip {
  padding: 11px 22px;
  background: var(--nx-bg-2);
  border-bottom: 1px solid var(--nx-rule);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  font-family: var(--nx-font-mono); font-size: 12px; color: var(--nx-ink-2);
}
.wr-m-livestrip__it { letter-spacing: .04em; }
.wr-m-livestrip__it b { color: var(--nx-ink); font-weight: 700; margin-left: 4px; }
.wr-m-livestrip__cd { color: var(--nx-amber); font-size: 16px; letter-spacing: .06em; font-weight: 700; }
.wr-m-livestrip__it em {
  color: var(--nx-muted); font-size: 10.5px;
  letter-spacing: .14em; font-style: normal; margin-left: 6px;
}
.wr-m-livestrip__state {
  margin-left: auto;
  padding: 5px 14px;
  border: 1px solid var(--nx-amber);
  background: rgba(255,159,28,.1);
  color: var(--nx-amber);
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
}
.wr-m-livestrip__state--green { border-color: var(--nx-green); background: rgba(47,190,110,.08); color: var(--nx-green); }
.wr-m-livestrip__state--red   { border-color: var(--nx-red);   background: rgba(232,84,61,.08);  color: var(--nx-red); }

/* macro ribbon — scrolls world-market data */
.wr-m-macro {
  display: flex; align-items: center;
  background: var(--nx-bg); border-bottom: 1px solid var(--nx-rule);
  overflow: hidden; position: relative;
}
.wr-m-macro__pin {
  flex-shrink: 0; padding: 9px 16px;
  background: var(--nx-bg-2);
  font-family: var(--nx-font-mono); font-size: 10px;
  color: var(--nx-amber); letter-spacing: .18em; font-weight: 700;
  text-transform: uppercase;
  border-right: 1px solid var(--nx-rule);
  z-index: 2;
}
.wr-m-macro__pin::before { content: "●"; margin-right: 6px; animation: wr-pulse 1.4s infinite; }
.wr-m-macro__scroll {
  flex: 1; display: flex; gap: 0;
  overflow: hidden; white-space: nowrap; position: relative;
  mask: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
.wr-m-macro__track {
  display: inline-flex; gap: 0;
  animation: wr-macro-scroll 50s linear infinite;
  width: max-content;
}
@keyframes wr-macro-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wr-m-macro__it {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-right: 1px solid var(--nx-rule);
  font-family: var(--nx-font-mono); font-size: 11px; flex-shrink: 0;
}
.wr-m-macro__it .lab { color: var(--nx-muted); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.wr-m-macro__it .v   { color: var(--nx-ink);   font-weight: 700; letter-spacing: .04em; }
.wr-m-macro__it .chg { font-size: 10px; font-weight: 700; }
.wr-m-macro__it .chg.g { color: var(--nx-green); }
.wr-m-macro__it .chg.r { color: var(--nx-red); }

/* Stats — now 5 dashboard cells: REALIZED TODAY / UNREALIZED /
   AI CONFIDENCE / TRADES TODAY / STATUS. Match the source's italic-Fraunces
   numerics + small pipe ▎ leader. */
.wr-m-stats__c .l { display: flex; align-items: center; gap: 6px; }
.wr-m-stats__c .l::before { content: "▎"; color: var(--nx-amber); font-weight: 700; }

/* Candlestick chart panel */
.wr-chart-panel { padding: 14px 22px; background: var(--nx-bg); }
.wr-chart-panel svg { width: 100%; height: 360px; display: block; }
.wr-chart-panel .axis text {
  font-family: var(--nx-font-mono); font-size: 10px;
  fill: var(--nx-muted); letter-spacing: .08em;
}
.wr-chart-panel .grid line { stroke: var(--nx-rule); stroke-width: 1; stroke-dasharray: 2,3; }
.wr-chart-panel .ma     { fill: none; stroke: var(--nx-green-soft); stroke-width: 1.5; opacity: .9; }
.wr-chart-panel .bb     { fill: none; stroke: var(--nx-ink-2); stroke-width: 1; stroke-dasharray: 3,3; opacity: .45; }
.wr-chart-panel .marker-line { stroke: var(--nx-amber); stroke-width: 1; stroke-dasharray: 2,3; opacity: .7; }
.wr-chart-panel .marker-line.r { stroke: var(--nx-red); }
.wr-chart-panel .marker-line.g { stroke: var(--nx-green); }
.wr-chart-panel .marker-line.c { stroke: var(--nx-cyan); }
.wr-chart-panel .marker-lbl { font-family: var(--nx-font-mono); font-size: 10px; font-weight: 700; }
.wr-chart-panel .marker-lbl rect.bg { fill: var(--nx-bg); }
.wr-chart-panel .marker-lbl rect.box { fill: none; stroke-width: 1; }

/* trailing trade-row icon (rightmost) — the ◆/⌛/▸ cyan glyph */
.wr-trade__icon {
  font-family: var(--nx-font-mono); font-size: 12px;
  color: var(--nx-cyan); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.wr-trade__icon.muted { color: var(--nx-muted); }
.wr-trade__icon.dim   { color: var(--nx-ink-2); }