/* ============================================================
   KAIRION · Production redesign override (MONO direction)
   Replaces the previous override. Loaded LAST so we win.

   Imports my prototype's MONO design system:
   - Tokens from theme-mono.css (renamed --kx-* → --kr-*)
   - Component rules from base.css (adapted to existing class names)

   Hard rules (see DESIGN_SPEC.md):
   1. Mono accent — only P&L is colored (green/red); accent purple sparingly
   2. Layering by border + bg shift; shadow ONLY on modals / toasts
   3. JetBrains Mono for ALL numbers; tabular-nums; no padding shifts
   4. No emoji, no large gradients (except hero corner glow + sparkline fade)
   ============================================================ */

/* Fonts: Inter + JetBrains Mono — assumed loaded by another stylesheet
   (style.css / kx-v5.css already pull from Google Fonts). If not, the
   font-family below falls back to system sans / monospace. */

:root {
  /* — neutrals — */
  --kr-bg:         #0a0a0c;
  --kr-bg-2:       #0e0e11;
  --kr-surface:    #131316;
  --kr-surface-2:  #1a1a1d;
  --kr-elev:       #232327;
  --kr-line:       rgba(255,255,255,0.06);
  --kr-line-2:     rgba(255,255,255,0.12);
  --kr-ink:        #f4f4f6;
  --kr-ink-2:      #a4a4ab;
  --kr-ink-3:      #8a8a92;
  /* Lifted from #6a6a72 (~3.7:1 on --kr-bg, below WCAG AA) to ~4.6:1 so muted
     meta/separator text stays legible without breaking the mono palette. */
  --kr-ink-4:      #7c7c84;

  /* — mono accent — primary CTA + status pill — */
  --kr-accent:     #f4f4f6;
  --kr-accent-dim: rgba(244,244,246,0.10);
  --kr-accent-line:rgba(244,244,246,0.22);

  /* — secondary: violet — for active states + decoration only — */
  --kr-violet:     #8b71ff;
  --kr-violet-2:   #a48fff;
  --kr-violet-dim: rgba(139,113,255,0.14);
  --kr-violet-line:rgba(139,113,255,0.32);
  --kr-violet-soft:rgba(139,113,255,0.06);

  /* — semantic — green / red ONLY on P&L numbers — */
  --kr-up:         #4ade80;
  --kr-up-dim:     rgba(74,222,128,0.10);
  --kr-up-line:    rgba(74,222,128,0.28);
  --kr-dn:         #f87171;
  --kr-dn-dim:     rgba(248,113,113,0.10);
  --kr-dn-line:    rgba(248,113,113,0.28);

  /* — amber — warnings only — */
  --kr-warn:       #f5a524;
  --kr-warn-dim:   rgba(245,165,36,0.12);
  --kr-warn-line:  rgba(245,165,36,0.30);

  /* — alias old token names so legacy CSS doesn't go orange — */
  --kx5-amber:     var(--kr-violet-2);
  --kx5-amber-dim: var(--kr-violet-dim);
  --kx-amber:      var(--kr-violet-2);
  --kx-amber-dim:  var(--kr-violet-dim);
  --k-amber:       var(--kr-violet-2);
  --k-amber-dim:   var(--kr-violet-dim);
  --orange:        var(--kr-violet-2);

  /* — geometry — */
  --kr-r-sm: 10px;
  --kr-r-md: 14px;
  --kr-r-lg: 18px;
  --kr-r-xl: 24px;

  /* — fonts — */
  --kr-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kr-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — shadow — only modal/drawer/toast — */
  --kr-shadow-md: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.30);
  --kr-shadow-lg: 0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 50px rgba(0,0,0,0.40);
}

/* ─── Root / body reset ───────────────────────────────── */

html, body {
  background: var(--kr-bg) !important;
  color: var(--kr-ink) !important;
  font-family: var(--kr-sans) !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--kr-violet);
  color: #fff;
  border-radius: var(--kr-r-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform .2s;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
body::before { content: none !important; }

.app, .main, .history-main { background: var(--kr-bg) !important; }
.main, .history-main {
  max-width: 1440px !important;
  padding: 28px 28px 96px !important;
}

/* All numbers get mono + tabular-nums when matching these atoms */
.kr-mono,
[class*='-mono'],
.signal-score-num, .signal-last-cell, .signal-row-meta,
.home-hero-title, .home-kpi-value,
.home-position-pnl, .home-activity-amt, .home-activity-time,
.metric-value, .health-value,
.kx-clock,
#refresh-info, #th-compact {
  font-family: var(--kr-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ─── Top bar ──────────────────────────────────────────── */

.kx-topbar-shell, .topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
  padding: 0 28px !important;
  background: color-mix(in srgb, var(--kr-bg) 88%, transparent) !important;
  border-bottom: 1px solid var(--kr-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}
.kx-topbar-l { display: flex !important; align-items: center !important; gap: 24px !important; min-width: 0 !important; }
.kx-topbar-r, .topbar-right { display: flex !important; align-items: center !important; gap: 10px !important; }

.market-ticker {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  padding: 0 0 0 8px !important;
}
.market-ticker-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  height: 30px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--kr-ink-2) !important;
  font-family: var(--kr-mono) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.market-ticker-symbol {
  color: var(--kr-ink) !important;
  font-family: var(--kr-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}
.market-ticker-price {
  color: var(--kr-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.market-ticker-change {
  font-size: 11px !important;
  font-weight: 600 !important;
}
.market-ticker-item.is-up .market-ticker-change { color: var(--kr-up) !important; }
.market-ticker-item.is-down .market-ticker-change { color: var(--kr-down) !important; }
.market-ticker-item.is-loading .market-ticker-price,
.market-ticker-item.is-loading .market-ticker-change {
  color: var(--kr-ink-3) !important;
}

.kx-logo, .logo { display: flex !important; align-items: center !important; gap: 10px !important; }
.kx-logo-mark, .logo-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 9px !important;
  display: grid !important; place-items: center !important;
  font-weight: 700 !important; font-size: 14px !important;
  background: linear-gradient(180deg, #ffffff 0%, #d4d4d8 100%) !important;
  color: var(--kr-bg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 2px rgba(0,0,0,0.4),
    0 0 0 1px rgba(139,113,255,0.18),
    0 0 14px -2px rgba(139,113,255,0.45) !important;
}
.kx-logo-text {
  color: var(--kr-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.20em !important;
}

.kx-primary-nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding-left: 8px !important;
  border-left: 1px solid var(--kr-line) !important;
  margin-left: 4px !important;
  height: 30px !important;
}
.kx-primary-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  color: var(--kr-ink-3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important;
}
.kx-primary-nav-link:hover { color: var(--kr-ink) !important; background: var(--kr-line) !important; }
.kx-primary-nav-link.is-active {
  color: var(--kr-ink) !important;
  background: var(--kr-line) !important;
  border-color: transparent !important;
}

/* Live badge + clock */
.kx-clock, .live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: var(--kr-surface) !important;
  border: 1px solid var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
  font-size: 12px !important;
}
.kx-dot, .live-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--kr-up) !important;
  box-shadow: 0 0 0 3px var(--kr-up-dim) !important;
  animation: kr-pulse 2s ease-in-out infinite !important;
}
@keyframes kr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.live-badge-time, #refresh-info { color: var(--kr-ink) !important; }

/* Icon buttons (settings, etc.) */
.kx-icon-btn, .topbar-nav-btn, .settings-nav-btn {
  width: 44px !important; height: 44px !important;
  display: grid !important; place-items: center !important;
  border: 1px solid var(--kr-line) !important;
  background: var(--kr-surface) !important;
  color: var(--kr-ink-2) !important;
  border-radius: var(--kr-r-sm) !important;
  transition: color .15s, background .15s, border-color .15s !important;
}
.kx-icon-btn:hover, .topbar-nav-btn:hover, .settings-nav-btn:hover {
  color: var(--kr-ink) !important;
  background: var(--kr-surface-2) !important;
  border-color: var(--kr-line-2) !important;
}

/* ─── Hero (戰情室) ────────────────────────────────────── */

.home-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 30px 32px !important;
  margin: 0 0 24px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-xl) !important;
  background:
    radial-gradient(80% 60% at 100% 0%, var(--kr-violet-soft), transparent 55%),
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.04), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 32%),
    var(--kr-surface) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 -1px 0 rgba(255,255,255,0.02) inset,
    0 20px 60px rgba(0,0,0,0.40) !important;
}
.home-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at top right, var(--kr-violet-dim), transparent 60%);
  pointer-events: none;
  opacity: 0.75;
}

.home-hero-toolbar {
  position: relative !important; z-index: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
}
.home-hero-status {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.home-status-light {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--kr-up) !important;
  box-shadow: 0 0 0 4px var(--kr-up-dim) !important;
  margin-top: 14px !important;
  flex-shrink: 0 !important;
  animation: kr-pulse 2s ease-in-out infinite !important;
}
.home-status-light.is-paused { background: var(--kr-violet) !important; box-shadow: 0 0 0 4px var(--kr-violet-dim) !important; }
.home-status-light.is-off { background: var(--kr-ink-4) !important; box-shadow: 0 0 0 4px rgba(255,255,255,0.04) !important; animation: none !important; }

