/* The page keeps its own colours for the game look: Alliance blue, Horde red, and green on the test site.
   Every colour is a token with a light and a dark value, so the page follows the device and the theme switch.
   Each of the four groups below (light, dark device, switch on light, switch on dark) sets the same tokens. */
:root {
  --bg: #eef3fb;
  --panel: rgba(255, 255, 255, 0.86);
  --inner: rgba(226, 235, 250, 0.75);
  --line: rgba(30, 84, 170, 0.2);
  --text: #0f1b33;
  --muted: #485a7c;
  --accent: #1b5cc0;
  --accent-soft: rgba(27, 92, 192, 0.12);
  --field-bg: #ffffff;
  --field-text: #0f1b33;
  --field-muted: #485a7c;
  --field-border: #5f7396;
  --field-disabled-bg: #e2e8f0;
  --field-disabled-text: #475569;
  --focus-ring: #1b5cc0;
  --glow-1: rgba(77, 140, 255, 0.2);
  --glow-2: rgba(139, 92, 246, 0.1);
  --chart-line: #1b5cc0;
  --chart-grid: rgba(27, 92, 192, 0.28);
  --up: #166534;
  --down: #b91c1c;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --idle: #64748b;
  --shadow: rgba(15, 35, 80, 0.14);
}
body.theme-horde {
  --bg: #fdf3ee;
  --panel: rgba(255, 255, 255, 0.86);
  --inner: rgba(250, 231, 223, 0.75);
  --line: rgba(170, 60, 25, 0.22);
  --text: #2b120c;
  --muted: #734a3e;
  --accent: #a5350d;
  --accent-soft: rgba(165, 53, 13, 0.12);
  --field-bg: #ffffff;
  --field-text: #2b120c;
  --field-muted: #734a3e;
  --field-border: #94685b;
  --field-disabled-bg: #efe2dd;
  --field-disabled-text: #5f4138;
  --focus-ring: #a5350d;
  --glow-1: rgba(211, 77, 46, 0.16);
  --glow-2: rgba(245, 158, 11, 0.1);
  --chart-line: #a5350d;
  --chart-grid: rgba(165, 53, 13, 0.28);
}
body.test-env, body.test-env.theme-horde {
  --bg: #eef8f1;
  --panel: rgba(255, 255, 255, 0.86);
  --inner: rgba(221, 241, 228, 0.75);
  --line: rgba(22, 101, 52, 0.22);
  --text: #0c2416;
  --muted: #3f6350;
  --accent: #166534;
  --accent-soft: rgba(22, 101, 52, 0.12);
  --field-bg: #ffffff;
  --field-text: #0c2416;
  --field-muted: #3f6350;
  --field-border: #5b8469;
  --field-disabled-bg: #dfeae3;
  --field-disabled-text: #3d5a49;
  --focus-ring: #166534;
  --glow-1: rgba(47, 158, 68, 0.16);
  --glow-2: rgba(99, 201, 135, 0.1);
  --chart-line: #166534;
  --chart-grid: rgba(22, 101, 52, 0.28);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070b16;
    --panel: rgba(17, 26, 47, 0.72);
    --inner: rgba(10, 17, 33, 0.6);
    --line: rgba(102, 180, 255, 0.16);
    --text: #e7eeff;
    --muted: #8fa3cc;
    --accent: #4da3ff;
    --accent-soft: rgba(77, 163, 255, 0.14);
    --field-bg: rgba(10, 17, 33, 0.6);
    --field-text: #e7eeff;
    --field-muted: #8fa3cc;
    --field-border: #6c86b8;
    --field-disabled-bg: rgba(17, 26, 47, 0.72);
    --field-disabled-text: #8fa3cc;
    --focus-ring: #4da3ff;
    --glow-1: rgba(56, 102, 214, 0.32);
    --glow-2: rgba(139, 92, 246, 0.16);
    --chart-line: #4da3ff;
    --chart-grid: rgba(102, 180, 255, 0.12);
    --up: #4ade80;
    --down: #f87171;
    --ok: #4ade80;
    --warn: #fbbf24;
    --bad: #f87171;
    --idle: #64748b;
    --shadow: rgba(0, 0, 0, 0.35);
  }
  body.theme-horde {
    --bg: #120807;
    --panel: rgba(40, 18, 14, 0.72);
    --inner: rgba(28, 12, 10, 0.6);
    --line: rgba(255, 125, 82, 0.18);
    --text: #fff1ec;
    --muted: #d1a495;
    --accent: #ff7d52;
    --accent-soft: rgba(255, 125, 82, 0.14);
    --field-bg: rgba(28, 12, 10, 0.6);
    --field-text: #fff1ec;
    --field-muted: #d1a495;
    --field-border: #a87868;
    --field-disabled-bg: rgba(40, 18, 14, 0.72);
    --field-disabled-text: #d1a495;
    --focus-ring: #ff7d52;
    --glow-1: rgba(211, 77, 46, 0.3);
    --glow-2: rgba(245, 158, 11, 0.12);
    --chart-line: #ff7d52;
    --chart-grid: rgba(255, 125, 82, 0.14);
  }
  body.test-env, body.test-env.theme-horde {
    --bg: #07120c;
    --panel: rgba(19, 38, 26, 0.72);
    --inner: rgba(10, 26, 17, 0.6);
    --line: rgba(99, 201, 135, 0.2);
    --text: #e7f8ec;
    --muted: #9ccab1;
    --accent: #63c987;
    --accent-soft: rgba(99, 201, 135, 0.14);
    --field-bg: rgba(10, 26, 17, 0.6);
    --field-text: #e7f8ec;
    --field-muted: #9ccab1;
    --field-border: #5f9a78;
    --field-disabled-bg: rgba(19, 38, 26, 0.72);
    --field-disabled-text: #9ccab1;
    --focus-ring: #63c987;
    --glow-1: rgba(47, 158, 68, 0.28);
    --glow-2: rgba(99, 201, 135, 0.12);
    --chart-line: #63c987;
    --chart-grid: rgba(99, 201, 135, 0.14);
  }
}
html[data-theme="light"] {
  --bg: #eef3fb;
  --panel: rgba(255, 255, 255, 0.86);
  --inner: rgba(226, 235, 250, 0.75);
  --line: rgba(30, 84, 170, 0.2);
  --text: #0f1b33;
  --muted: #485a7c;
  --accent: #1b5cc0;
  --accent-soft: rgba(27, 92, 192, 0.12);
  --field-bg: #ffffff;
  --field-text: #0f1b33;
  --field-muted: #485a7c;
  --field-border: #5f7396;
  --field-disabled-bg: #e2e8f0;
  --field-disabled-text: #475569;
  --focus-ring: #1b5cc0;
  --glow-1: rgba(77, 140, 255, 0.2);
  --glow-2: rgba(139, 92, 246, 0.1);
  --chart-line: #1b5cc0;
  --chart-grid: rgba(27, 92, 192, 0.28);
  --up: #166534;
  --down: #b91c1c;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --idle: #64748b;
  --shadow: rgba(15, 35, 80, 0.14);
}
html[data-theme="light"] body.theme-horde {
  --bg: #fdf3ee;
  --panel: rgba(255, 255, 255, 0.86);
  --inner: rgba(250, 231, 223, 0.75);
  --line: rgba(170, 60, 25, 0.22);
  --text: #2b120c;
  --muted: #734a3e;
  --accent: #a5350d;
  --accent-soft: rgba(165, 53, 13, 0.12);
  --field-bg: #ffffff;
  --field-text: #2b120c;
  --field-muted: #734a3e;
  --field-border: #94685b;
  --field-disabled-bg: #efe2dd;
  --field-disabled-text: #5f4138;
  --focus-ring: #a5350d;
  --glow-1: rgba(211, 77, 46, 0.16);
  --glow-2: rgba(245, 158, 11, 0.1);
  --chart-line: #a5350d;
  --chart-grid: rgba(165, 53, 13, 0.28);
}
html[data-theme="light"] body.test-env, html[data-theme="light"] body.test-env.theme-horde {
  --bg: #eef8f1;
  --panel: rgba(255, 255, 255, 0.86);
  --inner: rgba(221, 241, 228, 0.75);
  --line: rgba(22, 101, 52, 0.22);
  --text: #0c2416;
  --muted: #3f6350;
  --accent: #166534;
  --accent-soft: rgba(22, 101, 52, 0.12);
  --field-bg: #ffffff;
  --field-text: #0c2416;
  --field-muted: #3f6350;
  --field-border: #5b8469;
  --field-disabled-bg: #dfeae3;
  --field-disabled-text: #3d5a49;
  --focus-ring: #166534;
  --glow-1: rgba(47, 158, 68, 0.16);
  --glow-2: rgba(99, 201, 135, 0.1);
  --chart-line: #166534;
  --chart-grid: rgba(22, 101, 52, 0.28);
}
html[data-theme="dark"] {
  --bg: #070b16;
  --panel: rgba(17, 26, 47, 0.72);
  --inner: rgba(10, 17, 33, 0.6);
  --line: rgba(102, 180, 255, 0.16);
  --text: #e7eeff;
  --muted: #8fa3cc;
  --accent: #4da3ff;
  --accent-soft: rgba(77, 163, 255, 0.14);
  --field-bg: rgba(10, 17, 33, 0.6);
  --field-text: #e7eeff;
  --field-muted: #8fa3cc;
  --field-border: #6c86b8;
  --field-disabled-bg: rgba(17, 26, 47, 0.72);
  --field-disabled-text: #8fa3cc;
  --focus-ring: #4da3ff;
  --glow-1: rgba(56, 102, 214, 0.32);
  --glow-2: rgba(139, 92, 246, 0.16);
  --chart-line: #4da3ff;
  --chart-grid: rgba(102, 180, 255, 0.12);
  --up: #4ade80;
  --down: #f87171;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --idle: #64748b;
  --shadow: rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] body.theme-horde {
  --bg: #120807;
  --panel: rgba(40, 18, 14, 0.72);
  --inner: rgba(28, 12, 10, 0.6);
  --line: rgba(255, 125, 82, 0.18);
  --text: #fff1ec;
  --muted: #d1a495;
  --accent: #ff7d52;
  --accent-soft: rgba(255, 125, 82, 0.14);
  --field-bg: rgba(28, 12, 10, 0.6);
  --field-text: #fff1ec;
  --field-muted: #d1a495;
  --field-border: #a87868;
  --field-disabled-bg: rgba(40, 18, 14, 0.72);
  --field-disabled-text: #d1a495;
  --focus-ring: #ff7d52;
  --glow-1: rgba(211, 77, 46, 0.3);
  --glow-2: rgba(245, 158, 11, 0.12);
  --chart-line: #ff7d52;
  --chart-grid: rgba(255, 125, 82, 0.14);
}
html[data-theme="dark"] body.test-env, html[data-theme="dark"] body.test-env.theme-horde {
  --bg: #07120c;
  --panel: rgba(19, 38, 26, 0.72);
  --inner: rgba(10, 26, 17, 0.6);
  --line: rgba(99, 201, 135, 0.2);
  --text: #e7f8ec;
  --muted: #9ccab1;
  --accent: #63c987;
  --accent-soft: rgba(99, 201, 135, 0.14);
  --field-bg: rgba(10, 26, 17, 0.6);
  --field-text: #e7f8ec;
  --field-muted: #9ccab1;
  --field-border: #5f9a78;
  --field-disabled-bg: rgba(19, 38, 26, 0.72);
  --field-disabled-text: #9ccab1;
  --focus-ring: #63c987;
  --glow-1: rgba(47, 158, 68, 0.28);
  --glow-2: rgba(99, 201, 135, 0.12);
  --chart-line: #63c987;
  --chart-grid: rgba(99, 201, 135, 0.14);
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 600px at 90% -10%, var(--glow-1), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, var(--glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  transition: color 0.2s ease;
}
.page { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; display: grid; gap: 1rem; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spacer { flex: 1; }
.top { display: flex; align-items: center; gap: 0.75rem; }
.dashboard-home-link { color: var(--muted); text-decoration: none; font-size: 0.88rem; }
.dashboard-home-link:hover { color: var(--accent); }
a:focus-visible, .ghost:focus-visible, .range-chip:focus-visible, .history summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.ghost:focus-visible, .range-chip:focus-visible { border-radius: 999px; }
.faction { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--muted); cursor: pointer; user-select: none; }
.faction input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.faction .switch { position: relative; width: 34px; height: 18px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--field-border); transition: background 0.2s ease; }
.faction .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transition: transform 0.2s ease, background 0.2s ease; }
.faction input:checked + .switch::after { transform: translateX(16px); }
.faction input:focus-visible + .switch { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
body:not(.theme-horde) .faction .f-a, body.theme-horde .faction .f-h { color: var(--text); font-weight: 600; }
.panel {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px var(--shadow);
}
.hero { padding: 1.4rem 1.4rem 1rem; animation: rise 0.45s ease-out both; }
.hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.eyebrow { margin: 0 0 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.price { font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .unit { margin-left: 0.4rem; font-size: 1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.hero-meta { margin-top: 0.55rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta:empty { display: none; }
.ranges { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--inner); border: 1px solid var(--line); }
.range-chip {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.range-chip:hover { color: var(--text); }
.range-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.chart-wrap { position: relative; margin-top: 1.1rem; }
.chart { display: block; width: 100%; height: 260px; cursor: crosshair; }
/* The chart's colours are set here, not by the script, so the lines change with the theme without a redraw. */
.chart .chart-line { stroke: var(--chart-line); }
.chart .chart-marker { stroke: var(--chart-line); }
.chart .chart-grid-line { stroke: var(--chart-grid); }
.chart .chart-area-stop { stop-color: var(--chart-line); }
.hover-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--accent);
  pointer-events: none;
}
.chart-tooltip {
  position: absolute;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 24px var(--shadow);
}
.chart-tooltip strong { display: block; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.chart-tooltip span { color: var(--muted); }
.chart-labels { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-labels .range-stats { display: flex; gap: 0.9rem; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0 0.4rem; font-size: 0.8rem; color: var(--muted); }
.status-line .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); flex: none; }
.status-line[data-state="ok"] .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.status-line[data-state="bad"] .dot { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.ghost {
  border: 1px solid var(--field-border);
  background: var(--inner);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ghost:disabled { opacity: 0.45; cursor: default; }
.history { padding: 0; overflow: hidden; }
.history summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.2rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.history summary::-webkit-details-marker { display: none; }
.history summary::before { content: "\25B8"; color: var(--muted); transition: transform 0.15s ease; }
.history[open] summary::before { transform: rotate(90deg); }
.history summary .muted { margin-left: auto; font-weight: 400; font-size: 0.78rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0 1.2rem 0.9rem; font-size: 0.8rem; color: var(--muted); }
.toolbar label { display: inline-flex; align-items: center; gap: 0.35rem; }
.toolbar input, .toolbar select {
  background: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-border);
  border-radius: 8px;
  padding: 0.25rem 0.45rem;
  font: inherit;
}
.toolbar input::placeholder { color: var(--field-muted); opacity: 1; }
.toolbar input:focus-visible, .toolbar select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.toolbar input:disabled, .toolbar select:disabled { color: var(--field-disabled-text); background: var(--field-disabled-bg); cursor: not-allowed; opacity: 1; }
.history-scroll { max-height: 420px; overflow-y: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
th { position: sticky; top: 0; background: var(--panel); backdrop-filter: blur(10px); text-align: left; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
th, td { padding: 0.5rem 1.2rem; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--accent-soft); }
th:nth-child(n+2), td:nth-child(n+2) { text-align: right; }
.move-wrap { display: inline-flex; align-items: center; gap: 0.3rem; }
.move-up { color: var(--up); }
.move-down { color: var(--down); }
.move-flat { color: var(--muted); }
.move-up .move-arrow::before { content: "\25B2"; font-size: 0.65em; }
.move-down .move-arrow::before { content: "\25BC"; font-size: 0.65em; }
.legal-note { padding: 0 0.4rem; font-size: 0.75rem; line-height: 1.6; color: var(--muted); }
.legal-note a { color: inherit; }
.legal-note a:hover { color: var(--accent); }
.page-theme-switch { margin: 0 auto; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .hero { padding: 1.1rem 1rem 0.9rem; }
  .chart { height: 200px; }
  .ranges { width: 100%; justify-content: space-between; }
  th, td { padding: 0.45rem 0.8rem; }
}