/* ============================================================================
   EMERALD FINTECH PRO TERMINAL THEME - ZRATRADE PRO
   Institutional Derivative Trading Cockpit (Antislop & Antislop-UI Compliant)
   Visual Archetype: Reference Fintech Minimalist Obsidian & Emerald Matrix
   ============================================================================ */

:root {
  /* Obsidian & Deep Slate Institutional Surfaces */
  --bg-outer: #040809;
  --bg-frame: #0b0f12;
  --bg-card: #0e1317;
  --bg-card-sub: #12181d;
  --bg-pill: #161e24;
  --bg-pill-hover: #1e2830;

  /* Precision Emerald & Translucent Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-card: rgba(0, 210, 133, 0.14);
  --border-pill: rgba(0, 210, 133, 0.16);
  --border-active: #00d285;

  /* Reference Signature Mint / Emerald Accents & Ambient Washes */
  --accent-gold: #f59e0b;
  --accent-gold-hover: #fbbf24;
  --accent-gold-soft: rgba(245, 158, 11, 0.14);
  --accent-rose: #F6465D;
  --accent-pink: #f43f5e;
  --accent-purple: #a855f7;
  --accent-purple-soft: rgba(168, 85, 247, 0.14);
  --accent-violet: #8b5cf6;
  --accent-mauve: #c084fc;
  --accent-cyan: #06b6d4;
  --accent-cyan-soft: rgba(6, 182, 212, 0.14);
  --grad-nav-active: linear-gradient(90deg, rgba(0, 210, 133, 0.18) 0%, rgba(0, 210, 133, 0.03) 100%);
  --grad-pill-active: linear-gradient(135deg, rgba(0, 210, 133, 0.28) 0%, rgba(0, 210, 133, 0.12) 100%);
  --grad-avatar: linear-gradient(135deg, #00d285 0%, #00f5a0 100%);

  /* Financial PnL Metrics */
  --color-green: #00d285;
  --color-green-soft: rgba(0, 210, 133, 0.14);
  --color-red: #F6465D;
  --color-red-soft: rgba(246, 70, 93, 0.14);

  /* High-Contrast Financial Typography (WCAG AA Compliant) */
  --text-white: #ffffff;
  --text-main: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-dim: #79879c;
  --text-muted: #64748b;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Modern Ergonomic Radius (Reference Matched 12-14px) */
  --radius-frame: 14px;
  --radius-card: 12px;
  --radius-sm: 8px;
  --radius-pill: 8px;
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  background-color: var(--bg-outer);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* High-Precision Financial Tabular Figures */
.helios-table td,
.helios-table th,
.analytics-big-num,
.analytics-sub-badge,
.stat-chip-val,
.slot-box,
.coin-price-str,
.coin-pct-str,
.badge-reason,
.risk-pill-tag,
.dir-side-title,
.dir-side-winrate,
.dir-side-trades {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv05' 1, 'cv11' 1;
  letter-spacing: -0.01em;
}

/* Custom Minimalist Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 210, 133, 0.18);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 210, 133, 0.35);
}

/* ==========================================================================
   OUTER FRAME & FLOATING TERMINAL CARD
   ========================================================================== */

.helios-app-outer {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  padding: 14px 12px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  overflow-x: hidden;
  background: radial-gradient(circle at 10% 20%, rgba(0, 210, 133, 0.08) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(0, 210, 133, 0.10) 0%, transparent 45%),
              var(--bg-outer);
}

.helios-terminal-card {
  width: 100%;
  max-width: 1560px;
  min-width: 0;
  background: var(--bg-frame);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-frame);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 210, 133, 0.05);
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: calc(100vh - 28px);
  max-height: calc(100vh - 28px);
  box-sizing: border-box;
}

/* ==========================================================================
   LEFT SIDEBAR
   ========================================================================== */

.helios-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-frame);
  border-right: 1px solid rgba(0, 210, 133, 0.10);
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.brand-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
}

.brand-mark-svg {
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-title-group {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-pro-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--accent-mauve);
  background: rgba(0, 210, 133, 0.12);
  border: 1px solid rgba(0, 210, 133, 0.28);
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
}

.brand-by-author {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 3.5px;
  line-height: 1.1;
  margin-top: 1px;
}

.brand-by-author .brand-author-name {
  color: var(--accent-mauve);
  font-weight: 700;
  letter-spacing: 0.8px;
}

/* Nav Menu */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
}

.nav-item .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.85;
}

.nav-item:hover {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.03);
}

.nav-item.active {
  color: var(--text-white);
  background: var(--grad-nav-active);
  border-color: var(--border-active);
  box-shadow: 0 4px 20px -4px rgba(0, 210, 133, 0.25);
}

.nav-item.active .nav-icon {
  opacity: 1;
  color: var(--accent-pink);
}

.nav-hotkey {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: auto;
  line-height: 1.2;
}

.nav-item.active .nav-hotkey {
  color: var(--accent-mauve);
  border-color: rgba(0, 210, 133, 0.35);
  background: rgba(0, 210, 133, 0.12);
}

/* Sidebar Bottom */
.sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
}

.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  width: 100%;
}

.sidebar-btn .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.sidebar-btn:hover {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   MAIN CONTENT AREA
   ========================================================================== */

.helios-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Tab Views */
.helios-view-tab {
  display: none;
  opacity: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.helios-view-tab.active {
  display: flex !important;
  flex-direction: column;
  gap: 18px;
  opacity: 1;
}

/* ==========================================================================
   HEADER SECTION
   ========================================================================== */

.helios-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 8px;
}

.header-left-block {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

/* ==========================================================================
   BINANCE PRO TICKER & TELEMETRY STRIP
   ========================================================================== */

.binance-ticker-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(0, 210, 133, 0.12) 0%, rgba(0, 210, 133, 0.02) 60%, #0e1317 100%);
  border: 1px solid rgba(0, 210, 133, 0.16);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.ticker-pair-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 14px;
  border-right: 1px solid var(--border-subtle);
}

.ticker-symbol {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: -0.2px;
}

.ticker-contract-type {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.ticker-leverage-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-gold);
  background: var(--accent-gold-soft);
  border: 1px solid rgba(0, 210, 133, 0.35);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}

.ticker-metric-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ticker-metric-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.ticker-metric-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.ticker-metric-value.highlight-gold {
  color: var(--accent-gold);
}

.ticker-metric-value.btc-price {
  font-size: 13px;
  color: var(--text-white);
}

.ticker-metric-value.btc-change.green {
  color: var(--color-green);
}

.ticker-metric-value.btc-change.red {
  color: var(--color-red);
}

/* Fallback welcome styles if ever invoked */
.welcome-heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-white);
}

.welcome-name {
  color: var(--accent-gold);
}

.welcome-subtitle {
  font-size: 12px;
  color: var(--text-dim);
}

/* ==========================================================================
   BINANCE PRO DOCKED WORKSTATION (POSITIONS & ORDERS PANEL)
   ========================================================================== */

.binance-docked-workstation {
  width: 100%;
  background: radial-gradient(120% 100% at 50% 0%, rgba(0, 210, 133, 0.10) 0%, rgba(0, 210, 133, 0.02) 50%, #0e1317 100%);
  border: 1px solid rgba(0, 210, 133, 0.16);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.docked-tab-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 0 12px;
  background: #0b0f12;
  border-bottom: 1px solid rgba(0, 210, 133, 0.12);
  overflow-x: auto;
}

.docked-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.docked-tab-btn:hover {
  color: var(--text-main);
}

.docked-tab-btn.active {
  color: var(--color-green);
  border-bottom-color: var(--color-green);
  font-weight: 700;
}

.dock-count-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-pill);
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  line-height: 1.2;
}

.docked-tab-btn.active .dock-count-badge {
  background: var(--color-green-soft);
  color: var(--color-green);
}

.docked-pane {
  display: none;
  width: 100%;
  padding: 0;
}

.docked-pane.active {
  display: block;
}

/* Binance Side Badges */
.binance-side-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.binance-side-badge.long {
  background: var(--color-green-soft);
  color: var(--color-green);
  border: 1px solid rgba(14, 203, 129, 0.3);
}

.binance-side-badge.short {
  background: var(--color-red-soft);
  color: var(--color-red);
  border: 1px solid rgba(246, 70, 93, 0.3);
}

/* Compact Binance Action Buttons */
.binance-btn-danger-sm {
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: var(--color-red);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.binance-btn-danger-sm:hover {
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(246, 70, 93, 0.35);
}

.binance-btn-slate-sm {
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  background: #2b313a;
  border: 1px solid #363c45;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.binance-btn-slate-sm:hover {
  background: #363c45;
  color: var(--text-white);
}

/* Header Right Block */
.header-right-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: 100%;
  flex-shrink: 0;
}

.top-user-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
}

.circle-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.circle-action-btn:hover {
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.2);
}

.dot-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dot-indicator.green {
  background: var(--color-green);
  box-shadow: 0 0 6px var(--color-green);
}

.dot-indicator.red {
  background: var(--color-red);
  box-shadow: 0 0 6px var(--color-red);
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.user-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 3px 12px 3px 4px;
  max-width: 190px;
  box-sizing: border-box;
  flex-shrink: 1;
}

.avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-avatar);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
}

.user-display-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-meta-sub {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

/* Quick Search / Scan Bar */
.action-search-bar {
  width: 270px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-search-bar:hover {
  border-color: rgba(236, 72, 153, 0.4);
  color: var(--text-secondary);
}

.search-label {
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
}

.scan-hotkey-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: auto;
  line-height: 1.2;
}

/* ==========================================================================
   HELIOS CARDS COMMON
   ========================================================================== */

.helios-card {
  background: radial-gradient(120% 120% at 88% 12%, rgba(0, 210, 133, 0.14) 0%, rgba(0, 210, 133, 0.02) 55%, #0e1317 100%);
  border: 1px solid rgba(0, 210, 133, 0.14);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  position: relative;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.helios-card:hover {
  border-color: rgba(0, 210, 133, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 210, 133, 0.08);
}

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-title-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: -0.2px;
}

/* ==========================================================================
   TOP 3-COLUMN GRID (BALANCED 330px HEIGHTS)
   ========================================================================== */

.helios-top-grid {
  display: grid;
  grid-template-columns: minmax(260px, 290px) minmax(0, 1.15fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.grid-col {
  min-width: 0;
  box-sizing: border-box;
}

/* --- COLUMN 1: HOLDING & AI PROMO --- */
.col-holding {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 330px;
}

/* Card 1A: Total Holding */
.card-total-holding {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 20px;
  background: radial-gradient(120% 120% at 88% 12%, rgba(0, 210, 133, 0.20) 0%, rgba(0, 210, 133, 0.03) 55%, #0e1317 100%);
  border: 1px solid rgba(0, 210, 133, 0.16);
}

.pill-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-pill);
  border: 1px solid var(--border-card);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.holding-amount-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 4px 0 10px 0;
}

.holding-amount-row .curr-sign {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-secondary);
}

.holding-amount-row .holding-digits {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: -1px;
}

.holding-stats-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pnl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.pnl-pill.positive {
  background: rgba(16, 185, 129, 0.14);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.pnl-pill.negative {
  background: rgba(244, 63, 94, 0.14);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.sub-roi {
  font-size: 11px;
  opacity: 0.9;
}

.holding-avail-text {
  font-size: 11px;
  color: var(--text-dim);
}

.holding-avail-text span {
  color: var(--text-secondary);
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Card 1B: Decisions Powered by Data (EMERALD MIST & AMBIENT HORIZON DOME GLOW) */
.card-data-decisions {
  flex: 1.25;
  background: radial-gradient(120% 120% at 18% 85%, rgba(0, 210, 133, 0.22) 0%, rgba(0, 210, 133, 0.04) 55%, #0e1317 100%);
  border: 1px solid rgba(0, 210, 133, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 20px;
}

.data-decisions-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.data-decisions-body h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: -0.2px;
}

.data-decisions-body p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.btn-glow-container {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.btn-explore-ai {
  background: #00d285;
  border: 1px solid #00d285;
  color: #04120b;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 210, 133, 0.3);
  transition: all 0.2s ease;
  position: relative;
  z-index: 2;
}

.btn-explore-ai:hover {
  background: #00f5a0;
  border-color: #00f5a0;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 210, 133, 0.45);
}

.bottom-ambient-horizon-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: radial-gradient(ellipse at 50% 105%, rgba(0, 210, 133, 0.45) 0%, rgba(0, 210, 133, 0.18) 35%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}

/* --- COLUMN 2: WATCHLIST (EXACT 330px HEIGHT) --- */
.card-watchlist {
  height: 330px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 120% at 85% 15%, rgba(0, 210, 133, 0.16) 0%, rgba(0, 210, 133, 0.02) 50%, #0e1317 100%);
  border: 1px solid rgba(0, 210, 133, 0.14);
}

.filter-pills-group {
  display: flex;
  gap: 4px;
  background: var(--bg-pill);
  padding: 3px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

.filter-pill {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  color: var(--text-white);
}

.filter-pill.active {
  background: var(--grad-pill-active);
  color: var(--text-white);
  border: 1px solid var(--border-active);
}

.watchlist-rows-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
}

.watchlist-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.watchlist-item-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(0, 210, 133, 0.35);
  transform: translateX(2px);
}

.watchlist-coin-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coin-mono-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-card-sub);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-white);
}

.coin-text-col {
  display: flex;
  flex-direction: column;
}

.coin-primary-symbol {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
}

.coin-secondary-pair {
  font-size: 10px;
  color: var(--text-dim);
}

.watchlist-coin-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.coin-price-str {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
}

.coin-pct-str {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.coin-pct-str.green { color: var(--color-green); }
.coin-pct-str.red { color: var(--color-red); }

.watchlist-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  padding: 40px 0;
}

/* --- COLUMN 3: MY PORTFOLIO (EXACT 330px HEIGHT & 2X2 GRID) --- */
.card-my-portfolio {
  height: 330px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 120% at 85% 85%, rgba(0, 210, 133, 0.16) 0%, rgba(0, 210, 133, 0.02) 55%, #0e1317 100%);
  border: 1px solid rgba(0, 210, 133, 0.14);
}

.see-all-action-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-pill);
  border: 1px solid var(--border-card);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.see-all-action-pill:hover {
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.2);
}

.circle-arrow-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Portfolio Cards Grid (Adaptive up to 10 positions) */
.portfolio-2x2-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.portfolio-2x2-grid::-webkit-scrollbar {
  width: 4px;
}

.portfolio-2x2-grid::-webkit-scrollbar-track {
  background: transparent;
}

.portfolio-2x2-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.portfolio-2x2-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 210, 133, 0.4);
}

