/* ═══════════════════════════════════════════════════════════════
   HARAZI — Components
   Buttons, chips, pills, tables, badges, cards, modals
   ═══════════════════════════════════════════════════════════════ */

/* ── Top bar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  height: var(--h-topbar);
  padding: 0 var(--sp-4);
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: var(--sp-4);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-black);
  font-size: var(--fs-14);
  color: var(--text-0);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* The 3D-H logo IS the H of HARAZI — tighten its gap to the wordmark
   ("ARAZI") so they read as one continuous word, not "[icon] [text]". */
.topbar__brand-logo + .topbar__brand-name { margin-left: -2px; letter-spacing: -0.02em; }
.topbar__brand-bolt { color: var(--warn); font-size: 14px; }
.topbar__brand-spark { color: var(--info); }

/* Wordmark 3D extrusion — matches the SVG H's palette so the whole
   "(H)ARAZI SDT" reads as one consistent 3D mark. Multi-stop text
   shadow simulates the same upper-right light source that the SVG
   uses, ending in a soft drop shadow. Subtle by design — keeps it
   readable at the topbar's 14px scale. */
.topbar__brand-name {
  color: #cfddff;
  text-shadow:
    1px 1px 0 #2c5eb8,
    2px 2px 0 #1d57c8,
    3px 3px 0 #0f2c70,
    4px 5px 6px rgba(0, 0, 0, 0.45);
  letter-spacing: -0.02em;
}
.topbar__brand-spark {
  color: var(--info);
  text-shadow:
    1px 1px 0 #1d57c8,
    2px 2px 0 #0f2c70,
    3px 4px 5px rgba(0, 0, 0, 0.45);
}

/* 3D Harazi mark — used in topbar + mobile drawer brand link.
   The mark has its own gradients/depth in the SVG. We just size it
   here and add a subtle hover tilt that emphasises the 3D feel. */
.topbar__brand-logo {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform 220ms cubic-bezier(.2,.8,.3,1), filter 220ms ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.topbar__brand:hover .topbar__brand-logo {
  transform: rotate(-3deg) translateY(-1px) scale(1.06);
  filter: drop-shadow(0 3px 6px rgba(77, 142, 255, 0.55));
}
.mobile-drawer__brand-logo {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
/* Theme toggle button — sun & moon icons live in the same button;
   CSS picks which is visible based on data-theme. Subtle hover lift
   + soft accent ring, doesn't compete with the LIVE indicator. */
.topbar__theme {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-1);
  cursor: pointer;
  transition: background-color .14s, border-color .14s, color .14s, transform .12s;
  flex-shrink: 0;
}
.topbar__theme:hover {
  background: var(--bg-2);
  border-color: var(--border);
  color: var(--text-0);
  transform: translateY(-1px);
}
.topbar__theme:active { transform: translateY(0); }
.topbar__theme-icon { display: none; }
:root[data-theme="dark"] .topbar__theme-icon--sun,
[data-theme="dark"]      .topbar__theme-icon--sun,
:root:not([data-theme="light"]) .topbar__theme-icon--sun {
  display: block;     /* dark theme → show SUN (click to go light) */
}
:root[data-theme="light"] .topbar__theme-icon--moon,
[data-theme="light"]      .topbar__theme-icon--moon {
  display: block;     /* light theme → show MOON (click to go dark) */
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--sp-3);
}
.topbar__nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--text-1);
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.topbar__nav a:hover {
  background: var(--bg-2);
  color: var(--text-0);
}
.topbar__nav a.active {
  color: var(--text-0);
  background: var(--bg-3);
}
.topbar__nav a.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -3px;
  height: 2px;
  background: var(--info);
  border-radius: 2px 2px 0 0;
}
.topbar__nav a kbd {
  font-size: 10px;
  padding: 0 3px;
}
.topbar__kbd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text-1);
  font-size: var(--fs-12);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
  user-select: none;
}
.topbar__kbd:hover {
  border-color: var(--border-hi);
  color: var(--text-0);
}
.topbar__kbd kbd {
  font-size: 10px;
  padding: 0 4px;
  background: var(--bg-3);
}

