/* ===========================================================================
 * CTS — one design system for the terminal and the dashboard.
 *
 * The two pages had SEPARATE token sets: the dashboard's green was #00d68f
 * and the terminal's #26c281, backgrounds and line colours differed, and the
 * variables even had different names (--card vs --panel). They could never
 * look like one product, and the shared position card rendered differently on
 * each page depending on which variables happened to exist.
 *
 * This file defines the tokens once and aliases the older names onto them, so
 * existing page CSS keeps working while every colour resolves to one value.
 * Load it AFTER a page's own <style> block so these tokens win.
 * =========================================================================== */

:root {
  /* ── Surfaces ── dark, low-chroma, so the semantic colours carry meaning */
  --bg:        #0b0e14;
  --panel:     #141a24;
  --panel2:    #1b2430;
  --panel3:    #212c3a;
  --line:      #28323f;
  --line-soft: #1e2733;

  /* ── Text ── */
  --txt:       #e6ebf2;
  --text:      #e6ebf2;
  --muted:     #8b97a8;
  --faint:     #5d6878;

  /* ── Semantic. Only these three mean profit / loss / caution. ── */
  --green:     #26c281;
  --green-dim: rgba(38,194,129,.14);
  --red:       #ff5470;
  --red-dim:   rgba(255,84,112,.14);
  --gold:      #f5b301;
  --gold-dim:  rgba(245,179,1,.14);

  /* ── Accents. Never used for profit or loss. ── */
  --blue:      #4d9fff;
  --blue-dim:  rgba(77,159,255,.14);
  --purple:    #a37bff;

  /* ── Aliases so the dashboard's older names resolve to the same colours ── */
  --card:      var(--panel);
  --card2:     var(--panel2);

  --chart-bg:   #0e131b;
  --chart-grid: #1b2430;
  --topbar-bg:  rgba(11,14,20,.92);

  /* ── Type ── */
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --fs-micro: 10.5px;
  --fs-tiny:  11.5px;
  --fs-sm:    12.5px;
  --fs-base:  13.5px;
  --fs-md:    15px;
  --fs-lg:    18px;
  --fs-xl:    22px;

  /* ── Spacing, radius, motion ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 22px; --sp-6: 30px;
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --ease: cubic-bezier(.4,0,.2,1);
  --fast: .14s; --slow: .28s;
}

/* ── Motion: present, never decorative, and off when asked ───────────────── */
.cts-panel, .cts-btn, .cts-badge, .cts-stat, .cts-row,
button, input, select, .toggle, .mini-btn, .chip { transition:
  background-color var(--fast) var(--ease),
  border-color var(--fast) var(--ease),
  color var(--fast) var(--ease),
  transform var(--fast) var(--ease),
  opacity var(--fast) var(--ease); }

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

/* ── Focus: visible for keyboards, quiet for mice ────────────────────────── */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Panel: the one container ────────────────────────────────────────────── */
.cts-panel {
  background: linear-gradient(165deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}

/* ── Section header: emoji, title, and a line saying what it DOES ─────────
   Every panel gets one. "More detail" means the screen explains itself
   instead of assuming you remember what each box is for. */
.cts-sec {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-3); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.cts-sec-ico { font-size: var(--fs-md); line-height: 1; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(150deg, var(--blue-dim), transparent);
  border: 1px solid var(--line); }
.cts-sec-txt { min-width: 0; flex: 1; }
.cts-sec-title {
  font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em;
  color: var(--txt); margin: 0; line-height: 1.3;
}
.cts-sec-sub {
  font-size: var(--fs-tiny); color: var(--muted); margin: 2px 0 0;
  line-height: 1.5; font-weight: 400;
}
.cts-sec-aside { margin-left: auto; flex: none; font-size: var(--fs-tiny); color: var(--muted); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.cts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--panel2);
  color: var(--txt); font-family: var(--sans); font-size: var(--fs-sm);
  font-weight: 700; cursor: pointer; line-height: 1;
}
.cts-btn:hover  { background: var(--panel3); border-color: var(--faint); }
.cts-btn:active { transform: translateY(1px); }
.cts-btn[disabled] { opacity: .45; cursor: not-allowed; }
.cts-btn-buy   { background: var(--green); border-color: var(--green); color: #04150c; }
.cts-btn-buy:hover  { filter: brightness(1.08); background: var(--green); }
.cts-btn-sell  { background: var(--red); border-color: var(--red); color: #1a0409; }
.cts-btn-sell:hover { filter: brightness(1.08); background: var(--red); }
.cts-btn-ghost { background: transparent; }
.cts-btn-danger{ color: var(--red); border-color: var(--red); background: transparent; }
.cts-btn-danger:hover { background: var(--red-dim); }
.cts-btn-lg    { padding: 15px 18px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.cts-btn-block { width: 100%; }

/* ── Badges: state you can read at a glance ──────────────────────────────── */
.cts-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: var(--fs-micro);
  font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.cts-badge-ok   { background: var(--green-dim); color: var(--green); border-color: rgba(38,194,129,.3); }
.cts-badge-warn { background: var(--gold-dim);  color: var(--gold);  border-color: rgba(245,179,1,.3); }
.cts-badge-bad  { background: var(--red-dim);   color: var(--red);   border-color: rgba(255,84,112,.3); }
.cts-badge-info { background: var(--blue-dim);  color: var(--blue);  border-color: rgba(77,159,255,.3); }
.cts-badge-mute { background: var(--panel2);    color: var(--muted); border-color: var(--line); }

/* ── Stat tile: label, value, and the plain-words meaning underneath ─────── */
.cts-stats { display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.cts-stat { background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 11px; min-width: 0; }
.cts-stat-k { font-size: var(--fs-micro); color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.cts-stat-v { font-size: var(--fs-md); font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.2; word-break: break-word; }
.cts-stat-sub { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; font-weight: 400; }
.cts-pos-v { color: var(--green); }
.cts-neg-v { color: var(--red); }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.cts-barwrap { height: 7px; border-radius: 4px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; }
.cts-barwrap > i { display: block; height: 100%; border-radius: 3px;
  transition: width var(--slow) var(--ease); }
.cts-barlabel { display: flex; justify-content: space-between;
  font-size: var(--fs-tiny); color: var(--muted); margin-bottom: 4px; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.cts-input, input[type="number"], input[type="text"], select {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--txt);
  font-family: var(--mono); font-size: var(--fs-sm); padding: 8px 10px;
}
.cts-input:focus, input:focus, select:focus { border-color: var(--blue); }
input::placeholder { color: var(--faint); font-family: var(--sans); }

/* ── Empty and loading states: never a blank box ─────────────────────────── */
.cts-empty { text-align: center; padding: var(--sp-5) var(--sp-3);
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.cts-empty-ico { font-size: 26px; display: block; margin-bottom: var(--sp-2); opacity: .75; }
.cts-skel { background: linear-gradient(90deg, var(--panel2) 25%, var(--panel3) 50%, var(--panel2) 75%);
  background-size: 200% 100%; animation: cts-shimmer 1.3s infinite;
  border-radius: var(--r-sm); height: 14px; }
@keyframes cts-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── A row of label → value, the most common shape on these pages ────────── */
.cts-row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.cts-row:last-child { border-bottom: 0; }
.cts-row-k { font-size: var(--fs-sm); color: var(--txt); min-width: 0; }
.cts-row-hint { font-size: var(--fs-micro); color: var(--muted);
  margin-top: 2px; line-height: 1.5; }
.cts-row-v { font-family: var(--mono); font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; flex: none; }

/* ── Numbers line up wherever they are compared ──────────────────────────── */
.cts-num, td, .cts-stat-v { font-variant-numeric: tabular-nums; }

/* ── Live pulse, used only where something really is live ────────────────── */
.cts-live::before { content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--green); margin-right: 6px;
  animation: cts-pulse 2s infinite; vertical-align: middle; }
@keyframes cts-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --fs-md: 14px; --fs-lg: 17px; --fs-xl: 20px; }
  .cts-panel { padding: var(--sp-3); border-radius: var(--r-md); }
  .cts-stats { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
  .cts-btn { padding: 11px 12px; }
  .cts-btn-lg { padding: 14px 16px; }
  /* Touch targets stay at least 44px tall. */
  .cts-btn, .mini-btn, button { min-height: 40px; }
}

/* ── Settings rows ─────────────────────────────────────────────────────────
   The explanations used to live in title="" tooltips, which a phone never
   shows. They are visible hint lines now, so the label becomes a column:
   emoji + name on the first line, the explanation beneath it. */
.set-label { flex-wrap: wrap; align-items: baseline; flex: 1 1 62%; min-width: 0; }
.set-label .cts-row-hint { flex: 1 0 100%; max-width: 46ch; }
.set-row { align-items: flex-start; }
.set-control { flex: 0 0 auto; padding-top: 1px; }
.set-row input[type="number"] { width: 92px; text-align: right; }

/* ── The step strip: Scan → Score → Trade → Manage → Learn ────────────────
   The five stages are one loop, and the strip says which one you are looking
   at, so no screen is a dead end. */
.cts-flow { display: flex; align-items: center; gap: var(--sp-1);
  flex-wrap: wrap; margin-bottom: var(--sp-3); }
.cts-flow a { display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--r-pill); text-decoration: none;
  font-size: var(--fs-tiny); font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); background: var(--panel2); cursor: pointer; }
.cts-flow a:hover { color: var(--txt); border-color: var(--faint); }
.cts-flow a[aria-current="step"] { color: var(--txt);
  border-color: var(--blue); background: var(--blue-dim); }
.cts-flow .cts-flow-arrow { color: var(--faint); font-size: var(--fs-micro); }
@media (max-width: 640px) { .cts-flow .cts-flow-arrow { display: none; }
  .cts-flow a { flex: 1 1 auto; justify-content: center; } }