.portfolio-cell-card {
  background: var(--bg-card-sub);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
}

.portfolio-cell-card:hover {
  border-color: rgba(0, 210, 133, 0.35);
  background: rgba(18, 24, 29, 0.95);
  transform: translateY(-1px);
}

.cell-top-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cell-price {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-white);
}

.cell-pct {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.cell-pct.green { color: var(--color-green); }
.cell-pct.red { color: var(--color-red); }

.cell-bottom-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
}

.cell-coin-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--text-white);
}

.cell-mini-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}

.cell-mini-badge.long {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-green);
}

.cell-mini-badge.short {
  background: rgba(244, 63, 94, 0.2);
  color: var(--color-red);
}

.cell-units {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.cell-btn-close {
  background: transparent;
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: var(--color-red);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cell-btn-close:hover {
  background: var(--color-red);
  color: #fff;
}

/* Portfolio Position Visual Risk/Reward (TP/SL) Progress Meter */
.cell-meter-wrap {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meter-labels-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
}

.meter-lbl-sl {
  color: var(--color-red);
  font-weight: 600;
}

.meter-lbl-be {
  color: #facc15;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.meter-lbl-tp {
  color: var(--color-green);
  font-weight: 600;
}

.meter-track-wrap {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: visible;
}

.meter-entry-tick {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 1px;
  z-index: 1;
  pointer-events: none;
}

.meter-fill-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  transition: width 0.25s ease, left 0.25s ease;
}

.meter-fill-bar.profit {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.35), rgba(16, 185, 129, 0.85));
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.35);
}

.meter-fill-bar.loss {
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.85), rgba(244, 63, 94, 0.35));
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.35);
}

.meter-pinpoint-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0d0e14;
  z-index: 3;
  transition: left 0.25s ease;
}

.meter-pinpoint-dot.profit {
  background: var(--color-green);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
}

.meter-pinpoint-dot.loss {
  background: var(--color-red);
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.8);
}

.cell-be-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(250, 204, 21, 0.15);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.3);
}

/* ==========================================================================
   PORTFOLIO PERFORMANCE CHART (FULL WIDTH GLOWING CURVE)
   ========================================================================== */

.helios-chart-section {
  width: 100%;
}

.card-performance-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 18px 24px;
  background: radial-gradient(120% 120% at 92% 10%, rgba(0, 210, 133, 0.16) 0%, rgba(0, 210, 133, 0.02) 50%, #0e1317 100%);
  border: 1px solid rgba(0, 210, 133, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.chart-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- CHART MODE SWITCHER (CANDLESTICKS VS EQUITY) --- */
.chart-mode-group {
  display: flex;
  align-items: center;
}

.chart-mode-switcher {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-pill);
  border: 1px solid var(--border-pill);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.chart-mode-pill {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  outline: none;
}

.chart-mode-pill:hover {
  color: var(--text-white);
}

.chart-mode-pill.active {
  background: var(--grad-pill-active);
  color: var(--text-white);
  border: 1px solid var(--border-active);
  box-shadow: 0 2px 10px rgba(0, 210, 133, 0.25);
}

/* --- CANDLE CONTROLS (SYMBOL SELECT & TIMEFRAMES) --- */
.candle-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.active-symbol-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.candle-symbol-select {
  background: var(--bg-card-sub);
  border: 1px solid var(--border-pill);
  color: var(--text-white);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.candle-symbol-select:hover,
.candle-symbol-select:focus {
  border-color: var(--accent-mauve);
  box-shadow: 0 0 10px rgba(0, 210, 133, 0.2);
}

.candle-symbol-select option {
  background: #171822;
  color: #ffffff;
}

.symbol-change-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.symbol-change-badge.negative {
  background: rgba(244, 63, 94, 0.15);
  color: var(--color-red);
  border-color: rgba(244, 63, 94, 0.3);
}

.candle-tf-pills {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-pill);
  border: 1px solid var(--border-subtle);
  padding: 2px 4px;
  border-radius: var(--radius-pill);
}

.candle-tf-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.candle-tf-btn:hover {
  color: var(--text-white);
}

.candle-tf-btn.active {
  background: var(--accent-mauve);
  color: #111217;
  font-weight: 800;
  box-shadow: 0 1px 6px rgba(0, 210, 133, 0.4);
}

/* --- CANDLESTICK REALTIME HUD / LEGEND BAR --- */
.candle-legend-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 11px;
  flex-wrap: wrap;
  gap: 8px;
}

.legend-stats-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.legend-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-label {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
}

.legend-value {
  color: var(--text-white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.legend-separator {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}

.legend-label-ema20 {
  color: #F0B90B;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.legend-value-ema20 {
  color: #F0B90B;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.legend-label-ema50 {
  color: #8b5cf6;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.legend-value-ema50 {
  color: #8b5cf6;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.legend-marker-guide {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 7px;
  letter-spacing: 0.3px;
}

.marker-badge-b {
  color: var(--color-green);
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
}

.marker-badge-s {
  color: var(--color-red);
  font-weight: 800;
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.35);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
}

.legend-tp-guide {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 7px;
  letter-spacing: 0.3px;
}

.legend-badge-tp1 {
  color: #10b981;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
}

.legend-badge-tp2 {
  color: #34d399;
  font-weight: 800;
  background: rgba(52, 211, 153, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.35);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
}

.legend-position-hud {
  display: flex;
  align-items: center;
}

.pos-hud-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.pos-hud-tag.idle {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
}

.pos-hud-tag.long {
  background: rgba(16, 185, 129, 0.16);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.pos-hud-tag.short {
  background: rgba(244, 63, 94, 0.16);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

/* --- CANDLESTICK LIGHTWEIGHT CHARTS CONTAINER --- */
.candle-chart-wrap {
  width: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0d14;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.candle-chart-container {
  width: 100%;
  height: 350px;
  position: relative;
}

/* --- EQUITY CANVAS & TIMEFRAME PILLS --- */
.chart-timeframe-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 0;
  border: none;
}

.tf-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #8c8f9f;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.tf-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.tf-pill.active {
  background: #00d285;
  color: #04120b;
  border: 1px solid #00d285;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(0, 210, 133, 0.35);
}

.chart-canvas-container {
  position: relative;
  width: 100%;
  height: 260px;
}

/* HELIOS SIGNATURE HIGHLIGHT PINPOINT & TOOLTIP BADGE (EXACT ANCHOR AT 0,0) */
.helios-chart-pinpoint {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.25s ease, left 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pinpoint-tooltip-card {
  position: absolute;
  left: 0;
  bottom: 14px;
  transform: translateX(-50%);
  background: #0b0f12;
  border: 1px solid rgba(0, 210, 133, 0.35);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 210, 133, 0.25);
  min-width: 140px;
  white-space: nowrap;
  z-index: 6;
  backdrop-filter: blur(12px);
}

.pinpoint-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.pinpoint-date {
  font-size: 11px;
  color: #8c8f9f;
  font-weight: 500;
  font-family: var(--font-sans);
}

.pinpoint-dots {
  color: #525666;
  display: flex;
  align-items: center;
}

.pinpoint-tooltip-val {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pinpoint-amount {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
}

.pinpoint-gain-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 210, 133, 0.16);
  color: #00d285;
  border: 1px solid rgba(0, 210, 133, 0.3);
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.pinpoint-gain-badge.loss {
  background: rgba(244, 63, 94, 0.16);
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.3);
}

.pinpoint-luminous-dot {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.pinpoint-core-white {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  z-index: 2;
  box-shadow: 0 0 8px #ffffff;
}

.pinpoint-pulse-ring {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 210, 133, 0.45);
  box-shadow: 0 0 16px rgba(0, 210, 133, 0.95);
  z-index: 1;
  animation: pulseRing 2.2s infinite ease-in-out;
}

@keyframes pulseRing {
  0% { transform: scale(0.95); opacity: 0.9; }
  50% { transform: scale(1.3); opacity: 0.4; }
  100% { transform: scale(0.95); opacity: 0.9; }
}

.pinpoint-guide-line {
  position: absolute;
  left: 0;
  top: 8px;
  width: 1px;
  border-left: 1px dashed rgba(0, 210, 133, 0.6);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   LOWER SECTIONS: ANALYSIS, MARKET, & TABLES
   ========================================================================== */

.helios-lower-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.card-audit-feed, .card-news-shield {
  display: flex;
  flex-direction: column;
}

.title-with-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-rose);
}

.tag-subtle {
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.decisions-scroll-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.empty-feed {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  padding: 36px 12px;
}

/* AI ANALYTICS OVERVIEW BAR */
.ai-analytics-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.ai-metric-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-metric-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.ai-metric-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-metric-num.green { color: var(--color-green); }
.ai-metric-num.red { color: var(--color-red); }
.ai-metric-num.mauve { color: var(--accent-mauve); }

/* DECISION FILTERS ROW */
.decision-filters-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.dec-filter-pill {
  background: var(--bg-pill);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}

.dec-filter-pill:hover {
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.2);
}

.dec-filter-pill.active {
  background: var(--grad-pill-active);
  color: var(--text-white);
  border-color: var(--border-active);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.2);
}

/* CLICKABLE DECISION ITEM */
.decision-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.decision-item:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(0, 210, 133, 0.4);
  transform: translateY(-1px);
}

.decision-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.decision-coin-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.decision-coin {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
}

.decision-badge-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.decision-action-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}

.action-execute {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.action-reject {
  background: rgba(244, 63, 94, 0.15);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.action-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.action-neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

/* QUANTITATIVE BADGES (ADX & VOLUME RATIO) */
.badge-quant-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
}

.badge-quant-tag.adx-strong {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-quant-tag.adx-mid {
  background: rgba(0, 210, 133, 0.15);
  color: #c084fc;
  border: 1px solid rgba(0, 210, 133, 0.3);
}

.badge-quant-tag.adx-weak {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-quant-tag.vol-spike {
  background: rgba(0, 210, 133, 0.18);
  color: var(--accent-mauve);
  border: 1px solid rgba(0, 210, 133, 0.35);
  font-weight: 800;
}

.badge-quant-tag.vol-norm {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.badge-quant-tag.vol-low {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.decision-coin-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.decision-sig-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
}
.decision-sig-badge.sig-long {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.decision-sig-badge.sig-short {
  background: rgba(244, 63, 94, 0.15);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.decision-badge-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dec-inspect-arrow {
  color: var(--text-dim);
  display: flex;
  align-items: center;
  transition: transform 0.2s ease, color 0.2s ease;
}
.decision-item:hover .dec-inspect-arrow {
  color: var(--accent-mauve);
  transform: translateX(2px);
}

.decision-details {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.decision-reason {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.25);
  padding: 7px 9px;
  border-radius: 6px;
  border-left: 2px solid var(--accent-purple);
}

.decision-inspect-cue {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-mauve);
  margin-top: 2px;
  opacity: 0.8;
}

/* Card Shield Detailed */
.shield-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.badge-safe {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-blackout {
  background: rgba(244, 63, 94, 0.2);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.4);
  animation: pulse-dot 1.5s infinite;
}

.shield-body-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shield-info-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
}

.event-glow-card {
  background: rgba(244, 63, 94, 0.06);
  border: 1px solid rgba(244, 63, 94, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-glow-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-red-badge {
  font-size: 10px;
  font-weight: 800;
  background: rgba(244, 63, 94, 0.2);
  color: var(--color-red);
  padding: 2px 5px;
  border-radius: 3px;
}

.event-title-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
}

.event-glow-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}

.event-countdown-pill {
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
}

.event-countdown-pill.red {
  background: rgba(244, 63, 94, 0.2);
  color: var(--color-red);
}

.event-forecast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.event-forecast-row strong {
  color: var(--text-white);
  font-family: var(--font-mono);
}

.event-shield-tag {
  font-size: 10px;
  font-weight: 700;
  color: #00d285;
  background: rgba(0, 210, 133, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0, 210, 133, 0.25);
}

/* UPCOMING HIGH IMPACT NEWS LIST */
.upcoming-news-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.upcoming-news-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upcoming-news-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.upcoming-news-badge {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-pink);
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.25);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.upcoming-news-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 2px;
}

.upcoming-news-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 8px 10px;
  transition: all 0.2s ease;
}

.news-item-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upcoming-news-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
}

