/* ==============================================================================
   Ash Infinity Modern Theme — Single Source of Tokens & Components
   Adheres to Kiro instructions: Inter + JetBrains Mono, strict semantic colors,
   4/8/12/16/24px spacing, 64px icon rail, dark/light themes, no emojis.
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ==============================================================================
   1. DESIGN TOKENS (CSS VARIABLES)
   ============================================================================== */
:root, [data-theme="dark"] {
  /* User-Selected Institutional Dark Palette */
  --bg: #0B0E14;
  --rail: #0E1219;
  --card: #131822;
  --card-hover: #171E2B;
  --raise: #1A2130;
  --border: #1F2735;
  --border-focus: rgba(76, 141, 255, 0.5);

  --text: #E6EAF2;
  --muted: #7C879B;
  --text-subtle: #5A6578;

  --up: #00E5A0;
  --up-bg: rgba(0, 229, 160, 0.12);
  --up-border: rgba(0, 229, 160, 0.25);

  --down: #FF4D6A;
  --down-bg: rgba(255, 77, 106, 0.12);
  --down-border: rgba(255, 77, 106, 0.25);

  --accent: #4C8DFF;       /* fills: primary button, switch on, active bar */
  --accent-text: #7FA9FF;  /* text and icons on dark: active tab, links */
  --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent); /* active backgrounds */
  --accent-hover: #387BFA;
  --accent-subtle: var(--accent-tint);
  --accent-border: rgba(76, 141, 255, 0.28);

  --warn: #F5A524;
  --warn-bg: rgba(245, 165, 36, 0.12);
  --warn-border: rgba(245, 165, 36, 0.25);

  /* Radius Scale */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --radius-card: 14px;
  --radius-pill: 9999px;

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: var(--font);
  --font-mono: var(--mono);

  /* Spacing Scale (4, 8, 12, 16, 24px only) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  /* Aliases for compatibility */
  --bg-canvas: var(--bg);
  --bg-surface: var(--rail);
  --profit: var(--up);
  --profit-bg: var(--up-bg);
  --profit-border: var(--up-border);
  --loss: var(--down);
  --loss-bg: var(--down-bg);
  --loss-border: var(--down-border);
  --warning: var(--warn);
  --warning-bg: var(--warn-bg);
  --warning-border: var(--warn-border);
  --text-muted: var(--muted);
  --emerald: var(--up);
  --rose: var(--down);
  --green: var(--up);
  --red: var(--down);
  --cyan: var(--accent);
  --gold: var(--warn);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Light Theme via data-theme="light" on <html> */
[data-theme="light"] {
  --bg: #F6F7F9;
  --rail: #FFFFFF;
  --card: #FFFFFF;
  --card-hover: #F1F4F9;
  --raise: #EEF1F5;
  --border: #E2E8F0;
  --border-focus: rgba(47, 91, 255, 0.5);

  --text: #0F172A;
  --muted: #64748B;
  --text-subtle: #94A3B8;

  --up: #0A9D6B;
  --up-bg: rgba(10, 157, 107, 0.1);
  --up-border: rgba(10, 157, 107, 0.25);

  --down: #D92D4A;
  --down-bg: rgba(217, 45, 74, 0.1);
  --down-border: rgba(217, 45, 74, 0.25);

  --accent: #2F5BFF;
  --accent-text: #254EDB;
  --accent-tint: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-hover: #1E4AE9;
  --accent-subtle: var(--accent-tint);
  --accent-border: rgba(47, 91, 255, 0.2);

  --warn: #B7791F;
  --warn-bg: rgba(183, 121, 31, 0.1);
  --warn-border: rgba(183, 121, 31, 0.25);

  /* Aliases for compatibility */
  --bg-canvas: var(--bg);
  --bg-surface: var(--rail);
  --profit: var(--up);
  --profit-bg: var(--up-bg);
  --profit-border: var(--up-border);
  --loss: var(--down);
  --loss-bg: var(--down-bg);
  --loss-border: var(--down-border);
  --warning: var(--warn);
  --warning-bg: var(--warn-bg);
  --warning-border: var(--warn-border);
  --text-muted: var(--muted);
  --emerald: var(--up);
  --rose: var(--down);
  --green: var(--up);
  --red: var(--down);
  --cyan: var(--accent);
  --gold: var(--warn);
  --profit-bg: var(--up-bg);
  --profit-border: var(--up-border);
  --loss: var(--down);
  --loss-bg: var(--down-bg);
  --loss-border: var(--down-border);
  --warning: var(--warn);
  --warning-bg: var(--warn-bg);
  --warning-border: var(--warn-border);
  --text-muted: var(--muted);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ==============================================================================
   2. GLOBAL BASE & TYPOGRAPHY
   ============================================================================== */
body {
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--text);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Strict tabular numbers on all financial data */
.num,
.tabular-nums,
[data-num],
.trade-log-stat-val,
.kpi-value,
.stat-val,
.price,
.mono-val {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Accessible touch targets & outline rings */
button, a, input, select {
  font-family: inherit;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==============================================================================
   3. STANDARD COMPONENTS (CARD, PILL, SEGMENTED CONTROL, KPI, BUTTON, TABLE)
   ============================================================================== */

/* Card: 1px border, 14px radius, 14px 16px padding */
.card,
.modern-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-profit, .pill-green {
  background: var(--profit-bg);
  color: var(--profit);
  border-color: var(--profit-border);
}
.pill-loss, .pill-red {
  background: var(--loss-bg);
  color: var(--loss);
  border-color: var(--loss-border);
}
.pill-accent, .pill-blue {
  background: var(--accent-subtle);
  color: var(--accent-text);
  border-color: var(--accent-border);
}
.pill-warning, .pill-amber {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning-border);
}
.pill-muted {
  background: var(--border);
  color: var(--text-muted);
}

/* Segmented Control (.seg) */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-surface);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-sizing: border-box;
}
.seg-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.seg-btn:hover {
  color: var(--text);
}
.seg-btn.active {
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--accent-text);
}

/* Buttons (.btn) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  font-family: var(--font-sans);
  min-height: 34px;
  box-sizing: border-box;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--accent-hover);
}
.btn-secondary {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--card-hover);
  border-color: var(--text-muted);
}
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover {
  color: var(--text);
  background: var(--border);
}
.btn-danger-ghost {
  background: transparent;
  color: var(--loss);
  border: 1px solid transparent;
}
.btn-danger-ghost:hover {
  background: var(--loss-bg);
  border-color: var(--loss-border);
}

/* KPI Tiles (.kpi) */
.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-sizing: border-box;
}
.kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.kpi-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.kpi-sub {
  font-size: 11px;
  color: var(--text-subtle);
  font-family: var(--font-mono);
}

/* Standard Modern Table (.tbl) */
.tbl-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.tbl th {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-transform: none; /* sentence case */
  white-space: nowrap;
  z-index: 5;
}
.tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
}
.tbl tr:hover td {
  background: var(--card-hover);
}
.tbl .num, .tbl td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Empty State (.empty) */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 16px;
  gap: var(--space-3);
  box-sizing: border-box;
}
.empty-icon {
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  stroke-width: 1.75;
}
.empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.empty-desc {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 400px;
  margin: 0;
  line-height: 1.5;
}

/* ==============================================================================
   4. GLOBAL LAYOUT: 64px ICON RAIL (DESKTOP)
   ============================================================================== */
#app-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

@media (min-width: 769px) {
  /* 64px Fixed Icon Rail */
  #sidebar-main.sidebar {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    padding: 12px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--bg-surface) !important;
    border-right: 1px solid var(--border) !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
    overflow: hidden !important;
  }

  /* Rail Logo at Top */
  #sidebar-main .sidebar-header-row {
    padding: 0 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  #sidebar-main .sidebar-header-row .brand {
    gap: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  #sidebar-main .sidebar-header-row .brand > div,
  #sidebar-main .sidebar-header-row .sidebar-close-btn {
    display: none !important;
  }
  #sidebar-main .sidebar-header-row .brand-logo-svg,
  #sidebar-main .sidebar-header-row .brand-logo-img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
  }

  /* Rail Navigation Items */
  #sidebar-main .sidebar-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }
  #sidebar-main .sidebar-menu::-webkit-scrollbar {
    display: none !important;
  }

  #sidebar-main .sidebar-link {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: var(--r-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    font-size: 0 !important; /* Hide text on icon rail */
    position: relative !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
  }

  #sidebar-main .sidebar-link svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin: auto !important;
  }

  #sidebar-main .sidebar-link:hover {
    color: var(--text) !important;
    background: var(--card) !important;
  }

  #sidebar-main .sidebar-link.active {
    color: var(--accent-text) !important;
    background: var(--accent-subtle) !important;
  }

  /* Pin Settings to the Bottom of the Rail */
  #sidebar-main .sidebar-link[data-tab="settings"],
  #sidebar-main .sidebar-link-settings {
    margin-top: auto !important;
    margin-bottom: 8px !important;
  }
  #sidebar-main .sidebar-link[data-tab="settings"] #nav-vix-badge {
    display: none !important; /* VIX badge moved to header */
  }

  /* Accessible Tooltips on Hover/Focus */
  #sidebar-main .sidebar-link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 54px;
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    background: var(--bg-surface);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    font-family: var(--font-sans);
  }

  #sidebar-main .sidebar-link:hover::after,
  #sidebar-main .sidebar-link:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  /* Main Viewport fills remaining space */
  .main-viewport {
    margin-left: 0 !important;
    width: calc(100% - 64px) !important;
    max-width: calc(100% - 64px) !important;
    flex: 1 !important;
    box-sizing: border-box !important;
    padding: 0 20px 40px !important;
    background-color: var(--bg-canvas) !important;
  }
}