/* ── Segmented control ───────────────────────────────────── */
.segmented {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 2px;
  gap: 2px;
}
.segmented__btn {
  padding: 4px 10px;
  border-radius: var(--r-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--text-1);
  transition: background var(--t-fast), color var(--t-fast);
  cursor: pointer;
  user-select: none;
}
.segmented__btn:hover { color: var(--text-0); }
.segmented__btn.active {
  background: var(--bg-4);
  color: var(--text-0);
}

/* ── Broker dropdown ─────────────────────────────────────── */
.broker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--text-0);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-fast);
}
.broker-chip:hover { border-color: var(--border-hi); }
.broker-chip__caret { color: var(--text-2); font-size: 9px; }
.broker-chip__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bull);
  box-shadow: 0 0 6px var(--bull);
}

/* ── Exchange selector dropdown (topbar) ─────────────────── */
.exchange-dd { position: relative; display: inline-flex; }
.broker-chip__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: 0 0 16px;
}
.exmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px; overflow: hidden;
}
.exmark svg { width: 16px; height: 16px; display: block; }
.exmark__img { width: 16px; height: 16px; object-fit: contain; display: block; border-radius: 3px; }

.exchange-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 234px; max-height: 72vh; overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  padding: 6px;
  z-index: 200;
}
.exchange-menu[hidden] { display: none; }
.exrow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: transparent;
  border-radius: var(--r-2); cursor: pointer;
  color: var(--text-0); font-size: var(--fs-13); font-weight: var(--fw-medium);
  text-align: left; transition: background var(--t-fast);
}
.exrow:hover { background: var(--bg-2); }
.exrow.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.exrow__label { flex: 1 1 auto; white-space: nowrap; }
.exrow__badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 5px; border-radius: 4px; flex: 0 0 auto;
}
.exrow__badge--perp { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.exrow__badge--spot { color: var(--info); background: color-mix(in srgb, var(--info) 16%, transparent); }
.exrow__check { color: var(--accent); font-size: 12px; opacity: 0; flex: 0 0 auto; }
.exrow.is-active .exrow__check { opacity: 1; }

/* ── Live dot ────────────────────────────────────────────── */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bull);
  box-shadow: 0 0 8px var(--bull);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

/* ── Status bar ──────────────────────────────────────────── */
.statusbar {
  display: flex;
  align-items: center;
  height: var(--h-statusbar);
  padding: 0 var(--sp-4);
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-1);
  gap: var(--sp-4);
  overflow: hidden;
}
.statusbar__group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.statusbar__sep {
  width: 1px;
  height: 12px;
  background: var(--border);
  flex-shrink: 0;
}
.statusbar__label {
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
}
.statusbar__val {
  color: var(--text-0);
  font-weight: var(--fw-semi);
}
.statusbar__val--win  { color: var(--win); }
.statusbar__val--loss { color: var(--loss); }
.statusbar__val--warn { color: var(--warn); }
.statusbar__val--info { color: var(--info); }

/* ── Cards / panels ──────────────────────────────────────── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  overflow: hidden;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.card__head h2 {
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  color: var(--text-0);
  letter-spacing: 0.01em;
}
.card__body {
  padding: var(--sp-4);
}
.card__body--flush { padding: 0; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--text-0);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  user-select: none;
}
.btn:hover {
  background: var(--bg-3);
  border-color: var(--border-hi);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn--primary {
  background: var(--info);
  border-color: var(--info);
  color: #fff;
}
.btn--primary:hover {
  background: #7aa9ff;
  border-color: #7aa9ff;
}
.btn--success {
  background: var(--win);
  border-color: var(--win);
  color: #03110a;
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-1);
}
.btn--ghost:hover {
  background: var(--bg-2);
  color: var(--text-0);
}
.btn--icon {
  padding: 6px;
  width: 28px;
  height: 28px;
}
/* Active state for toggleable icon buttons (Log/Lin, future drawing
   tools, etc). Blue glow ring + slightly brighter fill so the
   toggled state is unambiguous at a glance. */