.home-hero--positions .home-status-light {
  display: none !important;
}

.home-hero-title-wrap { min-width: 0 !important; position: relative !important; }
.home-hero--positions .home-hero-title-wrap::before {
  content: none !important;
  display: none !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--kr-violet) !important;
  opacity: 1 !important;
  margin-bottom: 12px !important;
  font-family: var(--kr-sans) !important;
  font-weight: 600 !important;
}
.home-hero-headline {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.home-hero-title {
  font-family: var(--kr-mono) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--kr-ink) !important;
  font-variant-numeric: tabular-nums !important;
}
.home-hero-title.pos { color: var(--kr-up) !important; background: transparent !important; }
.home-hero-title.neg { color: var(--kr-dn) !important; background: transparent !important; }

.home-hero-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
  font-variant-numeric: tabular-nums !important;
}
.home-hero-chip.neg { background: var(--kr-dn-dim) !important; color: var(--kr-dn) !important; }
.home-hero-chip.is-hidden { display: none !important; }

.home-hero-sub {
  margin-top: 12px !important;
  color: var(--kr-ink-2) !important;
  font-size: 13px !important;
}
.home-hero-sub .pos { color: var(--kr-up) !important; font-variant-numeric: tabular-nums !important; }
.home-hero-sub .neg { color: var(--kr-dn) !important; font-variant-numeric: tabular-nums !important; }

.home-decision-summary {
  display: grid !important;
  gap: 8px !important;
  margin-top: 14px !important;
  max-width: 720px !important;
}
.home-decision-main {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--kr-surface) 72%, transparent) !important;
  color: var(--kr-ink) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}
.home-decision-summary.tone-good .home-decision-main {
  border-color: var(--kr-up-line) !important;
  color: var(--kr-up) !important;
  background: var(--kr-up-dim) !important;
}
.home-decision-summary.tone-warn .home-decision-main {
  border-color: var(--kr-violet-line) !important;
  color: var(--kr-violet-2) !important;
  background: var(--kr-violet-dim) !important;
}
.home-decision-summary.tone-danger .home-decision-main {
  border-color: var(--kr-dn-line) !important;
  color: var(--kr-dn) !important;
  background: var(--kr-dn-dim) !important;
}
.home-decision-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.home-decision-chips span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 999px !important;
  color: var(--kr-ink-3) !important;
  background: transparent !important;
  font-family: var(--kr-mono) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

.home-hero-actions {
  position: relative !important; z-index: 1 !important;
  display: flex !important; gap: 10px !important; flex-shrink: 0 !important;
  align-items: center !important;
}
.home-hero-state-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
}
.home-hero-state-pill.is-running {
  border-color: rgba(74,222,128,0.35) !important;
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
}
.home-hero-state-pill.is-paused {
  border-color: rgba(167,139,250,0.4) !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-violet) !important;
}
.home-hero-state-dot {
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent) !important;
}
.home-hero-state-pill.is-off .home-hero-state-dot { background: var(--kr-ink-4) !important; box-shadow: none !important; }

/* ─── Position cards row ──────────────────────────────────── */
.home-positions {
  position: relative !important; z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)) !important;
  gap: 14px !important;
}
.home-positions-empty {
  grid-column: 1 / -1 !important;
  padding: 22px !important;
  text-align: center !important;
  color: var(--kr-ink-3) !important;
  font-size: 13px !important;
  background: var(--kr-bg-2) !important;
  border: 1px dashed var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
}

.home-position-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
  overflow: hidden !important;
}
.home-position-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: var(--kr-up) !important;
}
.home-position-card.short::before { background: var(--kr-dn) !important; }

.home-position-card-hd {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.home-position-card-title {
  font-family: var(--kr-mono) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--kr-ink) !important;
}
.home-position-card-tag {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
}
.home-position-card-tag.short { background: var(--kr-dn-dim) !important; color: var(--kr-dn) !important; }
.home-position-card-protection {
  margin-left: auto !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  border: 1px solid var(--kr-line) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--kr-ink-2) !important;
  background: rgba(255,255,255,0.035) !important;
  white-space: nowrap !important;
}
.home-position-card-protection.ok {
  border-color: rgba(74,222,128,0.32) !important;
  color: var(--kr-up) !important;
  background: var(--kr-up-dim) !important;
}
.home-position-card-protection.warn {
  border-color: rgba(251,191,36,0.35) !important;
  color: #fbbf24 !important;
  background: rgba(251,191,36,0.1) !important;
}
.home-position-card-protection.danger {
  border-color: rgba(248,113,113,0.35) !important;
  color: var(--kr-dn) !important;
  background: var(--kr-dn-dim) !important;
}
.home-position-card-spark {
  flex: 1 !important;
  height: 26px !important;
  background:
    linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--kr-up) 12%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--kr-up) 28%, transparent) 6px 7px) !important;
  border-radius: 4px !important;
  opacity: 0.45 !important;
  min-width: 0 !important;
}
.home-position-card.short .home-position-card-spark {
  background:
    linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--kr-dn) 12%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--kr-dn) 28%, transparent) 6px 7px) !important;
}

.home-position-card-pnl {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}
.home-position-card-pnl-value {
  font-family: var(--kr-mono) !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
}
.home-position-card-pnl-pct {
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
}
.home-position-card-pnl-value.pos, .home-position-card-pnl-pct.pos { color: var(--kr-up) !important; background: transparent !important; }
.home-position-card-pnl-value.neg, .home-position-card-pnl-pct.neg { color: var(--kr-dn) !important; background: transparent !important; }
/* Hero sub-line inline pos/neg spans should be transparent too — global
   .neg / .pos atoms in kx-v5.css add a dim red/green backplate that's
   unwanted on inline summary text. */
.home-hero-sub .pos, .home-hero-sub .neg { background: transparent !important; }

.home-position-alerts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: -2px !important;
}
.home-position-alert {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 9px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 999px !important;
  color: var(--kr-ink-2) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}
.home-position-alert.tone-good {
  border-color: var(--kr-up-line) !important;
  color: var(--kr-up) !important;
  background: var(--kr-up-dim) !important;
}
.home-position-alert.tone-warn {
  border-color: var(--kr-violet-line) !important;
  color: var(--kr-violet-2) !important;
  background: var(--kr-violet-dim) !important;
}
.home-position-alert.tone-danger {
  border-color: var(--kr-dn-line) !important;
  color: var(--kr-dn) !important;
  background: var(--kr-dn-dim) !important;
}

.home-position-card-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
  margin: 0 !important;
}
.home-position-card-meta dt {
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--kr-ink-3) !important;
  margin-bottom: 2px !important;
}
.home-position-card-meta dd {
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 7px !important;
  min-width: 0 !important;
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kr-ink) !important;
}
.home-position-card-meta dd span {
  color: var(--kr-ink-3) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

.home-position-card-actions {
  display: flex !important;
  gap: 8px !important;
  padding-top: 4px !important;
}
.home-position-card-btn {
  flex: 1 !important;
  padding: 8px 10px !important;
  background: var(--kr-bg) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 6px !important;
  color: var(--kr-ink-2) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important;
}
.home-position-card-btn:hover {
  background: var(--kr-bg-3, rgba(255,255,255,0.04)) !important;
  color: var(--kr-ink) !important;
  border-color: color-mix(in srgb, var(--kr-line) 60%, var(--kr-ink-3)) !important;
}
.home-position-card-btn--danger {
  background: var(--kr-dn-dim) !important;
  border-color: rgba(248,113,113,0.35) !important;
  color: var(--kr-dn) !important;
}
.home-position-card-btn--danger:hover {
  background: color-mix(in srgb, var(--kr-dn-dim) 80%, var(--kr-dn)) !important;
  color: #fff !important;
  border-color: var(--kr-dn) !important;
}

@media (max-width: 960px) {
  .home-positions { grid-template-columns: 1fr !important; }
}

/* KPI strip */
.home-kpis {
  position: relative !important; z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: 0 !important;
  background: var(--kr-line) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
  overflow: hidden !important;
}
.home-kpi {
  background: var(--kr-bg-2) !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.home-kpi-label {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kr-ink-3) !important;
  font-weight: 600 !important;
}
.home-kpi-value {
  font-family: var(--kr-mono) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kr-ink) !important;
  letter-spacing: -0.01em !important;
}
.home-kpi-sub {
  font-size: 11.5px !important;
  color: var(--kr-ink-3) !important;
}

/* ─── Buttons ──────────────────────────────────────────── */

.btn, .btn-primary, .btn-secondary,
.preset-btn, .symbol-add-btn,
.single-analyzer-btn,
.trading-tab-action,
.link-btn, .export-btn, .clear-btn,
.history-range-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  min-height: 44px !important;
  border-radius: var(--kr-r-sm) !important;
  border: 1px solid var(--kr-line) !important;
  background: var(--kr-surface-2) !important;
  color: var(--kr-ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .1s !important;
  cursor: pointer !important;
}
.btn:hover, .btn-secondary:hover,
.preset-btn:hover, .symbol-add-btn:hover,
.single-analyzer-btn:hover, .trading-tab-action:hover,
.link-btn:hover, .export-btn:hover, .clear-btn:hover,
.history-range-tab:hover {
  background: var(--kr-elev) !important;
  border-color: var(--kr-line-2) !important;
  color: var(--kr-ink) !important;
}
.btn:active, .btn-primary:active { transform: translateY(1px) !important; }