.news-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-impact-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.6);
  flex-shrink: 0;
}

.news-item-title-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.news-event-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.2;
}

.news-event-date {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-sans);
}

.news-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.news-meta-text {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.news-time-badge {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-white);
}

.news-time-badge.soon {
  background: rgba(244, 63, 94, 0.2);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.35);
}

.config-chips-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.config-chip {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chip-label {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
}

.chip-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
}

.tp-color { color: var(--color-green) !important; }
.sl-color { color: var(--color-red) !important; }

/* ==========================================================================
   TABLES SECTION
   ========================================================================== */

.helios-tables-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card-table-section {
  display: flex;
  flex-direction: column;
}

.table-legend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-dim);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.legend-dot.green { background: var(--color-green); }
.legend-dot.red { background: var(--color-red); }

.history-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-pill-secondary {
  background: var(--bg-pill);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-pill-secondary:hover {
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.2);
}

.helios-table-responsive {
  width: 100%;
  overflow-x: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.helios-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}

.helios-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-card);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.helios-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  vertical-align: middle;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.helios-table td.col-text,
.helios-table th.col-text {
  font-family: var(--font-sans);
  text-align: left;
}

.helios-table td.col-num,
.helios-table th.col-num {
  text-align: right;
  font-family: var(--font-mono);
}

.helios-table td.col-center,
.helios-table th.col-center {
  text-align: center;
}

.helios-table td strong {
  color: var(--text-white);
  font-family: var(--font-sans);
}

.helios-table tbody tr {
  transition: background 0.15s ease;
}

.helios-table tbody tr.clickable-row,
#marketRadarTbody tr:not(.empty-row),
#positionsTbody tr:not(.empty-row) {
  cursor: pointer;
}

.helios-table tbody tr.clickable-row:hover td,
#marketRadarTbody tr:not(.empty-row):hover td,
#positionsTbody tr:not(.empty-row):hover td {
  background: rgba(0, 210, 133, 0.06);
}

.empty-row td {
  text-align: center;
  color: var(--text-dim);
  padding: 28px 12px;
  font-family: var(--font-sans);
  cursor: default !important;
}

.side-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.side-badge.long {
  background: rgba(16, 185, 129, 0.16);
  color: var(--color-green);
}

.side-badge.short {
  background: rgba(244, 63, 94, 0.16);
  color: var(--color-red);
}

.badge-riskfree-sm {
  font-size: 10px;
  background: rgba(0, 210, 133, 0.16);
  color: var(--accent-purple);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.btn-danger {
  background: rgba(244, 63, 94, 0.14);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: var(--color-red);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: var(--color-red);
  color: #fff;
}

/* ==========================================================================
   SETTINGS MODAL
   ========================================================================== */

.helios-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease;
}

.helios-modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.helios-modal-card {
  background: #161722;
  border: 1px solid var(--border-active);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85);
  border-radius: var(--radius-card);
  width: 90%;
  max-width: 600px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-white);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
}

.modal-close-btn:hover {
  color: var(--text-white);
}

.modal-form-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.input-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-field-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.range-display-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(0, 210, 133, 0.2);
  color: var(--accent-purple);
  padding: 1px 5px;
  border-radius: 3px;
}

.range-display-badge.tp-val {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-green);
}

.range-display-badge.sl-val {
  background: rgba(244, 63, 94, 0.2);
  color: var(--color-red);
}

.range-display-badge.be-val {
  background: rgba(236, 72, 153, 0.2);
  color: var(--accent-rose);
}

.input-field-group input[type="number"],
.input-field-group input[type="text"] {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
}

.input-field-group input[type="range"] {
  accent-color: var(--accent-rose);
  cursor: pointer;
  margin-top: 4px;
}

.field-hint {
  font-size: 10px;
  color: var(--text-dim);
}

.form-coins-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.coins-area-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.coins-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
}

.coin-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-pill);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
}

.coin-check-label:hover {
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-delete-coin {
  font-size: 13px;
  color: var(--color-red);
  margin-left: 3px;
  cursor: pointer;
}

.form-add-coin-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed var(--border-subtle);
  border-radius: 10px;
  padding: 10px 12px;
}

.add-coin-input-row {
  display: flex;
  gap: 8px;
}

.add-coin-input-row input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-card);
  border-radius: 6px;
  padding: 7px 10px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
}

.btn-add-coin-action {
  background: var(--grad-pill-active);
  border: 1px solid var(--border-active);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 0 14px;
  border-radius: 6px;
  cursor: pointer;
}

.modal-footer-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.btn-save-glow {
  background: var(--grad-pill-active);
  border: 1px solid var(--border-active);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.35);
}

/* ==========================================================================
   AI DECISION INSPECTOR MODAL & PIPELINE STEPPER
   ========================================================================== */

.modal-decision-inspector {
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #14151f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(0, 210, 133, 0.15);
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dec-badge-symbol {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-white);
}

.dec-badge-action {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}
.dec-badge-action.execute, .dec-badge-action.passed {
  background: rgba(16, 185, 129, 0.18);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.dec-badge-action.reject, .dec-badge-action.rejected {
  background: rgba(244, 63, 94, 0.18);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.35);
}
.dec-badge-action.warning {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.dec-badge-signal {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}
.dec-badge-signal.long {
  background: rgba(16, 185, 129, 0.18);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.dec-badge-signal.short {
  background: rgba(244, 63, 94, 0.18);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.35);
}

/* META STRIP */
.dec-modal-meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
}

.meta-strip-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.strip-label {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.strip-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
}
.strip-value.mono {
  font-family: var(--font-mono);
}
.strip-value.highlight {
  color: var(--accent-mauve);
}

/* MODAL BODY SCROLL */
.dec-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  max-height: calc(90vh - 210px);
  padding-right: 4px;
}

.dec-section-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dec-section-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dec-section-heading svg {
  color: var(--accent-mauve);
}

/* PIPELINE STEPPER */
.pipeline-stepper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pipeline-step-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s ease;
}
.pipeline-step-card.passed {
  border-left: 3px solid var(--color-green);
}
.pipeline-step-card.rejected {
  border-left: 3px solid var(--color-red);
}
.pipeline-step-card.skipped {
  border-left: 3px solid var(--text-dim);
  opacity: 0.7;
}

.step-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.step-num-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
  flex: 1;
}

.step-result-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
}
.step-result-badge.passed {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.step-result-badge.rejected {
  background: rgba(244, 63, 94, 0.15);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.3);
}
.step-result-badge.skipped {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
}

.step-card-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  padding-left: 28px;
}

/* REASONING CARD */
.dec-reasoning-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-purple);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.55;
}

/* TELEMETRY DRAWER */
.telemetry-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 0;
}

.telemetry-chevron-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}
.telemetry-chevron-btn:hover {
  color: var(--text-white);
}

.telemetry-drawer {
  background: #0d0e15;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.telemetry-drawer.hidden {
  display: none;
}

.telemetry-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.telemetry-model-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-mauve);
  background: rgba(0, 210, 133, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.btn-copy-telemetry {
  background: var(--bg-pill);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-copy-telemetry:hover {
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.2);
}

.telemetry-code-block {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #94a3b8;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 180px;
  overflow-y: auto;
  line-height: 1.4;
  margin: 0;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

/* FOOTER ACTIONS */
.dec-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.btn-view-candle-action {
  background: var(--grad-pill-active);
  border: 1px solid var(--border-active);
  color: var(--text-white);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.25);
  transition: all 0.2s ease;
}
.btn-view-candle-action:hover {
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45);
  transform: translateY(-1px);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.helios-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 0 4px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-dim);
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
}

.footer-right {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1320px) {
  .helios-top-grid {
    grid-template-columns: 1fr 1fr;
  }
  .col-holding {
    grid-column: span 2;
    flex-direction: row;
    height: auto;
  }
  .card-total-holding, .card-data-decisions {
    flex: 1;
    min-height: 160px;
  }
}

@media (max-width: 900px) {
  .helios-terminal-card {
    flex-direction: column;
    min-height: auto;
    max-height: none;
  }
  .helios-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
  }
  .sidebar-top {
    flex-direction: row;
    align-items: center;
  }
  .sidebar-nav {
    flex-direction: row;
  }
  .sidebar-bottom {
    display: none;
  }
  .helios-top-grid {
    grid-template-columns: 1fr;
  }
  .col-holding {
    grid-column: span 1;
    flex-direction: column;
  }
  .helios-lower-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   WCAG AA KEYBOARD FOCUS INDICATOR (R-32)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--accent-mauve) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   TOAST NOTIFICATION SYSTEM (DARK LUXURY FINTECH SPEC)
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  width: calc(100% - 48px);
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #14151e;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5);
  color: var(--text-white);
  font-family: var(--font-sans);
  animation: toastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-item.toast-hiding {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-item.toast-success {
  border-left: 3px solid var(--color-green);
}
.toast-item.toast-success .toast-icon {
  color: var(--color-green);
}

.toast-item.toast-error {
  border-left: 3px solid var(--color-red);
}
.toast-item.toast-error .toast-icon {
  color: var(--color-red);
}

.toast-item.toast-warning {
  border-left: 3px solid #f59e0b;
}
.toast-item.toast-warning .toast-icon {
  color: #f59e0b;
}

.toast-item.toast-info {
  border-left: 3px solid var(--accent-mauve);
}
.toast-item.toast-info .toast-icon {
  color: var(--accent-mauve);
}

.toast-icon {
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 2px;
}

.toast-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.toast-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  margin-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.toast-close-btn:hover {
  color: var(--text-white);
}

/* Actionable Empty & Loading State Elements (R-27) */
.state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px;
  gap: 8px;
}

.state-desc {
  font-size: 12px;
  color: var(--text-dim);
  max-width: 420px;
  line-height: 1.5;
}

.state-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-mauve);
  background: rgba(0, 210, 133, 0.08);
  border: 1px solid rgba(0, 210, 133, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.btn-state-action {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 210, 133, 0.12);
  border: 1px solid rgba(0, 210, 133, 0.28);
  color: var(--accent-mauve);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 34px;
}

.btn-state-action:hover {
  background: rgba(0, 210, 133, 0.22);
  border-color: var(--accent-mauve);
  color: #fff;
  transform: translateY(-1px);
}

/* ==========================================================================
   PAKET B: PORTFOLIO QUANTITATIVE ANALYTICS & HISTORY ENHANCEMENT
   ========================================================================== */
.portfolio-analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.analytics-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.analytics-stat-card:hover {
  border-color: rgba(0, 210, 133, 0.25);
  transform: translateY(-1px);
}

.analytics-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.analytics-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.analytics-main-val {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.analytics-big-num {
  font-family: var(--font-sans);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}

.analytics-big-num.highlight-green {
  color: var(--color-green);
}
.analytics-big-num.highlight-mauve {
  color: var(--accent-mauve);
}
.analytics-big-num.highlight-red {
  color: var(--color-red);
}

.analytics-sub-badge {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
}

.analytics-sub-badge.green {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.analytics-sub-badge.mauve {
  background: rgba(0, 210, 133, 0.12);
  color: var(--accent-mauve);
  border: 1px solid rgba(0, 210, 133, 0.25);
}
.analytics-sub-badge.red {
  background: rgba(244, 63, 94, 0.12);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.analytics-meta-row {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.analytics-meta-row strong {
  color: var(--text-primary);
  font-family: var(--font-sans);
}
.analytics-meta-row strong.green {
  color: var(--color-green);
}
.analytics-meta-row strong.red {
  color: var(--color-red);
}

.stat-progress-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}

.stat-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-green), #34d399);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.pnl-ratio-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  display: flex;
  overflow: hidden;
  margin-top: 2px;
}

.pnl-ratio-win {
  height: 100%;
  background: var(--color-green);
  transition: width 0.4s ease;
}

.pnl-ratio-loss {
  height: 100%;
  background: var(--color-red);
  transition: width 0.4s ease;
}

.stat-risk-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}

.risk-pill-tag {
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.risk-pill-tag.highlight {
  color: var(--accent-mauve);
  border-color: rgba(0, 210, 133, 0.25);
}

/* DIRECTIONAL ALPHA TILE */
.directional-comparison-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dir-side-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dir-side-title {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-sans);
}
.dir-side-title.long {
  color: var(--color-green);
}
.dir-side-title.short {
  color: var(--color-red);
}

.dir-side-winrate {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-sans);
  color: var(--text-primary);
}

.dir-side-trades {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-sans);
}

.dir-divider-line {
  width: 1px;
  height: 32px;
  background: var(--border-subtle);
}

.dir-best-worst-strip {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;
  font-family: var(--font-sans);
}
.dir-best-worst-strip strong.green {
  color: var(--color-green);
}
.dir-best-worst-strip strong.red {
  color: var(--color-red);
}