.btn--icon.active {
  background: rgba(77, 142, 255, 0.18);
  border-color: rgba(77, 142, 255, 0.6);
  color: #4d8eff;
}
.btn--icon.active:hover {
  background: rgba(77, 142, 255, 0.25);
}
.btn--sm {
  padding: 3px 8px;
  font-size: var(--fs-11);
}

/* ── Pills (filter/status) ───────────────────────────────── */
.pills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  user-select: none;
  white-space: nowrap;
}
.pill:hover {
  background: var(--bg-3);
  color: var(--text-0);
}
/* Keyboard focus ring (a11y) — the status pills are an ARIA tablist with
   roving tabindex; show a clear ring only for keyboard nav, not mouse. */
.pill:focus-visible {
  outline: 2px solid var(--accent, #3da9fc);
  outline-offset: 2px;
}
.pill.active {
  background: var(--bg-3);
  border-color: var(--border-hi);
  color: var(--text-0);
}
.pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  background: var(--bg-0);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--text-0);
}
.pill--active.active    { border-color: var(--info);  color: var(--info); }
.pill--waiting.active   { border-color: var(--warn);  color: var(--warn); }
.pill--win.active       { border-color: var(--win);   color: var(--win); }
.pill--loss.active      { border-color: var(--loss);  color: var(--loss); }
.pill--cancelled.active { border-color: var(--text-2); color: var(--text-1); }

/* ── Chips (toggleable tag) ──────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 4px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  user-select: none;
}
.chip:hover {
  border-color: var(--border-hi);
  color: var(--text-0);
}
.chip.active {
  background: var(--info-soft);
  border-color: var(--info);
  color: var(--info);
}
.chip.active--accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
/* "+" toggle that swaps in/out for a custom-value form. Keeps the
   dropdown lean by default — form only appears when the user opts in. */
.chip--add {
  font-size: var(--fs-14);
  font-weight: 700;
  padding: 4px 12px;
  color: var(--text-2);
  background: transparent;
  border-style: dashed;
}
.chip--add:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.custom-add-row[hidden] { display: none !important; }
.chip-grid {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  line-height: 1;
}
.badge--spot    { background: rgba(77, 142, 255, 0.12);  color: var(--mkt-spot); }
.badge--perp    { background: rgba(184, 136, 255, 0.14); color: var(--mkt-perp); }
.badge--fx      { background: rgba(255, 181, 71, 0.14);  color: var(--mkt-fx); }
.badge--active  { background: var(--info-soft);  color: var(--info); }
.badge--waiting { background: var(--warn-soft);  color: var(--warn); }
.badge--win     { background: var(--win-soft);   color: var(--win); }
.badge--loss    { background: var(--loss-soft);  color: var(--loss); }
.badge--cancel  { background: rgba(91,101,115,0.18); color: var(--text-1); }
.badge--bull    { background: var(--bull-soft);  color: var(--bull); }
.badge--bear    { background: var(--bear-soft);  color: var(--bear); }