/* Primary — white pill (mono accent) */
.btn-primary,
#home-toggle-btn,
.symbol-add-btn,
.single-analyzer-btn {
  background: linear-gradient(180deg, #ffffff 0%, #e4e4e7 100%) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: var(--kr-bg) !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 1px 2px rgba(0,0,0,0.3) !important;
}
.btn-primary:hover,
#home-toggle-btn:hover,
.symbol-add-btn:hover,
.single-analyzer-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
  color: var(--kr-bg) !important;
}

/* Toggle "on" state — show automation running in soft green */
#home-toggle-btn.is-on, #home-toggle-btn[aria-pressed="true"] {
  background: var(--kr-up-dim) !important;
  border-color: var(--kr-up-line) !important;
  color: var(--kr-up) !important;
  box-shadow: none !important;
}
#home-toggle-btn.is-on::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kr-up); margin-right: 4px;
  animation: kr-pulse 1.6s ease-in-out infinite;
}

/* Danger — emergency close */
.btn-danger, .trading-tab-action--kill {
  background: var(--kr-dn-dim) !important;
  border-color: var(--kr-dn-line) !important;
  color: var(--kr-dn) !important;
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--kr-dn) 18%, transparent) !important;
  color: var(--kr-dn) !important;
}
.btn-danger::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kr-dn); display: inline-block; margin-right: 2px;
}

.link-btn {
  background: transparent !important;
  border: 0 !important;
  padding: 4px 8px !important;
  color: var(--kr-violet-2) !important;
  font-size: 12px !important;
}
.link-btn:hover { color: var(--kr-violet-2) !important; background: var(--kr-violet-soft) !important; text-decoration: none !important; }

.preset-btn.is-active,
.history-range-tab.is-active {
  background: var(--kr-violet-dim) !important;
  border-color: var(--kr-violet-line) !important;
  color: var(--kr-violet-2) !important;
}

/* ─── Inputs / selects ─────────────────────────────────── */

input, select, textarea,
.symbol-input,
.single-analyzer-input,
.single-analyzer-select,
.period-select {
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line) !important;
  color: var(--kr-ink) !important;
  font-family: var(--kr-sans) !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  border-radius: var(--kr-r-sm) !important;
  min-height: 34px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input:focus, select:focus, textarea:focus,
.symbol-input:focus,
.single-analyzer-input:focus,
.single-analyzer-select:focus {
  outline: none !important;
  border-color: var(--kr-violet-line) !important;
  box-shadow: 0 0 0 3px var(--kr-violet-soft) !important;
}
input::placeholder { color: var(--kr-ink-3) !important; }

/* ─── Control bar (4 tabs) ─────────────────────────────── */

.control-bar {
  margin: 0 0 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0) 35%),
    var(--kr-surface) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-lg) !important;
  overflow: visible !important;
  box-shadow: none !important;
}
.control-bar-tabs {
  display: flex !important;
  align-items: center !important;
  padding: 16px 18px !important;
  gap: 14px !important;
  background: var(--kr-bg-2) !important;
  border-bottom: 1px solid var(--kr-line) !important;
}
.control-bar-picker {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.control-bar-picker-label {
  flex: 0 0 auto !important;
  color: var(--kr-ink-3) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}
.control-bar-select-wrap {
  position: relative !important;
  flex: 0 1 220px !important;
  min-width: 150px !important;
}
.control-bar-select-wrap::after {
  content: none !important;
}
.control-bar-select-native {
  position: absolute !important;
  inset: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.control-mode-button {
  width: 100% !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 13px 0 15px !important;
  border: 1px solid var(--kr-line-2) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--kr-surface) 82%, transparent) !important;
  color: var(--kr-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s, box-shadow .15s !important;
}
.control-mode-button:hover,
.control-mode-button.is-open {
  background: var(--kr-surface-2) !important;
  border-color: var(--kr-violet-line) !important;
}
.control-mode-button:focus-visible {
  border-color: var(--kr-violet-line) !important;
  box-shadow: 0 0 0 3px var(--kr-violet-soft) !important;
}
.control-mode-button-icon {
  color: var(--kr-ink-3) !important;
  font-size: 11px !important;
  transition: transform .15s !important;
}
.control-mode-button.is-open .control-mode-button-icon {
  transform: rotate(180deg) !important;
}
.control-mode-list {
  position: absolute !important;
  z-index: 80 !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  display: grid !important;
  gap: 4px !important;
  padding: 6px !important;
  border: 1px solid var(--kr-line-2) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--kr-bg-2) 96%, black) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.45), 0 0 0 1px rgba(139,113,255,.08) !important;
}
.control-mode-list[hidden] {
  display: none !important;
}
.control-mode-option {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--kr-ink-2) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.control-mode-option:hover,
.control-mode-option:focus-visible {
  background: var(--kr-line) !important;
  color: var(--kr-ink) !important;
  outline: none !important;
}
.control-mode-option.is-selected {
  background: var(--kr-violet-soft) !important;
  color: var(--kr-ink) !important;
}
.control-bar-picker-meta {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--kr-ink-3) !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
}
.control-bar-tablist {
  display: none !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.control-bar-tab {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 16px 18px !important;
  min-height: 64px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--kr-line) !important;
  background: transparent !important;
  color: var(--kr-ink-2) !important;
  position: relative !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color .15s, background .15s !important;
}
.control-bar-tab:last-of-type { border-right: 1px solid var(--kr-line) !important; }
.control-bar-tab:hover { background: var(--kr-surface-2) !important; color: var(--kr-ink) !important; }
.control-bar-tab.is-active {
  background: var(--kr-surface) !important;
  color: var(--kr-ink) !important;
  border-color: var(--kr-line) !important;
  box-shadow: none !important;
}
.control-bar-tab.is-active::after {
  content: '' !important;
  position: absolute !important;
  inset: auto 0 -1px 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--kr-violet), transparent) !important;
}
.control-bar-tab-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: inherit !important;
}
.control-bar-tab-meta {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.control-bar-tab.is-active .control-bar-tab-meta { color: var(--kr-ink) !important; }
.control-bar-tab.is-active .control-bar-tab-sep { color: var(--kr-ink) !important; }
.control-bar-tab-sep { color: var(--kr-ink-4) !important; }
.control-bar-tab--trading .control-bar-tab-label { color: inherit !important; }

.control-bar-collapse {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 10px !important;
  background: var(--kr-surface) !important;
  color: var(--kr-ink-3) !important;
  cursor: pointer !important;
}
.control-bar-collapse:hover { color: var(--kr-ink) !important; background: var(--kr-surface-2) !important; }
.control-bar-collapse-icon {
  display: inline-block !important;
  transition: transform .2s !important;
}
.control-bar.is-collapsed .control-bar-collapse-icon { transform: rotate(180deg) !important; }
.control-bar.is-collapsed .control-bar-panels { display: none !important; }

.control-panel-body, .control-bar-panel {
  padding: 22px !important;
  background: var(--kr-surface) !important;
}
.control-bar-panel { padding: 0 !important; }
.control-bar-panel.is-active { display: block !important; }

.scanner-tools-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}
@media (max-width: 900px) { .scanner-tools-grid { grid-template-columns: 1fr !important; } }

.preset-section, .symbol-search,
.selected-shell,
.position-review-form, .single-analyzer-form, .single-output,
.position-review-output,
.focus-aux {
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
}

.preset-title, .symbol-search-title {
  color: var(--kr-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}
.preset-sub, .symbol-search-hint { color: var(--kr-ink-3) !important; font-size: 12px !important; margin-top: 2px !important; }
.preset-section-head { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 12px !important; }
.preset-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.preset-btn { padding: 8px 14px !important; min-height: 44px !important; border-radius: 999px !important; font-size: 13px !important; white-space: nowrap !important; }
.symbol-search-head { display: flex !important; align-items: baseline !important; justify-content: space-between !important; margin-bottom: 10px !important; }
.symbol-search-row { display: flex !important; gap: 8px !important; }
.symbol-input { flex: 1 !important; }

.selected-shell { padding: 0 !important; overflow: hidden !important; }
.selected-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important; cursor: pointer !important; }
.selected-body { padding: 0 16px 14px !important; }
#selected-symbols-count,
.selected-toggle #selected-symbols-count {
  display: inline-block;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 1px 8px !important;
  margin-left: 6px !important;
  border-radius: 999px !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-violet-2) !important;
  border: 1px solid var(--kr-violet-line) !important;
}