/* HISTORY FILTERS BAR */
.history-filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

.history-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.history-coin-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coin-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

.history-coin-select {
  background: rgba(17, 18, 23, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-sans);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.history-coin-select:focus {
  border-color: var(--accent-mauve);
}

/* CLOSURE REASON BADGES */
.badge-reason {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.badge-reason.tp {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-reason.sl {
  background: rgba(244, 63, 94, 0.12);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.badge-reason.be {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.badge-reason.manual {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.badge-reason.multi-tp {
  background: rgba(0, 210, 133, 0.12);
  color: #c084fc;
  border: 1px solid rgba(0, 210, 133, 0.3);
}

.badge-reason.tp1-be {
  background: rgba(16, 185, 129, 0.14);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.12);
}

.badge-reason.trail-lock {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.badge-reason.panic {
  background: rgba(244, 63, 94, 0.2);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.4);
}

.trade-stage-detail {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
  font-family: var(--font-mono);
  line-height: 1.3;
}

/* Dual Balance: Binance Actual Balance Tag */
.real-balance-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  margin-top: 4px;
}

.real-balance-tag .balance-label {
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.real-balance-tag .balance-val {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Mini Grid Position Notional Info */
.mini-notional-strip {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  padding: 4px 0;
}

.mini-notional-strip .notional-val {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Optimizer Method Pills */
.optimizer-method-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 8px;
}

.method-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.method-pill.active {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.method-pill.inactive {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: line-through;
  opacity: 0.6;
}

.badge-quant-tag.purple {
  background: rgba(0, 210, 133, 0.2);
  color: #c084fc;
  border: 1px solid rgba(0, 210, 133, 0.45);
}

.optimizer-methods-expand {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.4;
  padding: 6px 0 0;
}

/* ==========================================================================
   VIEW HEADER STRIP & ADVANCED ANALYSIS LAYOUT (ANTISLOP UI)
   ========================================================================== */
.view-header-strip {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.view-header-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-mauve), var(--accent-purple));
  border-radius: 4px 0 0 4px;
}

.view-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.view-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.view-main-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: -0.3px;
  margin: 0;
}

.view-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.4;
}

.view-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-stat-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.stat-chip-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stat-chip-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
}
.stat-chip-val.green { color: var(--color-green); }
.stat-chip-val.mauve { color: var(--accent-mauve); }
.stat-chip-val.red { color: var(--color-red); }

/* ANALYSIS TOP SHIELD BANNER */
.analysis-shield-banner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

.shield-spotlight-card,
.shield-config-card {
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.config-chips-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.config-risk-summary-note {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-subtle);
  border-radius: 6px;
}

/* ANALYSIS MAIN 2-COLUMN GRID */
.analysis-main-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.card-news-agenda {
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.agenda-subtitle-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
  margin: 0;
}

/* SLEEK TABLE CLOSE BUTTON */
.btn-table-close-pos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: var(--color-red);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-table-close-pos:hover {
  background: rgba(244, 63, 94, 0.25);
  border-color: var(--color-red);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .portfolio-analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .analysis-shield-banner {
    grid-template-columns: 1fr;
  }
  .analysis-main-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MOBILE & TABLET COMPREHENSIVE REFLOW (ANTISLOP R-03, R-05, EDGE-TO-EDGE)
   ========================================================================== */

@media (max-width: 900px) {
  .helios-terminal-card {
    flex-direction: column;
    border-radius: 18px;
    padding: 14px 12px;
  }
  .helios-top-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .col-holding {
    grid-column: span 1;
    flex-direction: column;
    gap: 12px;
  }
  .helios-lower-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ==========================================================================
   MASTER MOBILE RESPONSIVE ENGINE (ANTISLOP R-03, R-05, R-32, R-35)
   Reflow, scale, thumb-navigation rail, min-44px touch ergonomics & zero leak
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. True Edge-to-Edge Canvas: Zero Horizontal Scroll Leak */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #090a0f !important;
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .helios-app-outer {
    padding: 0 0 calc(98px + env(safe-area-inset-bottom, 16px)) 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    display: block !important;
    background: #090a0f !important;
    box-sizing: border-box !important;
  }

  .helios-terminal-card {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .helios-main {
    padding: 10px 12px !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 2. Fixed Bottom Navigation Keypad Grid: 8 Tabs 100% Direct Access (Nol Slide) */
  .helios-sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 5px 6px env(safe-area-inset-bottom, 2px) 6px !important;
    background: rgba(9, 10, 15, 0.98) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.8) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .sidebar-top {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .sidebar-top .brand-box {
    display: none !important;
  }

  .sidebar-nav {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .nav-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    padding: 2px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--text-dim) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
  }

  .nav-item:active {
    transform: scale(0.96) !important;
    background: rgba(0, 210, 133, 0.22) !important;
  }

  .nav-item .nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nav-item .nav-icon svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2 !important;
    transition: stroke 0.15s ease !important;
  }

  .nav-item .nav-text {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px !important;
    text-transform: capitalize !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .nav-item .nav-hotkey {
    display: none !important;
  }

  .nav-item.active {
    color: #f8fafc !important;
    background: rgba(0, 210, 133, 0.18) !important;
    border: 1px solid rgba(0, 210, 133, 0.45) !important;
    box-shadow: 0 0 10px rgba(0, 210, 133, 0.25) !important;
  }

  .nav-item.active .nav-icon svg {
    stroke: var(--accent-mauve, #00d285) !important;
  }

  .sidebar-bottom {
    display: none !important;
  }

  /* 3. Mobile Header & Touch Ergonomics (Min 44px Hit Targets) */
  .helios-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
  }

  .header-left-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .welcome-heading {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    color: var(--text-white) !important;
  }

  .welcome-subtitle {
    display: none !important;
  }

  .header-right-block {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .top-user-actions-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .btn-panic-kill {
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    flex: 1 !important;
    justify-content: center !important;
    gap: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .btn-panic-kill:active {
    transform: scale(0.97) !important;
  }

  .btn-copilot-trigger {
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    flex: 1 !important;
    justify-content: center !important;
    gap: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .btn-copilot-trigger:active {
    transform: scale(0.97) !important;
  }

  .copilot-hotkey-tag {
    display: none !important;
  }

  .circle-action-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .circle-action-btn:active {
    transform: scale(0.95) !important;
  }

  .user-profile-chip {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    flex-shrink: 0 !important;
  }

  .user-profile-chip .user-info {
    display: none !important;
  }

  .user-profile-chip .avatar-circle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  .action-search-bar {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    margin-top: 2px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .action-search-bar:active {
    transform: scale(0.98) !important;
  }

  .scan-hotkey-hint {
    display: none !important;
  }

  /* 4. Top Grid Cards Sizing & Mobile Reflow */
  .helios-top-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .helios-card {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    background: #111219 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
  }

  /* ORDER 1: Wallet Balance Card */
  .col-holding {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .card-total-holding {
    order: 1 !important;
    padding: 16px 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }

  .holding-amount-row {
    margin: 4px 0 8px !important;
  }

  .holding-digits {
    font-size: 26px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
    letter-spacing: -0.5px !important;
  }

  .holding-stats-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .holding-avail-text {
    font-size: 12px !important;
  }

  .card-data-decisions {
    display: none !important;
  }

  /* ORDER 2: My Portfolio (Active Positions) */
  .col-portfolio {
    order: 2 !important;
    width: 100% !important;
  }

  .card-my-portfolio {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }

  .directional-exposure-strip {
    padding: 10px 10px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
  }

  .exp-gauge-header {
    font-size: 12px !important;
  }

  .exp-gauge-slots {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .exp-slots-group {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .slot-box {
    font-size: 10px !important;
    padding: 5px 2px !important;
    text-align: center !important;
  }

  .portfolio-2x2-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  .portfolio-cell-card {
    width: 100% !important;
    padding: 14px 12px !important;
    border-radius: 10px !important;
    background: #14151f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .cell-top-stat {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    width: 100% !important;
  }

  .cell-price {
    font-size: 16px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
  }

  .cell-pct {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .cell-bottom-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 6px !important;
    gap: 8px !important;
  }

  .cell-coin-tag {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .cell-mini-badge {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }

  .cell-btn-close {
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background: rgba(244, 63, 94, 0.16) !important;
    color: #f43f5e !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  .cell-btn-close:active {
    transform: scale(0.96) !important;
  }

  /* ORDER 3: Watchlist Card */
  .col-watchlist {
    order: 3 !important;
    width: 100% !important;
  }

  .card-watchlist {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }

  .filter-pills-group {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  .filter-pill {
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .watchlist-rows-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* ORDER 4: Chart Section */
  .helios-chart-section {
    order: 4 !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .card-performance-chart {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
  }

  .chart-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .chart-mode-group {
    width: 100% !important;
  }

  .chart-mode-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .chart-mode-pill {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .candle-controls-row {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .active-symbol-select-wrap {
    flex: 1 1 120px !important;
    min-width: 120px !important;
  }

  .candle-symbol-select {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }

  .candle-timeframe-pills {
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .candle-tf-pill {
    min-width: 36px !important;
    min-height: 40px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .candle-chart-container {
    height: 250px !important;
    width: 100% !important;
  }

  .chart-canvas-container {
    height: 230px !important;
    width: 100% !important;
  }

  /* 5. Responsive Lower Grid & Safe Tables */
  .helios-lower-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .card-active-positions,
  .card-macro-shield,
  .card-market-radar,
  .card-ai-decisions,
  .positions-table-wrap,
  .watchlist-rows-container,
  .helios-table-responsive,
  .table-responsive-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .helios-table {
    min-width: 540px !important;
    font-size: 12px !important;
  }

  .helios-table th,
  .helios-table td {
    padding: 9px 8px !important;
  }

  /* 6. Secondary Views Reflow (Views 2, 3, 4, 5, 6, 7, 8) */
  .view-header-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .view-header-left,
  .view-header-right {
    width: 100% !important;
  }

  .view-header-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .portfolio-analytics-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .history-filters-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .history-filters-right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .history-filters-right select,
  .history-filters-right input,
  .history-filters-right button {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* View 3: Analysis & Shield */
  .analysis-shield-banner {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .config-chips-matrix {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .config-chip {
    padding: 8px 10px !important;
  }

  /* View 5: Simulator Controls Reflow */
  .sim-methods-panel {
    padding: 14px 12px !important;
  }

  .sim-methods-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .sim-presets-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .sim-presets-label {
    margin-bottom: 2px !important;
    font-size: 11px !important;
  }

  .sim-preset-btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .sim-preset-btn:active {
    transform: scale(0.98) !important;
  }

  .sim-methods-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .sim-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .sim-select-dark,
  .sim-input-dark {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .btn-run-sim-glow {
    min-height: 48px !important;
    width: 100% !important;
    font-size: 13px !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* View 6: Methods Matrix Reflow */
  .methods-header-card {
    padding: 16px 14px !important;
  }

  .methods-header-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .methods-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .btn-save-methods-glow {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* View 7: Usage & Billings Reflow */
  .usage-header-card {
    padding: 16px 14px !important;
  }

  .usage-header-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .usage-budget-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .usage-budget-input-wrap input {
    min-height: 44px !important;
    font-size: 14px !important;
    width: 100% !important;
  }

  .btn-save-budget-glow {
    min-height: 44px !important;
    width: 100% !important;
    justify-content: center !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .usage-rates-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .rate-divider {
    display: none !important;
  }

  /* View 8: Autonomous Alpha Screener Reflow */
  .alpha-telemetry-badge-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .alpha-telemetry-pill {
    width: 100% !important;
    justify-content: space-between !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
  }

  .alpha-controls-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .alpha-horizon-group {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  .btn-alpha-horizon {
    flex: 1 1 calc(50% - 4px) !important;
    min-height: 44px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }

  .alpha-divider-v {
    display: none !important;
  }

  .alpha-sector-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .alpha-sector-group select {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
  }

  .alpha-deploy-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .btn-alpha-deploy {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    font-size: 12px !important;
  }

  .btn-alpha-table-action {
    min-height: 44px !important;
    padding: 0 12px !important;
  }

  /* 7. Modals & Drawers Edge-to-Edge Touch Sizing */
  .helios-modal-card {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90dvh !important;
    padding: 18px 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .modal-close-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
  }

  .form-inputs-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .input-field-group input[type="number"],
  .input-field-group input[type="range"] {
    min-height: 40px !important;
  }

  .modal-footer-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .modal-footer-row button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* Decision Deep-Dive Inspector Modal */
  .modal-decision-inspector {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90dvh !important;
    padding: 16px 12px !important;
    border-radius: 14px !important;
  }

  .dec-modal-meta-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .dec-modal-body {
    max-height: calc(88dvh - 160px) !important;
  }

  .dec-modal-footer {
    padding-top: 8px !important;
  }

  .dec-modal-footer button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* Panic Confirmation Modal */
  .panic-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    border-radius: 14px !important;
  }

  .panic-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .panic-footer button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* 8. Copilot Full-Screen Mobile Drawer: Elevated Above Mobile Nav (Zero Obstruction) */
  body.copilot-open .helios-sidebar {
    display: none !important;
    pointer-events: none !important;
  }

  .copilot-drawer-overlay {
    z-index: 2000 !important;
  }

  .copilot-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    z-index: 2001 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #090a0f !important;
  }

  .copilot-header {
    padding: 12px 14px !important;
    min-height: 52px !important;
    flex-shrink: 0 !important;
  }

  .copilot-header-actions button,
  .copilot-btn-icon {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .copilot-telemetry-strip {
    padding: 6px 12px !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .telemetry-pill {
    font-size: 11px !important;
  }

  .copilot-quick-chips-section {
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
  }

  .copilot-chips-scroll {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  .copilot-chip-btn {
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .copilot-messages-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px 14px !important;
  }

  .copilot-input-area {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #0e1017 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 14px)) 12px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
  }

  .copilot-form-row {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-end !important;
  }

  .copilot-textarea {
    font-size: 16px !important; /* Prevents iOS Safari auto-zoom */
    min-height: 44px !important;
    max-height: 120px !important;
    padding: 10px 12px !important;
    flex: 1 !important;
    box-sizing: border-box !important;
  }

  .copilot-send-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }

  .copilot-input-footer {
    font-size: 10px !important;
    margin-top: 6px !important;
    text-align: center !important;
  }

  /* 9. Live Whale Movement Tracker on Mobile */
  .card-whale-tracker {
    padding: 14px 12px !important;
    margin-bottom: 16px !important;
  }

  .whale-controls-wrap {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  .whale-select {
    flex: 1 !important;
    min-height: 42px !important;
    font-size: 12px !important;
  }

  #btnRefreshWhale {
    min-height: 42px !important;
    min-width: 44px !important;
  }

  .whale-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .whale-stat-card {
    padding: 10px 12px !important;
  }

  .whale-stat-val {
    font-size: 13px !important;
  }

  .whale-summary-box {
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-top: 10px !important;
  }

  /* 10. Performance Reports & AI Mistake Audit on Mobile */
  .card-reports-audit {
    padding: 14px 12px !important;
    margin-bottom: 16px !important;
  }

  .reports-tab-group {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }

  .reports-tab-btn {
    min-height: 40px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .reports-kpi-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .report-narrative-card {
    padding: 12px 14px !important;
  }

  .report-narrative-p {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  .mistakes-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .mistake-panel {
    padding: 12px 14px !important;
  }

  .mistake-item-heading {
    font-size: 12px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* 11. Strategy Optimizer on Mobile */
  .card-strategy-optimizer {
    padding: 14px 12px !important;
    margin-bottom: 16px !important;
  }

  .optimizer-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #btnRunOptimizer {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    font-size: 13px !important;
  }

  .optimizer-preset-card {
    padding: 12px 14px !important;
    gap: 8px !important;
  }

  .optimizer-card-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .optimizer-identity-group {
    width: 100% !important;
    align-items: flex-start !important;
  }

  .optimizer-actions-group {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.06) !important;
    padding-top: 8px !important;
  }

  .optimizer-actions-group button {
    min-height: 40px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
  }

  .optimizer-metrics-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px 10px !important;
  }

  .optimizer-method-pills {
    gap: 4px !important;
  }

  .method-pill {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* 12. Modal Manual SL/TP on Mobile */
  .modal-sltp-card {
    width: 95vw !important;
    max-width: 95vw !important;
    padding: 16px 14px !important;
  }

  .sltp-meta-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  .sltp-meta-cell-val {
    font-size: 12px !important;
  }

  .sltp-preset-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .btn-preset-ratio {
    min-height: 38px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    flex: 1 1 calc(25% - 4px) !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .sltp-input {
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }

  /* 13. Upcoming News Items with Crypto Impact on Mobile */
  .upcoming-news-item {
    padding: 10px 10px !important;
    gap: 6px !important;
  }

  .news-item-main-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .news-item-right {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .news-crypto-impact-strip {
    gap: 4px !important;
  }

  /* 14. Toast Notifications on Mobile */
  .toast-container {
    bottom: calc(98px + env(safe-area-inset-bottom, 8px)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    z-index: 3000 !important;
  }
}

@media (max-width: 480px) {
  .helios-main {
    padding: 8px 8px !important;
  }

  .helios-card {
    padding: 12px 10px !important;
  }

  .welcome-heading {
    font-size: 16px !important;
  }

  .holding-digits {
    font-size: 22px !important;
  }

  .cell-price {
    font-size: 14px !important;
  }

  .sidebar-nav {
    gap: 3px 3px !important;
  }

  .nav-item {
    height: 35px !important;
    padding: 2px 1px !important;
  }

  .nav-item .nav-text {
    font-size: 8px !important;
  }

  .nav-item .nav-icon svg {
    width: 13px !important;
    height: 13px !important;
  }

  .portfolio-analytics-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .whale-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .reports-tab-group {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .reports-tab-btn {
    min-height: 38px !important;
    font-size: 12px !important;
  }

  .reports-kpi-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .optimizer-metrics-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .btn-preset-ratio {
    flex: 1 1 calc(50% - 4px) !important;
  }

  .quick-health-strip {
    padding: 10px 10px !important;
  }

  .market-safety-widget {
    padding: 10px 10px !important;
  }
}

/* ==========================================================================
   PAKET A: INSTITUTIONAL RISK SENTINEL, PANIC ENGINE & DIRECTIONAL GAUGE
   ========================================================================== */

/* 1. Header Panic Kill-Switch Button */
.btn-panic-kill {
  height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.28);
  color: #f43f5e;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-panic-kill:hover {
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(244, 63, 94, 0.48);
  color: #fb7185;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.2);
  transform: translateY(-1px);
}

.btn-panic-kill:active {
  transform: translateY(0);
}

/* 2. Emergency Freeze Banner */
.emergency-freeze-banner {
  margin: 12px 0 16px 0;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(17, 18, 23, 0.95));
  border: 1px solid rgba(244, 63, 94, 0.35);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  animation: fadeIn 0.25s ease-out;
}

.freeze-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.freeze-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.18);
  color: #f43f5e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.freeze-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.freeze-banner-title {
  font-weight: 800;
  color: #f43f5e;
  font-size: 12px;
  letter-spacing: 0.4px;
}

.freeze-banner-desc {
  color: var(--text-secondary);
  font-size: 12px;
}

.btn-freeze-resume {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #10b981;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-freeze-resume:hover {
  background: rgba(16, 185, 129, 0.24);
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

/* 3. Directional Exposure Visual Gauge */
.directional-exposure-strip {
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 12px;
}

.exp-gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.exp-gauge-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.exp-gauge-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.exp-gauge-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.exp-slots-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.slots-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.exp-slot-label {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 5px;
  border-radius: 3px;
  min-width: 44px;
  text-align: center;
}

.exp-slots-group.long .exp-slot-label {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.exp-slots-group.short .exp-slot-label {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
}

.slot-box {
  flex: 1;
  padding: 4px 4px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.slot-box.empty {
  border: 1px dashed rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.2);
}

.slot-box.filled-long {
  border: 1px solid rgba(16, 185, 129, 0.38);
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
  font-weight: 700;
}

.slot-box.filled-short {
  border: 1px solid rgba(244, 63, 94, 0.38);
  background: rgba(244, 63, 94, 0.08);
  color: #f43f5e;
  font-weight: 700;
}

/* 4. Panic Confirmation Modal */
.panic-dialog {
  max-width: 480px;
  background: #111217;
  border: 1px solid rgba(244, 63, 94, 0.35);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
}

.panic-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.panic-header-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panic-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.16);
  color: #f43f5e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.panic-body {
  padding: 18px 20px;
}

.panic-alert-box {
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.panic-alert-heading {
  font-size: 11px;
  font-weight: 800;
  color: #f43f5e;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.panic-alert-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin: 0;
}

.panic-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}

.panic-stat-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panic-stat-label {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
}

.panic-stat-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
}

.panic-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-panic-cancel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-card);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-panic-cancel:hover {
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-panic-execute {
  background: linear-gradient(135deg, #f43f5e, #be123c);
  border: none;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35);
  transition: all 0.2s ease;
}

.btn-panic-execute:hover {
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.5);
  transform: translateY(-1px);
}

/* 5. Stepped Trailing Badges */
.badge-profit-lock-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-profit-lock-sm.stage-1 {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #10b981;
}

.badge-profit-lock-sm.stage-2 {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.18));
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
}

.badge-close-reason.trail-lock {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.badge-close-reason.panic {
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: #f43f5e;
}

/* ==========================================================================
   SMART MONEY CONCEPTS (SMC) & CORRELATION SHIELD STYLES
   ========================================================================== */
.badge-quant-tag.smc-high {
  background: rgba(0, 210, 133, 0.16);
  border: 1px solid rgba(0, 210, 133, 0.42);
  color: #00d285;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(0, 210, 133, 0.2);
}

.badge-quant-tag.smc-mid {
  background: rgba(0, 210, 133, 0.14);
  border: 1px solid rgba(0, 210, 133, 0.32);
  color: #00d285;
  font-weight: 600;
}

.badge-quant-tag.smc-low {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
}

.sub-cluster-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  margin-top: 2px;
  text-transform: uppercase;
  display: block;
}

.toggle-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.toggle-label-wrap input[type="checkbox"] {
  accent-color: #00d285;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.toggle-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

/* ==========================================================================
   STRATEGY BACKTESTER & SIMULATOR STYLES
   ========================================================================== */
.card-simulator-controls {
  padding: 22px 24px;
}

.sim-engine-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #c084fc;
  background: rgba(0, 210, 133, 0.1);
  border: 1px solid rgba(0, 210, 133, 0.28);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.03em;
}

.sim-controls-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
}

/* Simulator Method Selection Matrix */
.sim-methods-panel {
  background: rgba(13, 14, 20, 0.75);
  border: 1px solid rgba(0, 210, 133, 0.22);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sim-methods-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.sim-methods-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sim-methods-title-wrap svg {
  color: #c084fc;
}

.sim-methods-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}

.sim-presets-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sim-presets-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 4px;
}

.sim-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 34px;
}

.sim-preset-btn:hover {
  background: rgba(0, 210, 133, 0.08);
  border-color: rgba(0, 210, 133, 0.4);
  color: #ffffff;
}

.sim-preset-btn.active {
  background: rgba(0, 210, 133, 0.16);
  border-color: #00d285;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 210, 133, 0.25);
}

.sim-preset-btn.active svg {
  color: #00d285;
}

.sim-methods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.sim-method-card {
  background: #111217;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s ease;
}

.sim-method-card.is-active {
  background: #12131b;
  border-color: rgba(0, 210, 133, 0.32);
}

.sim-method-card:not(.is-active) {
  opacity: 0.5;
  border-color: rgba(255, 255, 255, 0.04);
}

.sim-method-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sim-method-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sim-method-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c084fc;
}

.sim-method-name {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.35;
}

.sim-method-desc {
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.4;
  margin: 0;
}

.sim-switch-wrap {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.sim-switch-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sim-switch-track {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.16);
  transition: all 0.2s ease;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sim-switch-track:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  transition: all 0.2s ease;
  border-radius: 50%;
}

.sim-switch-wrap input:checked + .sim-switch-track {
  background-color: #00d285;
  border-color: #00d285;
  box-shadow: 0 0 10px rgba(0, 210, 133, 0.45);
}

.sim-switch-wrap input:checked + .sim-switch-track:before {
  transform: translateX(16px);
  background-color: #ffffff;
}

@media (max-width: 1200px) {
  .sim-methods-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .sim-methods-grid {
    grid-template-columns: 1fr;
  }
  .sim-presets-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .sim-preset-btn {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding: 0 14px;
    font-size: 12px;
  }
}

.sim-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sim-input-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sim-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.01em;
}

.sim-select-dark,
.sim-input-dark {
  background: #0d0e14;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f1f5f9;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 9px 12px;
  outline: none;
  transition: all 0.2s ease;
}

.sim-select-dark:focus,
.sim-input-dark:focus {
  border-color: #00d285;
  box-shadow: 0 0 10px rgba(0, 210, 133, 0.25);
}

.sim-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
  gap: 14px;
}

.sim-flags-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn-run-sim-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00d285;
  border: 1px solid #00d285;
  color: #04120b;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 210, 133, 0.35);
}

.btn-run-sim-glow:hover:not(:disabled) {
  transform: translateY(-1.5px);
  background: #00f5a0;
  border-color: #00f5a0;
  box-shadow: 0 6px 22px rgba(0, 210, 133, 0.5);
}

.btn-run-sim-glow:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

@media (max-width: 1024px) {
  .sim-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .sim-form-grid {
    grid-template-columns: 1fr;
  }
  .sim-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =============================================================================
   TAB 6: METODE ANALISIS & PROTECTIVE SHIELDS MATRIX STYLING
   ============================================================================= */
.methods-header-card {
  background: #111217;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.methods-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.methods-header-text {
  flex: 1;
  min-width: 280px;
}

.methods-title-label {
  font-size: 17px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
  letter-spacing: -0.2px;
}

.methods-active-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.32);
}

.methods-desc-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
  margin: 8px 0 0 0;
  max-width: 820px;
}

.methods-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-save-methods-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00d285;
  border: 1px solid #00d285;
  color: #04120b;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 210, 133, 0.3);
}

.btn-save-methods-glow:hover {
  transform: translateY(-1px);
  background: #00f5a0;
  border-color: #00f5a0;
  box-shadow: 0 6px 18px rgba(0, 210, 133, 0.45);
}

.btn-save-methods-glow:focus-visible {
  outline: 2px solid #00d285;
  outline-offset: 2px;
}

/* PRESET STRATEGY BAR */
.methods-preset-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.preset-bar-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.preset-buttons-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-preset-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-preset-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-preset-chip.active {
  background: rgba(0, 210, 133, 0.16);
  border-color: rgba(0, 210, 133, 0.45);
  color: #00d285;
}

.btn-preset-chip:focus-visible {
  outline: 2px solid #00d285;
  outline-offset: 1px;
}

/* PILLARS CONTAINER & SECTIONS */
.methods-pillars-container {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-bottom: 30px;
}

.pillar-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pillar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.pillar-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pillar-number-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  background: rgba(0, 210, 133, 0.15);
  color: var(--color-mauve);
  border: 1px solid rgba(0, 210, 133, 0.35);
  border-radius: 4px;
  padding: 2px 7px;
}

.pillar-title {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.1px;
}

.pillar-stats-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

/* METHOD CARDS GRID */
.methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.method-card {
  background: #111217;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  position: relative;
}

.method-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.method-card.is-active {
  border-color: rgba(16, 185, 129, 0.25);
}

.method-card.is-inactive {
  opacity: 0.65;
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(17, 18, 23, 0.6);
}

.method-card.is-inactive:hover {
  opacity: 0.9;
}

.method-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.method-meta-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.method-cat-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-mauve);
}

.method-name-text {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
}

.method-card-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* CUSTOM DARK-LUXURY TOGGLE SWITCH */
.method-switch-wrap {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.method-switch-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.method-switch-track {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  transition: all 0.22s ease;
}

.method-switch-track::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #cbd5e1;
  border-radius: 50%;
  transition: all 0.22s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.method-switch-input:checked + .method-switch-track {
  background: rgba(16, 185, 129, 0.35);
  border-color: #10b981;
}

.method-switch-input:checked + .method-switch-track::before {
  transform: translateX(20px);
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.method-switch-input:focus-visible + .method-switch-track {
  outline: 2px solid #00d285;
  outline-offset: 2px;
}

.method-status-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.method-status-tag.active {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.method-status-tag.inactive {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.method-card-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .methods-grid {
    grid-template-columns: 1fr;
  }
  .methods-header-top {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-save-methods-glow {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   VIEW 7: USAGE & BILLINGS STYLES (DARK LUXURY)
   ========================================================================== */
.usage-header-card {
  background: #111217;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.usage-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.usage-header-text {
  flex: 1;
  min-width: 280px;
}

.usage-title-label {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.usage-desc-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
  margin-top: 6px;
  max-width: 740px;
}

.usage-budget-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.budget-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.budget-input-group label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.budget-input-wrapper {
  display: flex;
  align-items: center;
  background: #181a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0 8px;
  height: 34px;
}

.budget-currency-prefix {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-right: 4px;
}

.budget-num-input {
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  width: 70px;
  outline: none;
}

.budget-toggle-group {
  display: flex;
  align-items: center;
}

.usage-rates-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  flex-wrap: wrap;
}

.rate-badge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.rate-model-name {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.rate-value {
  color: rgba(255, 255, 255, 0.45);
}

.rate-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
}

/* Model Badges in Logs */
.model-pill-mini {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 210, 133, 0.15);
  color: #c084fc;
  border: 1px solid rgba(0, 210, 133, 0.3);
}

.model-pill-gpt4o {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 210, 133, 0.18);
  color: #f472b6;
  border: 1px solid rgba(0, 210, 133, 0.35);
}

/* Decision Badges in Logs */
.dec-pill-execute {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.dec-pill-reject {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.dec-pill-skip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 900px) {
  .usage-header-top {
    flex-direction: column;
    align-items: stretch;
  }
  .usage-budget-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .usage-rates-strip {
    flex-direction: column;
    align-items: flex-start;
  }
  .rate-divider {
    display: none;
  }
}

.method-meta-pills-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* =============================================================================
   ZRATRADE COPILOT (AUTONOMOUS INTEL & COMPANION DRAWER)
   ============================================================================= */

.btn-copilot-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 210, 133, 0.12);
  color: #c084fc;
  border: 1px solid rgba(0, 210, 133, 0.3);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-copilot-trigger:hover {
  background: rgba(0, 210, 133, 0.22);
  border-color: rgba(0, 210, 133, 0.5);
  box-shadow: 0 0 16px rgba(0, 210, 133, 0.2);
  transform: translateY(-1px);
}

.copilot-hotkey-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.7);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.copilot-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 998;
  transition: opacity 0.25s ease;
}

.copilot-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 440px;
  max-width: 95vw;
  background: #0d0f16;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
}

.copilot-drawer.open {
  transform: translateX(0);
}

.copilot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #11131c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.copilot-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.copilot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 210, 133, 0.15);
  color: #c084fc;
  border: 1px solid rgba(0, 210, 133, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.copilot-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copilot-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.copilot-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.copilot-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulse 2s infinite;
}

.copilot-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  display: block;
  margin-top: 1px;
}

.copilot-header-actions {
  display: flex;
  gap: 6px;
}

.copilot-btn-icon {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.copilot-btn-icon:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

/* Telemetry Strip */
.copilot-telemetry-strip {
  display: flex;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  overflow-x: auto;
}

.telemetry-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #cbd5e1;
  white-space: nowrap;
}

.telemetry-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.telemetry-dot.green { background: #00d285; }
.telemetry-dot.mauve { background: #00d285; }
.telemetry-dot.violet { background: #00f5a0; }

/* Quick Action Chips */
.copilot-quick-chips-section {
  padding: 12px 18px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.quick-chips-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}

.copilot-chips-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.copilot-chips-scroll::-webkit-scrollbar {
  height: 3px;
}
.copilot-chips-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.copilot-chip-btn {
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 10px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.copilot-chip-btn:hover {
  background: rgba(0, 210, 133, 0.1);
  border-color: rgba(0, 210, 133, 0.3);
  color: #e2e8f0;
}

/* Chat Messages */
.copilot-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.copilot-messages-container::-webkit-scrollbar {
  width: 4px;
}
.copilot-messages-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.copilot-message {
  display: flex;
  flex-direction: column;
  max-width: 92%;
}

.copilot-message.assistant-msg {
  align-self: flex-start;
}

.copilot-message.user-msg {
  align-self: flex-end;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0 4px;
}

.sender-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #00d285;
}

.user-msg .sender-tag {
  color: #00d285;
}

.message-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.message-bubble {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  word-break: break-word;
}

.assistant-msg .message-bubble {
  background: #141620;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #e2e8f0;
}

.assistant-msg .message-bubble strong {
  color: #fff;
  font-weight: 600;
}

.assistant-msg .message-bubble ul,
.assistant-msg .message-bubble ol {
  margin: 8px 0;
  padding-left: 18px;
}

.assistant-msg .message-bubble li {
  margin-bottom: 4px;
}

.assistant-msg .message-bubble code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.35);
  color: #00d285;
  padding: 1px 5px;
  border-radius: 4px;
}

.user-msg .message-bubble {
  background: rgba(0, 210, 133, 0.15);
  border: 1px solid rgba(0, 210, 133, 0.28);
  color: #ffffff;
}

/* Typing indicator */
.copilot-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: #141620;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00d285;
  opacity: 0.4;
  animation: typingPulse 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Chat Input Bar */
.copilot-input-area {
  padding: 14px 18px 12px;
  background: #10121a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.copilot-form-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.copilot-textarea {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px;
  resize: none;
  min-height: 42px;
  max-height: 120px;
  outline: none;
  transition: border-color 0.15s ease;
}

.copilot-textarea:focus {
  border-color: rgba(0, 210, 133, 0.45);
}

.copilot-send-btn {
  width: 42px;
  height: 42px;
  background: rgba(0, 210, 133, 0.2);
  color: #c084fc;
  border: 1px solid rgba(0, 210, 133, 0.35);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.copilot-send-btn:hover:not(:disabled) {
  background: rgba(0, 210, 133, 0.35);
  color: #fff;
  border-color: rgba(0, 210, 133, 0.6);
  transform: translateY(-1px);
}

.copilot-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.copilot-input-footer {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
}

@media (max-width: 600px) {
  .copilot-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ==========================================================================
   QUICK HEALTH STRIP (TELEMETRI 3 DETIK)
   ========================================================================== */
.quick-health-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 14px;
  flex-wrap: wrap;
  background: rgba(18, 19, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 9px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.health-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.health-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.health-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
  flex-shrink: 0;
  animation: pulseGreen 2s infinite ease-in-out;
}

.health-pulse-dot.danger {
  background: var(--color-red);
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.8);
  animation: pulseRed 1.2s infinite ease-in-out;
}

.health-pulse-dot.warning {
  background: #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
  animation: pulseYellow 1.5s infinite ease-in-out;
}

@keyframes pulseGreen {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.35); opacity: 1; }
}

@keyframes pulseRed {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.4); opacity: 1; }
}

@keyframes pulseYellow {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.3); opacity: 1; }
}

.health-label {
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
}

.health-val {
  color: var(--text-white);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
}

.health-val.safe {
  color: var(--color-green);
}

.health-val.caution {
  color: #facc15;
}

.health-val.danger {
  color: var(--color-red);
}

.health-val.btc-regime {
  color: #c084fc;
}

/* ==========================================================================
   MARKET RADAR: CONTROLS BAR & FILTER CHIPS
   ========================================================================== */
.radar-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.radar-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  padding: 6px 12px;
  min-width: 250px;
  flex: 0 1 280px;
  color: var(--text-dim);
  transition: all 0.2s ease;
}

.radar-search-box:focus-within {
  border-color: rgba(0, 210, 133, 0.5);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 12px rgba(0, 210, 133, 0.15);
}

.radar-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  width: 100%;
}

.radar-search-box input::placeholder {
  color: var(--text-dim);
  opacity: 0.7;
}

.btn-clear-search {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s ease;
}

.btn-clear-search:hover {
  color: #fff;
}

.radar-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
  max-width: 100%;
}

.radar-filter-chips::-webkit-scrollbar {
  height: 3px;
}

.radar-filter-chips::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.btn-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
  min-height: 32px;
}

.btn-filter-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.btn-filter-chip.active {
  background: rgba(0, 210, 133, 0.15);
  border-color: var(--accent-mauve);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 210, 133, 0.18);
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chip-dot.setup {
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.7);
}

.chip-dot.golden {
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.7);
}

