/* =====================================================================
   btcx — the visual system
   =====================================================================

   THE IDEA: A PRECISION INSTRUMENT, NOT A CASINO.

   This exchange's whole personality is exactness. Every price is an
   integer times 10^8. Rounding always favours the house, by rule. The
   ledger sums to zero or the process refuses to continue. So the surface
   should feel like a measuring device — graduated, calm, legible at a
   glance — rather than a slot machine painted green and red.

   THE SIGNATURE: THE SATOSHI TAIL.
   Every monetary figure is printed with its significant digits bright and
   its trailing precision dimmed:

        60,123.45|678900
        ^^^^^^^^^ ^^^^^^
        what you read     what we are actually carrying

   No other venue shows you this. It comes straight out of the project's
   first rule, and it is the one element that should never be redesigned
   away — it is the house telling you it has not quietly rounded anything.

   Supporting motifs: a yellow rail on the leading edge of every section
   header (the mark on a gauge), and a graduated tick strip under the top
   bar. Instrument yellow on deep blue — a gauge dial, not a casino sign.

   NOTE ON NAMES: the accent variable is still called --brass. The hue
   moved from brass to instrument yellow (operator's request, 2026-08-30),
   but renaming the variable would touch every rule for zero behaviour —
   the *role* it names (focus, active, alarm, the mark on the gauge) is
   unchanged. One variable, one place to change it again.

   TYPE: two families, three jobs.
     mono  every number, every key, every label that is really data.
           Tabular figures, so columns of prices line up as columns.
     sans  Persian prose. System faces only — a CDN font is a dependency,
           and this project does not take dependencies for decoration.

   RTL: the document is Persian and right-to-left. Anything that must
   stay left-to-right (keys, hashes, numbers with units) is marked `dir=ltr`
   in the markup rather than fought with here.
   ===================================================================== */

:root {
  /* ---- colour: the brand pair is #002FFF and #F2FF00 -------------- */
  /* The two brand colours have different jobs. The yellow is the
     instrument mark (focus, active, alarm) because it reads perfectly
     on a dark ground. The pure blue is too dark to carry TEXT on these
     surfaces, so it works as a fill and a line: the graduated scale,
     text selection, link underlines. The surfaces themselves are the
     same #002FFF hue pulled down to working darknesses. */
  --ink:      #020617;  /* the page */
  --panel:    #060d2b;  /* a surface that holds content */
  --raise:    #0b1540;  /* a surface that accepts input */
  --line:     #141f5c;  /* structural hairline */
  --edge:     #22308c;  /* a border asking to be noticed */
  --text:     #edf0ff;
  --dim:      #8892cc;  /* labels, secondary figures */
  --faint:    #4a55a3;  /* the satoshi tail */
  --long:     #17b486;  /* bid, buy, up — semantics, not brand */
  --short:    #e85d5d;  /* ask, sell, down — semantics, not brand */
  --brass:    #f2ff00;  /* the instrument mark: focus, active, alarm */
  --brass-dim:#6b7100;
  --blue:     #002fff;  /* the brand blue: fills, lines, selection */
  --blue-soft:#4d6bff;  /* the same blue, lifted enough to be read */

  /* ---- type ------------------------------------------------------ */
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", "DejaVu Sans Mono", monospace;
  --sans: "Segoe UI", Tahoma, "Vazirmatn", "Noto Sans Arabic", system-ui, sans-serif;

  --radius: 3px;   /* barely there: instruments have edges, not pillows */
  --pad: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Focus is brass and impossible to miss. A trading screen operated by
   keyboard should never leave you guessing what Enter will hit. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

/* Selecting text paints it brand blue — one of the two places the pure
   #002FFF appears at full strength (the other is the scale strip). */
::selection { background: var(--blue); color: #ffffff; }

/* =====================================================================
   the tick strip — the graduated scale of the instrument
   ===================================================================== */

.scale {
  height: 5px;
  background-image:
    repeating-linear-gradient(to right,
      var(--blue) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(to right,
      var(--brass) 0 1px, transparent 1px 60px);
  background-size: 100% 3px, 100% 5px;
  background-repeat: no-repeat;
  background-position: bottom left, bottom left;
  opacity: .8;
}

/* =====================================================================
   the top bar
   ===================================================================== */

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  height: 54px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand b { color: var(--brass); font-weight: 700; }
/* The uploaded logo. Height-capped so a giant upload cannot break the
   bar; the media store already capped its bytes. */
.brand img.logo {
  height: 26px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  align-self: center;
  display: block;
}
.brand small {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0;
  color: var(--dim);
  font-weight: 400;
}

.nav { display: flex; gap: 2px; }
.nav a {
  padding: 6px 12px;
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--raise); }
.nav a.on {
  color: var(--text);
  background: var(--raise);
  border-color: var(--edge);
  /* The brass rail again, this time as an underline. */
  box-shadow: inset 0 -2px 0 var(--brass);
}

.spacer { flex: 1 1 auto; }

/* the live price strip */
.ticker { display: flex; align-items: center; gap: 20px; }
.ticker .cell { display: flex; flex-direction: column; gap: 1px; }

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
  margin-inline-end: 6px;
  vertical-align: middle;
}
.dot.live   { background: var(--long); box-shadow: 0 0 6px var(--long); }
.dot.warn   { background: var(--brass); }
.dot.down   { background: var(--short); }

/* =====================================================================
   labels and numbers
   ===================================================================== */

/* The micro-label. Persian has no capitals, so the "instrument panel"
   feel comes from size, tracking and colour instead of uppercasing. */
.label {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--dim);
  line-height: 1.4;
  white-space: nowrap;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* THE SATOSHI TAIL. Written by fmt() in the page scripts. */
.num .tail { color: var(--faint); }

.num.lg { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.num.md { font-size: 15px; }
.up   { color: var(--long); }
.down { color: var(--short); }
.gold { color: var(--brass); }
.muted{ color: var(--dim); }

/* A price that just moved. Brief, and off entirely for anyone who has
   asked their system to stop animating things. */
@keyframes flash-up   { from { background: rgba(23,180,134,.22); } to { background: transparent; } }
@keyframes flash-down { from { background: rgba(232,93,93,.22);  } to { background: transparent; } }
.flash-up   { animation: flash-up .5s ease-out; }
.flash-down { animation: flash-down .5s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* =====================================================================
   panels
   ===================================================================== */

.panel {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--raise), var(--panel));
  flex: 0 0 auto;
}

/* THE RAIL: a brass mark on the leading edge of every section. */
.panel-head::before {
  content: "";
  width: 2px;
  height: 13px;
  background: var(--brass);
  flex: 0 0 auto;
  border-radius: 1px;
}

.panel-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
}