.pr-fields { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.pr-group { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.pr-group-tag { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 4px; background: var(--kr-line); color: var(--kr-ink-3); text-transform: uppercase; letter-spacing: 0.08em; align-self: flex-start; }
.pr-group-tag--req { color: var(--kr-violet-2); background: var(--kr-violet-dim); }
.pr-group-fields { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 10px !important; }
.pr-group-fields label { display: flex !important; flex-direction: column !important; gap: 6px !important; font-size: 12px !important; color: var(--kr-ink-3) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }
.pr-advanced summary { cursor: pointer; padding: 8px 0; color: var(--kr-ink-2); font-size: 12.5px; }
.pr-advanced summary small { color: var(--kr-ink-3); margin-left: 8px; font-size: 12px; }
.pr-form-actions { display: flex; justify-content: flex-end; padding-top: 8px; }
.pr-form-actions button { padding: 9px 16px !important; background: linear-gradient(180deg, #fff, #e4e4e7) !important; color: var(--kr-bg) !important; border-color: rgba(255,255,255,0.2) !important; font-weight: 600 !important; }

.single-analyzer-head { margin-bottom: 14px !important; }
.single-analyzer-title { font-size: 14px !important; font-weight: 600 !important; color: var(--kr-ink) !important; }
.single-analyzer-sub { font-size: 12px !important; color: var(--kr-ink-3) !important; margin-top: 2px !important; }
.single-analyzer-form { display: grid !important; grid-template-columns: 2fr 1fr auto !important; gap: 12px !important; align-items: end !important; }
@media (max-width: 720px) { .single-analyzer-form { grid-template-columns: 1fr !important; } }
.single-analyzer-field { display: flex !important; flex-direction: column !important; gap: 6px !important; font-size: 12px !important; color: var(--kr-ink-3) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }

/* ─── Home content grid ────────────────────────────────── */

.home-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 22px !important;
  margin-top: 0 !important;
  align-items: start !important;
}
@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr !important; } }
.home-sidebar { display: flex !important; flex-direction: column !important; gap: 16px !important; }

/* Focus section (signals container) */
.focus-section, .home-side-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 40%),
    var(--kr-surface) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-lg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.focus-section-header, .home-side-card-hd {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--kr-line) !important;
}
.focus-section-header-row { display: flex !important; align-items: baseline !important; gap: 10px !important; }
.focus-section-heading, .card-title, #focus-signals-heading {
  position: relative !important;
  padding-left: 12px !important;
  border-left: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--kr-ink) !important;
  margin: 0 !important;
}
.focus-section-heading::before,
#focus-signals-heading::before,
.card-title::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 3px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: var(--kr-violet) !important;
  transform: translateY(-50%) !important;
}
.focus-section-sub { color: var(--kr-ink-3) !important; font-size: 12px !important; }

.count-pill {
  display: inline-block;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-violet-2) !important;
  border: 1px solid var(--kr-violet-line) !important;
}

/* ─── Sidebar lists (positions / activity) ─────────────── */

.home-side-list { display: flex !important; flex-direction: column !important; }
.home-side-empty { padding: 18px 20px !important; color: var(--kr-ink-3) !important; font-size: 12.5px !important; }

.home-position-row {
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--kr-line) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: relative !important;
}
.home-position-row::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--kr-up);
  opacity: 0.6;
}
.home-position-row:last-child { border-bottom: 0 !important; }
.home-position-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.home-position-sym {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: 0.01em !important;
}
.home-position-pnl {
  font-family: var(--kr-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}
.home-position-pnl.pos, .home-position-pnl.up { color: var(--kr-up) !important; }
.home-position-pnl.neg, .home-position-pnl.dn { color: var(--kr-dn) !important; }
.home-position-meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 4px 12px !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
  min-width: 0 !important;
}
.home-position-meta > span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

/* Activity rows */
.home-activity-row {
  display: grid !important;
  grid-template-columns: 50px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--kr-line) !important;
  font-size: 12.5px !important;
}
.home-activity-row:last-child { border-bottom: 0 !important; }
.home-activity-time {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
}
.home-activity-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--kr-ink) !important;
  min-width: 0 !important;
}
.home-activity-status {
  font-family: var(--kr-mono) !important;
  font-size: 10.5px !important;
  color: var(--kr-ink-3) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  background: var(--kr-line) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.home-activity-amt {
  font-family: var(--kr-mono) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-align: right !important;
}
.home-activity-amt.pos { color: var(--kr-up) !important; }
.home-activity-amt.neg { color: var(--kr-dn) !important; }

/* ─── Dir tag (LONG / SHORT chip) ──────────────────────── */

.dir-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.05em !important;
  background: var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
  text-transform: uppercase !important;
}
.dir-tag.long, .signal-row--long .dir-tag {
  background: var(--kr-up-dim) !important;
  color: var(--kr-up) !important;
}
.dir-tag.short, .signal-row--short .dir-tag {
  background: var(--kr-dn-dim) !important;
  color: var(--kr-dn) !important;
}

/* ─── Profile section + signal table ───────────────────── */

.profile-section {
  border: 0 !important;
  border-top: 1px solid var(--kr-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.profile-section:first-child { border-top: 0 !important; }
.profile-section-head {
  display: grid !important;
  grid-template-columns: 4px 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  background: rgba(255, 255, 255, 0.018) !important;
  border-bottom: 1px solid var(--kr-line) !important;
  position: relative !important;
  min-height: 0 !important;
}
.profile-section-bar {
  position: static !important;
  width: 4px !important;
  height: 36px !important;
  border-radius: 2px !important;
  background: var(--kr-violet-2) !important;
  opacity: 0.86 !important;
  transform: none !important;
}
.profile-section--swing .profile-section-bar,
.profile-section--short .profile-section-bar,
.profile-section--grid .profile-section-bar { background: var(--kr-violet-2) !important; }
.profile-section-copy { padding: 0 !important; min-width: 0 !important; }
.profile-section-kicker {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--kr-violet-2) !important;
  margin-bottom: 4px !important;
}
.profile-section-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}
.profile-section-desc {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
}
.profile-section-stats {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.profile-section-count, .profile-section-meta {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
  border: 1px solid var(--kr-line) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.profile-section-count {
  background: var(--kr-violet-dim) !important;
  color: var(--kr-violet-2) !important;
  border-color: var(--kr-violet-line) !important;
}
.profile-section-body {
  padding: 0 0 12px !important;
  background: rgba(255, 255, 255, 0.012) !important;
}

/* Signal table */
.signal-table-shell { padding: 12px 18px 0 !important; background: transparent !important; }
.signal-list-head {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) 80px 100px 100px !important;
  gap: 14px !important;
  padding: 6px 16px 8px !important;
  border-bottom: 1px solid var(--kr-line) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--kr-ink-3) !important;
  background: transparent !important;
}
.signal-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 8px 0 12px !important;
  width: 100% !important;
}

.signal-list .signal-row {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) 80px 100px 100px !important;
  grid-template-areas:
    'score symbol dir price status'
    'meta  meta   meta meta  meta' !important;
  gap: 8px 14px !important;
  align-items: center !important;
  padding: 14px 16px 12px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
  background: rgba(8, 8, 10, 0.82) !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s !important;
  position: relative !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.signal-list .signal-row::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--kr-violet-2);
  opacity: 0.44;
}
.signal-list .signal-row--long::before,
.signal-list .signal-row--short::before { background: var(--kr-violet-2) !important; opacity: 0.44 !important; }
.signal-list .signal-row:hover {
  background: rgba(19, 19, 22, 0.96) !important;
  border-color: var(--kr-line-2) !important;
}
.signal-list .signal-row.signal-row--details-open {
  background: rgba(19, 19, 22, 0.96) !important;
  border-color: var(--kr-violet-line) !important;
}
.signal-list .signal-row[data-details-trigger]:focus-visible {
  outline: 2px solid var(--kr-violet-line) !important;
  outline-offset: 0 !important;
}