.chip-dot.bull {
  background: var(--color-green);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
}

.chip-dot.bear {
  background: var(--color-red);
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.7);
}

.radar-view-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.btn-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 28px;
}

.btn-view-toggle:hover {
  color: var(--text-white);
}

.btn-view-toggle.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ==========================================================================
   MARKET RADAR: CARDS GRID & CARD ITEM (MOBILE & COMPACT VIEW)
   ========================================================================== */
.radar-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.radar-card-item {
  background: var(--bg-card-sub);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.radar-card-item:hover {
  border-color: rgba(0, 210, 133, 0.35);
  background: rgba(30, 31, 43, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.radar-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.radar-card-coin-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radar-card-sym {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14px;
  color: var(--text-white);
}

.radar-card-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.radar-card-badge.setup {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.radar-card-badge.golden {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.radar-card-badge.watch {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.radar-card-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.radar-card-price {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 16px;
  color: var(--text-white);
}

.radar-card-chg {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.radar-card-chg.green { color: var(--color-green); }
.radar-card-chg.red { color: var(--color-red); }

.radar-card-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 10px;
}

.radar-metric-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.radar-metric-col .lbl {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 500;
}

.radar-metric-col .val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-white);
}

.radar-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.radar-tag-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.radar-tag-pill.bull {
  background: rgba(16, 185, 129, 0.14);
  color: var(--color-green);
  border-color: rgba(16, 185, 129, 0.3);
}

.radar-tag-pill.bear {
  background: rgba(244, 63, 94, 0.14);
  color: var(--color-red);
  border-color: rgba(244, 63, 94, 0.3);
}

.radar-tag-pill.fib {
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

/* ==========================================================================
   STICKY FIRST COLUMN FOR DATA TABLES (ZERO DATA LOSS ON HORIZONTAL SCROLL)
   ========================================================================== */
.helios-table-responsive {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.helios-table th:first-child,
.helios-table td:first-child {
  position: sticky;
  left: 0;
  background: #0e1017;
  z-index: 2;
  box-shadow: 3px 0 8px -2px rgba(0, 0, 0, 0.65);
}

.helios-table tr:hover td:first-child {
  background: #151722;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS ENHANCEMENTS (R-30 & R-31 ANTISLOP)
   ========================================================================== */
@media (max-width: 768px) {
  .quick-health-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
  }

  .quick-health-strip .health-divider {
    display: none;
  }

  .quick-health-strip .health-item {
    justify-content: space-between;
    font-size: 12px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .quick-health-strip .health-item:last-child {
    border-bottom: none;
  }

  .radar-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .radar-search-box {
    width: 100%;
    min-width: 100%;
    flex: 1 1 100%;
    min-height: 44px;
  }

  .radar-filter-chips {
    width: 100%;
    padding-bottom: 4px;
  }

  .btn-filter-chip {
    min-height: 40px;
    padding: 6px 14px;
    font-size: 12px;
  }

  .radar-view-mode-toggle {
    align-self: flex-start;
    min-height: 36px;
  }

  .btn-view-toggle {
    min-height: 34px;
    padding: 6px 12px;
  }

  .radar-cards-container {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MARKET SAFETY BAROMETER & HUMAN TRADE NARRATIVE
   ========================================================================== */
.market-safety-widget {
  background: rgba(14, 15, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.safety-widget-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 300px;
  min-width: 0;
}

.safety-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.safety-badge-icon.safe {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.safety-badge-icon.caution {
  background: rgba(250, 204, 21, 0.15);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.35);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.2);
}

.safety-badge-icon.danger {
  background: rgba(244, 63, 94, 0.15);
  color: var(--color-red);
  border: 1px solid rgba(244, 63, 94, 0.35);
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.2);
}

.safety-text-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.safety-headline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.safety-status-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.safety-status-label.safe { color: var(--color-green); }
.safety-status-label.caution { color: #facc15; }
.safety-status-label.danger { color: var(--color-red); }

.safety-score-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.safety-narrative-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.safety-widget-right {
  flex-shrink: 0;
}

.safety-meter-segments {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

.safety-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  transition: all 0.2s ease;
  user-select: none;
}

.seg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.safety-seg.active.safe {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-green);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.safety-seg.active.caution {
  background: rgba(250, 204, 21, 0.2);
  color: #facc15;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.25);
}

.safety-seg.active.danger {
  background: rgba(244, 63, 94, 0.2);
  color: var(--color-red);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.25);
}

/* Human Trade Narrative Box on Position Cards */
.cell-narrative-box {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.narrative-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-mauve);
  letter-spacing: 0.5px;
}

.narrative-text {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}

@media (max-width: 768px) {
  .market-safety-widget {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
  }

  .safety-widget-left {
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
  }

  .safety-meter-segments {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .safety-seg {
    flex: 1;
    justify-content: center;
    min-height: 38px;
  }
}

/* ========================================================================== */
/* VIEW 8: AUTONOMOUS ALPHA SCREENER & LEADERBOARD LUXURY STYLES              */
/* ========================================================================== */

.alpha-telemetry-badge-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.alpha-telemetry-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 12px;
}

.alpha-telemetry-pill .pill-label {
  color: var(--text-dim);
  font-weight: 500;
}

.alpha-telemetry-pill .pill-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-white);
}

.alpha-controls-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.alpha-horizon-group,
.alpha-sector-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.alpha-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

.btn-alpha-horizon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 44px;
}

.btn-alpha-horizon:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.16);
}

.btn-alpha-horizon.active {
  background: linear-gradient(135deg, rgba(0, 210, 133, 0.2), rgba(0, 210, 133, 0.2));
  border-color: rgba(0, 210, 133, 0.5);
  color: #f1f5f9;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(0, 210, 133, 0.25);
}

.alpha-divider-v {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
}

.alpha-deploy-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-alpha-deploy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 44px;
}

.btn-alpha-deploy.btn-gold {
  background: #00d285;
  border: 1px solid #00d285;
  color: #04120b;
  box-shadow: 0 0 14px rgba(0, 210, 133, 0.3);
}
.btn-alpha-deploy.btn-gold:hover {
  background: #00f5a0;
  border-color: #00f5a0;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(0, 210, 133, 0.45);
}

.btn-alpha-deploy.btn-violet {
  background: #00d285;
  border: 1px solid #00d285;
  color: #04120b;
  box-shadow: 0 0 14px rgba(0, 210, 133, 0.3);
}
.btn-alpha-deploy.btn-violet:hover {
  background: #00f5a0;
  border-color: #00f5a0;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(0, 210, 133, 0.45);
}

.btn-alpha-deploy.btn-outline {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-white);
}
.btn-alpha-deploy.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.btn-alpha-deploy.btn-re-audit {
  background: rgba(0, 210, 133, 0.12);
  border: 1px solid rgba(0, 210, 133, 0.3);
  color: #00d285;
}
.btn-alpha-deploy.btn-re-audit:hover {
  background: rgba(0, 210, 133, 0.22);
  border-color: #00d285;
  color: #ffffff;
}