/* ==============================================================================
   5. PAGE HEADER (MODERN TOP BAR)
   ============================================================================== */
.page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 0 !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
  gap: var(--space-4) !important;
}

.header-title-area {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
}

/* Desktop Brand Wordmark */
.header-brand-desktop {
  display: none !important;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.header-brand-divider {
  display: none !important;
}
@media (min-width: 1025px) {
  .header-brand-desktop {
    display: inline-block !important;
  }
  .header-brand-divider {
    display: inline-block !important;
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
  }
}

.header-title-area h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

.header-subtitle {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 3px !important;
}

#header-time-ist {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text-muted) !important;
}

.market-status-compact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 7px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
}
.market-status-compact.open {
  color: var(--profit) !important;
  border-color: var(--profit-border) !important;
  background: var(--profit-bg) !important;
}
.market-status-compact.closed {
  color: var(--text-subtle) !important;
}
.market-status-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

/* Header Right Actions (Desktop Only) */
@media (min-width: 769px) {
  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
  }
}

/* VIX Top Bar Badge */
.header-vix-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-family: var(--font-mono);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 1.4;
}
.header-vix-val {
  color: var(--text) !important;
  font-weight: 700;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}
.theme-toggle-btn:hover {
  color: var(--text) !important;
  border-color: var(--text-muted) !important;
}
.theme-toggle-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

/* ==============================================================================
   6. MOBILE NAVIGATION (<= 768px)
   ============================================================================== */
@media (max-width: 1024px) {
  .main-viewport {
    padding: 0 14px 80px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-brand-desktop,
  .header-brand-divider {
    display: none !important;
  }

  /* Fixed Bottom Bar */
  .bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    z-index: 1000 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  .bottom-nav .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    min-width: 52px !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    font-family: var(--font-sans) !important;
  }

  .bottom-nav .nav-item svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
  }

  .bottom-nav .nav-item.active {
    color: var(--accent-text) !important;
  }
}

/* ==============================================================================
   7. ACCESSIBILITY & MOTION
   ============================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==============================================================================
   8. COMPREHENSIVE LIGHT & DARK THEME OVERRIDES (SCREEN 1 & GLOBAL COCKPIT)
   Eliminates all dark cutouts in light mode, overrides hardcoded rainbow colors,
   kills cyan neon hover halos, and enforces strict institutional color discipline.
   ============================================================================== */

/* --- Card Base & Elimination of Nested Shadows/Glass Halo --- */
.card,
.modern-card,
.glass-card,
.desk-card,
.kpi-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  padding: 18px;
}

/* Desk Card Hover: Subtle elevation, ZERO cyan glow */
.clickable-desk-card:hover,
.desk-card:hover {
  transform: translateY(-1px) !important;
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-md) !important;
}

[data-theme="light"] .clickable-desk-card:hover,
[data-theme="light"] .desk-card:hover {
  border-color: rgba(47, 91, 255, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* --- Elimination of the Dark Cutout in Desk Stats Area --- */
.desk-stats-row {
  background: transparent !important; /* Strictly kills rgba(0,0,0,0.3) dark box */
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 12px 0 0 0 !important;
  margin-top: 10px !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--space-2) !important;
}

.stat-cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: left !important;
}

.stat-cell-label {
  font-size: 11px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  margin-bottom: 2px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Neutral text colors across dark and light themes (NO rainbow) */
.stat-cell-val {
  font-family: var(--mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

/* Strip any legacy rainbow color overrides */
.stat-cell-val.cyan,
.stat-cell-val.gold,
.stat-cell-val.purple,
.stat-cell-val.blue {
  color: var(--text) !important;
  text-shadow: none !important;
}

.desk-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 200px !important;
}

.desk-desc {
  min-height: 32px !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* Strictly ONLY Net PnL gets colored: Positive = Green (var(--up)), Negative = Red (var(--down)) */
.stat-cell-val.pnl-up,
.stat-cell-val .pnl-pts.pnl-up,
.pnl-pts.pnl-up {
  color: var(--up) !important;
  text-shadow: none !important;
}
.stat-cell-val.pnl-down,
.stat-cell-val .pnl-pts.pnl-down,
.pnl-pts.pnl-down {
  color: var(--down) !important;
  text-shadow: none !important;
}
.stat-cell {
  min-height: 42px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.stat-cell-val {
  min-height: 30px !important;
}
.stat-cell-val .pnl-inr {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  margin-top: 1px !important;
}

/* Dynamic Win-Ratio Bar (Strictly aligned across all cards via margin-top: 14px) */
.desk-win-ratio-bar {
  width: 100% !important;
  height: 4px !important;
  background: var(--raise) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  display: flex !important;
  margin-top: 14px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

[data-theme="light"] .desk-win-ratio-bar {
  background: var(--border) !important;
}

.desk-bar-win {
  height: 100% !important;
  background: var(--up) !important;
  transition: width 0.3s ease !important;
}
.desk-bar-loss {
  height: 100% !important;
  background: var(--down) !important;
  transition: width 0.3s ease !important;
}

/* --- Models Ghost Button (Replaces glowing cyan blob) --- */
.desk-click-hint,
.btn-models-ghost {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.clickable-desk-card:hover .desk-click-hint,
.clickable-desk-card .desk-click-hint,
.desk-card:hover .btn-models-ghost,
.btn-models-ghost:hover {
  background: var(--card-hover) !important;
  color: var(--text) !important;
  border-color: var(--muted) !important;
  box-shadow: none !important;
}

/* --- Master KPI Tiles: Color Discipline --- */
.kpi-card {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.kpi-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  text-transform: none !important;
  margin: 0 !important;
  letter-spacing: normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.kpi-label span {
  display: none !important; /* Hide old inline emoji spans */
}
.kpi-value {
  font-family: var(--mono) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--text) !important; /* Strictly neutral by default */
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: none !important;
}
.kpi-value.cyan,
.kpi-value.gold,
.kpi-value.purple,
.kpi-value.blue {
  color: var(--text) !important; /* Kill rainbow */
  text-shadow: none !important;
}
#kpi-net-pnl.kpi-value,
.kpi-value.pnl-up,
.kpi-value.green {
  color: var(--up) !important;
  text-shadow: none !important;
}
#kpi-net-pnl.kpi-value.pnl-down,
.kpi-value.pnl-down,
.kpi-value.rose,
.kpi-value.red {
  color: var(--down) !important;
  text-shadow: none !important;
}
.kpi-sub-inr {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 600 !important;
  margin-top: 1px !important;
}
.kpi-sub {
  font-size: 11px !important;
  color: var(--text-subtle) !important;
  margin-top: 2px !important;
}

/* --- Segmented Desk Filter Tabs --- */
.instrument-tabs-bar,
.instrument-tabs-bar.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: inline-flex !important;
  gap: 2px !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.instrument-tab-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font) !important;
}
.instrument-tab-btn:hover {
  color: var(--text) !important;
}
.instrument-tab-btn.active {
  background: var(--card) !important;
  color: var(--accent-text) !important;
  box-shadow: var(--shadow-sm) !important;
}
.tab-count {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  background: var(--raise) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  color: var(--muted) !important;
}
[data-theme="light"] .tab-count {
  background: var(--border) !important;
  color: var(--muted) !important;
}
.instrument-tab-btn.active .tab-count {
  background: var(--border) !important;
  color: var(--text) !important;
}

/* --- Top Header Actions in Light & Dark Mode --- */
.horizon-switch-container {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: inline-flex !important;
  gap: 2px !important;
}
.horizon-btn {
  color: var(--muted) !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--font) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.horizon-btn:hover {
  color: var(--text) !important;
}
.horizon-btn.active {
  background: var(--card) !important;
  color: var(--accent-text) !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
}
.live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--up) !important;
  box-shadow: 0 0 6px var(--up-border) !important;
  animation: none !important;
}

.morning-intel-btn {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
}
.morning-intel-btn:hover {
  background: var(--card-hover) !important;
  border-color: var(--muted) !important;
}

/* --- Slim Broker Session Banner --- */
.live-session-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 10px 16px !important;
  margin-bottom: 16px !important;
}
.broker-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
  display: inline-block;
  box-shadow: 0 0 8px var(--up);
}
.broker-name-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-right: 4px;
}
.broker-pill-combo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--raise);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--up);
}
.broker-privacy-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  margin-left: 8px;
  font-family: var(--mono);
}
.btn-privacy-toggle {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.btn-privacy-toggle:hover {
  background: var(--card-hover) !important;
  border-color: var(--border-focus) !important;
}

.meta-chip,
.meta-chip-slim {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
}
.meta-chip-val,
.meta-chip-slim strong {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* --- Global Theme Polish for Light Mode --- */
[data-theme="light"] .desk-header .desk-title {
  color: #0F172A !important;
}
[data-theme="light"] .desk-desc {
  color: #64748B !important;
}
[data-theme="light"] .header-vix-badge {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}
[data-theme="light"] .theme-toggle-btn {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}
[data-theme="light"] #sidebar-main.sidebar {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}
[data-theme="light"] #sidebar-main .sidebar-link {
  color: #64748B !important;
}
[data-theme="light"] #sidebar-main .sidebar-link:hover {
  background: #EEF1F5 !important;
  color: #0F172A !important;
}
[data-theme="light"] #sidebar-main .sidebar-link.active {
  background: rgba(47, 91, 255, 0.1) !important;
  color: #2F5BFF !important;
}