/* Score cell */
.signal-list .signal-score-cell {
  grid-area: score !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding-left: 6px !important;
}
.signal-score-line { display: flex !important; align-items: baseline !important; gap: 2px !important; }
.signal-score-num {
  font-family: var(--kr-mono) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
}
.signal-score-den { font-family: var(--kr-mono) !important; font-size: 12px !important; color: var(--kr-ink-3) !important; }
.signal-score-track {
  height: 4px !important;
  background: var(--kr-line) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.signal-score-fill {
  height: 100% !important;
  background: linear-gradient(90deg, rgba(244,244,246,0.55), var(--kr-violet-2)) !important;
  border-radius: 2px !important;
}
.signal-score-label {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: var(--kr-ink-3) !important;
  text-transform: uppercase !important;
}
.signal-score-label.high { color: var(--kr-violet-2) !important; }
.signal-score-label.mid  { color: var(--kr-ink-2) !important; }
.signal-score-label.low  { color: var(--kr-ink-3) !important; }

/* Symbol cell */
.signal-list .signal-symbol-cell { grid-area: symbol !important; min-width: 0 !important; }
.signal-symbol-main {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.signal-symbol-sub {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px 10px !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
.signal-symbol-name {
  color: var(--kr-ink-2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.signal-symbol-reason {
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Direction cell + chip */
.signal-list .signal-dir-cell { grid-area: dir !important; }
.signal-dir-chip {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.06em !important;
  background: var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
}
.signal-dir-chip--long {
  background: rgba(45, 212, 126, 0.08) !important;
  color: #73dfa4 !important;
  border: 1px solid rgba(45, 212, 126, 0.24) !important;
}
.signal-dir-chip--short {
  background: rgba(240, 85, 106, 0.08) !important;
  color: #f28d9a !important;
  border: 1px solid rgba(240, 85, 106, 0.24) !important;
}

/* Last price */
.signal-list .signal-last-cell {
  grid-area: price !important;
  font-family: var(--kr-mono) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--kr-ink) !important;
  font-variant-numeric: tabular-nums !important;
  text-align: right !important;
}

/* Status cell */
.signal-list .signal-delta-cell {
  grid-area: status !important;
  text-align: right !important;
}
.signal-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--kr-line) !important;
  color: var(--kr-ink-2) !important;
  border: 1px solid var(--kr-line) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
.signal-status-chip--pending { color: var(--kr-violet-2) !important; background: var(--kr-violet-dim) !important; border-color: var(--kr-violet-line) !important; }
.signal-status-chip--queued  { color: var(--kr-ink-2) !important; }
.signal-status-chip--filled  { color: var(--kr-violet-2) !important; background: var(--kr-violet-dim) !important; border-color: var(--kr-violet-line) !important; }
.signal-status-chip--rejected,
.signal-status-chip--failed  { color: var(--kr-dn) !important; background: var(--kr-dn-dim) !important; border-color: var(--kr-dn-line) !important; }

/* Row meta strip (TP1 / SL / R / WR) */
.signal-list .signal-row .signal-row-meta,
.signal-row-meta {
  display: flex !important;
  grid-area: meta !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px 14px !important;
  margin: 4px 0 0 !important;
  padding: 10px 8px 2px !important;
  border-top: 1px dashed var(--kr-line) !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  color: var(--kr-ink-2) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
}
.signal-row-meta > span { white-space: nowrap !important; color: var(--kr-ink-2) !important; }

/* Grid profile: keep it analytical, not rainbow-colored. */
.signal-table--grid {
  background: transparent !important;
}
.signal-table--grid thead th {
  background: rgba(255,255,255,0.018) !important;
  color: var(--kr-ink-3) !important;
  border-color: var(--kr-line) !important;
}
.signal-table--grid tbody td {
  background: rgba(8, 8, 10, 0.82) !important;
  border-color: var(--kr-line) !important;
}
.signal-table--grid .signal-row--grid {
  background: rgba(8, 8, 10, 0.82) !important;
}
.signal-table--grid .signal-row--grid:hover td {
  background: rgba(19, 19, 22, 0.96) !important;
}
.signal-table--grid .signal-score-num,
.signal-table--grid .signal-delta-cell.up,
.signal-table--grid .signal-level-cell--sl {
  color: var(--kr-ink) !important;
}
.signal-table--grid .grid-row-last-main {
  color: var(--kr-ink) !important;
  font-family: var(--kr-mono) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.signal-table--grid .grid-row-last-sub,
.grid-row-note,
.grid-mini-note {
  color: var(--kr-ink-3) !important;
}
.signal-dir-chip--neutral,
.grid-action--neutral,
.grid-action--long,
.grid-action--short,
.grid-mini-bias {
  background: rgba(255,255,255,0.045) !important;
  color: var(--kr-ink-2) !important;
  border: 1px solid var(--kr-line-2) !important;
}
.grid-detail-strip,
.grid-detail-metric,
.signal-table--grid .signal-detail-row td {
  background: rgba(255,255,255,0.018) !important;
  border-color: var(--kr-line) !important;
}
.grid-detail-strip b,
.grid-detail-metric strong {
  color: var(--kr-ink) !important;
}

@media (max-width: 980px) {
  .signal-list-head { display: none !important; }
  .signal-list .signal-row {
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    grid-template-areas:
      'score symbol dir'
      'price status status'
      'meta  meta   meta' !important;
    gap: 6px 12px !important;
    padding: 14px 14px 10px !important;
  }
  .signal-list .signal-last-cell  { text-align: left !important; padding-left: 6px !important; }
  .signal-list .signal-delta-cell { text-align: right !important; }
}

/* ─── Tools / preset section legacy ────────────────────── */

.selected-symbols { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.symbol-results { margin-top: 8px !important; }

/* ─── History view ─────────────────────────────────────── */

.history-container { display: flex; flex-direction: column; gap: 22px; }
.conclusion-banner {
  padding: 16px 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 40%),
    var(--kr-surface) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-lg) !important;
  color: var(--kr-ink-2) !important;
  font-size: 13px !important;
}

.history-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 40%),
    var(--kr-surface) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-lg) !important;
  padding: 22px !important;
  box-shadow: none !important;
}
.history-section-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
.history-section-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  letter-spacing: -0.005em !important;
  margin: 0 !important;
}
.section-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--kr-ink-3); }
.section-meta-label { display: inline-flex; align-items: center; gap: 6px; color: var(--kr-ink-3); }

.history-range-tabs { display: inline-flex; background: var(--kr-bg-2); border: 1px solid var(--kr-line); border-radius: var(--kr-r-sm); padding: 2px; }
.history-range-tab { background: transparent !important; border: 0 !important; padding: 5px 10px !important; font-size: 12px !important; color: var(--kr-ink-2) !important; min-height: 0 !important; border-radius: 6px !important; }
.history-range-tab.is-active { background: var(--kr-surface) !important; color: var(--kr-ink) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.25) !important; }

.metrics-grid, .health-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 980px) {
  .metrics-grid, .health-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.metric-card, .health-card {
  background: var(--kr-bg-2) !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-md) !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.metrics-grid {
  background: transparent !important;
  border: 0 !important;
}
.metric-card {
  background: transparent !important;
}
.metric-label, .health-label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--kr-ink-3) !important;
  font-weight: 600 !important;
}
.metric-value, .health-value {
  font-family: var(--kr-mono) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--kr-ink) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}
.metric-unit, .health-unit {
  font-size: 12px !important;
  color: var(--kr-ink-3) !important;
}

.history-equity .equity-body { padding: 8px 0 !important; }
.chart-shell svg { width: 100% !important; height: 220px !important; display: block !important; }
.chart-shell line { stroke: var(--kr-line) !important; }
/* Data path/circle colors are set inline by renderEquityCurve (green/red by
   realized PnL sign); only enforce stroke width here so the inline color wins. */
.chart-shell path[fill="none"] { stroke-width: 1.75 !important; }

.trades-table, .symbols-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.trades-table th, .symbols-table th {
  text-align: left !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--kr-ink-3) !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--kr-line) !important;
}
.trades-table td, .symbols-table td {
  padding: 12px !important;
  border-bottom: 1px solid var(--kr-line) !important;
  color: var(--kr-ink) !important;
}
.trades-table tbody tr:hover, .symbols-table tbody tr:hover { background: var(--kr-bg-2) !important; }
.no-data { text-align: center; padding: 32px 0 !important; color: var(--kr-ink-3) !important; }

/* ─── Footer ───────────────────────────────────────────── */

.footer {
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--kr-line) !important;
  text-align: center !important;
}
.footer-compact { font-family: var(--kr-mono) !important; font-size: 12px !important; color: var(--kr-ink-3) !important; letter-spacing: 0.04em !important; }

/* ─── Trading dashboard (legacy injected) ──────────────── */

.trading-dashboard, .trading-dashboard * { font-family: var(--kr-sans) !important; }
.trading-dashboard input, .trading-dashboard select, .trading-dashboard button {
  font-family: inherit !important;
}
.trading-dashboard table, .trading-dashboard th, .trading-dashboard td {
  border-color: var(--kr-line) !important;
}
#trading-queue-summary,
#automation-health-section,
#strategy-learning-section {
  display: none !important;
}
.trading-order-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
}
#trading-dashboard .order-summary-chip {
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  border: 1px solid var(--kr-line-2) !important;
  background: var(--kr-bg-2) !important;
  color: var(--kr-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
#trading-dashboard .order-summary-chip strong {
  color: var(--kr-ink) !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums !important;
}
#trading-dashboard button.order-summary-chip:hover,
#trading-dashboard button.order-summary-chip.is-active {
  border-color: rgba(139, 113, 255, 0.45) !important;
  background: rgba(139, 113, 255, 0.13) !important;
  color: var(--kr-violet-2) !important;
}
#trading-dashboard .order-summary-chip.pending {
  border-color: rgba(139, 113, 255, 0.28) !important;
}
#trading-dashboard .order-summary-chip.running,
#trading-dashboard .order-summary-chip.profit {
  border-color: var(--kr-up-line) !important;
}
#trading-dashboard .order-summary-chip.loss,
#trading-dashboard .order-summary-chip.failed {
  border-color: var(--kr-dn-line) !important;
}
#trading-dashboard .order-summary-chip.closed {
  border-color: rgba(148, 163, 184, 0.22) !important;
}
#trading-dashboard .order-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid var(--kr-line-2) !important;
  background: var(--kr-bg-2) !important;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
#trading-dashboard .order-status.status-pending {
  color: var(--kr-violet-2) !important;
  border-color: rgba(139, 113, 255, 0.35) !important;
  background: rgba(139, 113, 255, 0.12) !important;
}
#trading-dashboard .order-status.status-running,
#trading-dashboard .order-status.status-executed,
#trading-dashboard .order-status.status-filled {
  color: var(--kr-violet-2) !important;
  border-color: rgba(139, 113, 255, 0.28) !important;
  background: rgba(139, 113, 255, 0.10) !important;
}
#trading-dashboard .order-status.status-profit {
  color: var(--kr-up) !important;
  border-color: var(--kr-up-line) !important;
  background: var(--kr-up-dim) !important;
}
#trading-dashboard .order-status.status-loss,
#trading-dashboard .order-status.status-negative,
#trading-dashboard .order-status.status-failed,
#trading-dashboard .order-status.status-error,
#trading-dashboard .order-status.status-blocked,
#trading-dashboard .order-status.status-rejected {
  color: var(--kr-dn) !important;
  border-color: var(--kr-dn-line) !important;
  background: var(--kr-dn-dim) !important;
}
#trading-dashboard .order-status.status-closed,
#trading-dashboard .order-status.status-neutral {
  color: var(--kr-ink-2) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: rgba(148, 163, 184, 0.09) !important;
}