.spin-icon {
  animation: alphaSpin 1.2s linear infinite;
}
@keyframes alphaSpin {
  100% { transform: rotate(360deg); }
}

/* Leaderboard Cells & Badges */
.alpha-symbol-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.alpha-symbol-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-white);
}

.alpha-sector-label {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.2px;
}

.alpha-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.alpha-tier-badge.tier-s {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.alpha-tier-badge.tier-a {
  background: rgba(0, 210, 133, 0.15);
  border: 1px solid rgba(0, 210, 133, 0.4);
  color: #00d285;
}

.alpha-tier-badge.tier-b {
  background: rgba(0, 210, 133, 0.10);
  border: 1px solid rgba(0, 210, 133, 0.3);
  color: #00f5a0;
}

.alpha-tier-badge.tier-c {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #f43f5e;
}

.alpha-winrate-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
}

.alpha-winrate-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
}

.alpha-progress-wrap {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.alpha-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.alpha-progress-fill.green {
  background: linear-gradient(90deg, #00d285, #00f5a0);
}
.alpha-progress-fill.violet {
  background: linear-gradient(90deg, #00d285, #34d399);
}
.alpha-progress-fill.mauve {
  background: linear-gradient(90deg, #00d285, #10b981);
}
.alpha-progress-fill.rose {
  background: linear-gradient(90deg, #f43f5e, #fb7185);
}

.alpha-bot-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.alpha-bot-status-tag.active {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.alpha-bot-status-tag.inactive {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
}

.alpha-bot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.btn-alpha-table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
}

.btn-alpha-table-action:hover {
  background: rgba(0, 210, 133, 0.15);
  border-color: rgba(0, 210, 133, 0.4);
  color: #c084fc;
}

@media (max-width: 900px) {
  .alpha-controls-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .alpha-horizon-group,
  .alpha-sector-group,
  .alpha-deploy-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .alpha-deploy-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .btn-alpha-deploy {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    font-size: 12px;
  }
  .alpha-divider-v {
    display: none;
  }
}

/* =============================================================================
   MANUAL SL/TP, PENDING ENTRY ZONE, AND MTF MATRIX STYLES (POIN 1, 3, 5, 7, 11)
   ============================================================================= */
.btn-table-edit-pos {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(0, 210, 133, 0.12);
  border: 1px solid rgba(0, 210, 133, 0.3);
  border-radius: 6px;
  color: var(--accent-violet);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 4px;
}

.btn-table-edit-pos:hover {
  background: rgba(0, 210, 133, 0.25);
  border-color: var(--accent-violet);
  color: #fff;
}

.badge-manual-sm {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(0, 210, 133, 0.18);
  border: 1px solid rgba(0, 210, 133, 0.4);
  border-radius: 4px;
  color: var(--accent-mauve);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-left: 4px;
}

.btn-pending-exec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 6px;
  color: var(--accent-green);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-pending-exec:hover {
  background: rgba(16, 185, 129, 0.28);
  color: #fff;
}

.btn-pending-cancel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.3);
  border-radius: 6px;
  color: var(--accent-red);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.btn-pending-cancel:hover {
  background: rgba(244, 63, 94, 0.25);
  color: #fff;
}

.mtf-matrix-strip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mtf-dot {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.2px;
}

.mtf-dot.bull {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.mtf-dot.bear {
  background: rgba(244, 63, 94, 0.18);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.4);
}

.mtf-dot.flat {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-smc-sub {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(0, 210, 133, 0.2);
  color: var(--accent-violet);
  border: 1px solid rgba(0, 210, 133, 0.35);
  margin-left: 3px;
}

.badge-smc-zone {
  display: inline-block;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(0, 210, 133, 0.15);
  color: var(--accent-mauve);
  border: 1px solid rgba(0, 210, 133, 0.3);
  margin-left: 3px;
}

/* Live Whale Movement Tracker Component */
.card-whale-tracker {
  border-color: rgba(56, 189, 248, 0.2);
  margin-bottom: 24px;
}

.whale-dot {
  background: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.whale-controls-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.whale-select {
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  background: #111217;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.whale-select:focus {
  outline: none;
  border-color: #38bdf8;
}

.whale-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.whale-stat-card {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.whale-stat-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  font-family: var(--font-sans);
  letter-spacing: 0.5px;
}

.whale-stat-val {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-white);
}

.whale-stat-val.cyan {
  color: #38bdf8;
}

.whale-stat-val.mauve {
  color: var(--accent-mauve);
}

.whale-stat-val.green {
  color: var(--color-green);
}

.whale-stat-val.red {
  color: var(--color-red);
}

.whale-summary-box {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  padding: 12px 16px;
  background: rgba(56, 189, 248, 0.04);
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 8px;
}

/* Performance Reports & AI Post-Trade Audit Component */
.card-reports-audit {
  border-color: rgba(0, 210, 133, 0.25);
  margin-bottom: 24px;
}

.reports-dot {
  background: #00d285;
  box-shadow: 0 0 10px rgba(0, 210, 133, 0.4);
}

.reports-tab-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reports-kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.report-narrative-card {
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(0, 210, 133, 0.05);
  border: 1px solid rgba(0, 210, 133, 0.2);
  border-radius: 8px;
}

.report-narrative-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.report-narrative-tag {
  background: rgba(0, 210, 133, 0.18);
  color: #c084fc;
  border: 1px solid rgba(0, 210, 133, 0.35);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.report-timestamp {
  font-size: 11px;
  color: var(--text-dim);
}

.report-narrative-p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-main);
  margin: 0;
  white-space: pre-line;
}

.mistakes-container {
  margin-top: 16px;
}

.mistakes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.mistake-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mistake-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mistake-panel-title.bad-entry {
  color: #f43f5e;
}

.mistake-panel-title.premature-be {
  color: #fbbf24;
}

.mistake-list-wrap {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mistake-item-row {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.mistake-item-row:last-child {
  border-bottom: none;
}

.mistake-item-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-white);
  font-weight: 600;
}

.mistake-item-desc {
  color: var(--text-dim);
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.4;
}

/* Combinatorial Strategy Optimizer Component */
.card-strategy-optimizer {
  border-color: rgba(0, 210, 133, 0.3);
  margin-bottom: 24px;
}

.optimizer-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.optimizer-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 8px;
  margin-bottom: 14px;
}

.optimizer-results-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.optimizer-preset-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.optimizer-preset-card:hover {
  border-color: rgba(0, 210, 133, 0.3);
  background: rgba(255, 255, 255, 0.03);
}

.optimizer-preset-card.top-rank {
  background: rgba(0, 210, 133, 0.06);
  border-color: rgba(0, 210, 133, 0.35);
}

.optimizer-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.optimizer-identity-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.optimizer-rank-num {
  font-weight: 800;
  font-size: 12px;
  color: var(--text-dim);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.optimizer-preset-card.top-rank .optimizer-rank-num {
  color: #c084fc;
  background: rgba(0, 210, 133, 0.2);
  border: 1px solid rgba(0, 210, 133, 0.4);
}

.optimizer-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-white);
  display: flex;
  align-items: center;
  gap: 8px;
}

.optimizer-desc-text {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.optimizer-actions-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.optimizer-score-box {
  text-align: right;
}

.optimizer-score-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  display: block;
}

.optimizer-score-val {
  font-size: 15px;
  font-weight: 800;
  color: #00d285;
  font-family: var(--font-mono);
}

.optimizer-metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.optimizer-metric-cell span {
  color: var(--text-dim);
}

.optimizer-metric-cell strong {
  font-family: var(--font-mono);
}

/* Modal Manual SL/TP Components */
.modal-sltp-card {
  max-width: 520px;
  width: 100%;
}

.sltp-meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.sltp-meta-cell-label {
  font-size: 10px;
  color: var(--text-dim);
  display: block;
  text-transform: uppercase;
  font-family: var(--font-sans);
}

.sltp-meta-cell-val {
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-white);
}

.sltp-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sltp-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sltp-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-white);
}

