/* Shared theme — dark, operational, mission-critical.
   Near-black surfaces with a red brand/accent, in the spirit of
   Palantir Gotham/Foundry, Bloomberg Terminal, and Anduril Lattice HUDs.
   Every page links this first, then adds page-specific rules in its own
   <style>. Tokens below are the single source of truth: primary/brand is
   red (--blue* names are kept for backward compat with the pages), positive
   is green, alerts/destructive use the deeper --red. */

:root {
  /* surfaces — layered near-black */
  --bg: #0a0a0c;            /* app background */
  --panel: #101014;         /* navbar / recessed areas */
  --panel2: #16161b;        /* cards */
  --inset: rgba(0, 0, 0, 0.45);
  --line: #24242a;          /* hairline borders */
  --line-strong: #34343d;   /* input borders */

  /* neutral controls */
  --btn: #202028;
  --btn-hover: #2b2b34;

  /* text */
  --ink: #f4f5f7;           /* headings, emphasized */
  --text: #d2d4d8;          /* body */
  --dim: #969aa2;           /* secondary */
  --muted: #6b6f78;         /* tertiary, labels */

  /* brand / primary accent — RED (kept under --blue* names for the pages) */
  --blue: #e5484d;  --blue-hover: #cf3a40;  --blue-text: #ff8a8d;
  --accent: #e5484d; --accent-bright: #ff5a5f; --accent-glow: rgba(229, 66, 71, 0.45);

  /* intents */
  --green: #2f9e5f; --green-hover: #26824e; --green-text: #5ed69a;
  --red: #b42318;   --red-hover: #8f1a10;   --red-text: #ff8a8d;   /* alerts / destructive */
  /* currency / value accent — warm ivory, harmonizes with red on near-black
     (was bright gold, which clashed with the red brand) */
  --orange: #c87619; --gold: #e9e6df;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --shadow-1: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; margin: 0; }

/* Native-app feel on mobile: kill double-tap-to-zoom and the 300ms tap delay
   so rapid tapping (e.g. dropping Plinko balls) never zooms the page. Pinch-
   to-zoom and scrolling still work, so accessibility isn't affected. */
html { touch-action: manipulation; }
button, a, input, select, textarea, label, .btn, [role="button"] {
  touch-action: manipulation;
}

body {
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(229, 66, 71, 0.06), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 14px/1.5 var(--font);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- navbar ---------- */
header {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent), var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  position: sticky;
  top: 0;
  z-index: 10;
}
header h1 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* the status LED before the wordmark: a glowing red operational dot */
header h1 span {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow), 0 0 3px var(--accent);
}

main {
  width: 100%;
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 20px 48px;
}

footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 40px;
  color: var(--muted);
  font-size: 12px;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--blue-text); }

/* ---------- cards ---------- */
.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 40%),
    var(--panel2);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow-1);
  padding: 20px;
}
.card h2, h2.overline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ---------- buttons ---------- */
button { font: inherit; cursor: pointer; border: 0; border-radius: 2px; }
.btn {
  background: var(--btn);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  padding: 7px 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  transition: background .12s, box-shadow .12s;
}
.btn:hover { background: var(--btn-hover); }
.btn.primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(229, 66, 71, 0.5), 0 6px 18px -8px var(--accent-glow);
}
.btn.primary:hover {
  background: var(--blue-hover);
  box-shadow: 0 0 0 1px rgba(229, 66, 71, 0.7), 0 8px 22px -6px var(--accent-glow);
}
.btn.success { background: var(--green); color: #fff; box-shadow: none; }
.btn.success:hover { background: var(--green-hover); }
.btn.danger { background: var(--red); color: #fff; box-shadow: none; }
.btn.danger:hover { background: var(--red-hover); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- form controls ---------- */
input, select, textarea {
  background: var(--inset);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font: inherit;
  border-radius: 2px;
  padding: 7px 10px;
  font-variant-numeric: tabular-nums;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px rgba(229, 66, 71, 0.18);
}
input:disabled, select:disabled, textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
::placeholder { color: var(--muted); }

/* ---------- tabs (underline style) ---------- */
.tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  flex-wrap: nowrap;
  /* keep the submenu on a single row and scroll it sideways on narrow
     screens instead of wrapping links onto extra rows */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;         /* Firefox: hide the scrollbar */
}
.tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari: hide it too */
.tabs button {
  background: none;
  color: var(--dim);
  font-weight: 500;
  font-size: 14px;
  padding: 9px 2px;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.tabs button:hover:not(.active) { color: var(--ink); }
.tabs button.active {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
}

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 8px;
}
td { padding: 8px 0; border-top: 1px solid var(--line); }
/* breathing room between adjacent columns — without it, right-aligned
   numbers in neighboring cells run together into one unreadable string */
td + td, th + th { padding-left: 14px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- text helpers ---------- */
.hint { color: var(--muted); font-size: 13px; min-height: 1.3em; }
.hint.ok, .hint.win { color: var(--green-text); }
.hint.err, .hint.loss { color: var(--red-text); }
.up { color: var(--green-text); }
.down { color: var(--red-text); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(107, 111, 120, 0.15);
  color: var(--dim);
  border-radius: 2px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* ---------- scrollable tables ---------- */
/* Every table sits in one of these: when the columns can't shrink to fit
   (many numeric columns on a narrow screen) the table scrolls inside the
   card instead of stretching the page or clipping at the edge. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  /* one compact row: hamburger + brand + balance/login. nav.js hides the
     page links behind the hamburger, dropping them down as a panel. */
  header {
    flex-wrap: wrap;
    height: auto;
    min-height: 50px;
    padding: 6px 14px;
  }
  main { margin-top: 16px; padding: 0 14px 40px; }
  .card { padding: 16px 14px; }
  .tabs { gap: 14px; }
  /* iOS zooms the page when a focused control's text is under 16px */
  input, select, textarea { font-size: 16px; }
}