.panel-body {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  padding: var(--pad);
}
.panel-body.flush { padding: 0; }

/* Scrollbars, made to look like part of the instrument. */
* { scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   forms
   ===================================================================== */

label.field { display: block; margin-bottom: 10px; }
label.field .label { display: block; margin-bottom: 4px; }

input, select, textarea, button {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}

input, select, textarea {
  width: 100%;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  transition: border-color .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--edge); }
input:focus, select:focus, textarea:focus { border-color: var(--brass); outline: none; }
input::placeholder, textarea::placeholder { color: var(--faint); }

/* Numbers stay left-to-right and monospaced even inside an RTL form —
   a price typed right-to-left is a price typed wrong. */
input.num, textarea.num { font-family: var(--mono); direction: ltr; text-align: left; }
textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

button {
  cursor: pointer;
  border: 1px solid var(--edge);
  background: var(--raise);
  color: var(--text);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-weight: 600;
  transition: filter .12s ease, border-color .12s ease;
}
button:hover:not(:disabled) { filter: brightness(1.25); }
button:disabled { opacity: .45; cursor: not-allowed; }

button.long  { background: var(--long);  border-color: var(--long);  color: #04150f; }
button.short { background: var(--short); border-color: var(--short); color: #1b0505; }
button.gold  { background: var(--brass); border-color: var(--brass); color: #171102; }
button.ghost { background: transparent; color: var(--dim); }
button.ghost:hover { color: var(--text); border-color: var(--brass); }
button.tiny  { padding: 3px 8px; font-size: 11px; font-weight: 500; }
button.wide  { width: 100%; }

/* A two-way choice rendered as one control, not two buttons that can
   both look pressed. */
.toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.toggle button { background: var(--raise); border-color: var(--line); color: var(--dim); }
.toggle button.on.buy  { background: var(--long);  border-color: var(--long);  color: #04150f; }
.toggle button.on.sell { background: var(--short); border-color: var(--short); color: #1b0505; }

.row { display: flex; gap: 8px; align-items: center; }
.row > * { min-width: 0; }
.check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); }
.check input { width: auto; }

/* =====================================================================
   tables and data lists
   ===================================================================== */

table.data { width: 100%; border-collapse: collapse; font-size: 12px; }
table.data th {
  text-align: start;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--dim);
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}
table.data td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(20,31,92,.6);
  vertical-align: middle;
}
table.data tr:hover td { background: rgba(11,21,64,.7); }
table.data td.n { font-family: var(--mono); direction: ltr; text-align: left; font-variant-numeric: tabular-nums; }

.empty { padding: 26px 12px; text-align: center; color: var(--faint); font-size: 12px; }

/* key/value readout, the instrument's dial cluster */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--line); }
.stat { background: var(--panel); padding: 10px 12px; }
.stat .label { margin-bottom: 3px; }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12px; }
.kv + .kv { border-top: 1px solid rgba(20,31,92,.55); }
.kv dt { color: var(--dim); margin: 0; }
.kv dd { margin: 0; }