/* --- Global Theme Polish for Dark Mode --- */
[data-theme="dark"] .desk-header .desk-title {
  color: #E6EAF2 !important;
}
[data-theme="dark"] .desk-desc {
  color: #7C879B !important;
}
[data-theme="dark"] .header-vix-badge {
  background: #0E1219 !important;
  border-color: #1F2735 !important;
  color: #7C879B !important;
}
[data-theme="dark"] .theme-toggle-btn {
  background: #0E1219 !important;
  border-color: #1F2735 !important;
  color: #7C879B !important;
}
[data-theme="dark"] #sidebar-main.sidebar {
  background: #0E1219 !important;
  border-color: #1F2735 !important;
}
[data-theme="dark"] #sidebar-main .sidebar-link {
  color: #7C879B !important;
}
[data-theme="dark"] #sidebar-main .sidebar-link:hover {
  background: #131822 !important;
  color: #E6EAF2 !important;
}
[data-theme="dark"] #sidebar-main .sidebar-link.active {
  background: rgba(76, 141, 255, 0.15) !important;
  color: #4C8DFF !important;
}

/* ==============================================================================
   9. TIMEFRAME SWITCHER (.seg STYLE)
   ============================================================================== */
.timeframe-switch-container,
.timeframe-switch-container.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: inline-flex !important;
  gap: 2px !important;
}

.tf-btn,
.timeframe-switch-container .tf-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: var(--font) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.tf-btn:hover {
  color: var(--text) !important;
}

.tf-btn.active,
.timeframe-switch-container .tf-btn.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ==============================================================================
   10. MODAL AUDIT STYLING (ZERO GLOW BORDERS, CLEAN ELEVATION)
   ============================================================================== */
.modal-overlay {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.desk-breakdown-modal-box {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
  max-width: 900px !important;
  width: 92% !important;
  padding: 24px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .desk-breakdown-modal-box {
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.15) !important;
}
.desk-breakdown-modal-box::before {
  display: none !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}
.modal-pretitle {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}
#desk-modal-title {
  color: var(--text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin: 4px 0 0 0 !important;
}
.modal-close-btn {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--r-sm) !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  line-height: 1 !important;
}
.modal-close-btn:hover {
  background: var(--card-hover) !important;
  color: var(--text) !important;
  border-color: var(--muted) !important;
}

/* Modal Master KPI Strip */
.desk-modal-kpi-bar {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  box-shadow: none !important;
}
.desk-modal-kpi-bar .stat-cell-label {
  font-size: 11px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.desk-modal-kpi-bar .stat-cell-val {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
#desk-modal-kpi-pnl {
  color: var(--up) !important;
}
#desk-modal-kpi-wr,
#desk-modal-kpi-pf,
#desk-modal-kpi-trades {
  color: var(--text) !important;
}

/* Underlying Instrument Tabs in Modal (.seg Style) */
.desk-instrument-tab-section {
  margin-bottom: 16px !important;
}
.desk-instrument-pills {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: inline-flex !important;
  gap: 2px !important;
  flex-wrap: wrap !important;
}
.desk-inst-pill,
.analytics-inst-pill {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
}
.desk-inst-pill:hover,
.analytics-inst-pill:hover {
  color: var(--text) !important;
}
.desk-inst-pill.active,
.analytics-inst-pill.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
  border: none !important;
}

/* Outcome Summary Pill Row in Modal */
.ledger-outcome-summary-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.outcome-stat-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
.outcome-stat-pill strong {
  font-family: var(--mono) !important;
  color: var(--text) !important;
}
.outcome-stat-pill.win .dot { background: var(--up) !important; width: 6px; height: 6px; border-radius: 50%; }
.outcome-stat-pill.be .dot { background: var(--warn) !important; width: 6px; height: 6px; border-radius: 50%; }
.outcome-stat-pill.loss .dot { background: var(--down) !important; width: 6px; height: 6px; border-radius: 50%; }

/* Model Cards in Modal */
.model-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.15s ease !important;
}
.model-card:hover {
  background: var(--card-hover) !important;
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-md) !important;
  transform: none !important;
}
.model-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.model-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.model-stats-strip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}
.model-outcome-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-family: var(--mono) !important;
}
.model-outcome-pill.win { background: var(--up-bg) !important; color: var(--up) !important; border: 1px solid var(--up-border) !important; }
.model-outcome-pill.be { background: var(--warn-bg) !important; color: var(--warn) !important; border: 1px solid var(--warn-border) !important; }
.model-outcome-pill.loss { background: var(--down-bg) !important; color: var(--down) !important; border: 1px solid var(--down-border) !important; }

.model-deepdive-toggle-btn {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.model-deepdive-toggle-btn:hover {
  background: var(--card-hover) !important;
  color: var(--text) !important;
  border-color: var(--muted) !important;
}

.model-progress-bar-container {
  background: var(--raise) !important;
  height: 3.5px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  margin-top: 10px !important;
}
.model-progress-fill {
  height: 100% !important;
  background: var(--up) !important;
}

/* ==============================================================================
   11. UNIVERSAL NO-GLOW RULE (REPLACES ALL GLOW BORDERS GLOBALLY)
   ============================================================================== */
*, *::before, *::after {
  text-shadow: none !important;
}

/* ==============================================================================
   12. SCREEN 2: DASHBOARD (EQUITY CURVE & MODEL ATTRIBUTION DONUT)
   ============================================================================== */
.analytics-filter-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 16px 20px !important;
}

.analytics-filter-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.analytics-summary-strip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.analytics-summary-strip .pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

.analytics-summary-strip .pill strong {
  font-family: var(--mono) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

.analytics-summary-strip .pill strong.green {
  color: var(--up) !important;
}

.analytics-summary-strip .pill strong.rose {
  color: var(--down) !important;
}

.analytics-seg-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.analytics-seg-wrap::-webkit-scrollbar {
  height: 4px;
}
.analytics-seg-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

#analytics-pills-bar.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: inline-flex !important;
  gap: 2px !important;
}

#analytics-pills-bar .seg-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

#analytics-pills-bar .seg-btn:hover {
  color: var(--text) !important;
}

#analytics-pills-bar .seg-btn.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 2-Column Side-by-Side Charts Grid (Strictly Uniform Height) */
.dashboard-charts-grid {
  display: grid !important;
  grid-template-columns: 1.85fr 1.15fr !important;
  gap: 16px !important;
  align-items: stretch !important;
}

@media (max-width: 1100px) {
  .dashboard-charts-grid {
    grid-template-columns: 1fr !important;
  }
}

.dashboard-chart-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  min-height: 440px !important;
  box-sizing: border-box !important;
}

.dashboard-chart-card .chart-canvas-wrap {
  flex: 1 !important;
  min-height: 340px !important;
}

.dashboard-chart-card .card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
}

.dashboard-chart-card .pill {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 10px !important;
}

/* Model Attribution Layout */
.attribution-donut-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 16px !important;
  padding-top: 8px !important;
  flex: 1 !important;
}

.donut-canvas-box {
  position: relative !important;
  width: 190px !important;
  height: 190px !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}

.donut-center-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  pointer-events: none !important;
}

.donut-center-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--muted) !important;
}

.donut-center-val {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: var(--mono) !important;
  color: var(--text) !important;
  margin-top: 2px !important;
}

.donut-legend-container {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.donut-legend-container::-webkit-scrollbar {
  width: 4px;
}
.donut-legend-container::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.donut-legend-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
  border-radius: var(--r-sm) !important;
  background: var(--raise) !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
}

.donut-legend-row:hover {
  border-color: var(--border) !important;
  background: var(--card-hover) !important;
}

.donut-legend-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.donut-legend-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.donut-legend-name {
  color: var(--text) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.donut-legend-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}