/* ── Tables ──────────────────────────────────────────────── */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-12);
}
.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-2);
  color: var(--text-1);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  font-size: var(--fs-11);
  letter-spacing: 0.06em;
  text-align: left;
  padding: 8px var(--sp-3);
  border-bottom: 1px solid var(--border-hi);
  white-space: nowrap;
  user-select: none;
}
.tbl thead th.sortable { cursor: pointer; }
.tbl thead th.sortable:hover { color: var(--text-0); }
.tbl thead th.sorted {
  color: var(--text-0);
}
.tbl thead th .arrow {
  color: var(--info);
  margin-left: 4px;
  font-size: 9px;
  vertical-align: middle;
}
.tbl tbody tr {
  height: var(--h-row);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.tbl tbody tr:hover { background: var(--bg-2); }
.tbl tbody tr.selected { background: var(--info-soft); }
.tbl tbody td {
  padding: 0 var(--sp-3);
  color: var(--text-0);
  white-space: nowrap;
}
.tbl tbody td.num,
.tbl tbody td.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tbl--empty td {
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-1);   /* a11y: empty-state copy must be readable, not --text-2/3 */
  text-align: center;
  font-style: italic;
}
/* Designed zero-state (brand-new user, scanner hasn't fired yet) */
.setups-zero {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 20px; font-style: normal;
}
.setups-zero__title {
  font-size: 15px; font-weight: 700; color: var(--text-0);
  font-family: 'Inter Tight', 'Inter', sans-serif; letter-spacing: -0.01em;
}
.setups-zero__copy {
  font-size: 13px; line-height: 1.55; color: var(--text-1);
  max-width: 460px;
}
.setups-zero__cta {
  margin-top: 6px; display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 8px; text-decoration: none;
  background: linear-gradient(135deg, var(--accent, #3da9fc), #2d8de0);
  color: #04111c; font-size: 13px; font-weight: 700; transition: filter .15s;
}
.setups-zero__cta:hover { filter: brightness(1.08); }
.setups-zero__clear {
  margin-left: 8px; padding: 3px 10px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--accent, #3da9fc); font-size: 12px; font-weight: 600;
  font-style: normal; cursor: pointer;
}
.setups-zero__clear:hover { border-color: var(--accent, #3da9fc); }

/* ═══════════════════════════════════════════════════════════
   Symbol search — TradingView-style premium dropdown
   Taller input, coin logos on the left, exchange logos on the
   right, two-line rows (symbol + description).
   ═══════════════════════════════════════════════════════════ */
.symsearch {
  position: relative;
  min-width: 280px;
}
.symsearch__input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 38px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 9px !important;
  color: #ffffff !important;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.2);
}
.symsearch__input:focus {
  outline: none;
  border-color: rgba(61,169,252,0.55) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  box-shadow: 0 0 0 3px rgba(61,169,252,0.15);
}
.symsearch__input::placeholder {
  color: #6b7686;
  font-weight: 500;
}
.symsearch__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8893a3;
  font-size: 14px;
  pointer-events: none;
}

.symsearch__dd {
  position: fixed;
  z-index: 900;
  max-height: 440px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(18,24,36,0.97) 0%, rgba(10,14,22,0.97) 100%);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 0 0 1px rgba(0,0,0,0.4),
    0 24px 48px -12px rgba(0,0,0,0.55),
    0 8px 24px -8px rgba(0,0,0,0.4);
  min-width: 460px;
  padding: 6px;
  font-family: 'Inter', -apple-system, sans-serif;
  animation: symsearchEnter 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes symsearchEnter {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.symsearch__dd::-webkit-scrollbar { width: 6px; }
.symsearch__dd::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
}

.symsearch__item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 100ms ease;
  margin: 1px 0;
}
.symsearch__item:hover,
.symsearch__item.focused {
  background: rgba(61,169,252,0.10);
}

/* Coin logo — round, falls back to a colored initial bubble */
.symsearch__coin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3da9fc, #7be7d8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.symsearch__coin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.symsearch__coin img.is-broken { display: none; }

.symsearch__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.symsearch__name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symsearch__desc {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #8893a3;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.symsearch__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: #8893a3;
  flex-shrink: 0;
}
.symsearch__market {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: #c5cdd9;
}
.symsearch__market--perp {
  background: rgba(192,132,252,0.15);
  color: #c084fc;
}
.symsearch__market--spot {
  background: rgba(38,166,154,0.15);
  color: #26d99c;
}
.symsearch__market--fx {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}

.symsearch__exchange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #c5cdd9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.symsearch__ex-logo {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.symsearch__ex-logo img { width: 100%; height: 100%; object-fit: contain; }
.symsearch__ex-logo svg { width: 70%; height: 70%; }

/* Real brand-asset variant (Bitget, KuCoin, Hyperliquid, Kraken, MEXC,
   OKX). These ship as actual PNG/JPG/WebP brand logos rather than
   simplified inline SVGs — most have their own opaque brand colour as
   the background, so `object-fit: cover` makes the asset fill the
   round chip and effectively become the chip's surface. The chip's own
   background is hidden by the image, which is exactly what we want for
   branded marks. */
.symsearch__ex-logo .symsearch__brand-img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill the round chip */
  display: block;
}
/* MEXC overrides — the supplied logo is the blue M letterform on a wide
   canvas (611x458). `cover` was cropping the sides off so only the
   centre crossbar showed. Switch to `contain` so the whole M is visible
   and give the chip a white backing that matches the brand's native
   surface — keeps the badge looking clean instead of a grey halo. */