/* ─── Skeleton loading ─────────────────────────────────── */

@keyframes kr-skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.skeleton {
  background: var(--kr-line);
  border-radius: var(--kr-r-sm);
  animation: kr-skeleton-pulse 1.6s ease-in-out infinite;
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}
.skeleton-text:last-child { margin-bottom: 0; }
.skeleton-text--short { width: 60%; }
.skeleton-text--medium { width: 80%; }

.skeleton-block {
  height: 48px;
  border-radius: var(--kr-r-md);
}

.skeleton-row {
  display: flex;
  gap: 12px;
  padding: 14px 0;
}
.skeleton-row-cell {
  flex: 1;
  height: 16px;
  background: var(--kr-line);
  border-radius: var(--kr-r-sm);
  animation: kr-skeleton-pulse 1.6s ease-in-out infinite;
}
.skeleton-row-cell--sm { flex: 0.5; }
.skeleton-row-cell--lg { flex: 2; }

.skeleton-kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--kr-line);
  border: 1px solid var(--kr-line);
  border-radius: var(--kr-r-md);
  overflow: hidden;
}
.skeleton-kpi-item {
  background: var(--kr-bg-2);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-kpi-label {
  height: 12px;
  width: 40%;
  background: var(--kr-line);
  border-radius: var(--kr-r-sm);
  animation: kr-skeleton-pulse 1.6s ease-in-out infinite;
}
.skeleton-kpi-value {
  height: 28px;
  width: 60%;
  background: var(--kr-line);
  border-radius: var(--kr-r-sm);
  animation: kr-skeleton-pulse 1.6s ease-in-out infinite;
}

/* ─── Toast & loading ──────────────────────────────────── */

.toast, .toast-container > * {
  background: var(--kr-surface) !important;
  border: 1px solid var(--kr-line-2) !important;
  border-radius: var(--kr-r-md) !important;
  box-shadow: var(--kr-shadow-md) !important;
  color: var(--kr-ink) !important;
}
.loading-overlay {
  background: var(--kr-surface) !important;
  border: 1px solid var(--kr-line-2) !important;
  border-left: 3px solid var(--kr-violet) !important;
  border-radius: var(--kr-r-md) !important;
  box-shadow: var(--kr-shadow-md) !important;
  color: var(--kr-ink-2) !important;
}
.loading-overlay .spinner {
  border-color: var(--kr-line-2) !important;
  border-top-color: var(--kr-violet-2) !important;
}

/* ─── Semantic helper classes ──────────────────────────── */

.up, .pos, .delta-chip.up { color: var(--kr-up) !important; }
.dn, .neg, .delta-chip.dn { color: var(--kr-dn) !important; }
.am, .neutral { color: var(--kr-violet-2) !important; }

.delta-chip {
  display: inline-flex; align-items: center;
  font-family: var(--kr-mono) !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: var(--kr-line) !important;
  border: 1px solid var(--kr-line) !important;
}
.delta-chip.up { background: var(--kr-up-dim) !important; border-color: var(--kr-up-line) !important; }
.delta-chip.dn { background: var(--kr-dn-dim) !important; border-color: var(--kr-dn-line) !important; }

/* ─── Accessibility ─────────────────────────────────────── */

:focus-visible {
  /* Solid violet (was the 0.32-alpha --kr-violet-line, too faint on the dark
     surface). Offset gap + halo keep the ring visible on both the dark UI and
     the light primary CTA. */
  outline: 2px solid var(--kr-violet) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--kr-violet-dim) !important;
}

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

/* ─── Responsive ───────────────────────────────────────── */

@media (max-width: 980px) {
  .main, .history-main { padding: 20px 16px 72px !important; }
  .home-hero { padding: 22px 22px !important; }
  .home-hero-toolbar { flex-direction: column !important; align-items: stretch !important; }
  .home-hero-actions { width: 100% !important; }
  .home-kpis {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    overflow: hidden !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid var(--kr-line) !important;
    background: var(--kr-line) !important;
  }
  .home-kpi {
    min-width: 0 !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
  }
  .control-bar-tabs { flex-wrap: wrap !important; }
  .control-bar-tab {
    flex: 1 1 calc(50% - 22px) !important;
    max-width: calc(50% - 22px) !important;
    min-width: 0 !important;
    border-bottom: 1px solid var(--kr-line) !important;
  }
  .control-bar-tab:nth-of-type(odd) { border-right: 1px solid var(--kr-line) !important; }
  .control-bar-tab:nth-of-type(even) { border-right: 0 !important; }
  .control-bar-tab:nth-of-type(3),
  .control-bar-tab:nth-of-type(4) { border-bottom: 0 !important; }
  .control-bar-collapse {
    flex: 0 0 44px !important;
    border-left: 1px solid var(--kr-line) !important;
    border-bottom: 1px solid var(--kr-line) !important;
    align-self: stretch !important;
  }
}
@media (max-width: 640px) {
  .kx-topbar-shell, .topbar { padding: 0 16px !important; }
  .kx-primary-nav { display: none !important; }
  .market-ticker {
    justify-content: center !important;
    padding: 0 2px !important;
  }
  .market-ticker-item {
    padding: 0 10px !important;
    gap: 7px !important;
  }
  .market-ticker-item:nth-child(n+2) {
    display: none !important;
  }
  .market-ticker-change {
    display: none !important;
  }
  .kx-clock,
  .live-badge {
    display: none !important;
  }
  .home-hero-title { font-size: 32px !important; }
}

.kx-mobile-menu-btn {
  display: none !important;
  width: 44px !important;
  height: 44px !important;
  padding: 10px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: var(--kr-r-sm) !important;
  background: var(--kr-surface) !important;
  color: var(--kr-ink-2) !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
}
.kx-mobile-menu-btn:hover {
  background: var(--kr-surface-2) !important;
  color: var(--kr-ink) !important;
}
.kx-mobile-menu-icon,
.kx-mobile-menu-icon::before,
.kx-mobile-menu-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
.kx-mobile-menu-icon {
  position: relative;
}
.kx-mobile-menu-icon::before,
.kx-mobile-menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
}
.kx-mobile-menu-icon::before { top: -5px; }
.kx-mobile-menu-icon::after { top: 5px; }

.kx-mobile-menu-btn[aria-expanded="true"] .kx-mobile-menu-icon {
  transform: rotate(45deg);
}
.kx-mobile-menu-btn[aria-expanded="true"] .kx-mobile-menu-icon::before {
  transform: rotate(90deg);
  top: 0;
}
.kx-mobile-menu-btn[aria-expanded="true"] .kx-mobile-menu-icon::after {
  opacity: 0;
}

/* Mobile nav dropdown */
.kx-mobile-nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--kr-surface);
  border-bottom: 1px solid var(--kr-line);
  padding: 8px 16px;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  box-shadow: var(--kr-shadow-md);
}
.kx-mobile-nav-dropdown.is-open { display: flex; }
.kx-mobile-nav-dropdown .kx-primary-nav-link {
  width: 100%;
  justify-content: flex-start;
  padding: 12px 16px !important;
  min-height: 44px !important;
  border-radius: var(--kr-r-sm) !important;
  font-size: 14px !important;
}

@media (max-width: 640px) {
  .kx-mobile-menu-btn { display: inline-flex !important; }
}

/* ─── Mobile RWD polish ────────────────────────────────── */

