/* ══════════════════════════════════════════════════════════════════════
   Evie — Analysis.

   Laid out like dbotzone's Advanced tool: a card per market, a digit grid
   with the notable digits outlined, and each trade pair as
   percentage · buttons · percentage.

   The reference is a light theme; this keeps Evie's dark surface so the
   page still belongs to the rest of the site, and carries the reference's
   colour language across: green rise, red fall, blue even, red odd,
   orange over, cyan under. Flat colours only — no gradients anywhere.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Deep enough to carry white text on a filled button and to read as text on
     a white card. The dark theme brightens all of them below. */
  --up:    #15a34a;
  --down:  #dc2626;
  --even:  #2563eb;
  --odd:   #dc2626;
  --over:  #d97706;
  --under: #0891b2;
  --match: #9333ea;
  --differ:#64748b;
  --cur:   #4f46e5;
}

:root[data-theme="dark"] {
  --up:    #22c55e;
  --down:  #ef4444;
  --even:  #3b82f6;
  --odd:   #ef4444;
  --over:  #f59e0b;
  --under: #06b6d4;
  --match: #a855f7;
  --differ:#94a3b8;
  --cur:   #818cf8;
}

/* ── settings ───────────────────────────────────────────────────────────
   Kept deliberately short. On a 768px-tall laptop the whole panel plus the
   first row of cards has to be on screen at once, so every field is one
   compact row and nothing here is allowed to grow. */