.symsearch__ex-logo:has(.symsearch__brand-img[alt="MEXC"]) {
  background: #ffffff;
}
.symsearch__brand-img[alt="MEXC"] {
  object-fit: contain;
  padding: 2px;               /* nudge the M inward so it doesn't kiss the chip rim */
}

/* Wordmark variant — for brokers whose brand is the wordmark itself
   (Bybit). Drops the circular chip background so the wordmark sits clean
   on the dropdown surface, and grows wider to keep the letters legible. */
.symsearch__ex-logo--wordmark {
  width: auto;
  height: 14px;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.symsearch__ex-logo--wordmark .symsearch__wordmark-img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
  /* The Bybit PNG is a white wordmark on transparent (designed for the
     dark theme). On light theme it would vanish — invert so the
     wordmark renders dark on the white surface. The --img-invert token
     is 0 in dark theme, 1 in light theme. */
  filter: invert(var(--img-invert, 0));
}

.symsearch__empty {
  padding: 20px 14px;
  text-align: center;
  color: #6b7686;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
}

/* In-dropdown loading state */
.harazi-loader-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  color: #8893a3;
  font-size: 12px;
}
.harazi-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.10);
  border-top-color: #7be7d8;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Sparkline ───────────────────────────────────────────── */
.spark {
  width: 88px;
  height: 20px;
  display: block;
}
.spark path.line { fill: none; stroke: var(--text-1); stroke-width: 1.2; }
.spark path.line--bull { stroke: var(--bull); }
.spark path.line--bear { stroke: var(--bear); }
.spark circle.entry { fill: var(--warn); }
.spark circle.last  { fill: var(--text-0); }

/* ── R-progress bar ──────────────────────────────────────── */
.rbar {
  position: relative;
  width: 120px;
  height: 12px;
  background: linear-gradient(
    to right,
    var(--loss-soft) 0%,
    var(--loss-soft) 50%,
    var(--win-soft) 50%,
    var(--win-soft) 100%
  );
  border: 1px solid var(--border);
  border-radius: 3px;
}
.rbar__mark {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 16px;
  background: var(--text-0);
  box-shadow: 0 0 0 1px var(--bg-0);
}
.rbar__entry {
  background: var(--warn);
}
.rbar__label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-1);
  margin-left: 6px;
}

/* ── Inputs (range / custom) ─────────────────────────────── */
.inline-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}
.inline-input input {
  width: 56px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  background: var(--bg-0);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}
.inline-input .inline-select {
  padding: 3px 6px;
  border: 1px solid var(--border);
  background: var(--bg-0);
  color: var(--text-1);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  cursor: pointer;
}
.inline-input .inline-select:focus {
  outline: none;
  border-color: var(--accent);
}
/* Validation states for .inline-input inputs (custom TF/SP adders, etc).
   Red shake + tooltip when the user enters something out of range; soft
   green pulse on a successful add. Errors auto-clear after 2.2s. */