.sltp-distance-tag {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.sltp-distance-tag.sl {
  color: var(--color-red);
}

.sltp-distance-tag.tp {
  color: var(--color-green);
}

.sltp-input {
  background: #0e1017;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text-white);
  font-size: 13px;
  font-family: var(--font-mono);
  width: 100%;
  transition: border-color 0.2s ease;
}

.sltp-input:focus {
  outline: none;
  border-color: var(--accent-violet);
}

.sltp-preset-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.sltp-preset-label {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 24px;
}

.sltp-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(0, 210, 133, 0.06);
  border: 1px solid rgba(0, 210, 133, 0.18);
  padding: 10px 12px;
  border-radius: 6px;
}

.sltp-notice-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* News Impact to Crypto Component */
.news-crypto-impact-strip {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.news-impact-risk-badge {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.25);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.news-impact-btc-badge {
  background: rgba(0, 210, 133, 0.12);
  color: #c084fc;
  border: 1px solid rgba(0, 210, 133, 0.25);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.news-impact-narrative {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
}

/* ==========================================================================
   TERMINAL AUTHENTICATION LOCK SCREEN (P0 SECURITY GATE)
   Dark-luxury aesthetic, zero-emoji, tactile institutional keypad
   ========================================================================== */
.terminal-auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 8, 12, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  animation: authFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: #0f1118;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 32px 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 210, 133, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.auth-badge-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 210, 133, 0.12);
  border: 1px solid rgba(0, 210, 133, 0.3);
  color: #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 0 20px rgba(0, 210, 133, 0.2);
}

.auth-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: -0.3px;
  margin: 0;
}