/* THE SEAL — the ledger invariant, displayed like the alarm it is. */
.seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--brass);
  background: rgba(242,255,0,.06);
}
.seal.broken {
  border-color: var(--short);
  color: var(--short);
  background: rgba(232,93,93,.1);
}

.pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  font-size: 10px;
  color: var(--dim);
}
.pill.on { border-color: var(--long); color: var(--long); }
.pill.off { border-color: var(--faint); color: var(--faint); }
.pill.gold { border-color: var(--brass); color: var(--brass); }

/* =====================================================================
   announcements
   ===================================================================== */

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.banner::before {
  content: "";
  width: 2px; height: 14px; flex: 0 0 auto;
  background: var(--brass);
}
.banner.warning  { background: rgba(242,255,0,.06); }
.banner.critical { background: rgba(232,93,93,.09); }
.banner.critical::before { background: var(--short); }
.banner .prose { flex: 1 1 auto; }
.banner .prose p { margin: 0; }

/* =====================================================================
   prose — rendered CMS content
   ===================================================================== */

.prose { font-size: 14px; line-height: 1.85; color: var(--text); }
.prose h1 { font-size: 24px; margin: 1.4em 0 .5em; font-weight: 600; letter-spacing: -.01em; }
.prose h2 { font-size: 19px; margin: 1.6em 0 .5em; font-weight: 600; }
.prose h3 { font-size: 15px; margin: 1.5em 0 .4em; font-weight: 600; color: var(--brass); }
.prose h1:first-child, .prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.prose li { margin-bottom: .35em; }
/* Links are the brand blue, lifted to a readable strength; the line
   under them is the pure #002FFF. */
.prose a { color: var(--blue-soft); text-decoration: none; border-bottom: 1px solid var(--blue); }
.prose a:hover { color: var(--text); border-bottom-color: var(--brass); }
.prose code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1px 5px;
  direction: ltr;
  unicode-bidi: embed;
}
.prose pre {
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow: auto;
  direction: ltr;
  text-align: left;
}
.prose pre code { background: none; border: 0; padding: 0; }
.prose blockquote {
  margin: 0 0 1em;
  padding: 2px 14px;
  border-inline-start: 2px solid var(--brass);
  color: var(--dim);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 13px; }
.prose th, .prose td { padding: 8px 10px; border: 1px solid var(--line); text-align: start; }
.prose th { background: var(--raise); font-weight: 600; color: var(--dim); font-size: 11px; letter-spacing: .06em; }

/* =====================================================================
   page shells: landing and text pages
   ===================================================================== */

.wrap { max-width: 880px; margin: 0 auto; padding: 40px 20px 80px; }
.wrap.wide { max-width: 1180px; }

.hero { padding: 76px 20px 60px; text-align: center; border-bottom: 1px solid var(--line); }
.hero h1 {
  font-size: clamp(30px, 6vw, 50px);
  line-height: 1.25;
  margin: 0 0 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.hero p { max-width: 620px; margin: 0 auto 30px; color: var(--dim); font-size: 16px; }
.hero .cta {
  display: inline-block;
  padding: 12px 30px;
  background: var(--brass);
  color: #171102;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
}
.hero .cta:hover { filter: brightness(1.12); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--panel); padding: 22px; }
.card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.card p { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.75; }
.card .mark { display: block; width: 22px; height: 2px; background: var(--brass); margin-bottom: 14px; }

.foot { border-top: 1px solid var(--line); padding: 24px 20px; text-align: center; color: var(--faint); font-size: 12px; }

/* =====================================================================
   tabs (admin)
   ===================================================================== */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 16px; background: var(--panel); overflow-x: auto; }
.tabs button {
  border: 0;
  background: none;
  color: var(--dim);
  padding: 11px 16px;
  border-radius: 0;
  font-weight: 500;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs button:hover { color: var(--text); filter: none; }
.tabs button.on { color: var(--brass); border-bottom-color: var(--brass); }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.stack > * + * { margin-top: 16px; }

/* =====================================================================
   toast — the one place errors surface
   ===================================================================== */

.toasts {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  max-width: min(420px, calc(100vw - 32px));
}
.toast {
  background: var(--raise);
  border: 1px solid var(--edge);
  border-inline-start: 2px solid var(--brass);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: 0 8px 26px rgba(0,0,0,.55);
}
.toast.bad { border-inline-start-color: var(--short); }
.toast.good { border-inline-start-color: var(--long); }
.toast .label { margin-bottom: 2px; }

/* =====================================================================
   responsive
   ===================================================================== */

@media (max-width: 900px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 10px; }
  .ticker { gap: 14px; order: 3; width: 100%; overflow-x: auto; }
  .hero { padding: 48px 16px 40px; }
}