.inline-input { position: relative; }
.inline-input input.is-invalid {
  border-color: #ef5350;
  background: rgba(239,83,80,0.08);
  animation: inputShake 0.32s ease-out;
}
.inline-input input.is-ok {
  border-color: #26a69a;
  background: rgba(38,166,154,0.10);
  animation: inputPulseOk 0.4s ease-out;
}
.input-error {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  padding: 4px 8px;
  background: rgba(239,83,80,0.15);
  border: 1px solid rgba(239,83,80,0.35);
  border-radius: 6px;
  color: #ef5350;
  font-size: var(--fs-11);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .15s ease, transform .18s cubic-bezier(.2,.9,.25,1.05);
  z-index: 5;
}
.input-error.is-on {
  opacity: 1;
  transform: translateY(0);
}
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
@keyframes inputPulseOk {
  0%   { box-shadow: 0 0 0 0 rgba(38,166,154,0.4); }
  100% { box-shadow: 0 0 0 8px rgba(38,166,154,0); }
}

/* ── Modal ───────────────────────────────────────────────── */
.modal-shell {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.modal-shell.open {
  opacity: 1;
  visibility: visible;
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.modal__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  color: var(--text-0);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.modal__close {
  padding: 4px 8px;
  color: var(--text-1);
}
.modal__close:hover { color: var(--text-0); }
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-3);
}

/* ── Command palette ─────────────────────────────────────── */
.cmdk {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 1100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cmdk.open { display: flex; }
.cmdk__box {
  width: 560px;
  max-width: 90vw;
  max-height: 60vh;
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cmdk__input {
  width: 100%;
  padding: 14px 18px;
  border: none;
  background: transparent;
  color: var(--text-0);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--border);
}
.cmdk__input:focus { background: transparent; }
.cmdk__list {
  flex: 1 1 auto;
  overflow: auto;
  padding: 6px 0;
}
.cmdk__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--text-0);
}
.cmdk__item.focused { background: var(--bg-3); }
.cmdk__item-icon {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  width: 16px;
  text-align: center;
}
.cmdk__item-label { flex: 1 1 auto; }
.cmdk__item-hint  {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
}
.cmdk__empty {
  padding: 20px;
  text-align: center;
  color: var(--text-2);
  font-style: italic;
}

/* ── Shortcut help overlay ───────────────────────────────── */
.shortcut-help {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(3px);
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.shortcut-help.open { display: flex; }
.shortcut-help__box {
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-4);
  padding: var(--sp-6);
  max-width: 640px;
  width: 100%;
  box-shadow: var(--shadow-3);
}
.shortcut-help__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  margin-bottom: var(--sp-4);
}
.shortcut-help__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-6);
}
.shortcut-help__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-12);
}
.shortcut-help__desc { color: var(--text-1); }
.shortcut-help__keys { display: flex; gap: 3px; }

/* ── Toolbar (page header) ───────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--h-toolbar);
  padding: 0 var(--sp-4);
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.toolbar__sep {
  width: 1px;
  height: 20px;
  background: var(--border);
}

/* ── Stat box ────────────────────────────────────────────── */
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  min-width: 100px;
}
.stat__label {
  font-size: var(--fs-11);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semi);
}
.stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--text-0);
  letter-spacing: -0.01em;
}
.stat__sub {
  font-size: var(--fs-11);
  color: var(--text-1);
  font-family: var(--font-mono);
}
.stat--win  .stat__value { color: var(--win); }
.stat--loss .stat__value { color: var(--loss); }
.stat--warn .stat__value { color: var(--warn); }
.stat--info .stat__value { color: var(--info); }

/* Clickable stat cards (used as quick-filters on the Backtest page).
   Card stays visually identical when inactive, lights a subtle border + bg
   when it's the active filter. Hover is a nudge, not a flash. */