.tools {
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tools-head { margin-bottom: 10px; }
.tools-t { font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 700; }

/* Fields flow in one line and wrap only when they must. */
.tools-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.fld { flex: 1 1 150px; min-width: 130px; margin-top: 0; display: block; }

.fld-k {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.fld-i {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--base);
  border: 1px solid var(--line-hi);
  border-radius: 9px;
}
.fld-i:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.fld-i:disabled { opacity: 0.5; cursor: not-allowed; }

/* The multiplier sits under its own switch, so the pair reads as one control. */
.fld--mart { flex: 0 1 190px; }

.tog {
  position: relative;
  width: 34px;
  height: 18px;
  padding: 0;
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.tog-dot {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--ink-faint);
  border-radius: 50%;
  transition: transform 0.18s ease, background 0.18s ease;
}
/* On is green, and the knob moves as well as the colour changing, so it does
   not rest on hue alone. */
.tog[aria-checked="true"] { background: rgba(20, 160, 90, 0.18); border-color: var(--up); }
.tog[aria-checked="true"] .tog-dot { transform: translateX(16px); background: var(--up); }

.syms { margin-top: 10px; }
.syms-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

.sym {
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-2);
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sym:hover { color: var(--ink); border-color: var(--ink-faint); }
.sym.is-on { color: var(--on-accent); background: var(--blue); border-color: var(--blue); }

/* Risk note and next stake share one line rather than stacking. */
.tools-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  min-height: 1em;
}
.next-stake { font-size: 12px; font-weight: 650; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.next-stake.is-recovering { color: var(--over); }

/* ── the cards ──────────────────────────────────────────────────────── */

.cards-grid {
  display: grid;
  /* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, so a single
     selected symbol would stretch its card across the whole page; auto-fill
     keeps them, and one card stays exactly one card wide. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 14px;
  margin-top: 14px;
}
.cards-none { padding: 40px 0; text-align: center; color: var(--ink-faint); }

.mkt {
  padding: clamp(14px, 1.6vw, 18px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}
.mkt-h {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 14.5px;
  font-weight: 650;
  text-align: center;
}
.mkt-c { color: var(--ink-faint); font-weight: 500; font-size: 13px; }
.mkt-c b { color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── digits ─────────────────────────────────────────────────────────── */

.dgts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.dgt {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 2px;
  background: var(--surface-2);
  /* Two-pixel, transparent by default, so an outlined box is exactly the
     same size as a plain one and the grid never shifts. */
  border: 2px solid transparent;
  border-radius: 9px;
}
.dgt b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dgt span { font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.dgt.is-high { border-color: var(--up); }
.dgt.is-high b, .dgt.is-high span { color: var(--up); }
.dgt.is-low { border-color: var(--down); }
.dgt.is-low b, .dgt.is-low span { color: var(--down); }
/* The live digit wins the outline — it is the one the next contract settles
   against, so it matters more than the tallies. */
.dgt.is-cur { border-color: var(--cur); }
.dgt.is-cur b, .dgt.is-cur span { color: var(--cur); }

/* ── pair rows ──────────────────────────────────────────────────────── */

.rows { display: grid; gap: 6px; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.pbar {
  padding: 7px 9px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}
/* The leading side gets the border, so the answer is visible without
   comparing two numbers. */
.pbar.is-lead { border-color: currentColor; }

.acts { display: inline-flex; gap: 5px; }
.act {
  padding: 7px 11px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--on-accent);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.act:hover:not(:disabled) { filter: brightness(1.12); }
.act:active:not(:disabled) { transform: translateY(1px); }
.act:disabled { opacity: 0.35; cursor: not-allowed; }
/* The leading side is ringed. A light ring, not currentColor: the label on a
   filled button is deliberately dark, and a dark ring would vanish. */
.act.is-lead { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ring); }

/* Colour belongs to the BAR's text and the BUTTON's fill — never the button's
   text, which stays dark. Setting both from one rule painted every label in
   the same colour as the fill behind it and made them invisible. */
.pbar--rise { color: var(--up); }
.pbar--fall { color: var(--down); }
.pbar--even { color: var(--even); }
.pbar--odd { color: var(--odd); }
.pbar--over { color: var(--over); }
.pbar--under { color: var(--under); }
.pbar--match { color: var(--match); }
.pbar--differ { color: var(--differ); }

.act { color: var(--on-accent); }
.act--rise { background: var(--up); }
.act--fall { background: var(--down); }
.act--even { background: var(--even); }
.act--odd { background: var(--odd); }
.act--over { background: var(--over); }
.act--under { background: var(--under); }
.act--match { background: var(--match); }
.act--differ { background: var(--differ); }

.pbar--rise { background: rgba(34, 197, 94, 0.10); }
.pbar--fall { background: rgba(239, 68, 68, 0.10); }
.pbar--even { background: rgba(59, 130, 246, 0.10); }
.pbar--odd { background: rgba(239, 68, 68, 0.10); }
.pbar--over { background: rgba(245, 158, 11, 0.10); }
.pbar--under { background: rgba(6, 182, 212, 0.10); }
.pbar--match { background: rgba(168, 85, 247, 0.10); }
.pbar--differ { background: rgba(148, 163, 184, 0.10); }

/* ── recent ticks ───────────────────────────────────────────────────── */

.ticks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 12px;
}
.tk {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.tk--even { background: var(--even); }
.tk--odd { background: var(--odd); }

/* ── results ────────────────────────────────────────────────────────── */

.results { margin-top: 14px; }
.grp-note { margin-left: 8px; font-weight: 700; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.grp-note.is-up { color: var(--up); }
.grp-note.is-down { color: var(--down); }

.risk { font-size: 12px; color: var(--ink-faint); }
.risk--real { color: var(--pink); }
.status { margin-top: 6px; font-size: 12.5px; color: var(--ink-muted); min-height: 1.2em; }
.status--error { color: var(--pink); }
.status--success { color: var(--up); }
.status--warning { color: #e3b341; }

@media (max-width: 480px) {
  /* The three columns STAY. A percentage belongs beside the button it is
     about — stacked above and below, the eye has to travel to pair them up.
     Everything shrinks instead. */
  .row { gap: 4px; }
  .pbar { padding: 6px 5px; font-size: 10px; letter-spacing: -0.01em; }
  .act { padding: 6px 7px; font-size: 10px; }
  .acts { gap: 3px; }
  .dgts { gap: 4px; }
  .dgt { padding: 6px 1px; }
  .dgt b { font-size: 13px; }
  .dgt span { font-size: 9.5px; }
}

@media (max-width: 360px) {
  /* Only the labels give way, never the layout. */
  .pbar { font-size: 9px; padding: 6px 3px; }
  .act { font-size: 9px; padding: 6px 5px; }
}

/* ── Transactions ───────────────────────────────────────────────────────
   One markup, two shapes. Wide: a rail down the right, always open, with
   the page inset to make room for it. Narrow: a sheet parked at the bottom
   showing only its handle, sliding up when tapped — a 340px rail would eat
   the width the market cards need. */

.txn {
  position: fixed;
  right: 0;
  top: 68px;                 /* under the fixed nav */
  bottom: 0;
  z-index: 40;
  width: 340px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
}

.txn-handle { display: none; }

.txn-body {
  display: flex;
  flex-direction: column;
  min-height: 0;             /* lets the rows scroll instead of pushing */
  flex: 1;
  padding: 16px;
}

.txn-head {
  display: grid;
  grid-template-columns: var(--tx-cols);
  gap: 10px;
  padding: 0 2px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.txn-head-r { text-align: right; }

.txn-rows {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
  overscroll-behavior: contain;
}
.txn-rows::-webkit-scrollbar { width: 8px; }
.txn-rows::-webkit-scrollbar-track { background: transparent; }
.txn-rows::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: 999px;
  border: 2px solid var(--surface);
}

/* One definition of the columns, used by the header and every row, so the
   three never drift apart at any width. */
.txn { --tx-cols: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 1.05fr); }

.tx {
  display: grid;
  grid-template-columns: var(--tx-cols);
  gap: 10px;
  align-items: start;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.tx:last-child { border-bottom: 0; }
.tx-none { padding: 26px 0; font-size: 12.5px; color: var(--ink-faint); text-align: center; }

.tx-type { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; }
.tx-dot { width: 8px; height: 8px; border-radius: 50%; grid-row: span 2; }
.tx-dot--win { background: var(--up); }
.tx-dot--loss { background: var(--down); }
.tx-type-t { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-type-s { grid-column: 2; font-size: 10.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Entry above, exit below — the two spots the contract settled between. */
.tx-spot { display: grid; gap: 2px; font-variant-numeric: tabular-nums; min-width: 0; }
.tx-spot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-in { color: var(--ink-muted); }
.tx-out { color: var(--ink-faint); }

.tx-money { display: grid; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.tx-money span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-buy { color: var(--ink-muted); }
.tx-pl { font-weight: 650; }
.tx-pl.is-up, .sum-v.is-up { color: var(--up); }
.tx-pl.is-down, .sum-v.is-down { color: var(--down); }

/* ── the totals ─────────────────────────────────────────────────────── */

.sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
  margin-top: 14px;
  padding: 16px 12px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.sum-c { display: grid; gap: 4px; text-align: center; min-width: 0; }
.sum-k { font-size: 9.5px; font-weight: 600; color: var(--ink-faint); line-height: 1.3; }
.sum-v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.txn-reset { width: 100%; margin-top: 12px; }

/* Make room for the rail so no card ever sits under it. */
@media (min-width: 1200px) {
  .dash-main { padding-right: calc(340px + var(--gutter)); }
}

/* ── the sheet ──────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
  .txn {
    top: auto;
    left: 0;
    width: auto;
    border-left: 0;
    border-top: 1px solid var(--line-hi);
    border-radius: 16px 16px 0 0;
    /* Parked with only the handle showing. Translating the whole panel keeps
       the animation on the compositor, so it stays smooth on a phone. */
    transform: translateY(calc(100% - 52px));
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: min(82vh, 620px);
  }
  .txn.is-open { transform: translateY(0); }

  .txn-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  .txn-grip {
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px;
    background: var(--line-hi);
    border-radius: 999px;
  }
  .txn-chev { color: var(--ink-faint); transition: transform 0.28s ease; }
  .txn.is-open .txn-chev { transform: rotate(180deg); }

  .txn-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--on-accent);
    background: var(--blue);
    border-radius: 999px;
  }
  .txn-count:empty { display: none; }

  .txn-body { padding: 0 16px 16px; overflow-y: auto; }
  .txn-rows { max-height: 40vh; }

  /* The parked handle covers the page bottom, so the last card is not hidden. */
  .dash-main { padding-bottom: 76px; }
}

/* ── Fitting a laptop ───────────────────────────────────────────────────
   On a 1366x768 screen the tools panel and the first row of cards should
   both be on screen without scrolling. These only load on this page, so
   the roomier spacing elsewhere is untouched. */

@media (min-width: 1000px) {
  /* The nav is 68px; 100px of clearance was 30 more than it needed. */
  .dash-main { padding-top: 84px; padding-bottom: 24px; }

  .tools-head { margin-bottom: 8px; }
  .tools { padding: 12px 16px; }
  .syms { margin-top: 8px; }
  .tools-foot { margin-top: 8px; }

  .mkt { padding: 12px 14px; }
  .mkt-h { margin-bottom: 10px; font-size: 13.5px; }
  .dgts { gap: 5px; margin-bottom: 10px; }
  .dgt { padding: 6px 2px; }
  .dgt b { font-size: 14px; }
  .rows { gap: 5px; }
  .pbar { padding: 6px 8px; }
  .act { padding: 6px 10px; }
  .ticks { margin-top: 9px; gap: 4px; }
  .tk { width: 23px; height: 23px; font-size: 11px; }
}

/* A quiet aside inside the label, not a second line. */
.fld-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
  opacity: 0.85;
}

/* ── The floating bot ───────────────────────────────────────────────────
   Fixed, draggable by its header, and above everything except a modal. */

.bot {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 70;
  width: 268px;
  background: var(--surface);
  border: 1px solid var(--line-hi);
  border-radius: 14px;
  box-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.bot[hidden] { display: none; }
/* No transition while dragging, or the card lags behind the pointer. */
.bot.is-dragging { user-select: none; cursor: grabbing; }

.bot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  cursor: grab;
  touch-action: none;   /* the pointer events are the drag, not a scroll */
}
.bot.is-dragging .bot-head { cursor: grabbing; }
/* Six solid dots, drawn with shadows rather than a radial-gradient — the
   page has no gradients anywhere and this is not the place to start. */
.bot-grip {
  width: 2px; height: 2px; flex: none;
  margin: 0 6px 0 0;
  border-radius: 50%;
  background: var(--ink-faint);
  box-shadow:
    0 5px var(--ink-faint), 0 10px var(--ink-faint),
    5px 0 var(--ink-faint), 5px 5px var(--ink-faint), 5px 10px var(--ink-faint);
  align-self: center;
  transform: translateY(-5px);
}
.bot-t { font-size: 12.5px; font-weight: 700; margin-right: auto; }
.bot-x {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  color: var(--ink-faint);
  background: transparent; border: 0; border-radius: 7px; cursor: pointer;
}
.bot-x:hover { color: var(--ink); background: var(--surface); }

.bot-body { padding: 12px; display: grid; gap: 10px; }
.bot-f { display: grid; gap: 5px; }
.bot-k {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.bot-note { font-size: 10.5px; line-height: 1.45; color: var(--ink-faint); margin-top: -4px; }
.bot-f .fld-i { padding: 7px 9px; font-size: 13px; }

.bot-run { width: 100%; padding: 9px; font-size: 13.5px; }
.bot-run.is-running { background: var(--down); }

.bot-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; padding-top: 10px; border-top: 1px solid var(--line);
}
.bot-stats dt {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.bot-stats dd { margin: 2px 0 0; }
.bot-v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bot-v.is-up { color: var(--up); }
.bot-v.is-down { color: var(--down); }

.bot-status { font-size: 11px; line-height: 1.45; color: var(--ink-muted); min-height: 1.4em; }
.bot-status--warning { color: var(--over); }
.bot-status--success { color: var(--up); }
.bot-status--error { color: var(--down); }

/* What brings it back once closed. */
.bot-open {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 70;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px;
  font: inherit; font-size: 13px; font-weight: 650;
  color: var(--on-accent);
  background: var(--blue);
  border: 0; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
}
.bot-open[hidden] { display: none; }

/* Green while a run continues behind the closed card. */
.bot-open-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.bot-open.is-running { background: var(--up); }
.bot-open.is-running .bot-open-dot { display: block; animation: bot-pulse 1.6s ease-in-out infinite; }
@keyframes bot-pulse { 50% { opacity: 0.35; } }

@media (max-width: 1199px) {
  /* Clear of the transactions sheet parked at the bottom. */
  .bot-open { bottom: 66px; }
}
@media (max-width: 420px) {
  .bot { width: calc(100vw - 24px); }
}