@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .main,
  .history-main {
    width: 100% !important;
    padding: 14px 8px 72px !important;
  }

  .kx-topbar-shell,
  .topbar {
    height: 56px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }

  .kx-topbar-l {
    gap: 8px !important;
    flex: 0 1 auto !important;
  }

  .market-ticker {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
  }

  .market-ticker-item {
    height: 34px !important;
    padding: 0 8px !important;
    gap: 5px !important;
  }

  .market-ticker-symbol {
    font-size: 10px !important;
  }

  .market-ticker-price {
    font-size: 11px !important;
  }

  .kx-logo,
  .logo {
    gap: 8px !important;
    min-width: 0 !important;
  }

  .kx-logo-mark,
  .logo-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
  }

  .kx-logo-text {
    max-width: 86px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }

  .kx-topbar-r,
  .topbar-right {
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  .kx-icon-btn,
  .topbar-nav-btn,
  .settings-nav-btn,
  .kx-mobile-menu-btn {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }

  .kx-mobile-nav-dropdown {
    position: fixed !important;
    top: 56px !important;
    left: 8px !important;
    right: 8px !important;
    padding: 8px !important;
    border: 1px solid var(--kr-line-2) !important;
    border-radius: 0 0 var(--kr-r-md) var(--kr-r-md) !important;
  }

  .home-hero {
    padding: 16px !important;
    margin-bottom: 12px !important;
    border-radius: 18px !important;
  }

  .home-hero::after {
    width: 140px !important;
    height: 140px !important;
    opacity: 0.5 !important;
  }

  .home-hero-toolbar {
    gap: 16px !important;
    margin-bottom: 16px !important;
  }

  .home-hero-status {
    gap: 10px !important;
  }

  .home-status-light {
    margin-top: 11px !important;
  }

  .home-hero--positions .home-hero-title-wrap::before {
    margin-bottom: 8px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.12em !important;
  }

  .home-hero-headline {
    gap: 8px !important;
  }

  .home-hero-title {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  .home-hero-chip {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }

  .home-hero-sub {
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .home-hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .home-hero-actions .btn {
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 9px 10px !important;
    font-size: 12px !important;
  }

  .home-positions {
    gap: 10px !important;
  }

  .home-position-card {
    padding: 14px !important;
    gap: 12px !important;
    border-radius: 14px !important;
  }

  .home-position-card-hd {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .home-position-card-title {
    font-size: 16px !important;
  }

  .home-position-card-spark {
    flex-basis: 100% !important;
    height: 18px !important;
  }

  .home-position-card-pnl {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }

  .home-position-card-pnl-value {
    font-size: 25px !important;
    line-height: 1.05 !important;
  }

  .home-position-card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
  }

  .home-position-card-meta dd {
    font-size: 12px !important;
    overflow-wrap: anywhere !important;
  }

  .home-kpi-value {
    font-size: 22px !important;
  }

  .control-bar {
    margin-bottom: 14px !important;
    border-radius: 16px !important;
    position: relative !important;
  }

  .control-bar-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .control-bar-tab {
    flex: none !important;
    max-width: none !important;
    min-height: 58px !important;
    padding: 10px 7px !important;
    border-right: 1px solid var(--kr-line) !important;
    border-bottom: 0 !important;
  }

  .control-bar-tab:nth-of-type(odd),
  .control-bar-tab:nth-of-type(even),
  .control-bar-tab:nth-of-type(3),
  .control-bar-tab:nth-of-type(4) {
    border-right: 1px solid var(--kr-line) !important;
    border-bottom: 0 !important;
  }

  .control-bar-tab-label {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  .control-bar-tab-meta {
    max-width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }

  .control-bar-tab-sep {
    display: none !important;
  }

  .control-bar-collapse {
    position: absolute !important;
    top: 70px !important;
    right: 16px !important;
    z-index: 2 !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.035) !important;
    color: var(--kr-ink-3) !important;
    box-shadow: none !important;
  }

  .control-panel-body,
  .control-bar-panel {
    padding: 12px !important;
  }

  .preset-section,
  .symbol-search,
  .selected-shell,
  .position-review-form,
  .single-analyzer-form,
  .single-output,
  .position-review-output,
  .focus-aux {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .preset-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .preset-btn {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .symbol-search-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .symbol-search-row .symbol-add-btn {
    width: auto !important;
    min-width: 82px !important;
    padding-inline: 10px !important;
    white-space: nowrap !important;
  }

  .home-position-card-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .home-position-card-btn {
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .single-analyzer-btn,
  .pr-form-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  .symbol-add-btn {
    justify-content: center !important;
  }

  .preset-btn,
  .single-analyzer-btn,
  .pr-form-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  .symbol-search-head,
  .history-section-header,
  .focus-section-header,
  .home-side-card-hd {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .pr-group-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pr-group-fields label:first-child {
    grid-column: 1 / -1 !important;
  }

  .pr-advanced summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .pr-advanced summary small {
    margin-left: 0 !important;
  }

  .profile-section-head {
    grid-template-columns: 4px minmax(0, 1fr) !important;
    grid-template-areas:
      "bar copy"
      "stats stats" !important;
    gap: 10px 12px !important;
    padding: 14px !important;
  }

  .profile-section-bar {
    grid-area: bar !important;
    height: 44px !important;
  }

  .profile-section-copy {
    grid-area: copy !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .profile-section-stats {
    grid-area: stats !important;
    justify-content: flex-start !important;
    padding-left: 16px !important;
  }

  .profile-section-kicker,
  .profile-section-title,
  .profile-section-desc {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .signal-table-shell {
    padding: 8px 0 0 !important;
  }

  .signal-list {
    gap: 8px !important;
  }

  .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "symbol dir"
      "score price"
      "status status"
      "meta meta" !important;
    gap: 8px 10px !important;
    padding: 14px 12px 12px !important;
    border-radius: 14px !important;
  }

  .signal-list .signal-score-cell {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 6px !important;
  }

  .signal-score-line {
    flex: 0 0 auto !important;
  }

  .signal-score-track {
    width: 46px !important;
    flex: 0 0 46px !important;
  }

  .signal-score-label {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .signal-list .signal-last-cell {
    text-align: right !important;
    padding-left: 0 !important;
    font-size: 13px !important;
  }

  .signal-list .signal-delta-cell {
    text-align: left !important;
    padding-left: 6px !important;
  }

  .signal-row-meta {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding: 9px 6px 0 !important;
    gap: 6px 10px !important;
    font-size: 11px !important;
  }

  .signal-symbol-reason,
  .signal-symbol-name {
    white-space: normal !important;
  }

  .home-position-meta {
    grid-template-columns: 1fr !important;
  }

  .home-activity-row {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-areas:
      "time main"
      ". amount" !important;
    align-items: start !important;
    padding: 12px 16px !important;
  }

  .home-activity-time { grid-area: time !important; }
  .home-activity-main { grid-area: main !important; flex-wrap: wrap !important; }
  .home-activity-amt { grid-area: amount !important; text-align: left !important; }

  .history-container {
    gap: 14px !important;
  }

  .history-section,
  .conclusion-banner {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .metrics-grid,
  .health-grid,
  .skeleton-kpi {
    grid-template-columns: 1fr !important;
  }

  .metric-card,
  .health-card {
    padding: 14px !important;
  }

  .metric-value,
  .health-value {
    font-size: 20px !important;
  }

  .history-range-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .history-range-tab {
    flex: 1 0 auto !important;
    justify-content: center !important;
    min-height: 34px !important;
  }

  .trades-table-wrapper,
  .symbols-table-wrapper {
    margin-inline: -6px !important;
    padding-inline: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .chart-shell svg {
    height: 180px !important;
  }
}

@media (max-width: 430px) {
  .main,
  .history-main {
    padding-inline: 7px !important;
  }

  .live-badge-time,
  #refresh-info {
    max-width: 54px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .home-hero {
    padding: 14px !important;
  }

  .home-hero-title {
    font-size: 28px !important;
  }

  .home-position-card-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .control-bar-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 40px !important;
  }

  .control-bar-tab {
    min-height: 50px !important;
    padding: 8px 5px !important;
  }

  .control-bar-tab-meta {
    display: none !important;
  }

  .control-bar-tab:nth-of-type(2) {
    border-right: 1px solid var(--kr-line) !important;
  }

  .control-bar-tab:nth-of-type(3),
  .control-bar-tab:nth-of-type(4) {
    border-top: 0 !important;
  }

  .control-bar-collapse {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .profile-section-desc {
    display: none !important;
  }

  .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "symbol"
      "dir"
      "score"
      "price"
      "status"
      "meta" !important;
  }

  .signal-list .signal-dir-cell,
  .signal-list .signal-last-cell,
  .signal-list .signal-delta-cell {
    text-align: left !important;
    padding-left: 6px !important;
  }

  .signal-status-chip,
  .signal-dir-chip {
    max-width: 100% !important;
  }
}

/* ─── Simpler UX layer ─────────────────────────────────── */

.home-position-card-btn,
.history-range-tab,
.symbol-chip-remove,
.kx-primary-nav-link,
.settings-nav-btn,
.topbar-nav-btn,
.kx-mobile-menu-btn {
  min-height: 44px !important;
}
.symbol-chip-remove {
  min-width: 44px !important;
}
.home-position-card-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
}
.home-hero-actions .btn-danger {
  border-width: 1px !important;
}

.signal-list .signal-row {
  grid-template-columns: 88px minmax(0, 1fr) 80px 100px 100px !important;
  grid-template-areas:
    "decision decision decision decision decision"
    "score    symbol   dir      price    status"
    "meta     meta     meta     meta     meta" !important;
}
.signal-decision-cell {
  grid-area: decision !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
  padding: 0 0 10px 6px !important;
  border-bottom: 1px dashed var(--kr-line) !important;
}
.signal-decision-cell strong {
  color: var(--kr-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}
.signal-decision-cell span {
  color: var(--kr-ink-3) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.signal-decision-cell--go strong {
  color: var(--kr-up) !important;
}
.signal-decision-cell--caution strong {
  color: var(--kr-violet-2) !important;
}
.signal-decision-cell--wait strong {
  color: var(--kr-ink-2) !important;
}
.signal-dir-chip {
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.signal-row-meta > span {
  padding: 3px 8px !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.025) !important;
}

.selected-unit {
  color: var(--kr-ink-3) !important;
  font-size: 12px !important;
  margin-left: 4px !important;
}

.history-equity.is-empty .chart-shell {
  min-height: 160px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed var(--kr-line-2) !important;
  border-radius: var(--kr-r-md) !important;
  background: var(--kr-bg-2) !important;
}
.history-equity.is-empty .chart-shell svg {
  display: none !important;
}
.history-equity.is-empty .chart-shell::before {
  content: none !important;
}
.history-empty-state,
.history-table-empty {
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  max-width: 420px !important;
  margin-inline: auto !important;
  text-align: center !important;
}
.history-empty-title,
.history-table-empty strong {
  color: var(--kr-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.history-empty-copy,
.history-table-empty span {
  color: var(--kr-ink-3) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
.history-empty-action,
.history-table-empty a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  margin-top: 4px !important;
  padding: 0 14px !important;
  border: 1px solid var(--kr-violet-line) !important;
  border-radius: 999px !important;
  background: var(--kr-violet-dim) !important;
  color: var(--kr-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

@media (max-width: 720px) {
  .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "decision decision"
      "symbol   dir"
      "score    price"
      "status   status"
      "meta     meta" !important;
    padding: 12px 12px 10px !important;
    gap: 8px 10px !important;
  }
  .signal-decision-cell {
    padding: 0 0 8px 6px !important;
  }
  .signal-decision-cell strong {
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }
  .signal-decision-cell span {
    font-size: 11.5px !important;
    line-height: 1.28 !important;
  }
  .signal-list .signal-symbol-cell {
    padding-left: 6px !important;
  }
  .signal-list .signal-dir-cell {
    display: block !important;
    justify-self: end !important;
    padding-left: 0 !important;
  }
  .signal-list .signal-delta-cell {
    justify-self: end !important;
    text-align: right !important;
    padding-left: 0 !important;
  }
  .signal-list .signal-score-cell {
    padding-left: 6px !important;
  }
  .signal-list .signal-last-cell {
    align-self: center !important;
    text-align: right !important;
    padding-left: 0 !important;
  }
  .signal-row-meta > span {
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  .signal-list .signal-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "decision decision"
      "symbol   dir"
      "score    price"
      "meta     status" !important;
  }
  .signal-list .signal-row .signal-row-meta,
  .signal-row-meta {
    border-top: 1px dashed var(--kr-line) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, auto)) !important;
    justify-content: start !important;
    gap: 6px !important;
    margin-top: 2px !important;
    padding: 9px 0 0 6px !important;
    overflow: hidden !important;
  }
  .signal-row-meta > span {
    padding: 2px 6px !important;
    font-size: 10.5px !important;
  }
  .signal-status-chip,
  .signal-dir-chip {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
  }
}

/* Final touch-target normalization. Older theme layers set explicit widths with
   !important, so keep this at the end of the final stylesheet. */
.kx-icon-btn,
.topbar-nav-btn,
.settings-nav-btn,
.kx-mobile-menu-btn,
.kx-topbar-shell .kx-icon-btn,
.topbar .topbar-nav-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}
.symbol-input,
.single-analyzer-input,
.single-analyzer-select,
.period-select {
  min-height: 44px !important;
}
.control-bar-collapse {
  min-width: 44px !important;
}
@media (max-width: 720px) {
  .control-bar-collapse {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}
@media (max-width: 430px) {
  .control-bar-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .control-bar-tab {
    min-height: 50px !important;
    padding: 8px 5px !important;
  }
  .control-bar-tab-meta {
    display: none !important;
  }
  .control-bar-collapse {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 720px) {
  #trading-panel.control-bar-panel {
    margin-inline: -12px !important;
  }

  #trading-panel .trading-tab-dashboard-shell,
  #trading-panel .trading-dashboard-shell {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #trading-panel #trading-dashboard,
  #trading-panel .trading-dashboard {
    background: transparent !important;
  }

  #trading-panel .trading-dashboard-head {
    display: none !important;
  }

  #trading-panel .trading-dashboard-body {
    gap: 14px !important;
    padding: 0 !important;
  }

  .trading-orders {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }

  .trading-orders h4 {
    padding-inline: 12px !important;
    margin-bottom: 12px !important;
  }

  .trading-order-summary {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
    padding: 0 12px 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .trading-order-summary::-webkit-scrollbar {
    display: none !important;
  }

  #trading-dashboard .order-summary-chip {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 7px 11px !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  #trading-orders-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
  }

  #trading-orders-table thead {
    display: none !important;
  }

  #trading-orders-table tbody {
    display: grid !important;
    gap: 10px !important;
    padding-inline: 0 !important;
  }

  #trading-orders-table tr.trading-order-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(92px, auto) !important;
    grid-template-areas:
      "symbol status"
      "time direction"
      "levels pnl"
      "reason reason" !important;
    gap: 9px 14px !important;
    padding: 14px !important;
    border: 1px solid var(--kr-line) !important;
    border-radius: var(--kr-r-md) !important;
    background: var(--kr-bg-2) !important;
  }

  #trading-orders-table tr.trading-order-row--error {
    display: block !important;
  }

  #trading-orders-table td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--kr-ink) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #trading-orders-table td::before {
    content: attr(data-label) !important;
    flex: 0 0 auto !important;
    color: var(--kr-ink-3) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  #trading-orders-table td:nth-child(1) { grid-area: time !important; }
  #trading-orders-table td:nth-child(2) { grid-area: symbol !important; }
  #trading-orders-table td:nth-child(3) { grid-area: direction !important; }
  #trading-orders-table td:nth-child(4) { grid-area: status !important; justify-content: flex-end !important; }
  #trading-orders-table td:nth-child(5) { grid-area: reason !important; }
  #trading-orders-table td:nth-child(6) { grid-area: pnl !important; justify-content: flex-end !important; text-align: right !important; }
  #trading-orders-table td:nth-child(7) { grid-area: levels !important; justify-content: flex-start !important; }

  #trading-orders-table td:nth-child(2)::before,
  #trading-orders-table td:nth-child(4)::before,
  #trading-orders-table td:nth-child(6)::before {
    content: none !important;
  }

  #trading-orders-table td:nth-child(2) {
    justify-content: flex-start !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  #trading-orders-table td:nth-child(1),
  #trading-orders-table td:nth-child(3),
  #trading-orders-table td:nth-child(7) {
    white-space: nowrap !important;
  }

  #trading-orders-table td:nth-child(1) {
    justify-content: flex-start !important;
  }

  #trading-orders-table td:nth-child(3) {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  #trading-orders-table .order-reason,
  #trading-orders-table .order-levels {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #trading-orders-table .order-reason {
    color: var(--kr-ink-3) !important;
    text-align: left !important;
  }

  #trading-orders-table .order-levels {
    color: var(--kr-ink-2) !important;
    text-align: left !important;
  }

  #trading-orders-table .order-status {
    min-height: 30px !important;
    padding-inline: 11px !important;
  }

  #trading-orders-table .order-pnl {
    display: inline-grid !important;
    justify-items: end !important;
    gap: 2px !important;
    white-space: nowrap !important;
  }
}