.stat--filter {
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  user-select: none;
}
.stat--filter:hover {
  background: var(--bg-2);
  border-color: var(--border-hi);
}
.stat--filter.active {
  background: var(--bg-2);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.stat--filter.active .stat__label {
  color: var(--accent);
}

/* ── Overlay (chart-top stat block) ──────────────────────── */
.chart-overlay {
  position: absolute;
  /* Anchored top-right (was top-left) so it doesn't collide with the
     TradingView-style OHLC legend that also lives in the top-left
     corner. 60px from the right keeps it clear of the price scale's
     last-value badge. */
  top: 12px;
  right: 60px;
  z-index: 8;
  padding: 8px 12px;
  background: rgba(12, 16, 24, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-3);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-0);
  min-width: 180px;
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.chart-overlay__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  line-height: 1.5;
}
.chart-overlay__label { color: var(--text-2); }

/* ── Form sections / settings ────────────────────────────── */
.section {
  padding: var(--sp-4);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  margin-bottom: var(--sp-4);
}
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-1);
}
.section__title {
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
}
.section__hint {
  font-size: var(--fs-11);
  color: var(--text-2);
  margin-bottom: var(--sp-3);
}
.range-buttons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

/* ── Prune dropdown menu ─────────────────────────────────── */
.prune-panel .dropdown-panel__menu {
  left: auto;
  right: 0;
  min-width: 240px;
  padding: 4px;
}
.prune-menu__section {
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px 4px;
}
.prune-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  color: var(--text-0);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.prune-menu__item:hover {
  background: var(--bg-3);
  border-color: var(--border-hi);
}
.prune-menu__item--danger {
  color: var(--loss);
}
.prune-menu__item--danger:hover {
  background: var(--loss-soft);
  border-color: var(--loss);
}
.prune-menu__count {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-2);
  background: var(--bg-0);
  padding: 1px 7px;
  border-radius: 100px;
  min-width: 28px;
  text-align: center;
}
.prune-menu__item--danger .prune-menu__count {
  color: var(--loss);
  background: transparent;
}
.prune-menu__hint {
  font-size: var(--fs-11);
  color: var(--text-2);
  padding: 10px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  line-height: 1.4;
  font-style: italic;
}