.donut-legend-val {
  color: var(--text) !important;
  font-weight: 600 !important;
}

.donut-legend-pct {
  color: var(--muted) !important;
}

/* ==============================================================================
   13. SCREEN 3: LIVE TRADE BOOK
   ============================================================================== */
@keyframes tickUpFlash {
  0% { background-color: var(--up-bg); color: var(--up); }
  100% { background-color: transparent; }
}

@keyframes tickDownFlash {
  0% { background-color: var(--down-bg); color: var(--down); }
  100% { background-color: transparent; }
}

.tick-up {
  animation: tickUpFlash 0.8s ease;
}

.tick-down {
  animation: tickDownFlash 0.8s ease;
}

/* Compact Live Filter Row */
.trade-filters-compact-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}

#trade-book-subtabs.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 2px 3px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

#trade-book-subtabs .seg-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  padding: 0 14px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  line-height: 26px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#trade-book-subtabs .seg-btn:hover {
  background: var(--card-hover) !important;
  color: var(--text) !important;
}

#trade-book-subtabs .seg-btn.active {
  background: var(--card) !important;
  color: var(--accent-text) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Outcome Summary Bar (.pill row) */
#live-trades-outcome-summary-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

#live-trades-outcome-summary-bar .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12px;
  color: var(--muted);
}

#live-trades-outcome-summary-bar .pill strong {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text);
}

#live-trades-outcome-summary-bar .pill strong.green {
  color: var(--up);
}

#live-trades-outcome-summary-bar .pill strong.rose {
  color: var(--down);
}

/* Clickable table row hover */
.clickable-trade-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.clickable-trade-row:hover td {
  background-color: var(--card-hover) !important;
}

/* Modern Trade Detail Modal Clean Styling (Zero Glow) */
.modal-hero-banner {
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  background: var(--raise);
  box-shadow: none !important;
}

.modal-hero-banner.win {
  border-color: var(--up-border);
  background: var(--up-bg);
}

.modal-hero-banner.loss {
  border-color: var(--down-border);
  background: var(--down-bg);
}

.modal-hero-banner.be {
  border-color: var(--border);
  background: var(--raise);
}

/* ==============================================================================
   14. SCREEN 4: ASH OPTIONS
   ============================================================================== */
.ao-collapsible {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.ao-collapse-hdr {
  cursor: pointer !important;
  padding: 14px 20px !important;
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  transition: background 0.15s ease !important;
  box-shadow: none !important;
}

.ao-collapse-hdr:hover {
  background: var(--card-hover) !important;
}

.ao-collapsed .ao-collapse-hdr {
  border-bottom: none !important;
}

.ao-chevron {
  width: 16px !important;
  height: 16px !important;
  color: var(--muted) !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}

.ao-collapsed .ao-chevron {
  transform: rotate(-90deg) !important;
}

.ao-collapse-bdy {
  display: block;
}

.ao-collapsed .ao-collapse-bdy {
  display: none !important;
}

#ao-instrument-filter-bar.seg,
#ao-period-filter-bar.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: inline-flex !important;
}

#ao-instrument-filter-bar .seg-btn,
#ao-period-filter-bar .seg-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

#ao-instrument-filter-bar .seg-btn:hover,
#ao-period-filter-bar .seg-btn:hover {
  color: var(--text) !important;
}

#ao-instrument-filter-bar .seg-btn.active,
#ao-period-filter-bar .seg-btn.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ==============================================================================
   15. SCREEN 5: EQUITY ANALYTICS
   ============================================================================== */
#eq-analytics-period-bar.seg,
#eq-main-tabs.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: inline-flex !important;
}

#eq-analytics-period-bar .seg-btn,
#eq-main-tabs .seg-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

#eq-analytics-period-bar .seg-btn:hover,
#eq-main-tabs .seg-btn:hover {
  color: var(--text) !important;
}

#eq-analytics-period-bar .seg-btn.active,
#eq-main-tabs .seg-btn.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ==============================================================================
   16. SCREEN 6: LIVE MARKET RADAR
   ============================================================================== */
#equity-radar-tabs.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: inline-flex !important;
}

#equity-radar-tabs .seg-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#equity-radar-tabs .seg-btn:hover {
  color: var(--text) !important;
}

#equity-radar-tabs .seg-btn.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

.market-strength-gauge-card {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

#table-market-radar tr.clickable-trade-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

#table-market-radar tr.clickable-trade-row:hover td {
  background: var(--card-hover) !important;
}

/* ==============================================================================
   17. SCREEN 7: EQUITY LIVE TRADE BOOK
   ============================================================================== */
#eq-trade-profile-seg.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: inline-flex !important;
}

#eq-trade-profile-seg .seg-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#eq-trade-profile-seg .seg-btn:hover {
  color: var(--text) !important;
}

#eq-trade-profile-seg .seg-btn.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

#table-stock-screener tr.clickable-trade-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

#table-stock-screener tr.clickable-trade-row:hover td {
  background: var(--card-hover) !important;
}

#screener-pagination:empty {
  display: none !important;
}

.screener-pagination-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 18px !important;
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Equity Blueprint Modal (Zero Glow) */
#equity-blueprint-modal > div {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--text) !important;
}

#blueprint-header {
  border-bottom: 1px solid var(--border) !important;
}

#blueprint-status-card {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
}

#blueprint-cash-panel,
#blueprint-option-panel {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

#blueprint-stats-strip,
#blueprint-score-breakdown {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}

/* ==============================================================================
   18. SCREEN 8: STOCK NOTES AND IDEAS
   ============================================================================== */
.notes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 16px !important;
}

.note-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.note-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-md) !important;
}

.note-card.pinned {
  border-color: var(--warn) !important;
  background: var(--card) !important;
}

.note-card.plain-note {
  background: var(--card) !important;
}

.note-pin-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.note-pin-btn.pinned {
  color: var(--warn) !important;
  filter: none !important;
}

.note-type-toggle-bar.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: flex !important;
}

.note-mode-btn.seg-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.note-mode-btn.seg-btn:hover {
  color: var(--text) !important;
}

.note-mode-btn.seg-btn.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ==============================================================================
   19. SCREEN 9: STOCK RESEARCH
   ============================================================================== */
.chartink-category-tabs.seg {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 3px !important;
  display: flex !important;
}