#trading-panel .trading-tab-dashboard-shell,
#trading-panel .trading-dashboard-shell {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#trading-panel #trading-dashboard,
#trading-panel .trading-dashboard {
  background: transparent !important;
}

#trading-panel .trading-dashboard-head {
  display: none !important;
}

#trading-panel .trading-orders {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 640px) {
  .kx-topbar-shell,
  .topbar {
    padding-inline: 10px !important;
    gap: 8px !important;
  }

  .kx-topbar-l {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .market-ticker {
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .market-ticker-item {
    height: 36px !important;
    padding-inline: 10px !important;
    align-items: center !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .market-ticker-item:nth-child(n+2),
  .market-ticker-change,
  .kx-clock,
  .live-badge,
  .kx-topbar-shell .live-badge.kx-clock,
  .topbar .live-badge.kx-clock {
    display: none !important;
  }

  .kx-topbar-r,
  .topbar-right {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  .kx-mobile-menu-btn,
  .settings-nav-btn,
  .topbar-nav-btn,
  .kx-topbar-shell .kx-icon-btn,
  .topbar .topbar-nav-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 390px) {
  .kx-logo-text {
    display: none !important;
  }

  .market-ticker-symbol {
    font-size: 10px !important;
  }

  .market-ticker-price {
    font-size: 11px !important;
  }
}

/* Compact control mode selector. Keep this after legacy mobile tab overrides. */
.control-bar .control-bar-tabs {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  padding: 14px 16px !important;
  gap: 12px !important;
  overflow: visible !important;
}

.control-bar .control-bar-picker {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.control-bar .control-bar-picker-label {
  display: none !important;
  align-items: center !important;
  color: var(--kr-ink-3) !important;
  white-space: nowrap !important;
}

.control-bar .control-bar-select-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 360px !important;
}

.control-bar .control-bar-picker-meta {
  display: none !important;
}

.control-bar .control-bar-tablist {
  display: none !important;
}

.control-bar .control-bar-collapse {
  position: static !important;
  inset: auto !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  align-self: center !important;
  border: 1px solid var(--kr-line) !important;
  border-radius: 10px !important;
  background: var(--kr-surface) !important;
}

@media (max-width: 640px) {
  .control-bar .control-bar-tabs {
    padding: 12px !important;
    gap: 10px !important;
  }

  .control-bar .control-bar-picker-label {
    display: none !important;
  }

  .control-bar .control-bar-select-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .control-bar .control-mode-button {
    min-height: 40px !important;
    font-size: 14px !important;
  }

  .control-bar .control-bar-collapse {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}