.auth-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.auth-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  display: flex;
  align-items: center;
  color: var(--text-dim);
  pointer-events: none;
}

.auth-input {
  width: 100%;
  height: 46px;
  background: #090a0f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 44px 0 14px;
  color: var(--text-white);
  font-size: 13px;
  font-family: var(--font-sans);
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.auth-input.has-icon {
  padding-left: 40px;
}

.auth-input.font-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

.auth-input:focus {
  outline: none;
  border-color: #00d285;
  box-shadow: 0 0 0 3px rgba(0, 210, 133, 0.20);
}

.auth-btn-toggle-vis {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.auth-btn-toggle-vis:hover {
  color: var(--text-white);
}

.auth-quick-accounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  margin-top: 2px;
}

.quick-accounts-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

.quick-chips-row {
  display: flex;
  gap: 8px;
}

.quick-chip-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-chip-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-white);
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.chip-dot.trader {
  background: #00d285;
  box-shadow: 0 0 6px rgba(0, 210, 133, 0.6);
}

.chip-dot.admin {
  background: #a855f7;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.6);
}

.auth-error-msg {
  font-size: 12px;
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  line-height: 1.4;
  animation: authShake 0.35s ease;
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.auth-submit-btn {
  width: 100%;
  height: 46px;
  background: #00d285;
  color: #04120b;
  border: 1px solid #00d285;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 210, 133, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-submit-btn:hover {
  background: #00f5a0;
  border-color: #00f5a0;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 210, 133, 0.45);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

.auth-footer-meta {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ==========================================================================
   HEADER USER PROFILE CHIP ENHANCEMENT
   ========================================================================== */
.user-profile-chip {
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.user-profile-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.user-name-role-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-role-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.user-role-badge.role-admin {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.user-role-badge.role-user {
  background: rgba(0, 210, 133, 0.15);
  color: #00d285;
  border: 1px solid rgba(0, 210, 133, 0.30);
}

.header-balance-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  letter-spacing: 0.3px;
}

.user-chip-chevron {
  color: var(--text-dim);
  transition: transform 0.2s ease;
}

.user-profile-chip:hover .user-chip-chevron {
  color: var(--text-white);
  transform: translateY(1px);
}

/* ==========================================================================
   USER ACCOUNT & API KEYS MANAGEMENT MODAL (DARK LUXURY)
   ========================================================================== */
.account-modal-card {
  max-width: 620px;
  width: 95%;
}

.account-nav-tabs {
  display: flex;
  gap: 6px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.015);
}

.account-tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.account-tab-btn:hover {
  color: var(--text-white);
}

.account-tab-btn.active {
  color: #00d285;
  border-bottom-color: #00d285;
}

.account-tab-btn svg {
  opacity: 0.7;
}

.account-tab-btn.active svg {
  opacity: 1;
  color: #00d285;
}

.account-modal-body {
  padding: 20px 24px;
  max-height: 520px;
  overflow-y: auto;
}

.account-tab-pane {
  display: none;
  flex-direction: column;
  gap: 18px;
}

.account-tab-pane.active {
  display: flex;
}

/* TAB 1: HERO & DETAILS */
.profile-hero-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.profile-avatar-large {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35);
  flex-shrink: 0;
}

.profile-hero-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-hero-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
}

.profile-hero-role-pill {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 210, 133, 0.15);
  color: #00d285;
  border: 1px solid rgba(0, 210, 133, 0.35);
}

.profile-hero-status-pill {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.30);
}

.profile-hero-email {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
}

.profile-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.profile-meta-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.meta-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.meta-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-white);
}

.meta-value.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.meta-value.status-ok {
  color: #00d285;
}

.meta-value.status-empty {
  color: #f59e0b;
}

/* TAB 2: CALLOUT ENKRIPSI */
.security-info-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(0, 210, 133, 0.06);
  border: 1px solid rgba(0, 210, 133, 0.22);
  border-radius: 10px;
  padding: 12px 14px;
}

.callout-icon {
  color: #00d285;
  flex-shrink: 0;
  margin-top: 2px;
}

.callout-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.callout-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-white);
}

.callout-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.account-form-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.btn-save-primary {
  background: #00d285;
  color: #04120b;
  border: 1px solid #00d285;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 3px 12px rgba(0, 210, 133, 0.3);
  transition: all 0.2s ease;
}

.btn-save-primary:hover {
  background: #00f5a0;
  border-color: #00f5a0;
  transform: translateY(-1px);
}

.account-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-danger-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #f43f5e;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger-outline:hover {
  background: rgba(244, 63, 94, 0.12);
  border-color: #f43f5e;
}

.btn-secondary-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-white);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-secondary-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   TERMINAL INACTIVE & FREEZE BANNERS (DARK LUXURY)
   ========================================================================== */
.terminal-inactive-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(20, 21, 30, 0.95) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 24px rgba(245, 158, 11, 0.08);
  gap: 16px;
}

.emergency-freeze-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.12) 0%, rgba(20, 21, 30, 0.95) 100%);
  border: 1px solid rgba(244, 63, 94, 0.35);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 24px rgba(244, 63, 94, 0.08);
  gap: 16px;
}

.freeze-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.freeze-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: #f43f5e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.freeze-banner-icon.warning {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

.freeze-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.freeze-banner-title {
  font-size: 12px;
  font-weight: 800;
  color: #f43f5e;
  letter-spacing: 0.5px;
}

.freeze-banner-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.btn-freeze-resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244, 63, 94, 0.2);
  border: 1px solid rgba(244, 63, 94, 0.4);
  color: #fb7185;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-freeze-resume:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

/* ==========================================================================
   MANDATORY API SETUP GATEWAY (P0 ACTIVATION LOCK)
   ========================================================================== */
.mandatory-overlay-locked {
  z-index: 99999 !important;
  backdrop-filter: blur(18px) !important;
  background: rgba(5, 6, 10, 0.88) !important;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: all 0.25s ease;
}

.mandatory-overlay-locked.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mandatory-card {
  max-width: 580px;
  width: 95%;
  background: #0f1017;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 50px rgba(245, 158, 11, 0.12), 0 25px 80px rgba(0, 0, 0, 0.9);
  border-radius: 16px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: mandatoryCardIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mandatoryCardIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.mandatory-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.mandatory-shield-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);
}

.mandatory-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mandatory-status-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.mandatory-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
  line-height: 1.35;
}

.mandatory-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.mandatory-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mandatory-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-activate-terminal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #00d285 0%, #059669 100%);
  color: #04120b;
  border: 1px solid #00d285;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 210, 133, 0.35);
  transition: all 0.2s ease;
}

.btn-activate-terminal:hover {
  background: linear-gradient(135deg, #00f5a0 0%, #10b981 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 210, 133, 0.45);
}

.btn-activate-terminal:active {
  transform: translateY(0);
}

.mandatory-note {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ============================================================================
   DEDICATED SETTINGS VIEW & ROI-BASED CONTROLS (DARK LUXURY)
   ============================================================================ */
#viewSettings {
  display: none;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

#viewSettings.active {
  display: flex !important;
}

.settings-form-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.settings-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

.settings-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #0f1015);
  border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 20px;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.full-width-card,
.roi-featured-card {
  grid-column: 1 / -1;
}

.roi-featured-card {
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.04) 0%, rgba(15, 16, 21, 0.95) 100%), #0d0e14;
  border-color: rgba(168, 85, 247, 0.22);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(168, 85, 247, 0.15);
}

.badge-roi-indicator {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.28);
}

.settings-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.16);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary, #cbd5e1);
  line-height: 1.55;
}

.settings-info-box svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #c084fc;
}

.settings-info-box strong {
  color: #ffffff;
}

/* Dual Column ROI Controls */
.roi-controls-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.roi-control-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
}

.roi-control-column.tp-column {
  border-top: 2px solid #10b981;
}

.roi-control-column.sl-column {
  border-top: 2px solid #f43f5e;
}

.roi-column-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.roi-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roi-col-title {
  font-size: 13px;
  font-weight: 700;
}

.roi-badge-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.roi-usd-est {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}

/* Preset Chips */
.roi-preset-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-roi-preset {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #94a3b8);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-roi-preset:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.tp-column .btn-roi-preset.active {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border-color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.sl-column .btn-roi-preset.active {
  background: rgba(244, 63, 94, 0.18);
  color: #fb7185;
  border-color: #f43f5e;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.3);
}

.be-column .btn-roi-preset.active {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Dual Input Row (Slider + Number Input) */
.roi-inputs-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.slider-wrapper {
  flex: 1;
}

.slider-wrapper input[type="range"] {
  width: 100%;
  accent-color: var(--accent-purple, #a855f7);
  cursor: pointer;
}

.tp-column .slider-wrapper input[type="range"] {
  accent-color: #10b981;
}

.sl-column .slider-wrapper input[type="range"] {
  accent-color: #f43f5e;
}

.be-column .slider-wrapper input[type="range"] {
  accent-color: #f59e0b;
}

.number-input-suffix-wrap {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0 8px;
  width: 90px;
  flex-shrink: 0;
}

.input-roi-number {
  width: 100%;
  background: transparent !important;
  border: none !important;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  padding: 6px 4px 6px 0;
  outline: none;
}

.input-suffix {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim, #64748b);
  margin-left: 2px;
}

.field-hint-subtle {
  font-size: 11px;
  color: var(--text-dim, #64748b);
  font-family: var(--font-mono);
}

/* 3-Step Scale-Out & Auto-BE Progression */
.roi-scaleout-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px;
}

.scaleout-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.scaleout-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.roi-progress-stepper {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.stepper-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s ease;
}

.stepper-step.highlight-step {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.25);
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.1);
}

.step-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.stepper-step.highlight-step .step-circle {
  background: #a855f7;
  color: #0d0e14;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.step-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.step-desc {
  font-size: 11px;
  color: var(--text-dim, #94a3b8);
  line-height: 1.45;
}

.step-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.step-badge-mini {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.step-badge-mini.highlight {
  background: rgba(168, 85, 247, 0.2);
  color: #d88ab2;
}

.step-badge-mini.green {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.step-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.stepper-connector {
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.stepper-connector.active {
  background: #a855f7;
}

/* Live Simulation Preview Box */
.roi-live-preview-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.preview-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.preview-subtitle {
  font-size: 11px;
  color: var(--text-dim, #64748b);
  font-family: var(--font-mono);
}

.preview-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.preview-metric-item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 12px;
  gap: 2px;
}

.metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.metric-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.metric-sub {
  font-size: 10px;
  color: var(--text-dim, #64748b);
  font-family: var(--font-mono);
}

/* Settings Inputs Vertical */
.settings-inputs-vertical {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.label-with-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #cbd5e1);
}

.field-value-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.settings-toggles-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.toggle-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-sub {
  font-size: 11px;
  color: var(--text-dim, #64748b);
}

/* Coins Radar Section */
.coins-quick-actions {
  display: flex;
  gap: 6px;
}

.btn-coin-action {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #cbd5e1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-coin-action:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.add-coin-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

/* Sticky Action Bar at Bottom */
.settings-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 16, 21, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 20px;
  backdrop-filter: blur(12px);
  position: sticky;
  bottom: 16px;
  z-index: 20;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.action-bar-left,
.action-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-action-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary, #cbd5e1);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-action-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.btn-action-secondary.danger-outline {
  border-color: rgba(244, 63, 94, 0.3);
  color: #fb7185;
}

.btn-action-secondary.danger-outline:hover {
  background: rgba(244, 63, 94, 0.12);
  color: #f43f5e;
}

.btn-save-settings-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #ffffff;
  border: 1px solid #c084fc;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.35);
  transition: all 0.2s ease;
}

.btn-save-settings-primary:hover {
  background: linear-gradient(135deg, #c084fc 0%, #9333ea 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(168, 85, 247, 0.5);
}

.btn-save-settings-primary:active {
  transform: translateY(0);
}

.btn-save-settings-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.save-status-text {
  font-size: 12px;
  font-weight: 600;
}

.save-status-text.success {
  color: #10b981;
}

.save-status-text.error {
  color: #f43f5e;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .settings-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .roi-controls-dual-grid {
    grid-template-columns: 1fr;
  }
  .preview-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .roi-progress-stepper {
    flex-direction: column;
  }
  .stepper-connector {
    width: 2px;
    height: 16px;
  }
  .settings-action-bar {
    flex-direction: column;
    gap: 12px;
  }
  .action-bar-left,
  .action-bar-right {
    width: 100%;
    justify-content: space-between;
  }
}