.ck-cat-tab.seg-btn {
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.ck-cat-tab.seg-btn:hover {
  color: var(--text) !important;
}

.ck-cat-tab.seg-btn.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

.strategy-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

@media (max-width: 1024px) {
  .strategy-tiles-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .strategy-tiles-grid {
    grid-template-columns: 1fr !important;
  }
}

.ck-scan-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

.ck-scan-card:hover {
  border-color: var(--border-hover) !important;
}

.ck-scan-card.selected {
  border-color: var(--accent) !important;
  background: var(--raise) !important;
  box-shadow: none !important;
}

/* ==============================================================================
   20. SCREEN 10: SETTINGS & RISK CONTROLS (UNIVERSAL MENU STYLE, ZERO GLOW)
   ============================================================================== */
/* Universal Switch Styling — Zero Glow */
.switch {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
}

.switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.switch .slider {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.switch .slider:before {
  position: absolute !important;
  content: "" !important;
  height: 16px !important;
  width: 16px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: #FFFFFF !important;
  border-radius: 50% !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

.switch input:checked + .slider {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

.switch input:checked + .slider:before {
  transform: translateX(20px) !important;
}

/* Master & Per-Instrument Live Switches (.switch.live) — Armed Live State */
.switch.live input:checked + .slider {
  background-color: var(--down) !important;
  border-color: var(--down) !important;
  box-shadow: none !important;
}

/* Settings Panels & Cards */
.settings-group.ao-settings-group {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

.settings-group-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

.settings-section-subtitle {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin: 0 0 16px !important;
  line-height: 1.4 !important;
}

/* 4-Column Responsive Grid for Instrument Cards */
.settings-instruments-grid,
.ao-instrument-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

@media (max-width: 1200px) {
  .settings-instruments-grid,
  .ao-instrument-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .settings-instruments-grid,
  .ao-instrument-cards {
    grid-template-columns: 1fr !important;
  }
}

/* Instrument Card Styling */
.ao-instr-card {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: border-color 0.15s ease !important;
  box-shadow: none !important;
}

.ao-instr-card:hover {
  border-color: var(--border-focus) !important;
}

.ao-instr-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--border) !important;
}

.ao-instr-name {
  font-family: var(--mono) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: 0.02em !important;
}

.ao-instr-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.ao-instr-row label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

/* Timeframe Segmented Control */
.engine-tf-pills.seg,
.mcx-tf-pills.seg,
.ao-instrument-cards .engine-tf-pills {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 2px !important;
  display: flex !important;
  width: 100% !important;
  gap: 2px !important;
}

.engine-tf-pill {
  flex: 1 !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 5px 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: var(--mono) !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.engine-tf-pill:hover {
  color: var(--text) !important;
}

.engine-tf-pill.active {
  background: var(--raise) !important;
  color: var(--accent) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Model Selection Chips */
.ao-instr-models {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.ao-model-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}

.ao-model-chip input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.ao-model-chip:hover {
  color: var(--text) !important;
  border-color: var(--border-focus) !important;
}

.ao-model-chip.checked {
  background: var(--accent-subtle) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent) !important;
}

/* Live Trading Footer in Instrument Cards */
.ao-instr-footer {
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Risk Controls Grid */
.risk-controls-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

@media (max-width: 900px) {
  .risk-controls-grid {
    grid-template-columns: 1fr !important;
  }
}

.risk-input-card {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.risk-input-card input {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 6px 10px !important;
  width: 70px !important;
  text-align: center !important;
}

.risk-input-card input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}

/* Setting Rows (Rules / General / Configuration) */
.setting-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  margin-bottom: 8px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  box-shadow: none !important;
}

.setting-row:hover {
  background: var(--hover) !important;
  border-color: var(--border-hover) !important;
}

.setting-row:last-child {
  margin-bottom: 0 !important;
}

.setting-info {
  flex: 1 !important;
  max-width: 75% !important;
}

.setting-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 2px !important;
}

.setting-desc {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
}

.setting-row select,
.setting-row .filter-select {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.setting-row input[type="text"],
.setting-row input[type="number"],
.setting-row input[type="password"] {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}

.setting-subgroup-title,
.settings-section-subheader {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  padding: 14px 0 8px !important;
  border-top: 1px solid var(--border) !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}


/* Sticky Savebar — Zero Glow */
.savebar {
  position: fixed !important;
  bottom: 0 !important;
  left: 64px !important;
  right: 0 !important;
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 9999 !important;
  transform: translateY(120%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

@media (max-width: 768px) {
  .savebar {
    left: 0 !important;
    padding: 10px 16px !important;
  }
}

.savebar.visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.savebar-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

.savebar-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--text) !important;
}

.savebar-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--warn) !important;
  display: inline-block !important;
}

.savebar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Live Confirmation Modal */
#modal-confirm-live-trading.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-confirm-live-trading.modal-overlay.active {
  display: flex !important;
}

.modal-confirm-box {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  max-width: 440px !important;
  width: 100% !important;
  padding: 24px !important;
  box-shadow: var(--shadow-md) !important;
  text-align: center !important;
}

/* ==============================================================================
   12. INSTITUTIONAL AUDIT FIXES: UNIFORM WIDGETS, CALENDAR HEATMAP, 
       DROPDOWNS, BUTTON RADIUS, & FULL LIGHT MODE FIDELITY
   ============================================================================== */

/* --- 1. Global Dropdown Styling (Zero Cyan Halo, 6px Radius, Custom SVG Arrow) --- */
select,
.filter-select,
.strike-select,
.sub-filter-select,
.setting-row select,
.ao-timeframe-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: var(--raise) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c879b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  padding: 0 28px 0 10px !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 30px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

select:hover,
.filter-select:hover,
.strike-select:hover,
.sub-filter-select:hover {
  border-color: var(--accent-border) !important;
}

select:focus,
select:focus-visible,
.filter-select:focus,
.strike-select:focus,
.sub-filter-select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

[data-theme="light"] select,
[data-theme="light"] .filter-select,
[data-theme="light"] .strike-select,
[data-theme="light"] .sub-filter-select {
  background-color: #FFFFFF !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

select option,
select optgroup {
  background-color: var(--card) !important;
  color: var(--text) !important;
}

[data-theme="light"] select option,
[data-theme="light"] select optgroup {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

/* --- 2. Global Button Radius Reduction (Strictly 6px / var(--r-sm)) --- */
.btn,
.btn-save,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger-ghost,
.ao-instr-save-btn,
.os-instr-save-btn,
.setting-btn,
.modern-nav-btn,
.cal-nav-btn,
.cal-today-btn {
  border-radius: var(--r-sm) !important;
}

/* --- 3. Grid Filters Toolbar: Strict 2-Row Alignment & Universal 32px Height --- */
.grid-filter-toolbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

/* Row 1: Macro Segmented Filters */
.toolbar-row-macro {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

.toolbar-row-macro .seg,
#live-period-filter-bar,
#live-desk-filter-bar,
.desk-filter-bar.seg {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 2px 3px !important;
  margin: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  background: var(--raise) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 2px !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

/* Macro Buttons: Exactly 26px height, 4px border-radius, clean institutional styling */
.toolbar-row-macro .seg-btn,
.toolbar-row-macro .period-filter-pill,
.toolbar-row-macro .desk-filter-pill,
.toolbar-row-macro .instrument-toggle-pill {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  line-height: 26px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 10px !important;
  margin: 0 !important;
  gap: 6px !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

.toolbar-row-macro .seg-btn:hover,
.toolbar-row-macro .period-filter-pill:hover,
.toolbar-row-macro .desk-filter-pill:hover,
.toolbar-row-macro .instrument-toggle-pill:hover {
  background: var(--card-hover) !important;
  color: var(--text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.toolbar-row-macro .seg-btn.active,
.toolbar-row-macro .period-filter-pill.active,
.toolbar-row-macro .desk-filter-pill.active,
.toolbar-row-macro .instrument-toggle-pill.active {
  background: var(--card) !important;
  color: var(--accent-text) !important;
  font-weight: 600 !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Badges inside desk filter pills - neutral data counts */
.toolbar-row-macro .pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 16px !important;
  min-width: 16px !important;
  line-height: 16px !important;
  padding: 0 5px !important;
  margin: 0 !important;
  margin-left: 2px !important;
  border-radius: 9999px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: var(--border) !important;
  color: var(--muted) !important;
  box-sizing: border-box !important;
  border: none !important;
}

.toolbar-row-macro .seg-btn.active .pill-badge,
.toolbar-row-macro .desk-filter-pill.active .pill-badge,
.toolbar-row-macro .instrument-toggle-pill.active .pill-badge {
  background: var(--border) !important;
  color: var(--text) !important;
}

/* Month dropdown in Macro row (when visible) */
.toolbar-row-macro select,
.toolbar-row-macro .filter-select {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: var(--r-sm) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Light Theme Overrides for Row 1 Macro Segmented Controls */
[data-theme="light"] .toolbar-row-macro .seg,
[data-theme="light"] #live-period-filter-bar,
[data-theme="light"] #live-desk-filter-bar,
[data-theme="light"] .desk-filter-bar.seg {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .toolbar-row-macro .seg-btn,
[data-theme="light"] .toolbar-row-macro .period-filter-pill,
[data-theme="light"] .toolbar-row-macro .desk-filter-pill,
[data-theme="light"] .toolbar-row-macro .instrument-toggle-pill {
  color: #64748B !important;
  background: transparent !important;
}

[data-theme="light"] .toolbar-row-macro .seg-btn:hover,
[data-theme="light"] .toolbar-row-macro .period-filter-pill:hover,
[data-theme="light"] .toolbar-row-macro .desk-filter-pill:hover,
[data-theme="light"] .toolbar-row-macro .instrument-toggle-pill:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

[data-theme="light"] .toolbar-row-macro .seg-btn.active,
[data-theme="light"] .toolbar-row-macro .period-filter-pill.active,
[data-theme="light"] .toolbar-row-macro .desk-filter-pill.active,
[data-theme="light"] .toolbar-row-macro .instrument-toggle-pill.active {
  background: #FFFFFF !important;
  color: #2F5BFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .toolbar-row-macro .pill-badge {
  background: #E2E8F0 !important;
  color: #64748B !important;
}

[data-theme="light"] .toolbar-row-macro .seg-btn.active .pill-badge,
[data-theme="light"] .toolbar-row-macro .desk-filter-pill.active .pill-badge,
[data-theme="light"] .toolbar-row-macro .instrument-toggle-pill.active .pill-badge {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Row 2: Micro Execution Filters */
.toolbar-row-micro {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

.toolbar-row-micro > select,
.toolbar-row-micro > input,
.toolbar-row-micro > button,
.toolbar-row-micro .filter-select,
.toolbar-row-micro .filter-input,
.toolbar-row-micro .btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: var(--r-sm) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.toolbar-row-micro .search-input-wrap {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  margin: 0 !important;
}

.toolbar-row-micro .search-input-wrap input {
  height: 32px !important;
  min-height: 32px !important;
  border-radius: var(--r-sm) !important;
  padding-left: 28px !important;
  box-sizing: border-box !important;
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

[data-theme="light"] .toolbar-row-micro .search-input-wrap input {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}

/* --- 4. Timeframe & Models 2-Row Grid Layout (.ao-instr-card) --- */
.ao-instr-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.ao-instr-row label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.engine-tf-pills {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
  background: var(--raise) !important;
  padding: 3px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border) !important;
  box-sizing: border-box !important;
}

.engine-tf-pill {
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.engine-tf-pill.active {
  background: var(--card) !important;
  color: var(--accent-text) !important;
  box-shadow: var(--shadow-sm) !important;
}

.ao-instr-models {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
}

.ao-model-chip {
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.ao-model-chip input {
  display: none !important;
}

/* Row 1: M1, M1A, M2 span 2 cols each = 6 cols */
.ao-model-chip:nth-child(1) { grid-column: span 2; }
.ao-model-chip:nth-child(2) { grid-column: span 2; }
.ao-model-chip:nth-child(3) { grid-column: span 2; }
/* Row 2: M3, FVG span 3 cols each = 6 cols */
.ao-model-chip:nth-child(4) { grid-column: span 3; }
.ao-model-chip:nth-child(5) { grid-column: span 3; }

.ao-model-chip.checked,
.ao-model-chip:has(input:checked) {
  background: var(--accent-subtle) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent-text) !important;
}

/* --- 5. Dashboard Calendar PnL Heatmap & Companion Charts --- */
.dashboard-calendar-card {
  padding: 20px !important;
  margin-top: 16px !important;
}

.dashboard-calendar-grid {
  display: grid !important;
  grid-template-columns: 1.85fr 1.15fr !important;
  gap: 20px !important;
  align-items: stretch !important;
}

@media (max-width: 1100px) {
  .dashboard-calendar-grid {
    grid-template-columns: 1fr !important;
  }
}

.calendar-heatmap-panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.calendar-heatmap-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.calendar-nav-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.calendar-month-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  min-width: 130px !important;
  text-align: center !important;
}

.cal-nav-btn {
  padding: 4px 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  height: 28px !important;
  min-height: 28px !important;
  line-height: 1 !important;
}

.cal-today-btn {
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  height: 28px !important;
  min-height: 28px !important;
  margin-left: 4px !important;
}

.calendar-grid-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.calendar-grid-header {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) 1.15fr !important;
  gap: 4px !important;
}

.cal-th {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-align: center !important;
  padding: 6px 2px !important;
  text-transform: uppercase !important;
}

.cal-th-week {
  color: var(--accent) !important;
  text-align: right !important;
  padding-right: 8px !important;
}

.calendar-days-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) 1.15fr !important;
  gap: 4px !important;
}

.cal-day-cell {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 4px 6px !important;
  min-height: 52px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

.cal-day-cell.dimmed {
  opacity: 0.25 !important;
  background: transparent !important;
  border-color: transparent !important;
}

.cal-day-cell.profit-day {
  background: var(--up-bg) !important;
  border-color: var(--up-border) !important;
}

.cal-day-cell.loss-day {
  background: var(--down-bg) !important;
  border-color: var(--down-border) !important;
}

.cal-day-num {
  font-size: 10px !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

.cal-day-pnl {
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: var(--mono) !important;
  text-align: right !important;
  line-height: 1.1 !important;
}

.cal-day-pnl.up {
  color: var(--up) !important;
}

.cal-day-pnl.down {
  color: var(--down) !important;
}

.cal-day-trades {
  font-size: 9.5px !important;
  color: var(--muted) !important;
  text-align: right !important;
  margin-top: 1px !important;
}

.cal-week-cell {
  background: var(--card) !important;
  border: 1px dashed var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 4px 8px !important;
  min-height: 52px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
}

.cal-week-pnl {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  font-family: var(--mono) !important;
  line-height: 1.2 !important;
}

.cal-week-trades {
  font-size: 9.5px !important;
  color: var(--muted) !important;
  margin-top: 1px !important;
}

/* Companion Subcharts Panel */
.calendar-charts-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  justify-content: space-between !important;
}

.calendar-subchart-box {
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

[data-theme="light"] .calendar-subchart-box {
  background: #F8FAFC !important;
  border-color: var(--border) !important;
}

.calendar-subchart-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.subchart-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

/* --- 6. Comprehensive Light Mode Overrides for Perfect Fidelity --- */
[data-theme="light"] .ledger-outcome-summary-bar {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}

[data-theme="light"] .outcome-stat-pill {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] .outcome-stat-pill strong {
  color: #0F172A !important;
}

[data-theme="light"] .outcome-stat-pill.pnl {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .modern-date-navigator {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

[data-theme="light"] .modern-date-navigator .btn,
[data-theme="light"] .modern-date-navigator .modern-nav-btn {
  color: #0F172A !important;
  background: transparent !important;
}

[data-theme="light"] .modern-date-navigator .btn:hover,
[data-theme="light"] .modern-date-navigator .modern-nav-btn:hover {
  background: #FFFFFF !important;
}

[data-theme="light"] .modern-date-navigator input[type="date"],
[data-theme="light"] .modern-date-navigator .filter-input {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .seg {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
}

[data-theme="light"] .seg-btn {
  color: #64748B !important;
}

[data-theme="light"] .seg-btn:hover {
  color: #0F172A !important;
}

[data-theme="light"] .seg-btn.active {
  background: #FFFFFF !important;
  color: #2F5BFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Breakeven pill badge high contrast */
.pill-be,
.pill-warning {
  background: rgba(245, 165, 36, 0.12) !important;
  color: var(--warn) !important;
  border: 1px solid rgba(245, 165, 36, 0.28) !important;
}

[data-theme="light"] .pill-be,
[data-theme="light"] .pill-warning {
  background: rgba(183, 121, 31, 0.1) !important;
  color: #B7791F !important;
  border: 1px solid rgba(183, 121, 31, 0.28) !important;
}

/* Table Hover in Light Mode */
[data-theme="light"] .trade-table tbody tr:hover {
  background: #F8FAFC !important;
}

/* ==============================================================================
   6. BATCH 2 & 3 ENHANCEMENTS: ENGINE CARDS, TOOLBAR, SEARCH, NET ALPHA, TOASTS
   ============================================================================== */

/* --- 6.1 Instrument Cards: Aligned Live Trading Row & Strike Mode --- */
.ao-instr-live-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 6px 0 10px 0 !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
}

.ao-instr-live-row .ao-live-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.ao-instr-live-row .ao-live-label .live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--down) !important;
  display: inline-block !important;
  margin-right: 6px !important;
}

/* Equal vertical alignment across all cards in Ash Spot and Ash Direct */
.ao-instr-card .ao-instr-row:has(.engine-tf-pills) {
  min-height: 58px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.ao-instr-card .ao-instr-row:has(.ao-instr-strike-mode),
.ao-instr-card .ao-instr-row:has(.os-instr-strike-mode) {
  min-height: 54px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  flex-direction: column !important;
}

.ao-instr-strike-mode,
.os-instr-strike-mode {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}

#os-settings-panel .ao-instr-card {
  min-height: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* --- 6.2 Grid Filters Toolbar 32px Alignment & Micro Elements --- */
.toolbar-row-micro {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.toolbar-row-micro > * {
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
}

/* Modern Date Navigator: No cyan glow, exact 32px height, theme color calendar icon */
.modern-date-navigator {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  min-height: 32px !important;
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 2px 4px !important;
  gap: 4px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease !important;
}

.modern-date-navigator:hover,
.modern-date-navigator:focus-within {
  border-color: var(--border-focus) !important;
  box-shadow: none !important;
}

.modern-date-navigator .modern-nav-btn,
.modern-date-navigator .btn {
  height: 26px !important;
  min-height: 26px !important;
  line-height: 26px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  order: unset !important;
}

.modern-date-navigator .modern-nav-btn:hover,
.modern-date-navigator .btn:hover {
  background: var(--card-hover) !important;
  border-color: var(--border-focus) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.modern-date-navigator input[type="date"],
.modern-date-navigator .modern-date-input,
.modern-date-navigator .filter-input {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  order: unset !important;
}

.modern-date-navigator input[type="date"]:focus,
.modern-date-navigator .modern-date-input:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Theme Accent Calendar Indicator Icon (No cyan glow / box) */
input[type="date"]::-webkit-calendar-picker-indicator,
.modern-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer !important;
  filter: invert(53%) sepia(87%) saturate(1478%) hue-rotate(195deg) brightness(101%) contrast(102%) !important;
  background-color: transparent !important;
  border: none !important;
  opacity: 0.9 !important;
  padding: 0 !important;
  margin-left: 4px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease !important;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
.modern-date-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1 !important;
  transform: none !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Light Theme for Date Navigator */
[data-theme="light"] .modern-date-navigator {
  background: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
}

[data-theme="light"] .modern-date-navigator .modern-nav-btn,
[data-theme="light"] .modern-date-navigator .btn {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .modern-date-navigator .modern-nav-btn:hover,
[data-theme="light"] .modern-date-navigator .btn:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

[data-theme="light"] .modern-date-navigator input[type="date"],
[data-theme="light"] .modern-date-navigator .modern-date-input {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .modern-date-input::-webkit-calendar-picker-indicator {
  filter: invert(34%) sepia(90%) saturate(1915%) hue-rotate(211deg) brightness(98%) contrast(97%) !important;
}

/* --- 6.3 Modern Institutional Search Bar Across App --- */
.search-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  min-height: 32px !important;
}

.search-input-wrap svg {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--muted) !important;
  pointer-events: none !important;
  transition: color 0.15s ease !important;
}

.search-input-wrap:focus-within svg {
  color: var(--accent) !important;
}

.modern-search-input,
.search-input-wrap input,
.search-input,
input[type="search"] {
  height: 32px !important;
  min-height: 32px !important;
  padding-left: 32px !important;
  padding-right: 10px !important;
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.modern-search-input:hover,
.search-input-wrap input:hover,
.search-input:hover {
  border-color: var(--border-focus) !important;
}

.modern-search-input:focus,
.search-input-wrap input:focus,
.search-input:focus,
input[type="search"]:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle) !important;
  background: var(--card) !important;
}

[data-theme="light"] .modern-search-input,
[data-theme="light"] .search-input-wrap input,
[data-theme="light"] .search-input,
[data-theme="light"] input[type="search"] {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .modern-search-input:focus,
[data-theme="light"] .search-input-wrap input:focus,
[data-theme="light"] .search-input:focus,
[data-theme="light"] input[type="search"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(47, 91, 255, 0.15) !important;
  background: #FFFFFF !important;
}

/* Modern Reset Button in Filter Row */
#btn-reset-trade-filters,
.modern-reset-btn {
  height: 32px !important;
  min-height: 32px !important;
  border-radius: var(--r-sm) !important;
  background: var(--raise) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

#btn-reset-trade-filters:hover,
.modern-reset-btn:hover {
  background: var(--card-hover) !important;
  border-color: var(--border-focus) !important;
}

[data-theme="light"] #btn-reset-trade-filters,
[data-theme="light"] .modern-reset-btn {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* --- 6.4 Filtered Net Alpha & KPI Colors Across All Grids --- */
#ledger-stat-pnl,
#analytics-stat-pnl,
.outcome-stat-pill.pnl strong,
.filtered-net-alpha-val {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}

#ledger-stat-pnl.green,
#ledger-stat-pnl.pnl-up,
#analytics-stat-pnl.green,
#analytics-stat-pnl.pnl-up,
.outcome-stat-pill.pnl strong.green,
.outcome-stat-pill.pnl strong.pnl-up,
.pnl-positive,
.pnl-up {
  color: var(--up) !important;
}

#ledger-stat-pnl.rose,
#ledger-stat-pnl.red,
#ledger-stat-pnl.pnl-down,
#analytics-stat-pnl.rose,
#analytics-stat-pnl.red,
#analytics-stat-pnl.pnl-down,
.outcome-stat-pill.pnl strong.rose,
.outcome-stat-pill.pnl strong.red,
.outcome-stat-pill.pnl strong.pnl-down,
.pnl-negative,
.pnl-down {
  color: var(--down) !important;
}

/* --- 6.5 Institutional Toast Notification System --- */
#cyber-toast-container {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  pointer-events: none !important;
}

.modern-toast {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  border-radius: var(--r-sm) !important;
  background: var(--raise) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  pointer-events: auto !important;
  transform: translateY(12px) !important;
  opacity: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  max-width: 420px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modern-toast.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.modern-toast-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modern-toast-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

.modern-toast-msg {
  color: var(--text) !important;
  line-height: 1.3 !important;
}

.modern-toast.toast-info {
  border-left: 3px solid var(--accent) !important;
}
.modern-toast.toast-info .modern-toast-icon {
  color: var(--accent) !important;
}

.modern-toast.toast-success {
  border-left: 3px solid var(--up) !important;
}
.modern-toast.toast-success .modern-toast-icon {
  color: var(--up) !important;
}

.modern-toast.toast-error {
  border-left: 3px solid var(--down) !important;
}
.modern-toast.toast-error .modern-toast-icon {
  color: var(--down) !important;
}

.modern-toast.toast-warning,
.modern-toast.toast-warn {
  border-left: 3px solid var(--warn) !important;
}
.modern-toast.toast-warning .modern-toast-icon,
.modern-toast.toast-warn .modern-toast-icon {
  color: var(--warn) !important;
}

[data-theme="light"] .modern-toast {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .modern-toast-msg {
  color: #0F172A !important;
}

/* ==============================================================================
   9. MOBILE & RESPONSIVE ENGINE (ash-ui-mobile SPECIFICATION)
   Full mobile parity at 360px, 390px, 430px, 768px with ZERO horizontal scroll
   ============================================================================== */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
*, *::before, *::after {
  box-sizing: border-box !important;
}
.card, .grid-kpi > *, .grid-2 > *, .kpi-tile, .desk-card, .kpi-card, .kpi-grid {
  min-width: 0 !important;
}
img, svg, canvas {
  max-width: 100% !important;
}

@media (max-width: 1024px) {
  /* Stop iOS auto-zoom on form focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Main Viewport Container */
  .main-viewport {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px calc(76px + env(safe-area-inset-bottom)) 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Solid 2-Row Sticky Header - Zero Bleed-Through */
  .page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: var(--bg-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px 12px !important;
    margin: 0 -12px 14px -12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    gap: 6px !important;
  }

  [data-theme="light"] .page-header {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  }

  /* Row 1: Left Title Area */
  .header-title-area {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .header-brand-desktop,
  .header-brand-divider,
  .desk-only {
    display: none !important;
  }

  .mob-only {
    display: inline-flex !important;
  }

  .header-title-area > div:not(.desk-only) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #page-main-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Row 1: Right Mobile Actions */
  .mob-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  /* Crucial: Completely hide desktop floating action bar on mobile */
  .header-actions {
    display: none !important;
  }

  /* Row 2: Clock & Live Badges Subtitle */
  .header-subtitle {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #header-time-ist {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--text-muted) !important;
  }

  /* Fixed Bottom Nav with Safe-Area Inset */
  .bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(56px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
  }

  [data-theme="light"] .bottom-nav {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
  }

  .bottom-nav .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 48px !important;
    padding: 4px 6px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    position: relative !important;
    transition: color 0.15s ease !important;
  }

  .bottom-nav .nav-item svg {
    width: 20px !important;
    height: 20px !important;
  }

  .bottom-nav .nav-item.active {
    color: var(--accent-text) !important;
  }

  .bottom-nav .nav-item.active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: var(--accent) !important;
    border-radius: 2px !important;
  }

  /* Broker Session Banner */
  .live-session-card {
    padding: 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .live-session-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .live-session-identity {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .broker-privacy-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .broker-pill-combo {
    white-space: normal !important;
    line-height: 1.3 !important;
    font-size: 10.5px !important;
  }
  .live-session-meta-chips {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* KPI Grids: 2 Columns, First Child Hero */
  .kpi-grid, .grid-kpi {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .kpi-grid > .kpi-card:first-child,
  .grid-kpi > .kpi:first-child {
    grid-column: 1 / -1 !important;
  }

  .kpi-card .kpi-value, .kpi .value {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Desk Cards: 1 Column, 2x2 Stats Grid */
  .desks-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .desk-card {
    padding: 14px 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .desk-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
  }

  .stat-cell-val {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .desk-desc {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* Tables to Cards Transformation */
  .tbl thead,
  .trade-table thead,
  .table-responsive thead {
    display: none !important;
  }

  .tbl, 
  .tbl tbody,
  .trade-table,
  .trade-table tbody,
  .table-responsive,
  .table-responsive tbody {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
  }

  .tbl tr,
  .trade-table tr,
  .table-responsive tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 12px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md, 12px) !important;
    margin-bottom: 10px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  [data-theme="light"] .tbl tr,
  [data-theme="light"] .trade-table tr,
  [data-theme="light"] .table-responsive tr {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  .tbl td,
  .trade-table td,
  .table-responsive td {
    display: flex !important;
    flex-direction: column !important;
    border: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }

  .tbl td::before,
  .trade-table td::before,
  .table-responsive td::before {
    content: attr(data-label);
    color: var(--muted) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }

  /* Span full width for contract, header, or wide items */
  .tbl td.span-2,
  .tbl td.trade-col-contract,
  .trade-table td.span-2,
  .table-responsive td.span-2 {
    grid-column: 1 / -1 !important;
  }

  .tbl .trade-col-contract,
  .trade-table .trade-col-contract {
    order: 1 !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
  }

  .tbl .trade-col-pnl,
  .trade-table .trade-col-pnl {
    order: 2 !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 6px !important;
    margin-bottom: 4px !important;
    text-align: right !important;
    align-items: flex-end !important;
  }

  .tbl .trade-col-model,
  .trade-table .trade-col-model {
    order: 3 !important;
  }

  .tbl .trade-col-outcome,
  .trade-table .trade-col-outcome {
    order: 4 !important;
    text-align: right !important;
    align-items: flex-end !important;
  }

  .tbl .trade-col-contract strong,
  .trade-table .trade-col-contract strong {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 13px !important;
  }

  /* Reference tables keep horizontal scroll */
  .table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    display: block !important;
  }

  /* Macro Filters Horizontally Scrollable */
  .toolbar-row-macro {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .toolbar-row-macro::-webkit-scrollbar {
    display: none !important;
  }

  .toolbar-row-macro .seg {
    flex-shrink: 0 !important;
  }

  /* Summary Chips 2x2 Grid */
  #live-trades-outcome-summary-bar,
  .ledger-outcome-summary-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .outcome-stat-pill {
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-height: 28px !important;
  }

  /* Calendar: 7 Columns, Weekly Total Banner Below */
  .dashboard-calendar-card,
  .calendar-heatmap-panel,
  .calendar-charts-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .calendar-grid-header {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  .cal-th-week {
    display: none !important;
  }

  .calendar-days-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .cal-day-cell {
    min-height: 38px !important;
    padding: 2px 3px !important;
  }

  .cal-day-num {
    font-size: 9px !important;
  }

  .cal-day-pnl {
    font-size: 9.5px !important;
  }

  .cal-day-trades {
    display: none !important;
  }

  .cal-week-cell {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 8px !important;
    margin: 2px 0 6px 0 !important;
    background: var(--card) !important;
    border-radius: var(--r-sm) !important;
    border: 1px dashed var(--border) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cal-week-cell::before {
    content: 'Week Total:' !important;
    font-size: 10.5px !important;
    color: var(--muted) !important;
    font-weight: 600 !important;
  }

  .cal-week-trades {
    font-size: 10px !important;
  }

  /* Card Header No Overflow */
  .card-header,
  .calendar-heatmap-header,
  .calendar-subchart-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Chart Canvas Height on Mobile */
  .chart-canvas-wrap,
  .subchart-canvas-wrap {
    height: 220px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Full Screen Modals / Sheets on Phone */
  .modal-dialog,
  .trade-modal-box {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* ============================================================
     ASH OPTIONS MOBILE MODERNIZATION (2x2 KPI + BOTTOM SHEET + CARDS)
     ============================================================ */

  /* Balanced 2x2 Symmetrical KPI Grid */
  #view-ash-options .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #view-ash-options .kpi-grid > .kpi-card:first-child {
    grid-column: auto !important;
  }
  #view-ash-options .kpi-card {
    padding: 12px 14px !important;
  }

  /* Ash Options Mobile Filter Trigger Bar (Solution 1) */
  .ao-mobile-filter-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .ao-mob-search-wrap {
    flex: 1 !important;
    position: relative !important;
  }
  .ao-filter-sheet-btn {
    white-space: nowrap !important;
    font-weight: 600 !important;
    border-radius: var(--r-sm) !important;
    background: var(--raise) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    flex-shrink: 0 !important;
    height: 38px !important;
    padding: 0 14px !important;
  }
  .ao-filter-sheet-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }

  /* Bottom Sheet Overlay on Mobile */
  #ao-filter-sheet-overlay.modal-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    z-index: 10000 !important;
  }
  .ao-filter-bottom-sheet {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 12px 20px 24px !important;
    animation: aoSlideUpSheet 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
    max-height: 85vh !important;
    box-sizing: border-box !important;
  }

  @keyframes aoSlideUpSheet {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .sheet-handle-wrap {
    display: flex !important;
    justify-content: center !important;
    padding: 4px 0 12px !important;
    cursor: pointer !important;
  }
  .sheet-drag-handle {
    width: 38px !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: var(--muted) !important;
    opacity: 0.4 !important;
  }

  /* Desktop Filter Toolbar Hidden on Mobile */
  #ao-desktop-filters {
    display: none !important;
  }

  /* Ash Options Institutional Mobile Trade Cards */
  #ao-trades-body .trade-table,
  #ao-trades-body .trade-table tbody {
    display: block !important;
    width: 100% !important;
  }

  #ao-trades-body .trade-table tr.clickable-trade-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 12px !important;
    padding: 14px 16px !important;
    border-radius: var(--r-md) !important;
    margin-bottom: 12px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: transform 0.12s ease, border-color 0.15s ease !important;
  }
  #ao-trades-body .trade-table tr.clickable-trade-row:active {
    transform: scale(0.985) !important;
  }
  #ao-trades-body .trade-table tr.row-active-trade {
    border-color: rgba(6, 182, 212, 0.45) !important;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.12) !important;
  }

  /* Top Row: Contract Symbol (Left) & Outcome Pill (Right) */
  #ao-trades-body .trade-table td.trade-col-contract {
    grid-column: 1 / 2 !important;
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-contract::before {
    display: none !important;
  }
  #ao-trades-body .trade-table td.trade-col-contract strong {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  #ao-trades-body .trade-table td.trade-col-outcome {
    grid-column: 2 / 3 !important;
    order: 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-outcome::before {
    display: none !important;
  }

  /* Sub-row: Model + Desk Badge (Left) & Execution Time (Right) */
  #ao-trades-body .trade-table td.trade-col-model {
    grid-column: 1 / 2 !important;
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: var(--muted) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-model::before {
    display: none !important;
  }

  #ao-trades-body .trade-table td.trade-col-time {
    grid-column: 2 / 3 !important;
    order: 4 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    font-size: 11px !important;
    font-family: var(--mono) !important;
    color: var(--muted) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-time::before {
    display: none !important;
  }

  /* Hero P&L & Capital Req */
  #ao-trades-body .trade-table td.trade-col-pnl {
    grid-column: 1 / 2 !important;
    order: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    border: none !important;
    padding: 6px 0 2px !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-pnl::before {
    content: "NET P&L" !important;
    font-size: 9.5px !important;
    color: var(--muted) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
  }
  #ao-trades-body .trade-table td.trade-col-pnl .ao-pts-num {
    font-size: 17px !important;
    font-weight: 800 !important;
    font-family: var(--mono) !important;
    line-height: 1.2 !important;
  }
  #ao-trades-body .trade-table td.trade-col-pnl .ao-inr-num {
    font-size: 11.5px !important;
    font-family: var(--mono) !important;
    color: var(--muted) !important;
    margin-top: 1px !important;
  }

  #ao-trades-body .trade-table td.trade-col-capital {
    grid-column: 2 / 3 !important;
    order: 6 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    border: none !important;
    padding: 6px 0 2px !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-capital::before {
    content: "CAPITAL" !important;
    font-size: 9.5px !important;
    color: var(--muted) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
  }
  #ao-trades-body .trade-table td.trade-col-capital .ao-cap-num {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    font-family: var(--mono) !important;
    color: var(--text) !important;
  }

  /* Price Levels Row: Entry (Left) & Exit (Right) */
  #ao-trades-body .trade-table td.trade-col-entry {
    grid-column: 1 / 2 !important;
    order: 7 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 8px !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-entry::before {
    content: "ENTRY" !important;
    font-size: 9.5px !important;
    color: var(--muted) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 1px !important;
  }
  #ao-trades-body .trade-table td.trade-col-entry .ao-price-num {
    font-size: 12.5px !important;
    font-family: var(--mono) !important;
    color: var(--text) !important;
  }

  #ao-trades-body .trade-table td.trade-col-exit {
    grid-column: 2 / 3 !important;
    order: 8 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 8px !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-exit::before {
    content: "EXIT" !important;
    font-size: 9.5px !important;
    color: var(--muted) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 1px !important;
  }
  #ao-trades-body .trade-table td.trade-col-exit .ao-price-num {
    font-size: 12.5px !important;
    font-family: var(--mono) !important;
    color: var(--text) !important;
  }

  /* SL (Left) & T1 (Right) */
  #ao-trades-body .trade-table td.trade-col-sl {
    grid-column: 1 / 2 !important;
    order: 9 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-sl::before {
    content: "STOP LOSS" !important;
    font-size: 9.5px !important;
    color: var(--rose) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 1px !important;
  }
  #ao-trades-body .trade-table td.trade-col-sl .ao-price-num {
    font-size: 12.5px !important;
    font-family: var(--mono) !important;
    color: var(--rose) !important;
    font-weight: 600 !important;
  }

  #ao-trades-body .trade-table td.trade-col-t1 {
    grid-column: 2 / 3 !important;
    order: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #ao-trades-body .trade-table td.trade-col-t1::before {
    content: "TARGET 1" !important;
    font-size: 9.5px !important;
    color: var(--emerald) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 1px !important;
  }
  #ao-trades-body .trade-table td.trade-col-t1 .ao-price-num {
    font-size: 12.5px !important;
    font-family: var(--mono) !important;
    color: var(--emerald) !important;
    font-weight: 600 !important;
  }

  /* Hide raw desk, T2, T3 on mobile card */
  #ao-trades-body .trade-table td.trade-col-desk,
  #ao-trades-body .trade-table td.trade-col-t2,
  #ao-trades-body .trade-table td.trade-col-t3 {
    display: none !important;
  }
}

/* ============================================================
   DESKTOP PRESERVATION: HIDE MOBILE-ONLY ASH OPTIONS CONTROLS
   ============================================================ */
@media (min-width: 769px) {
  #ao-mobile-filter-bar,
  #ao-filter-sheet-overlay {
    display: none !important;
  }
}