/* ── Heatmap (combo matrix) ──────────────────────────────── */
.heatmap {
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
}
.heatmap__hdr {
  background: var(--bg-2);
  color: var(--text-2);
  text-align: center;
  padding: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.heatmap__cell {
  padding: 6px 4px;
  text-align: center;
  background: var(--bg-1);
  border-radius: var(--r-1);
  cursor: pointer;
  color: var(--text-0);
  transition: transform var(--t-fast);
}
.heatmap__cell:hover { transform: scale(1.08); outline: 1px solid var(--info); }
.heatmap__cell.empty { color: var(--text-3); background: var(--bg-0); }
.heatmap__cell.selected { outline: 2px solid var(--info); z-index: 2; }

/* ── Equity curve strip ──────────────────────────────────── */
.equity-strip {
  height: 120px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
}


/* ═══════════════════════════════════════════════════════════
   HARAZI LOADER — reusable loading animation
   Two surfaces:
     .harazi-loader         — full placeholder (mini chart bars + label),
                              for chart bodies / modal bodies / empty states
     .harazi-loader-bar     — just the animated scan-line, for inline embed
     .harazi-spinner        — tiny rotating ring for buttons / inputs
   ═══════════════════════════════════════════════════════════ */

.harazi-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  color: var(--fg-2, #97a0ad);
  font-size: 13px;
  user-select: none;
}
.harazi-loader__chart {
  position: relative;
  width: 120px;
  height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  opacity: 0.9;
}
.harazi-loader__chart span {
  display: block;
  width: 7px;
  background: #4d8eff;
  border-radius: 2px;
  animation: harazi-bar-pulse 1.2s ease-in-out infinite;
  transform-origin: bottom;
}
.harazi-loader__chart span:nth-child(1) { height: 30%; animation-delay: 0.00s; background: #3ed598; }
.harazi-loader__chart span:nth-child(2) { height: 70%; animation-delay: 0.08s; background: #4d8eff; }
.harazi-loader__chart span:nth-child(3) { height: 45%; animation-delay: 0.16s; background: #ff5470; }
.harazi-loader__chart span:nth-child(4) { height: 90%; animation-delay: 0.24s; background: #3ed598; }
.harazi-loader__chart span:nth-child(5) { height: 60%; animation-delay: 0.32s; background: #4d8eff; }
.harazi-loader__chart span:nth-child(6) { height: 80%; animation-delay: 0.40s; background: #3ed598; }
.harazi-loader__chart span:nth-child(7) { height: 40%; animation-delay: 0.48s; background: #ff5470; }
.harazi-loader__chart span:nth-child(8) { height: 55%; animation-delay: 0.56s; background: #4d8eff; }
.harazi-loader__chart span:nth-child(9) { height: 75%; animation-delay: 0.64s; background: #3ed598; }
.harazi-loader__chart span:nth-child(10){ height: 35%; animation-delay: 0.72s; background: #4d8eff; }

@keyframes harazi-bar-pulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* Thin horizontal "scan line" bar */
.harazi-loader-bar {
  position: relative;
  width: 180px;
  height: 2px;
  background: rgba(77, 142, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.harazi-loader-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #4d8eff, transparent);
  animation: harazi-scan 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes harazi-scan {
  0%   { left: -30%; }
  100% { left: 100%; }
}

.harazi-loader__label {
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-3, #5b6573);
  font-weight: 600;
}
.harazi-loader__sub {
  font-size: 11px;
  color: var(--fg-3, #5b6573);
}

.harazi-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(77, 142, 255, 0.18);
  border-top-color: #4d8eff;
  border-radius: 50%;
  animation: harazi-spin 0.7s linear infinite;
  vertical-align: -3px;
}
.harazi-spinner--sm { width: 10px; height: 10px; border-width: 1.5px; }
.harazi-spinner--lg { width: 24px; height: 24px; border-width: 3px; }
@keyframes harazi-spin { to { transform: rotate(360deg); } }

.harazi-loader-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--fg-2, #97a0ad);
  font-size: 13px;
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — Shared components
   Buttons, command palette, broker chip, watchlist chips. Most
   surfaces already use var() tokens that adapt; this block fixes
   the remaining hard-coded translucent-white surfaces and the
   command-palette backdrop.
   ═══════════════════════════════════════════════════════════════ */

/* Command palette */
html[data-theme="light"] .cmdk {
  background: rgba(15,23,42,0.35);
  backdrop-filter: blur(4px);
}
html[data-theme="light"] .cmdk__box {
  background: var(--bg-1);
  border-color: var(--border-hi);
  box-shadow: var(--shadow-3);
}
html[data-theme="light"] .cmdk__input {
  color: var(--text-0);
  border-bottom-color: var(--border);
}
html[data-theme="light"] .cmdk__item        { color: var(--text-0); }
html[data-theme="light"] .cmdk__item:hover,
html[data-theme="light"] .cmdk__item.focused {
  background: color-mix(in srgb, var(--info) 8%, transparent);
}
html[data-theme="light"] .cmdk__item-icon   { color: var(--text-1); }
html[data-theme="light"] .cmdk__item-hint   { color: var(--text-2); }
html[data-theme="light"] .cmdk__empty       { color: var(--text-2); }

/* Generic .btn — ghost / secondary variants */
html[data-theme="light"] .btn {
  color: var(--text-0);
}
html[data-theme="light"] .btn:hover {
  background: rgba(15,23,42,0.04);
}
/* Primary buttons keep their solid info bg + white text — leave them alone. */

/* Broker chip (top-right "Binance" pill) */
html[data-theme="light"] .broker-chip {
  background: var(--bg-1);
  border-color: var(--border);
  color: var(--text-0);
}
html[data-theme="light"] .broker-chip:hover { border-color: var(--info); }
html[data-theme="light"] .broker-chip__caret { color: var(--text-2); }