/* ==========================================================================
   ASH INFINITY ENGINE — MISSION CONTROL DESIGN SYSTEM
   Theme: Cyber Obsidian Glassmorphism (Mobile-First & Desktop Cockpit)
   ========================================================================== */

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

:root, [data-theme="dark"] {

  /* ================================================================
     NEW DESIGN PALETTE (official canonical tokens)
     ================================================================ */

  /* Surfaces */
  --bg:           #000000;
  --sidebar:      #0f0f12;
  --card:         #131215;
  --card-hi:      #1a191d;
  --border:       #26262a;
  --muted:        #28272a;

  /* Text */
  --text:         #f4f4f5;
  --text-dim:     #a1a1aa;
  --text-mute:    #71717a;

  /* Brand / Actions */
  --primary:      #2664ec;
  --primary-soft: rgba(38, 100, 236, 0.15);
  --indigo:       #4f47e7;
  --cyan:         #22d3ee;

  /* Trading Semantics */
  --profit:       #13bb84;
  --profit-bg:    rgba(19, 187, 132, 0.12);
  --loss:         #f43f5e;
  --loss-bg:      rgba(244, 63, 94, 0.12);
  --warn:         #f77816;

  /* ================================================================
     LEGACY ALIASES — every existing var(--emerald), var(--bg-card),
     var(--text-main) etc. continues to resolve correctly.
     DO NOT REMOVE — used throughout the entire CSS & JS.
     ================================================================ */

  --bg-base:          var(--bg);
  --bg-surface:       var(--sidebar);
  --bg-card:          var(--card);
  --bg-card-hover:    var(--card-hi);

  --border-subtle:    var(--border);
  --border-glass:     rgba(255, 255, 255, 0.08);   /* glass-overlay borders keep alpha */
  --border-accent:    rgba(19, 187, 132, 0.3);

  --emerald:          var(--profit);
  --emerald-glow:     var(--profit-bg);
  --cyan-glow:        rgba(34, 211, 238, 0.18);
  --purple:           var(--indigo);
  --purple-glow:      rgba(79, 71, 231, 0.2);
  --gold:             var(--warn);
  --gold-glow:        rgba(247, 120, 22, 0.18);
  --rose:             var(--loss);
  --rose-glow:        var(--loss-bg);
  --accent:           var(--primary);

  --text-main:        var(--text);
  --text-muted:       var(--text-dim);
  --text-sub:         var(--text-mute);

  /* Unchanged tokens */
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px rgba(19, 187, 132, 0.12);

  --nav-height-mobile:    58px;
  --sidebar-width-desktop: 260px;
}

[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-glass: rgba(15, 23, 42, 0.12);
  --border-accent: rgba(5, 150, 105, 0.4);

  --emerald: #059669;
  --emerald-glow: rgba(5, 150, 105, 0.18);
  --cyan: #0284c7;
  --cyan-glow: rgba(2, 132, 199, 0.18);
  --purple: #7c3aed;
  --purple-glow: rgba(124, 58, 237, 0.18);
  --gold: #d97706;
  --gold-glow: rgba(217, 119, 6, 0.18);
  --rose: #dc2626;
  --rose-glow: rgba(220, 38, 38, 0.18);

  --text-main: #0f172a;
  --text-muted: #475569;
  --text-sub: #64748b;

  --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 0 20px rgba(5, 150, 105, 0.1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg-base);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(38, 100, 236, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(79, 71, 231, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(19, 187, 132, 0.03) 0%, transparent 60%);
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: clip;
  font-size: 14px;
  line-height: 1.5;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Light Mode Background & Core Component Overrides */
[data-theme="light"] body {
  background-color: var(--bg-base);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(38, 100, 236, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(79, 71, 231, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(19, 187, 132, 0.03) 0%, transparent 60%);
  color: var(--text-main);
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.2);
}
[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid var(--border-subtle);
}
[data-theme="light"] .glass-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .intel-card,
[data-theme="light"] .screener-card,
[data-theme="light"] .trade-table-container,
[data-theme="light"] .orders-table-container {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .trade-table th {
  background: #f8fafc;
  color: var(--text-muted);
}
[data-theme="light"] .trade-table tr:hover td {
  background: #f1f5f9;
}
[data-theme="light"] .trade-table td {
  color: var(--text-main);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .filter-select,
[data-theme="light"] .filter-input,
[data-theme="light"] .modern-date-input,
[data-theme="light"] .modern-nav-btn {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: var(--text-main);
}
[data-theme="light"] .modal-card,
[data-theme="light"] .trade-modal-box,
[data-theme="light"] .journal-inspect-box,
[data-theme="light"] .morning-intel-modal-box,
[data-theme="light"] .trade-logs-modal-box {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}
[data-theme="light"] .modal-title,
[data-theme="light"] .trade-modal-header h2 {
  color: #0f172a !important;
}
[data-theme="light"] .mobile-trade-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .brand-name {
  background: linear-gradient(90deg, #0f172a 40%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Light theme: make the SVG crossover mask match the light sidebar background */
[data-theme="light"] .brand-logo-svg .logo-crossover-mask {
  fill: #ffffff !important;
}
[data-theme="light"] .brand-tag {
  background: rgba(38, 100, 236, 0.12);
  color: #2664ec;
}
[data-theme="light"] .strike-control-wrap {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .page-header {
  background: rgba(248, 250, 252, 0.95) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .header-title-area h1 {
  color: #0f172a !important;
}

/* Mobile Header Actions (Hidden on Desktop by default) */
.mob-header-actions {
  display: none;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 15px;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-accent);
  transform: translateY(-1px);
}
.theme-toggle-btn:active {
  transform: scale(0.95);
}

/* Quick Controls Trigger Pill (Mobile) */
.quick-sheet-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 20px;
  background: rgba(19, 187, 132, 0.12);
  border: 1px solid rgba(19, 187, 132, 0.35);
  color: var(--emerald);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.quick-sheet-trigger:active {
  transform: scale(0.96);
  background: rgba(19, 187, 132, 0.2);
}
.pulse-dot-cyan {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
  animation: pulseGlow 1.5s infinite;
}

/* Native Bottom Sheets Components */
.sheet-drag-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--text-muted);
  opacity: 0.35;
  margin: 0 auto 14px auto;
  cursor: grab;
}
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.sheet-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.sheet-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}
.sheet-section-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ==========================================================================
   LAYOUT STRUCTURE
   ========================================================================== */

#app-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar (Desktop) */
.sidebar {
  display: none;
  width: var(--sidebar-width-desktop);
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-subtle);
  padding: 24px 20px;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}

/* Main Content Viewport */
.main-viewport {
  flex: 1;
  padding: 20px 16px calc(var(--nav-height-mobile) + 24px) 16px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 768px) {
  .sidebar {
    display: flex;
  }
  .main-viewport {
    margin-left: var(--sidebar-width-desktop);
    padding: 28px 36px 36px 36px;
  }
}

/* Mobile Bottom Navigation Bar */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height-mobile);
  background: rgba(8, 12, 22, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-glass);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 999;
  padding: 0 10px;
}

@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  cursor: pointer;
  background: none;
  border: none;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  transition: all 0.2s ease;
}

.nav-item.active {
  color: var(--primary);
}

.nav-item.active svg {
  stroke: var(--primary);
  filter: drop-shadow(0 0 8px rgba(38, 100, 236, 0.4));
}

/* Desktop Sidebar Nav Elements */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  padding: 0 8px;
}

.brand-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--emerald) 0%, var(--cyan) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-heading);
  color: #040810;
  font-size: 18px;
  box-shadow: 0 0 16px var(--emerald-glow);
}

/* Ash Infinity SVG logo mark in the sidebar */
.brand-logo-svg {
  width: 58px;
  height: 37px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #ffffff 40%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 1. BRAND TAG — blue UI chrome, not financial */
.brand-tag {
  font-size: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
}

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

.sidebar-link.active {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid rgba(38, 100, 236, 0.25);
}

/* System Heartbeat Pill */
.system-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 12px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
  animation: pulse-dot-anim 2s infinite;
}

#sse-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rose);
  flex-shrink: 0;
  transition: background 0.3s ease;
  cursor: default;
}

@keyframes pulse-dot-anim {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(19, 187, 132, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(19, 187, 132, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(19, 187, 132, 0); }
}

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

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.header-title-area h1 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin-bottom: 4px;
}

@media (min-width: 768px) {
  .header-title-area h1 {
    font-size: 30px;
  }
}

.header-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.market-pills-group {
  display: none; /* pills moved to subtitle row — kept for mobile sheet only */
}

/* Compact market status dots in the header subtitle row */
.market-status-compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.market-status-compact.open {
  color: var(--emerald);
  background: rgba(19, 187, 132, 0.08);
  border-color: rgba(19, 187, 132, 0.25);
}
.market-status-compact.closed {
  color: var(--rose);
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.25);
}
.market-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .header-actions {
    width: 100%;
    gap: 8px;
  }

  .horizon-switch-container {
    flex: 1 1 auto;
  }

  .morning-intel-btn {
    flex: 1 1 auto;
    font-size: 11px;
    padding: 6px 10px;
  }

  .market-pills-group {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: 2px;
  }

  .market-pill {
    flex: 1;
    justify-content: center;
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
}

.market-pill {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
}

.market-pill.open {
  background: rgba(19, 187, 132, 0.1);
  border-color: rgba(19, 187, 132, 0.3);
  color: var(--emerald);
}

.market-pill.closed {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.3);
  color: var(--rose);
}

/* ==========================================================================
   CARDS & TILES
   ========================================================================== */

.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.glass-card:hover {
  border-color: var(--border-glass);
}

/* Metric KPI Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.kpi-card {
  padding: 18px 16px;
}

.kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #ffffff;
}

@media (min-width: 768px) {
  .kpi-value {
    font-size: 26px;
  }
}

.kpi-value.green { color: var(--emerald); text-shadow: 0 0 15px var(--emerald-glow); }
.kpi-value.cyan { color: var(--cyan); text-shadow: 0 0 15px var(--cyan-glow); }
.kpi-value.gold { color: var(--gold); text-shadow: 0 0 15px var(--gold-glow); }
.kpi-value.purple { color: var(--purple); text-shadow: 0 0 15px var(--purple-glow); }

.kpi-sub {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 4px;
}

/* ==========================================================================
   DESK CARDS (4 DESKS)
   ========================================================================== */

.desks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .desks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.desk-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.desk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.desk-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.desk-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.desk-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.desk-badge.nifty { background: rgba(34, 211, 238, 0.12); color: var(--cyan); border: 1px solid rgba(34, 211, 238, 0.3); }
.desk-badge.sensex { background: rgba(79, 71, 231, 0.12); color: var(--purple); border: 1px solid rgba(79, 71, 231, 0.3); }
.desk-badge.mcx { background: rgba(247, 120, 22, 0.12); color: var(--gold); border: 1px solid rgba(247, 120, 22, 0.3); }
.desk-badge.equities { background: rgba(19, 187, 132, 0.12); color: var(--emerald); border: 1px solid rgba(19, 187, 132, 0.3); }

.desk-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px 10px;
  border-radius: var(--radius-md);
}

@media (max-width: 680px) {
  .desk-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

.stat-cell {
  text-align: center;
}

.stat-cell-label {
  font-size: 11px;
  color: var(--text-sub);
  margin-bottom: 2px;
}

.stat-cell-val {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
}

/* Instrument Segmented Tab Bar */
.instrument-tabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.instrument-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.instrument-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.instrument-tab-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.25);
}

.instrument-tab-btn .tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.instrument-tab-btn.active .tab-count {
  background: rgba(38, 100, 236, 0.25);
  color: var(--primary);
}

.clickable-desk-card {
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.clickable-desk-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   ACTIVE POSITIONS RADAR
   ========================================================================== */

.active-positions-section {
  margin-bottom: 28px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.position-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.position-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
}

.position-card.sell-card::before {
  background: var(--rose);
  box-shadow: 0 0 10px var(--rose);
}

.position-card.swap-card::before {
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple);
}

.pos-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.pos-symbol {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
}

.pos-model-tag {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text-muted);
}

.pos-price-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
}

.ladder-item {
  display: flex;
  flex-direction: column;
}

.ladder-label {
  font-size: 10px;
  color: var(--text-sub);
}

.ladder-val {
  font-weight: 600;
}

/* Trailing SL Progress Meter */
.trailing-meter-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.meter-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--emerald));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.meter-stage-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--emerald);
}

/* ==========================================================================
   COMPACT POSITION CARDS (3+ positions — threshold mode)
   ========================================================================== */

/* Container — same visual foundation as position-card */
.pos-compact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.pos-compact-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

/* Coloured left bar — same as position-card::before */
.pos-compact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
  border-radius: 4px 0 0 4px;
}
.pos-compact-card.sell-card::before  { background: var(--rose);   box-shadow: 0 0 8px var(--rose);   }
.pos-compact-card.swap-card::before  { background: var(--purple); box-shadow: 0 0 8px var(--purple); }

/* One-row summary — the clickable trigger */
.pos-compact-main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px 11px 18px;
  cursor: pointer;
  user-select: none;
  flex-wrap: nowrap;
}

/* Symbol column (largest, flex-grows) */
.pos-compact-symbol-col {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 160px;
  min-width: 0;
}
.pos-compact-dir-badge {
  flex-shrink: 0;
  font-size: 9px !important;
  padding: 2px 7px !important;
}
.pos-compact-symbol {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-main);
}
.pos-compact-strike {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

/* LTP + delta column */
.pos-compact-ltp-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 100px;
}
.pos-compact-ltp {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
}
.pos-compact-delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 1px;
}

/* SL column */
.pos-compact-sl-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 80px;
}
.pos-compact-field-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-sub);
}
.pos-compact-sl {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--rose);
}

/* T1 column */
.pos-compact-t1-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 80px;
}
.pos-compact-t1 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--emerald);
}

/* Stage indicator pill */
.pos-compact-stage-col {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  min-width: 110px;
}
.pos-compact-stage-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pos-compact-stage-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}

/* Expand chevron button */
.pos-expand-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-sub);
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.pos-expand-chevron.open {
  transform: rotate(180deg);
  background: rgba(19, 187, 132, 0.1);
  border-color: rgba(19, 187, 132, 0.3);
  color: var(--emerald);
}

/* Expandable detail section — smooth height animation via grid trick */
.pos-compact-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.pos-compact-detail.open {
  grid-template-rows: 1fr;
}
.pos-compact-detail-inner {
  overflow: hidden;
  padding: 0 14px 0 18px;
  /* padding-bottom animates via the grid expansion */
}
.pos-compact-detail.open .pos-compact-detail-inner {
  padding-bottom: 14px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}

/* -----------------------------------------------------------------------
   Responsive: hide T1 and stage columns on small screens, keep essentials
   ----------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pos-compact-t1-col   { display: none; }
  .pos-compact-stage-col { display: none; }
  .pos-compact-sl-col   { min-width: 70px; }
  .pos-compact-ltp-col  { min-width: 85px; }
  .pos-compact-symbol   { font-size: 12px; }
}

/* ==========================================================================
   TRADE LOGS TABLE
   ========================================================================== */

.table-container {
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.3);
}

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

table.trade-table th {
  padding: 12px 14px;
  color: var(--text-sub);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.2);
}

table.trade-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
}

table.trade-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.outcome-pill {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}

.outcome-pill.win { background: rgba(19, 187, 132, 0.15); color: var(--emerald); }
.outcome-pill.loss { background: rgba(244, 63, 94, 0.15); color: var(--rose); }
.outcome-pill.be { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.outcome-pill.active { background: rgba(34, 211, 238, 0.18); color: var(--cyan); border: 1px solid rgba(34, 211, 238, 0.45); font-weight: 700; }

/* ==========================================================================
   SETTINGS CONTROL PANEL (TOGGLES & SLIDERS)
   ========================================================================== */

.settings-group {
  margin-bottom: 24px;
}

.settings-group-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: rgba(16, 24, 42, 0.4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.setting-row:hover {
  background: rgba(22, 33, 58, 0.6);
  border-color: var(--border-glass);
}

.setting-info {
  max-width: 75%;
}

.setting-name {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 2px;
}

.setting-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* Custom iOS-style Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: .3s;
  border-radius: 26px;
  border: 1px solid var(--border-subtle);
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* 2. SETTINGS TOGGLE SWITCHES — blue for UI controls */
input:checked + .slider {
  background-color: var(--primary);
  box-shadow: 0 0 12px var(--primary-soft);
}

input:checked + .slider:before {
  transform: translateX(22px);
}

/* Save Settings Button */
/* 3. SAVE CONFIGURATION BUTTON — primary blue action */
.btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--indigo) 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--primary-soft);
  transition: all 0.2s ease;
  width: 100%;
}

@media (min-width: 768px) {
  .btn-save {
    width: auto;
  }
}

.btn-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(38, 100, 236, 0.45);
}

/* ==========================================================================
   PIN SECURITY MODAL
   ========================================================================== */

#pin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4, 7, 14, 0.96);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.pin-modal-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.pin-display {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-sub);
  transition: all 0.2s ease;
}

.pin-dot.filled {
  background: var(--emerald);
  border-color: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
}

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.keypad-btn {
  height: 58px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.keypad-btn:active {
  background: rgba(19, 187, 132, 0.2);
  transform: scale(0.95);
}

/* Active tab view switching */
.view-panel {
  display: none;
}
.view-panel.active {
  display: block;
}

/* ==========================================================================
   HORIZON SWITCHER (LIVE SESSION VS 1-YEAR BACKTEST)
   ========================================================================== */
.horizon-switch-container {
  display: flex;
  background: rgba(16, 24, 42, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 4px;
}

.horizon-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.horizon-btn:hover {
  color: #ffffff;
}

.horizon-btn.active {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid rgba(38, 100, 236, 0.4);
  box-shadow: 0 0 12px rgba(38, 100, 236, 0.2);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-soft);
  animation: pulseGlow 1.5s infinite;
}

/* Timeframe Switcher display behavior: Strictly hidden on Live trades, only shown on 10Y Backtest */
#timeframe-switch-container {
  display: none !important;
}

body.mode-backtest #timeframe-switch-container {
  display: flex !important;
}

/* ==========================================================================
   TRADE BOOK DESK FILTERS & PAGINATION
   ========================================================================== */
.desk-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
}

.desk-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(16, 24, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.desk-filter-pill:hover {
  background: rgba(22, 33, 58, 0.8);
  color: #ffffff;
  border-color: var(--border-glass);
}

.desk-filter-pill.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: rgba(38, 100, 236, 0.5);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}

.pill-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ── NSE Instrument Toggle Pills ── */
.nse-instrument-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid rgba(255,255,255,0.1);
  border-right: 1px solid rgba(255,255,255,0.1);
  padding: 0 10px;
  margin: 0 4px;
}
.nse-inst-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.instrument-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(16, 24, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.instrument-toggle-pill.active {
  background: rgba(0, 212, 255, 0.12);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
}
.instrument-toggle-pill:not(.active) {
  opacity: 0.45;
}
.instrument-toggle-pill:hover {
  opacity: 1;
  border-color: rgba(0, 212, 255, 0.4);
}

/* ── Engine Calibration Timeframe Pills ── */
.engine-tf-pills {
  display: flex;
  gap: 5px;
}
.engine-tf-pill {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.engine-tf-pill.active {
  background: var(--cyan, #00d4ff);
  color: #0a0e1a;
  border-color: var(--cyan, #00d4ff);
}
.engine-tf-pill:hover {
  border-color: rgba(0, 212, 255, 0.5);
  color: var(--cyan, #00d4ff);
}
.engine-tf-pill.active:hover {
  color: #0a0e1a;
}

.sub-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  background: rgba(16, 24, 42, 0.4);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.sub-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-and-reset-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}

.filter-select, .filter-input {
  background: rgba(8, 12, 20, 0.8);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: #ffffff;
  padding: 7px 12px;
  font-size: 12px;
  font-family: var(--font-body);
  outline: none;
  transition: all 0.2s ease;
}

.filter-select:focus, .filter-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
}

.filter-select option, .filter-select optgroup {
  background: #0d131f;
  color: #e2e8f0;
}

.filter-select optgroup {
  font-weight: 700;
  color: var(--cyan);
}

.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(19, 187, 132, 0.1);
  border: 1px solid rgba(19, 187, 132, 0.3);
  color: var(--emerald);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-refresh:hover {
  background: rgba(19, 187, 132, 0.2);
  transform: translateY(-1px);
}

/* Cyber-Glass Institutional Reset Button */
.btn-cyber-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(244, 63, 94, 0.04));
  border: 1px solid rgba(244, 63, 94, 0.35);
  border-radius: var(--radius-sm);
  color: #ff6584;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 0 10px rgba(244, 63, 94, 0.05);
  white-space: nowrap;
  user-select: none;
}

.btn-cyber-reset svg,
.btn-cyber-reset .reset-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cyber-reset:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.25), rgba(244, 63, 94, 0.1));
  border-color: rgba(244, 63, 94, 0.75);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.4), inset 0 0 12px rgba(244, 63, 94, 0.15);
  transform: translateY(-1px);
}

.btn-cyber-reset:hover svg,
.btn-cyber-reset:hover .reset-icon {
  transform: rotate(-180deg);
}

.btn-cyber-reset:active {
  transform: translateY(0);
}

.filter-dropdowns-grid {
  display: contents;
}

.pagination-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  gap: 12px;
}

.pagination-info {
  font-size: 12px;
  color: var(--text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-btn {
  background: rgba(16, 24, 42, 0.8);
  border: 1px solid var(--border-subtle);
  color: #ffffff;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  background: rgba(34, 211, 238, 0.2);
  border-color: var(--cyan);
}

.page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.page-current {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
  padding: 0 8px;
}

/* ==========================================================================
   IMG 1: DYNAMIC OUTCOME SUMMARY STRIP
   ========================================================================== */
.ledger-outcome-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(10, 15, 29, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
}

.outcome-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.outcome-stat-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.outcome-stat-pill.win {
  background: rgba(19, 187, 132, 0.08);
  border: 1px solid rgba(19, 187, 132, 0.25);
  color: var(--emerald);
}
.outcome-stat-pill.win .dot {
  background: var(--emerald);
  box-shadow: 0 0 6px var(--emerald);
}

.outcome-stat-pill.be {
  background: rgba(247, 120, 22, 0.08);
  border: 1px solid rgba(247, 120, 22, 0.25);
  color: var(--gold);
}
.outcome-stat-pill.be .dot {
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}

.outcome-stat-pill.loss {
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.25);
  color: var(--rose);
}
.outcome-stat-pill.loss .dot {
  background: var(--rose);
  box-shadow: 0 0 6px var(--rose);
}

.outcome-stat-pill.pnl {
  margin-left: auto;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: var(--cyan);
  font-family: var(--font-mono);
}

.outcome-stat-pill .sub {
  font-size: 11px;
  opacity: 0.8;
  font-family: var(--font-mono);
}

/* ==========================================================================
   IMG 2: CLICKABLE TABLE ROWS & TRADE DETAIL MODAL
   ========================================================================== */
.trade-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.trade-table tbody tr:hover {
  background: rgba(19, 187, 132, 0.06);
}

.trade-table tbody tr:hover td:nth-child(2) strong {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
}

.trade-table tbody tr:active {
  background: rgba(19, 187, 132, 0.12);
}

/* Modal Overlay & Box */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 14, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.active,
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.trade-modal-box {
  background: linear-gradient(145deg, rgba(16, 24, 42, 0.96), rgba(10, 15, 29, 0.98));
  border: 1px solid rgba(19, 187, 132, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(19, 187, 132, 0.12);
  border-radius: var(--radius-lg);
  max-width: 680px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .trade-modal-box,
.modal-overlay.open .trade-modal-box {
  transform: scale(1);
}

.trade-modal-header,
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  box-sizing: border-box;
}

.modal-pretitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 4px;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-sub);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.modal-close-btn:hover {
  background: rgba(244, 63, 94, 0.2);
  border-color: var(--rose);
  color: #fff;
}

/* Hero Outcome Banner */
.modal-hero-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}

.modal-hero-banner.win {
  background: linear-gradient(135deg, rgba(19, 187, 132, 0.12), rgba(34, 211, 238, 0.08));
  border: 1px solid rgba(19, 187, 132, 0.35);
  box-shadow: 0 0 20px rgba(19, 187, 132, 0.12);
}

.modal-hero-banner.be {
  background: linear-gradient(135deg, rgba(247, 120, 22, 0.12), rgba(247, 120, 22, 0.05));
  border: 1px solid rgba(247, 120, 22, 0.35);
  box-shadow: 0 0 20px rgba(247, 120, 22, 0.12);
}

.modal-hero-banner.loss {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.12), rgba(244, 63, 94, 0.05));
  border: 1px solid rgba(244, 63, 94, 0.35);
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.12);
}

.hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-icon {
  font-size: 28px;
}

.hero-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.modal-hero-banner.win .hero-title { color: var(--emerald); }
.modal-hero-banner.be .hero-title { color: var(--gold); }
.modal-hero-banner.loss .hero-title { color: var(--rose); }

.hero-reason {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 2px;
}

.hero-right {
  text-align: right;
  font-family: var(--font-mono);
}

.hero-pnl {
  font-size: 18px;
  font-weight: 800;
}

.modal-hero-banner.win .hero-pnl { color: var(--emerald); }
.modal-hero-banner.be .hero-pnl { color: var(--gold); }
.modal-hero-banner.loss .hero-pnl { color: var(--rose); }

.hero-rmult {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 4-Tile Telemetry Grid */
.modal-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

@media (min-width: 600px) {
  .modal-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.modal-tile {
  background: rgba(10, 15, 29, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.modal-tile .tile-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.modal-tile .tile-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
}

.modal-tile .tile-sub {
  font-size: 10px;
  color: var(--text-sub);
  margin-top: 3px;
}

/* Stepper Progression Tracker */
.stepper-card {
  background: rgba(10, 15, 29, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 18px;
}

.stepper-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.stepper-track {
  display: flex;
  align-items: center;
  position: relative;
  gap: 8px;
}

.step-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.step-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
  z-index: 2;
  transition: all 0.2s ease;
}

.step-node.completed .step-circle {
  background: var(--emerald);
  color: #000;
  box-shadow: 0 0 10px rgba(19, 187, 132, 0.5);
}

.step-node.active .step-circle {
  background: var(--cyan);
  color: #000;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.step-node.stopped .step-circle {
  background: var(--rose);
  color: #fff;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
}

.step-node.pending .step-circle {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.step-label {
  font-size: 10px;
  color: var(--text-sub);
  font-weight: 500;
  line-height: 1.3;
}

.step-node.completed .step-label,
.step-node.active .step-label {
  color: #ffffff;
}

/* Narrative Breakdown Card */
.narrative-card {
  background: rgba(10, 15, 29, 0.85);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: var(--radius-sm);
  padding: 18px;
}

.narrative-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.narrative-section {
  margin-bottom: 12px;
}

.narrative-sub {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.narrative-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   DESK TELEMETRY & UNDERLYING MODEL AUDIT (REQUIREMENT 2)
   ========================================================================== */
.clickable-desk-card {
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.clickable-desk-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(34, 211, 238, 0.15);
}

.desk-click-hint {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}

.clickable-desk-card:hover .desk-click-hint {
  background: var(--cyan);
  color: #060911;
  box-shadow: 0 0 8px var(--cyan);
}

.desk-breakdown-modal-box {
  background: linear-gradient(135deg, rgba(13, 20, 36, 0.96), rgba(8, 12, 22, 0.98));
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: var(--radius-md);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(34, 211, 238, 0.1);
  width: 92%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  backdrop-filter: blur(20px);
  position: relative;
  z-index: 10001;
}

.desk-modal-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: rgba(10, 15, 29, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 14px;
  margin-bottom: 16px;
}

.desk-instrument-tab-section {
  margin-bottom: 12px;
}

.desk-instrument-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.desk-inst-pill, .analytics-inst-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.desk-inst-pill:hover, .analytics-inst-pill:hover {
  background: rgba(34, 211, 238, 0.1);
  color: #ffffff;
  border-color: rgba(34, 211, 238, 0.3);
}

.desk-inst-pill.active, .analytics-inst-pill.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
}

.desk-models-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.model-card {
  background: rgba(10, 15, 29, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.model-card:hover {
  border-color: rgba(34, 211, 238, 0.3);
  background: rgba(13, 20, 36, 0.95);
}

.model-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.model-title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.model-stats-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
}

.model-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

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

.model-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--emerald));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Model Outcome Badges & Deep-Dive Accordion */
.model-outcome-strip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.model-outcome-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-weight: 600;
}

.model-outcome-pill.win {
  background: rgba(0, 255, 163, 0.08);
  border-color: rgba(0, 255, 163, 0.25);
  color: var(--emerald);
}

.model-outcome-pill.be {
  background: rgba(255, 184, 0, 0.08);
  border-color: rgba(255, 184, 0, 0.25);
  color: var(--gold);
}

.model-outcome-pill.loss {
  background: rgba(255, 59, 92, 0.08);
  border-color: rgba(255, 59, 92, 0.25);
  color: var(--rose);
}

.model-deepdive-toggle-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.model-deepdive-toggle-btn:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.4);
  color: #fff;
}

.model-deepdive-toggle-btn.active {
  background: rgba(34, 211, 238, 0.15);
  border-color: var(--cyan);
  color: var(--cyan);
}

.model-deep-dive-panel {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  animation: fadeIn 0.25s ease forwards;
}

.model-deep-dive-panel.active {
  display: block;
}

.model-deep-dive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .model-deep-dive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.model-deep-dive-tile {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 8px 10px;
}

.model-deep-dive-tile .tile-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.model-deep-dive-tile .tile-main {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
}

.model-deep-dive-tile .tile-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.model-drilldown-action-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.model-drilldown-btn {
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.model-drilldown-btn:hover {
  background: rgba(34, 211, 238, 0.2);
  border-color: var(--cyan);
  color: #fff;
  transform: translateX(2px);
}

/* ==============================================================
   09:20 AM MORNING INTELLIGENCE BUTTON & MODAL
   ============================================================== */
/* 5. MORNING INTELLIGENCE BUTTON — primary blue UI action */
.morning-intel-btn {
  background: linear-gradient(135deg, rgba(38, 100, 236, 0.18), rgba(79, 71, 231, 0.12));
  border: 1px solid rgba(38, 100, 236, 0.35);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
}

.morning-intel-btn:hover {
  background: linear-gradient(135deg, rgba(38, 100, 236, 0.3), rgba(79, 71, 231, 0.25));
  border-color: var(--primary);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
  transform: translateY(-1px);
}

.morning-intel-modal-box {
  background: linear-gradient(145deg, rgba(14, 20, 36, 0.98), rgba(9, 13, 25, 0.99));
  border: 1px solid rgba(34, 211, 238, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(34, 211, 238, 0.15);
  border-radius: var(--radius-lg);
  max-width: 1180px;
  width: 96%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  transform: scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .morning-intel-modal-box {
  transform: scale(1);
}

.intel-header-action-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 6. INTEL ACTION BUTTON (Broadcast to Telegram, etc.) — blue UI action */
.intel-btn-action {
  background: var(--primary-soft);
  border: 1px solid rgba(38, 100, 236, 0.35);
  color: var(--emerald);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.intel-btn-action:hover {
  background: rgba(38, 100, 236, 0.25);
  border-color: var(--primary);
  color: #fff;
}

.intel-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.intel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-bottom: 16px;
}

.intel-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.intel-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.intel-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.intel-contract-chip {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: var(--font-mono);
}

.intel-contract-chip.call {
  border-left: 3px solid var(--emerald);
}

.intel-contract-chip.put {
  border-left: 3px solid var(--rose);
}

.intel-dhan-badge {
  background: rgba(34, 211, 238, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.3);
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ==============================================================
   ANGEL ONE LIVE TRADE LOGS & TELEMETRY MODAL STYLES
   ============================================================== */
.trade-logs-modal-box {
  background: linear-gradient(145deg, rgba(14, 20, 36, 0.98), rgba(9, 13, 25, 0.99));
  border: 1px solid rgba(19, 187, 132, 0.3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(19, 187, 132, 0.15);
  border-radius: var(--radius-lg);
  max-width: 1180px;
  width: 96%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  transform: scale(0.97);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .trade-logs-modal-box {
  transform: scale(1);
}

.trade-logs-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
  margin-bottom: 20px;
}

.trade-log-stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.trade-log-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.trade-log-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
  font-family: var(--font-mono);
}

.trade-log-stat-sub {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 3px;
}

.trade-log-desk-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-sub);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.trade-log-desk-btn:hover {
  background: rgba(19, 187, 132, 0.15);
  border-color: rgba(19, 187, 132, 0.35);
  color: #fff;
}

.trade-log-desk-btn.active {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #000;
  font-weight: 800;
}

/* ==============================================================
   LIVE TRADES & LOGS FULL-PAGE VIEW & PERIOD FILTER STYLES
   ============================================================== */
.live-session-card {
  background: linear-gradient(135deg, rgba(14, 25, 45, 0.75), rgba(9, 15, 30, 0.85));
  border: 1px solid rgba(19, 187, 132, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(19, 187, 132, 0.05);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.live-session-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.live-session-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.live-session-pulse-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(19, 187, 132, 0.12);
  border: 1px solid rgba(19, 187, 132, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 15px rgba(19, 187, 132, 0.2);
}

.live-session-meta-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.meta-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
}

.meta-chip-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.meta-chip-val {
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 2px;
  font-family: var(--font-mono);
}

/* Period Filter Bar for Live Trades */
.period-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(14, 20, 36, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
}

.period-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-right: 4px;
}

.period-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.period-filter-pill:hover {
  background: rgba(19, 187, 132, 0.12);
  border-color: rgba(19, 187, 132, 0.3);
  color: #fff;
}

.period-filter-pill.active {
  background: linear-gradient(135deg, rgba(19, 187, 132, 0.25), rgba(34, 211, 238, 0.2));
  border-color: var(--emerald);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(19, 187, 132, 0.25);
}

.live-dot-small {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 6px var(--emerald);
  animation: pulse-glow 1.5s infinite;
}

/* Sub-Tab Toggle inside Trade Book */
.sub-tab-switch {
  display: flex;
  gap: 6px;
}

.sub-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sub-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.sub-tab-btn.active {
  color: #fff;
  background: var(--primary-soft);
  border-color: rgba(38, 100, 236, 0.5);
  box-shadow: 0 0 10px rgba(38, 100, 236, 0.15);
  border-color: rgba(19, 187, 132, 0.4);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(19, 187, 132, 0.15);
}

.live-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--emerald);
  background: rgba(19, 187, 132, 0.1);
  border: 1px solid rgba(19, 187, 132, 0.25);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* ==============================================================
   LIVE MARKET RADAR & OPTIONS SCANNER (MATCHING SCREENSHOTS)
   ============================================================== */
.radar-top-card {
  background: rgba(14, 18, 32, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

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

.radar-title-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radar-poll-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

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

.index-badge {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.index-badge .idx-lbl {
  color: var(--text-muted);
  font-weight: 600;
}

.index-badge .idx-val {
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
}

.scanner-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.scanner-desk-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scanner-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.scanner-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.scanner-pill.active {
  background: rgba(19, 187, 132, 0.15);
  border-color: rgba(19, 187, 132, 0.4);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(19, 187, 132, 0.15);
}

.scanner-pill .pill-cnt {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-sub);
  font-family: var(--font-mono);
}

.scanner-pill.active .pill-cnt {
  background: rgba(19, 187, 132, 0.3);
  color: #fff;
}

/* Live Instruments Radar accordion desk tabs — same visuals as .scanner-pill but isolated class */
.instr-radar-tab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.instr-radar-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.instr-radar-tab.active {
  background: rgba(19, 187, 132, 0.15);
  border-color: rgba(19, 187, 132, 0.4);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(19, 187, 132, 0.15);
}

.scanner-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scanner-search-box input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 6px 12px;
  color: #fff;
  font-size: 12px;
  width: 180px;
  outline: none;
}

.scanner-search-box input:focus {
  border-color: var(--cyan);
}

/* Strength Gauge Bar */
.market-strength-gauge-card {
  background: rgba(8, 12, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.strength-metric-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.strength-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.strength-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--emerald);
  font-family: var(--font-mono);
}

.strength-bar-track {
  flex: 1;
  min-width: 160px;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  position: relative;
  overflow: visible;
}

.strength-bar-gradient {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ef4444 0%, #eab308 50%, #10b981 100%);
  transition: width 0.4s ease;
}

.strength-indicator-marker {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--emerald);
  box-shadow: 0 0 10px rgba(19, 187, 132, 0.6);
  transform: translateX(-50%);
  transition: left 0.4s ease;
}

.strength-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.strength-badge.bullish {
  background: rgba(19, 187, 132, 0.15);
  color: var(--emerald);
  border: 1px solid rgba(19, 187, 132, 0.3);
}

.strength-badge.bearish {
  background: rgba(244, 63, 94, 0.15);
  color: var(--rose);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.high-low-stats {
  font-size: 12px;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
}

/* Day Range Slider Column */
.day-range-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.day-range-num {
  font-size: 11px;
  color: var(--text-sub);
  font-family: var(--font-mono);
  min-width: 42px;
}

.day-range-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
}

.day-range-dot {
  position: absolute;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  transform: translateX(-50%);
}

/* Sparkline column */
.sparkline-svg {
  display: block;
  overflow: visible;
}

/* Scrip Badges */
.scrip-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scrip-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scrip-name {
  font-weight: 700;
  color: #fff;
  font-size: 13px;
}

.badge-ce {
  background: rgba(19, 187, 132, 0.15);
  color: var(--emerald);
  border: 1px solid rgba(19, 187, 132, 0.3);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

.badge-pe {
  background: rgba(244, 63, 94, 0.15);
  color: var(--rose);
  border: 1px solid rgba(244, 63, 94, 0.3);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

.badge-atm {
  background: rgba(247, 120, 22, 0.18);
  color: var(--gold);
  border: 1px solid rgba(247, 120, 22, 0.4);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

.scrip-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ==========================================================================
   SIGNAL BADGES (BUY / HOLD / SELL)
   ========================================================================== */
.signal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.signal-badge.buy {
  background: rgba(19, 187, 132, 0.16);
  color: var(--emerald);
  border: 1px solid rgba(19, 187, 132, 0.45);
  box-shadow: 0 0 10px rgba(19, 187, 132, 0.2);
}

.signal-badge.sell {
  background: rgba(244, 63, 94, 0.16);
  color: var(--rose);
  border: 1px solid rgba(244, 63, 94, 0.45);
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.2);
}

.signal-badge.hold {
  background: rgba(247, 120, 22, 0.14);
  color: var(--gold);
  border: 1px solid rgba(247, 120, 22, 0.35);
}

/* Market Cap Badges */
.cap-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.cap-badge.large {
  background: rgba(138, 43, 226, 0.2);
  color: #c084fc;
  border: 1px solid rgba(138, 43, 226, 0.4);
}

.cap-badge.mid {
  background: rgba(34, 211, 238, 0.2);
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.4);
}

.cap-badge.small {
  background: rgba(255, 165, 0, 0.2);
  color: #fb923c;
  border: 1px solid rgba(255, 165, 0, 0.4);
}

/* ==========================================================================
   MULTI-CAP STOCK SCREENER STYLES
   ========================================================================== */
.screener-top-card {
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.screener-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.screener-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sc-pill {
  padding: 6px 14px;
  background: rgba(16, 24, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sc-pill:hover {
  background: rgba(22, 33, 58, 0.8);
  color: #fff;
  border-color: var(--border-glass);
}

.sc-pill.active {
  background: rgba(34, 211, 238, 0.15);
  color: var(--cyan);
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}

.screener-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sc-select {
  background: rgba(16, 24, 42, 0.8);
  border: 1px solid var(--border-glass);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

/* Custom Universe Toggle Switch */
.universe-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 24, 42, 0.5);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}

.switch-ui {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.switch-ui input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-ui {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: .3s;
  border-radius: 20px;
}

.slider-ui:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.switch-ui input:checked + .slider-ui {
  background-color: var(--cyan);
}

.switch-ui input:checked + .slider-ui:before {
  transform: translateX(16px);
}

.universe-mode-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  font-family: var(--font-heading);
}

/* Action button to expand drawer */
.btn-toggle-drawer {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: var(--cyan);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-toggle-drawer:hover {
  background: var(--cyan);
  color: #060911;
}

/* ==========================================================================
   STOCK ACCORDION DRAWER & BLUEPRINTS
   ========================================================================== */
.stock-detail-row {
  background: rgba(10, 16, 30, 0.95);
  border-top: 1px solid rgba(34, 211, 238, 0.2);
  border-bottom: 2px solid rgba(34, 211, 238, 0.3);
}

.stock-drawer-inner {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Individual Stock Strength Gauge */
.stock-strength-card {
  background: rgba(16, 24, 42, 0.8);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.stock-strength-meter-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stock-strength-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  position: relative;
  overflow: visible;
}

.stock-strength-gradient {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f43f5e 0%, #ffaa00 45%, #13bb84 100%);
}

.stock-strength-marker {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  transform: translateX(-50%);
}

.stock-metrics-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
}

.stock-metrics-meta b {
  color: #ffffff;
}

/* Dual Execution Blueprint Grid */
.dual-blueprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

.blueprint-card {
  background: rgba(16, 24, 42, 0.9);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
}

.blueprint-card.cash-card {
  border-left: 3px solid var(--cyan);
}

.blueprint-card.option-card {
  border-left: 3px solid var(--emerald);
}

.blueprint-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}

.blueprint-type-tag {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.blueprint-grid-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

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

.bp-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.bp-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.bp-val.green {
  color: var(--emerald);
}

.bp-val.red {
  color: var(--rose);
}

.bp-val.cyan {
  color: var(--cyan);
}

/* Interactive Option Chain Strip */
.option-strip-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-strip-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.option-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.option-strip-card {
  background: rgba(16, 24, 42, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
}

.option-strip-card:hover {
  background: rgba(22, 33, 58, 0.9);
  border-color: var(--border-glass);
}

.option-strip-card.recommended {
  border: 1px solid var(--emerald);
  background: rgba(19, 187, 132, 0.08);
  box-shadow: 0 0 12px rgba(19, 187, 132, 0.15);
}

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

.opt-sym-text {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}

.opt-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.opt-ltp-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.opt-oi-text {
  font-size: 10px;
  color: var(--text-muted);
}

/* Clickable Stock Main Rows */
.stock-main-row.clickable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.stock-main-row.clickable:hover {
  background: rgba(34, 211, 238, 0.05) !important;
}

.stock-main-row.clickable:active {
  background: rgba(34, 211, 238, 0.09) !important;
}

/* Screener Pagination Controls */
.screener-pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(13, 20, 32, 0.95);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 12px;
}

.pag-info {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.pag-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pag-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-sub);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pag-btn:hover:not(:disabled) {
  background: rgba(34, 211, 238, 0.15);
  color: var(--cyan);
  border-color: rgba(34, 211, 238, 0.3);
}

.pag-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pag-page-indicator {
  font-size: 12px;
  color: var(--text-sub);
  padding: 0 6px;
  font-family: var(--font-mono);
}

.pag-page-indicator b {
  color: #ffffff;
}

.pag-size-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.pag-size-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pag-size-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--cyan);
}

/* =========================================================================
   3-WAVE COHORT SELECTOR & TOP 10 FOCUS STYLES
   ========================================================================= */
.screener-cohort-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(14, 20, 36, 0.7);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
}

.cohort-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-right: 4px;
}

.sc-cohort-btn, .journal-wave-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-sub);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-cohort-btn:hover, .journal-wave-btn:hover {
  background: rgba(19, 187, 132, 0.1);
  border-color: rgba(19, 187, 132, 0.3);
  color: #fff;
}

.sc-cohort-btn.active, .journal-wave-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(19, 187, 132, 0.2);
}

.sc-top10-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(255, 170, 0, 0.08);
  border: 1px solid rgba(255, 170, 0, 0.25);
  border-radius: 6px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.2s ease;
}

.sc-top10-btn:hover {
  background: rgba(255, 170, 0, 0.16);
  border-color: var(--gold);
  color: #fff;
}

.sc-top10-btn.active {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.3), rgba(255, 120, 0, 0.2));
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.25);
}

/* =========================================================================
   EQUITY SIGNALS & EOD AUDIT JOURNAL CARDS
   ========================================================================= */
.journal-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 16px;
}

.journal-card {
  background: rgba(18, 26, 47, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  padding: 18px;
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.journal-card:hover {
  transform: translateY(-2px);
  border-color: rgba(19, 187, 132, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.journal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

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

.journal-sym-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-sym {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.journal-name {
  font-size: 11.5px;
  color: var(--text-sub);
}

.journal-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.badge-conviction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.badge-conviction.triple {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.25), rgba(255, 60, 0, 0.2));
  color: #ffcc00;
  border: 1px solid rgba(255, 204, 0, 0.4);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.25);
}

.badge-conviction.dual {
  background: rgba(34, 211, 238, 0.15);
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.35);
}

.badge-conviction.single {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-sub);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Dual Setup Body */
.journal-dual-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.setup-col {
  background: rgba(10, 15, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setup-col-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
}

.setup-lbl {
  color: var(--text-muted);
}

.setup-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
}

.setup-val.highlight {
  color: var(--cyan);
}

.setup-val.t1 { color: #a3e635; }
.setup-val.t2 { color: var(--emerald); }
.setup-val.t3 { color: #38bdf8; }
.setup-val.sl { color: var(--rose); }

/* Progress & Milestones Footer */
.journal-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

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

.milestone-pill-large {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.milestone-pill-large.win {
  background: rgba(19, 187, 132, 0.16);
  color: var(--emerald);
  border: 1px solid rgba(19, 187, 132, 0.4);
}

.milestone-pill-large.loss {
  background: rgba(255, 75, 110, 0.16);
  color: var(--rose);
  border: 1px solid rgba(255, 75, 110, 0.4);
}

.milestone-pill-large.active {
  background: rgba(34, 211, 238, 0.14);
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.35);
}

.roi-pill {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
}

.roi-pill.pos { color: var(--emerald); }
.roi-pill.neg { color: var(--rose); }
.roi-pill.neu { color: var(--text-sub); }

.milestone-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 6px 0;
  padding: 0 4px;
}

.milestone-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
  z-index: 1;
}

.milestone-node {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--text-muted);
  transition: all 0.2s ease;
}

.milestone-node.completed .node-dot {
  background: var(--emerald);
  border-color: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
}

.milestone-node.sl-hit .node-dot {
  background: var(--rose);
  border-color: var(--rose);
  box-shadow: 0 0 8px var(--rose);
}

.node-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.milestone-node.completed .node-label {
  color: var(--emerald);
}

.milestone-node.sl-hit .node-label {
  color: var(--rose);
}

/* =========================================================================
   OPTION STRIKE MODE SELECTOR IN NAVBAR
   ========================================================================= */
.strike-control-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 24, 42, 0.7);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 4px 10px;
}
.strike-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.strike-select {
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  max-width: 175px;
}
.strike-select option {
  background: #0d1526;
  color: #fff;
}

/* =========================================================================
   MULTI-YEAR HISTORY SYNC TOOLBAR
   ========================================================================= */
.multi-year-sync-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(16, 24, 42, 0.65);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.year-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-year-filter {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-year-filter:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.btn-year-filter.active {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: rgba(34, 211, 238, 0.4);
}
.year-dropdown {
  background: rgba(16, 24, 42, 0.85);
  border: 1px solid var(--border-subtle);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-family: var(--font-mono);
  outline: none;
  cursor: pointer;
}
.year-dropdown option {
  background: #0d1526;
  color: #fff;
}
.btn-smartapi-sync {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(0, 150, 255, 0.2));
  border: 1px solid rgba(34, 211, 238, 0.4);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-smartapi-sync:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.35), rgba(0, 150, 255, 0.35));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.3);
}

/* =========================================================================
   EQUITY JOURNAL DATE TOOLBAR & HIGH-DENSITY TABLE
   ========================================================================= */
.journal-date-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(16, 24, 42, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.journal-date-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}
.journal-date-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.journal-date-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.journal-date-pill.active {
  background: rgba(34, 211, 238, 0.15);
  color: var(--cyan);
  border-color: rgba(34, 211, 238, 0.4);
}
/* Modern Cyber-Glass Date Navigator */
.modern-date-navigator {
  display: inline-flex;
  align-items: center;
  background: rgba(12, 19, 35, 0.85);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 8px;
  padding: 3px 5px;
  gap: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(34, 211, 238, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modern-date-navigator:hover,
.modern-date-navigator:focus-within {
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.15), inset 0 0 16px rgba(34, 211, 238, 0.08);
}

@media (min-width: 769px) {
  .modern-nav-btn.today-btn { order: 1; }
  .modern-nav-btn:not(.today-btn):first-of-type,
  .modern-nav-btn[id*="prev"] { order: 2; }
  .modern-date-input-wrap { order: 3; }
  .modern-nav-btn[id*="next"] { order: 4; }
}

.modern-nav-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d1d5db;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.modern-nav-btn:hover {
  background: rgba(34, 211, 238, 0.15);
  border-color: rgba(34, 211, 238, 0.4);
  color: #fff;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
  transform: translateY(-1px);
}

.modern-nav-btn:active {
  transform: translateY(0);
}

.modern-nav-btn.today-btn {
  background: rgba(34, 211, 238, 0.08);
  border-color: rgba(34, 211, 238, 0.3);
  color: var(--cyan);
  font-weight: 800;
  letter-spacing: 0.3px;
}

.modern-nav-btn.today-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  color: #fff;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

.modern-date-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.modern-date-input {
  background: rgba(8, 14, 26, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #00f0ff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  color-scheme: dark;
}

.modern-date-input:hover,
.modern-date-input:focus {
  border-color: var(--cyan);
  background: rgba(8, 14, 26, 1);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.25);
}

input[type="date"]::-webkit-calendar-picker-indicator,
.modern-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(75%) sepia(80%) saturate(3000%) hue-rotate(140deg);
  opacity: 1;
  padding: 3px 5px;
  margin-left: 4px;
  border-radius: 4px;
  background-color: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.25);
  transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
.modern-date-input::-webkit-calendar-picker-indicator:hover {
  transform: scale(1.1);
  background-color: rgba(0, 240, 255, 0.3);
  border-color: var(--cyan);
  filter: brightness(0) saturate(100%) invert(100%);
}

.journal-table-row:hover {
  background: rgba(34, 211, 238, 0.04) !important;
}
.btn-inspect-journal:hover {
  background: rgba(34, 211, 238, 0.25) !important;
  border-color: var(--cyan) !important;
}

/* =========================================================================
   GLASSMORPHISM INSPECTION & MONTHLY PERFORMANCE MODALS
   ========================================================================= */
.journal-inspect-box {
  max-width: 820px !important;
  width: 95%;
}
.journal-blueprints-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .journal-blueprints-grid {
    grid-template-columns: 1fr;
  }
}
.journal-blueprint-card {
  background: rgba(18, 26, 47, 0.7);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blueprint-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}
.bp-icon {
  font-size: 20px;
}
.bp-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-heading);
}
.bp-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.bp-grid-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.journal-metrics-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
}
.journal-m-pill {
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.m-lbl {
  color: var(--text-muted);
  margin-right: 4px;
}
.monthly-audit-row:hover {
  background: rgba(255, 170, 0, 0.06) !important;
}

/* ==============================================================
   NIFTY OPTION SCALPER (5m) STYLES
   ============================================================== */
.scalper-config-card {
  background: rgba(13, 20, 34, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.scalper-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.scalper-config-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scalper-config-desc {
  font-size: 11.5px;
  color: var(--text-muted);
}

.scalper-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: end;
}

.scalper-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scalper-input-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.scalper-input {
  background: rgba(8, 14, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #f8fafc;
  padding: 9px 13px;
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
  width: 100%;
}

.scalper-input:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.scalper-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.25);
  background: rgba(11, 18, 30, 0.95);
}

.scalper-algo-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 68, 68, 0.05);
  border: 1px solid rgba(255, 68, 68, 0.2);
  padding: 8px 14px;
  border-radius: 8px;
  height: 40px;
}

.scalper-algo-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #ff5252;
  letter-spacing: 0.3px;
}

.btn-scalper-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0, 230, 118, 0.9) 0%, rgba(0, 168, 80, 0.9) 100%);
  color: #061e10;
  border: 1px solid rgba(0, 255, 128, 0.4);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  height: 40px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 200, 83, 0.25);
  white-space: nowrap;
}

.btn-scalper-save:hover {
  background: linear-gradient(135deg, rgba(0, 255, 128, 1) 0%, rgba(0, 200, 83, 1) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 255, 128, 0.4);
  color: #000;
}

/* Scalper Trade Book Filters & Date Navigation */
.scalper-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(10, 16, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE VIEWPORT OPTIMIZATION SUITE (<= 768px & <= 480px)
   ========================================================================== */

/* Universal Responsive Table Wrapper */
.table-responsive,
.table-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 16px;
  position: relative;
}

.table-responsive::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
  height: 6px;
}

.table-responsive::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
}

.table-responsive::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
  background: rgba(34, 211, 238, 0.35);
  border-radius: 4px;
}

/* Mobile Menu & Drawer Components */
.mobile-menu-btn {
  display: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.mobile-menu-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.sidebar-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.sidebar-close-btn {
  display: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-close-btn:hover {
  background: rgba(244, 63, 94, 0.25);
  color: var(--rose);
  border-color: var(--rose);
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-backdrop.active,
.sidebar-backdrop.mobile-open {
  opacity: 1;
  visibility: visible;
}

/* Medium & Small Mobile Breakpoint (< 768px) */
@media (max-width: 768px) {
  /* Prevent horizontal screen sway without breaking position:sticky */
  body, html {
    overflow-x: clip !important;
    width: 100% !important;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }

  .sidebar-close-btn {
    display: inline-flex;
  }

  /* Slide-in Navigation Drawer */
  .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 290px !important;
    max-width: 85vw !important;
    z-index: 1050 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: rgba(8, 12, 22, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.85) !important;
    border-right: 1px solid rgba(34, 211, 238, 0.2) !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* Main Viewport Adjustments */
  .main-viewport {
    margin-left: 0 !important;
    padding: 14px 12px calc(var(--nav-height-mobile) + 24px) 12px !important;
    max-width: 100vw !important;
    overflow: visible !important;
  }

  /* ==============================================================
     TOP PAGE HEADER (NATIVE 54PX MOBILE APP BAR)
     ============================================================== */
  .page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: 54px !important;
    min-height: 54px !important;
    background: var(--bg-surface) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid var(--border-glass) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    padding: 0 12px !important;
    margin: -14px -12px 14px -12px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .header-title-area {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .header-title-area > div {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .header-title-area h1 {
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: var(--text-main) !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header-subtitle {
    font-size: 10.5px !important;
    gap: 4px !important;
    margin: 0 !important;
    font-family: var(--font-mono) !important;
    white-space: nowrap !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
  }

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

  /* Hide Desktop Header Actions on Mobile */
  .header-actions {
    display: none !important;
  }

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

  .desk-only {
    display: none !important;
  }

  /* Live Session Banner */
  .live-session-card {
    padding: 12px 14px;
    margin-bottom: 14px;
  }

  .live-session-header {
    gap: 12px;
    flex-direction: column;
    align-items: stretch;
  }

  .live-session-identity {
    gap: 10px;
  }

  .live-session-pulse-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .live-session-meta-chips {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .meta-chip {
    padding: 6px 8px;
  }

  .meta-chip-label {
    font-size: 9.5px;
  }

  .meta-chip-val {
    font-size: 11px;
  }

  #btn-banner-view-trades {
    grid-column: span 2;
    justify-content: center;
  }

  /* Performance Telemetry & Instrument Tabs */
  .instrument-tabs-bar {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-bottom: 12px;
    gap: 6px;
    scrollbar-width: none;
  }

  .instrument-tabs-bar::-webkit-scrollbar {
    display: none;
  }

  .instrument-tab-btn {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 6px;
  }

  .instrument-tab-btn .tab-count {
    font-size: 9.5px;
    padding: 1px 5px;
  }

  /* Master KPI Cards */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

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

  .kpi-label {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  .kpi-value {
    font-size: 17px !important;
    letter-spacing: -0.3px;
  }

  .kpi-sub-inr {
    font-size: 11.5px !important;
  }

  .kpi-sub {
    font-size: 9.5px !important;
    margin-top: 2px !important;
  }

  /* Desks Telemetry Grid */
  .desks-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .desk-card {
    padding: 14px 12px !important;
    gap: 10px !important;
  }

  .desk-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .desk-header .desk-channel-badge {
    display: none !important;
  }

  .desk-title {
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  .desk-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

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

  .stat-cell {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .stat-cell-label {
    font-size: 10px !important;
  }

  .stat-cell-val {
    font-size: 12.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stat-cell-sub-inr {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Active Position Radar */
  .active-positions-section {
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 15px !important;
  }

  /* Tables: Trade Book, Scalper, Equity Journal */
  .intel-table,
  .trade-table {
    min-width: 600px !important;
    font-size: 12px !important;
  }

  .intel-table th,
  .intel-table td,
  .trade-table th,
  .trade-table td {
    padding: 8px 6px !important;
  }

  /* Multi-Year History Sync Toolbar & Ledger Filters */
  .multi-year-sync-container {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  .multi-year-sync-container.hidden,
  .multi-year-sync-container[style*="display: none"],
  #backtest-year-toolbar.hidden,
  #backtest-year-toolbar[style*="display: none"] {
    display: none !important;
  }

  .year-filter-group {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  .btn-year-filter {
    flex: 1 1 35px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    text-align: center !important;
  }

  .year-dropdown {
    width: 100% !important;
    margin-top: 4px !important;
  }

  /* Upgraded 2-Tier Outcome Summary Bar on Mobile */
  .ledger-outcome-summary-bar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ledger-outcome-summary-bar .outcome-stat-pill {
    padding: 6px 4px !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .ledger-outcome-summary-bar .outcome-stat-pill .dot {
    display: none !important;
  }

  .ledger-outcome-summary-bar .outcome-stat-pill .label {
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .ledger-outcome-summary-bar .outcome-stat-pill strong {
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  .ledger-outcome-summary-bar .outcome-stat-pill .sub {
    font-size: 9px !important;
    opacity: 0.8 !important;
    white-space: nowrap !important;
  }

  .ledger-outcome-summary-bar .outcome-stat-pill.pnl {
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ledger-stats-cluster {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  /* Upgraded Mobile Filter Controls Row (Sub-Filter-Row & Filter-Controls-Row) */
  .sub-filter-row,
  .filter-controls-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    background: rgba(10, 16, 28, 0.75) !important;
    border: 1px solid rgba(34, 211, 238, 0.15) !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sub-filter-row .sub-filter-group,
  .filter-controls-row .sub-filter-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .sub-filter-row .search-and-reset-wrap,
  .filter-controls-row .search-and-reset-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .sub-filter-row .search-and-reset-wrap .sub-filter-group.search-group,
  .filter-controls-row .search-and-reset-wrap .sub-filter-group.search-group {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .sub-filter-row .search-and-reset-wrap .sub-filter-group.reset-group,
  .filter-controls-row .search-and-reset-wrap .sub-filter-group.reset-group {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
    align-self: flex-end !important;
  }

  .sub-filter-row .filter-dropdowns-grid,
  .filter-controls-row .filter-dropdowns-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .sub-filter-row .filter-label,
  .filter-controls-row .filter-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
  }

  .sub-filter-row select,
  .sub-filter-row input,
  .filter-controls-row select,
  .filter-controls-row input {
    width: 100% !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
  }

  .sub-filter-row .modern-date-navigator {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .sub-filter-row .modern-date-navigator .modern-nav-btn {
    flex: 1 1 auto !important;
    font-size: 10px !important;
    padding: 6px 8px !important;
    min-height: 32px !important;
  }

  .sub-filter-row .modern-date-input-wrap {
    width: 100% !important;
    margin-top: 4px !important;
  }

  .sub-filter-row .modern-date-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sub-filter-row .sub-filter-group.reset-group,
  .filter-controls-row .sub-filter-group.reset-group {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .btn-cyber-reset {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
  }

  .btn-cyber-reset span,
  .btn-cyber-reset .desk-only {
    display: none !important;
  }

  /* Analytics Screen Mobile Filter Controls */
  .analytics-filter-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .analytics-filter-controls {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  .analytics-select-reset-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .analytics-select-reset-group select {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .analytics-select-reset-group .btn-cyber-reset {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
  }

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

  /* Pagination Bar on Mobile */
  .pagination-bar {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    padding-top: 10px !important;
  }

  .pagination-controls {
    justify-content: center !important;
  }

  .page-btn {
    padding: 6px 10px !important;
    min-height: 36px !important;
  }

  /* Scalper Panel on Mobile */
  .scalper-config-card {
    padding: 14px 12px !important;
  }

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

  .scalper-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    background: rgba(10, 16, 28, 0.75) !important;
    border: 1px solid rgba(34, 211, 238, 0.15) !important;
    border-radius: 12px !important;
  }

  .scalper-filter-bar .sub-filter-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
  }

  .scalper-filter-bar .filter-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
  }

  .scalper-filter-bar input,
  .scalper-filter-bar select {
    width: 100% !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
  }

  .scalper-filter-bar .sub-filter-group.reset-group {
    margin-top: 4px !important;
  }

  .scalper-algo-box {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  /* Analytics & Charts on Mobile */
  .chart-container-card {
    padding: 14px 10px !important;
    overflow: hidden !important;
  }

  #chart-model-donut {
    max-width: 100% !important;
  }

  /* Native Bottom Sheets on Mobile */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .trade-modal-box,
  .desk-breakdown-modal-box,
  .journal-inspect-box,
  .morning-intel-modal-box,
  .trade-logs-modal-box,
  .bottom-sheet-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    padding: 16px 18px calc(env(safe-area-inset-bottom, 16px) + 20px) 18px !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
    animation: slideUpSheet 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important;
  }

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

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

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

  /* Scalper Strikes Grid on Mobile */
  .scalper-strikes-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Settings Rows on Mobile */
  .setting-row {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }

  .setting-info {
    max-width: 100% !important;
    flex: 1 1 200px !important;
  }

  .setting-row select,
  .setting-row input[type="text"],
  .setting-row input[type="number"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Radar & Screener Header Rows on Mobile */
  .radar-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .radar-header-left {
    width: 100% !important;
  }

  .radar-indices-row {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .radar-indices-row .index-badge {
    flex-shrink: 0 !important;
  }

  /* Scanner Filter Bar on Mobile */
  .scanner-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .scanner-desk-pills {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .scanner-desk-pills::-webkit-scrollbar {
    display: none !important;
  }

  .scanner-desk-pills .desk-filter-pill,
  .scanner-desk-pills .scanner-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .scanner-search-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .scanner-search-box input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Screener Control Bar on Mobile */
  .screener-control-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .screener-cohort-group {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .screener-cohort-group::-webkit-scrollbar {
    display: none !important;
  }

  .screener-cohort-group .sc-cohort-btn,
  .screener-cohort-group .sc-top10-btn,
  .screener-cohort-group .journal-wave-btn,
  .screener-cohort-group .cohort-label {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .screener-pill-group {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .screener-pill-group::-webkit-scrollbar {
    display: none !important;
  }

  .screener-pill-group .screener-pill,
  .screener-pill-group .sc-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .radar-indices-row {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .radar-indices-row::-webkit-scrollbar {
    display: none !important;
  }

  .radar-indices-row .index-badge {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .screener-actions-right {
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Equity Journal Date Bar on Mobile */
  .journal-date-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .journal-date-pills {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .modern-date-navigator {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    background: rgba(12, 19, 35, 0.9) !important;
    border: 1px solid rgba(34, 211, 238, 0.28) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(34, 211, 238, 0.05) !important;
  }

  .modern-nav-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 6px !important;
  }

  .modern-date-input-wrap {
    width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
  }

  .modern-date-input {
    width: 100% !important;
    height: 36px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    background: rgba(6, 10, 20, 0.95) !important;
    border: 1px solid rgba(34, 211, 238, 0.35) !important;
    border-radius: 6px !important;
    color: var(--cyan) !important;
  }

  .btn-cyber-reset {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .btn-cyber-reset span {
    display: none !important;
  }

  .btn-cyber-reset svg,
  .btn-cyber-reset .reset-icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
  }

  .scanner-search-box .btn-cyber-reset {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Donut chart wrap */
  .chart-canvas-wrap.donut-wrap {
    height: 290px !important;
  }

  /* Viewport and Layout Overflow Safeguards */
  body,
  .app-container,
  .main-content {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  /* Mobile Bottom Navigation Bar */
  .bottom-nav {
    height: 58px !important;
    padding: 0 4px !important;
  }

  .nav-item {
    font-size: 10px !important;
    padding: 4px 6px !important;
    gap: 2px !important;
  }

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

/* Extra Small Phones (< 400px) */
@media (max-width: 400px) {
  .kpi-value {
    font-size: 15px !important;
  }
  .stat-cell-val {
    font-size: 12px !important;
  }
  .header-title-area h1 {
    font-size: 18px !important;
  }
  .meta-chip-val {
    font-size: 10px !important;
  }
}

/* ==============================================================
   NATIVE MOBILE CARDS & HAPTIC TOUCH SYSTEM (DESKTOP BASELINE)
   ============================================================== */
.m-card-label {
  display: none;
}

.m-card-badge {
  display: none;
}

.mob-only {
  display: none !important;
}

.desk-only {
  display: inline !important;
}

button,
a,
.nav-item,
.sc-pill,
.scanner-pill,
.clickable-trade-row,
.scalper-trade-row,
.page-btn,
.modern-nav-btn,
.btn-cyber-reset {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ==============================================================
   NATIVE MOBILE EXPERIENCES (PHONES <= 768px)
   ============================================================== */
@media (max-width: 768px) {
  .m-card-label {
    display: inline !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  .m-card-badge {
    display: inline-flex !important;
    margin-right: 6px !important;
    font-size: 9.5px !important;
    padding: 2px 6px !important;
  }

  /* Safe Area Insets for iPhones with Home Indicator */
  .bottom-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Native Touch Active Feedback */
  button:active,
  .clickable-trade-row:active,
  .scalper-trade-row:active,
  .btn-cyber-reset:active,
  .nav-item:active {
    transform: scale(0.975) !important;
    transition: transform 0.08s ease !important;
  }

  /* ------------------------------------------------------------
     1. LIVE TRADE BOOK NATIVE POSITION CARDS
     ------------------------------------------------------------ */
  #trade-table-container.table-container {
    overflow-x: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  #trade-table-container table.trade-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
  }

  #trade-table-container table.trade-table thead {
    display: none !important;
  }

  #trade-table-container table.trade-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #trade-table-container .clickable-trade-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 6px 12px !important;
    padding: 12px 14px !important;
    background: linear-gradient(145deg, rgba(16, 25, 44, 0.94), rgba(8, 14, 26, 0.98)) !important;
    border: 1px solid rgba(34, 211, 238, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 0 12px rgba(34, 211, 238, 0.03) !important;
    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.1s ease, border-color 0.15s ease !important;
  }

  #trade-table-container .clickable-trade-row:active {
    transform: scale(0.98) !important;
    border-color: rgba(34, 211, 238, 0.55) !important;
  }

  #trade-table-container .clickable-trade-row > td {
    display: block !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-contract {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #fff !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: none !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-contract strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-contract .m-card-badge {
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    font-size: 8.5px !important;
    padding: 2px 5px !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-pnl {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    text-align: right !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: none !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-desk {
    display: none !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-model {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    font-size: 10.5px !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: none !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-outcome {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: right !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: none !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-outcome .outcome-pill {
    padding: 3px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-entry {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 0 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    font-size: 11px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-exit {
    grid-column: 2 / 3 !important;
    grid-row: 3 / 4 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: right !important;
    padding: 6px 0 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    font-size: 11px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-capital {
    grid-column: 1 / 2 !important;
    grid-row: 4 / 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 0 0 0 !important;
    font-size: 11px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border: none !important;
  }

  #trade-table-container .clickable-trade-row > td.trade-col-time {
    grid-column: 2 / 3 !important;
    grid-row: 4 / 5 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;
    text-align: right !important;
    padding: 3px 0 0 0 !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    border: none !important;
  }

  /* ------------------------------------------------------------
     2. NIFTY SCALPER NATIVE POSITION CARDS
     ------------------------------------------------------------ */
  .scalper-trade-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 6px 10px !important;
    padding: 13px 14px 11px 14px !important;
    background: linear-gradient(145deg, rgba(16, 25, 44, 0.94), rgba(8, 14, 26, 0.98)) !important;
    border: 1px solid rgba(34, 211, 238, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    margin-bottom: 10px !important;
  }

  .scalper-col-contract {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
  }

  .scalper-col-pnl-pts {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
    font-size: 13px !important;
  }

  .scalper-col-model {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
  }

  .scalper-col-outcome {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
  }

  .scalper-col-side {
    display: none !important;
  }

  .scalper-col-entry {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
    padding: 6px 0 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    font-size: 10.5px !important;
  }

  .scalper-col-exit {
    grid-column: 2 / 3 !important;
    grid-row: 3 / 4 !important;
    text-align: right !important;
    justify-self: end !important;
    padding: 6px 0 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    font-size: 10.5px !important;
  }

  .scalper-col-pnl-inr {
    grid-column: 1 / 2 !important;
    grid-row: 4 / 5 !important;
    padding: 2px 0 0 0 !important;
    font-size: 11px !important;
  }

  .scalper-col-time {
    grid-column: 2 / 3 !important;
    grid-row: 4 / 5 !important;
    text-align: right !important;
    justify-self: end !important;
    padding: 2px 0 0 0 !important;
    font-size: 10px !important;
  }

  /* ------------------------------------------------------------
     3. NATIVE iOS / ANDROID BOTTOM SHEETS
     ------------------------------------------------------------ */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .trade-modal-box,
  .desk-modal-box,
  .desk-breakdown-modal-box,
  .journal-inspect-box,
  .morning-intel-modal-box,
  .trade-logs-modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px)) 16px !important;
    border-radius: 24px 24px 0 0 !important;
    border: 1px solid rgba(34, 211, 238, 0.35) !important;
    border-bottom: none !important;
    margin: 0 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85), 0 0 24px rgba(34, 211, 238, 0.15) !important;
    animation: sheetSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* iOS Grab Handle Indicator */
  .trade-modal-box::before,
  .desk-modal-box::before,
  .desk-breakdown-modal-box::before,
  .journal-inspect-box::before,
  .morning-intel-modal-box::before,
  .trade-logs-modal-box::before {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    margin: 4px auto 14px auto !important;
  }

  /* Horizontal Scrolling Pills Bar */
  .horizontal-scroll-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .horizontal-scroll-pills::-webkit-scrollbar {
    display: none !important;
  }

  .horizontal-scroll-pills button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ------------------------------------------------------------
     4. LIVE MARKET RADAR NATIVE CONTRACT QUOTE CARDS
     ------------------------------------------------------------ */
  #view-radar .table-responsive,
  #view-market-radar .table-responsive {
    overflow-x: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

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

  #table-market-radar thead {
    display: none !important;
  }

  #table-market-radar tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .radar-card-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 6px 10px !important;
    padding: 12px 14px !important;
    background: linear-gradient(145deg, rgba(16, 25, 44, 0.94), rgba(8, 14, 26, 0.98)) !important;
    border: 1px solid rgba(34, 211, 238, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .radar-col-scrip {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .radar-col-scrip .scrip-name {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #fff !important;
  }

  .radar-col-ltp {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
  }

  .radar-col-ltp .radar-ltp-val {
    font-size: 14px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
    color: #fff !important;
  }

  .radar-col-ltp .radar-chg-val {
    font-size: 10.5px !important;
    font-weight: 700 !important;
  }

  /* Day Range Full Width Slider */
  .radar-col-range {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    padding: 6px 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  .radar-col-range .day-range-container {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* OI Metric & Sparkline */
  .radar-col-oi {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .radar-col-spark {
    grid-column: 2 / 3 !important;
    grid-row: 3 / 4 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
  }

  .radar-col-spark svg {
    max-width: 90px !important;
    height: 20px !important;
  }

  /* Signal Badge & Model Setup Tag */
  .radar-col-signal {
    grid-column: 1 / 2 !important;
    grid-row: 4 / 5 !important;
    padding: 2px 0 0 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .radar-col-setup {
    grid-column: 2 / 3 !important;
    grid-row: 4 / 5 !important;
    padding: 2px 0 0 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
  }

  /* Hide raw Open/High/Low numbers on mobile cards */
  .radar-col-open,
  .radar-col-high,
  .radar-col-low {
    display: none !important;
  }

  /* ------------------------------------------------------------
     5. MULTI-CAP STOCK SCREENER NATIVE CARDS
     ------------------------------------------------------------ */
  #view-stock-screener .table-responsive {
    overflow-x: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

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

  #table-stock-screener thead {
    display: none !important;
  }

  #table-stock-screener tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  tr.stock-main-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 6px 10px !important;
    padding: 12px 14px !important;
    background: linear-gradient(145deg, rgba(16, 25, 44, 0.94), rgba(8, 14, 26, 0.98)) !important;
    border: 1px solid rgba(34, 211, 238, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  tr.stock-main-row:active {
    transform: scale(0.98) !important;
    border-color: rgba(34, 211, 238, 0.55) !important;
  }

  .sc-col-stock {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .sc-col-stock .scrip-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #fff !important;
  }

  .sc-col-ltp {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
  }

  .sc-col-ltp .sc-ltp-val {
    font-size: 14px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
    color: #fff !important;
  }

  .sc-col-ltp .sc-chg-val {
    font-size: 10.5px !important;
    font-weight: 700 !important;
  }

  /* Day Range Bar full width */
  .sc-col-range {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    padding: 6px 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  .sc-col-range .day-range-container {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Confluence & Signal Badges */
  .sc-col-signal {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .sc-col-logic {
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
    padding: 0 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 65px !important;
  }

  .sc-col-rvol {
    grid-column: 2 / 3 !important;
    grid-row: 3 / 4 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .sc-col-strength {
    display: none !important;
  }

  /* Action button to open blueprint drawer */
  .sc-col-action {
    grid-column: 1 / -1 !important;
    grid-row: 4 / 5 !important;
    padding: 4px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  .sc-col-action .btn-toggle-drawer {
    width: 100% !important;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    background: rgba(34, 211, 238, 0.12) !important;
    border: 1px solid rgba(34, 211, 238, 0.3) !important;
    border-radius: 8px !important;
    color: var(--cyan) !important;
  }

  .sc-col-open,
  .sc-col-high,
  .sc-col-low {
    display: none !important;
  }

  /* Blueprint Accordion Drawer on Mobile */
  tr.stock-detail-row {
    display: none !important;
  }

  tr.stock-detail-row.open {
    display: block !important;
    width: 100% !important;
    margin-top: -6px !important;
    margin-bottom: 6px !important;
  }

  tr.stock-detail-row td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
  }

  .stock-drawer-inner {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .stock-metrics-meta {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 10px !important;
  }

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

  .option-chain-strip {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
  }

  .option-strip-card {
    flex-shrink: 0 !important;
    min-width: 160px !important;
  }

  /* ------------------------------------------------------------
     6. EQUITY SIGNALS & EOD AUDIT JOURNAL NATIVE CARDS
     ------------------------------------------------------------ */
  #view-equity-journal .table-responsive {
    overflow-x: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

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

  #table-equity-journal thead {
    display: none !important;
  }

  #table-equity-journal tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  tr.journal-table-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 6px 10px !important;
    padding: 12px 14px !important;
    background: linear-gradient(145deg, rgba(16, 25, 44, 0.94), rgba(8, 14, 26, 0.98)) !important;
    border: 1px solid rgba(34, 211, 238, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  tr.journal-table-row:active {
    transform: scale(0.98) !important;
    border-color: rgba(34, 211, 238, 0.55) !important;
  }

  .eq-col-num {
    display: none !important;
  }

  .eq-col-stock {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
  }

  .eq-col-ltp {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
  }

  .eq-col-ltp .eq-ltp-val {
    font-size: 14px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
    color: var(--cyan) !important;
  }

  .eq-col-bias {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .eq-col-conviction {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 55px !important;
  }

  .eq-col-netr {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .eq-col-roi {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
    margin-right: 50px !important;
  }

  /* Milestone Status Pill Full Width */
  .eq-col-milestone {
    grid-column: 1 / -1 !important;
    grid-row: 3 / 4 !important;
    padding: 4px 0 !important;
    border: none !important;
    text-align: center !important;
  }

  .eq-col-milestone .milestone-pill-large {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  /* Levels (Entry / SL) & Capital */
  .eq-col-entry {
    grid-column: 1 / 2 !important;
    grid-row: 4 / 5 !important;
    padding: 6px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    font-size: 11px !important;
    text-align: left !important;
  }

  .eq-col-capital {
    grid-column: 2 / 3 !important;
    grid-row: 4 / 5 !important;
    padding: 6px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    font-size: 11px !important;
    text-align: right !important;
    justify-self: end !important;
  }

  /* Inspect Action Button Full Width */
  .eq-col-action {
    grid-column: 1 / -1 !important;
    grid-row: 5 / 6 !important;
    padding: 4px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  .eq-col-action .btn-inspect-journal {
    width: 100% !important;
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    background: rgba(34, 211, 238, 0.12) !important;
    border: 1px solid rgba(34, 211, 238, 0.3) !important;
    border-radius: 8px !important;
    color: var(--cyan) !important;
  }
}

@keyframes sheetSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==============================================================
   SWING EQUITY SCREENER & ACTIVE PORTFOLIO STYLING
   ============================================================== */
.swing-subtabs-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.swing-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.swing-tab-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.swing-tab-btn.active {
  background: rgba(19, 187, 132, 0.12);
  border-color: var(--emerald);
  color: var(--emerald);
  box-shadow: 0 0 14px rgba(19, 187, 132, 0.2);
}

.btn-swing-buy-mini {
  background: rgba(19, 187, 132, 0.14);
  border: 1px solid rgba(19, 187, 132, 0.35);
  color: var(--emerald);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-swing-buy-mini:hover {
  background: var(--emerald);
  color: #060911;
  transform: translateY(-1px);
}

.btn-swing-drawer-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-sub);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-swing-drawer-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Swing Portfolio Cards Grid */
.swing-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.swing-card {
  background: rgba(14, 20, 36, 0.7);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  transition: all 0.25s ease;
}

.swing-card:hover {
  border-color: rgba(19, 187, 132, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.swing-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.swing-card-sym {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-heading);
}

.swing-card-sector {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.swing-pnl-pill {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
}

.swing-pnl-pill.green {
  background: rgba(19, 187, 132, 0.12);
  color: var(--emerald);
  border: 1px solid rgba(19, 187, 132, 0.25);
}

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

/* Swing Milestone Progress Meter */
.swing-progress-container {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px;
  margin: 12px 0;
}

.swing-progress-bar-wrap {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin: 8px 0 6px 0;
  overflow: hidden;
}

.swing-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rose) 0%, var(--gold) 35%, var(--emerald) 70%, var(--cyan) 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.swing-progress-markers {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* Day-by-Day Telemetry Timeline */
.swing-telemetry-box {
  background: rgba(6, 9, 17, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  display: none;
}

.swing-telemetry-box.open {
  display: block;
  animation: fadeIn 0.25s ease;
}

.swing-telemetry-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
}

.swing-telemetry-item:last-child {
  border-bottom: none;
}

.swing-day-badge {
  background: rgba(34, 211, 238, 0.15);
  color: var(--cyan);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 700;
  font-size: 10px;
  font-family: var(--font-mono);
}

/* Card Actions Row */
.swing-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-swing-stats-toggle {
  flex: 1;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: var(--cyan);
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-swing-stats-toggle:hover {
  background: rgba(34, 211, 238, 0.2);
  color: #fff;
}

.btn-swing-exit-trigger {
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.25);
  color: var(--rose);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-swing-exit-trigger:hover {
  background: var(--rose);
  color: #fff;
}

/* Mobile Media Queries for Swing UI */
@media (max-width: 768px) {
  .swing-portfolio-grid {
    grid-template-columns: 1fr;
  }
  .swing-subtabs-wrap {
    width: 100%;
    margin-top: 10px;
  }
  .swing-tab-btn {
    flex: 1;
    justify-content: center;
    padding: 6px 8px;
    font-size: 11px;
  }
  .screener-filter-bar {
    flex-direction: column;
    align-items: stretch !important;
  }
  .sub-filter-group {
    width: 100%;
  }
}

/* ==============================================================
   CYBER INSTITUTIONAL COMMAND BAR & INPUTS STYLING
   ============================================================== */
.screener-filter-bar {
  background: rgba(14, 20, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.screener-mode-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.screener-mode-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-sub);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.screener-mode-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.screener-mode-btn.active {
  background: rgba(19, 187, 132, 0.14) !important;
  border-color: var(--emerald) !important;
  color: var(--emerald) !important;
  box-shadow: 0 0 14px rgba(19, 187, 132, 0.25) !important;
  font-weight: 700;
}

/* 7. BTN-CYBER-PRIMARY — blue primary action style */
.btn-cyber-primary {
  background: linear-gradient(135deg, rgba(38, 100, 236, 0.16) 0%, rgba(79, 71, 231, 0.16) 100%) !important;
  border: 1px solid var(--primary) !important;
  color: var(--emerald) !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 0 14px rgba(19, 187, 132, 0.15) !important;
  transition: all 0.2s ease !important;
}

.btn-cyber-primary:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 22px rgba(19, 187, 132, 0.45) !important;
  transform: translateY(-1px) !important;
}

.filter-input, .filter-select {
  background: rgba(8, 12, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #ffffff;
  padding: 8px 12px;
  font-size: 12px;
  font-family: var(--font-body);
  outline: none;
  transition: all 0.2s ease;
}

.filter-input:focus, .filter-select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
  background: rgba(10, 16, 28, 0.95);
}

.sub-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sub-filter-group .filter-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}

/* Modal visibility override */
.modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==============================================================
   UNIVERSAL INSTITUTIONAL LEFT BORDER ON TABLE ROW HOVER & SWING DESIGNS
   ============================================================== */
/* Universal row hover emerald highlight for ALL tables in the application */
.data-table tbody tr:not(.stock-detail-row):not(.empty-row):hover,
.trade-table tbody tr:hover,
.screener-table tbody tr:hover,
.scalper-table tbody tr:hover,
.intel-table tbody tr:hover,
#swing-screener-table tbody tr.swing-stock-row:hover,
#swing-closed-table tbody tr.swing-closed-row:hover,
#table-stock-screener tbody tr.stock-main-row:hover,
#scalper-table tbody tr:hover,
#equity-journal-table tbody tr:hover,
#backtest-table tbody tr:hover {
  background: rgba(19, 187, 132, 0.045) !important;
  cursor: pointer;
}

.data-table tbody tr:not(.stock-detail-row):not(.empty-row):hover td:first-child,
.trade-table tbody tr:hover td:first-child,
.screener-table tbody tr:hover td:first-child,
.scalper-table tbody tr:hover td:first-child,
.intel-table tbody tr:hover td:first-child,
#swing-screener-table tbody tr.swing-stock-row:hover td:first-child,
#swing-closed-table tbody tr.swing-closed-row:hover td:first-child,
#table-stock-screener tbody tr.stock-main-row:hover td:first-child,
#scalper-table tbody tr:hover td:first-child,
#equity-journal-table tbody tr:hover td:first-child,
#backtest-table tbody tr:hover td:first-child {
  border-left: 3px solid var(--emerald) !important;
  transition: border-left 0.15s ease;
}

/* Desktop Swing Screener & Closed Table */
#swing-screener-table, #swing-closed-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
}

#swing-screener-table th, #swing-closed-table th {
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-sub);
  background: rgba(10, 15, 28, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

#swing-screener-table td, #swing-closed-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  white-space: nowrap;
}

.swing-clickable-row {
  cursor: pointer;
  transition: all 0.18s ease;
}

/* Swing Pagination Controls */
.swing-pagination-bar {
  background: rgba(14, 20, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.swing-page-num-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-sub);
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 32px;
  text-align: center;
}

.swing-page-num-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.swing-page-num-btn.active {
  background: rgba(19, 187, 132, 0.18) !important;
  border-color: var(--emerald) !important;
  color: var(--emerald) !important;
  box-shadow: 0 0 10px rgba(19, 187, 132, 0.25) !important;
  font-weight: 700;
}

/* ==============================================================
   MOBILE CARD TRANSFORMATION (Max-Width: 768px)
   Matches the design of other screener cards without horizontal overflow
   ============================================================== */
@media (max-width: 768px) {
  /* Prevent any horizontal screen bleed */
  #view-swing-screener {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 10px 10px 80px 10px !important;
  }

  #view-swing-screener .table-container {
    overflow-x: visible !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Reset tables to block for card transformation */
  #swing-screener-table,
  #swing-closed-table {
    min-width: 0 !important;
    width: 100% !important;
    display: block !important;
    border-collapse: collapse !important;
  }

  #swing-screener-table thead,
  #swing-closed-table thead {
    display: none !important;
  }

  #swing-screener-table tbody,
  #swing-closed-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* -------------------------------------------------------------
     1. SWING SCREENER STOCK CARD (Mobile)
     ------------------------------------------------------------- */
  tr.swing-stock-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 10px !important;
    padding: 14px !important;
    background: linear-gradient(145deg, rgba(16, 25, 44, 0.94), rgba(8, 14, 26, 0.98)) !important;
    border: 1px solid rgba(19, 187, 132, 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  tr.swing-stock-row:active {
    border-color: rgba(19, 187, 132, 0.55) !important;
    transform: scale(0.99) !important;
  }

  /* Row 1: Stock Symbol & Sector (Left) */
  .sw-col-stock {
    grid-column: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* Row 1: LTP & 52W Dist (Right) */
  .sw-col-ltp {
    grid-column: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }

  /* Row 2: Pattern Badge (Left) */
  .sw-col-pattern {
    grid-column: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Row 2: RS Rating (Right) */
  .sw-col-rs {
    grid-column: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* Row 3: Delivery % & RVOL (Full width strip) */
  .sw-col-delivery {
    grid-column: 1 / -1 !important;
    padding: 6px 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Row 4: 1-Share Execution Levels (Entry, SL, Targets) */
  .sw-col-entry {
    grid-column: 1 / 2 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  .sw-col-targets {
    grid-column: 2 / 3 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    text-align: right !important;
  }

  /* Row 5: F&O Spread Note */
  .sw-col-fno {
    grid-column: 1 / -1 !important;
    padding: 2px 0 0 0 !important;
    border: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Row 6: Action Buttons */
  .sw-col-action {
    grid-column: 1 / -1 !important;
    padding: 8px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  .sw-col-action > div {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .sw-col-action .btn-swing-buy-mini {
    flex: 1 !important;
    justify-content: center !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }

  .sw-col-action .btn-swing-drawer-toggle {
    padding: 9px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  /* -------------------------------------------------------------
     BLUEPRINT ACCORDION DRAWER ON MOBILE
     ------------------------------------------------------------- */
  tr.stock-detail-row.swing-detail-row {
    display: none !important;
    width: 100% !important;
  }

  tr.stock-detail-row.swing-detail-row.open {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: -6px !important;
    margin-bottom: 6px !important;
  }

  tr.stock-detail-row.swing-detail-row td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: none !important;
  }

  tr.stock-detail-row.swing-detail-row .glass-card {
    padding: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border-radius: 12px !important;
  }

  /* Dual blueprints stack in 1 column on mobile */
  tr.stock-detail-row.swing-detail-row .glass-card > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* -------------------------------------------------------------
     2. AUDITED CLOSED SWINGS LEDGER CARD (Mobile)
     ------------------------------------------------------------- */
  tr.swing-closed-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 10px !important;
    padding: 14px 16px !important;
    background: linear-gradient(145deg, rgba(16, 25, 44, 0.94), rgba(8, 14, 26, 0.98)) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .swc-col-id {
    grid-column: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 11px !important;
  }

  .swc-col-outcome {
    grid-column: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
  }

  .swc-col-sym {
    grid-column: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
  }

  .swc-col-pnl {
    grid-column: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    justify-self: end !important;
    font-size: 14px !important;
  }

  .swc-col-entry-date {
    grid-column: 1 / 2 !important;
    padding: 4px 0 !important;
    border: none !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
  }

  .swc-col-exit-date {
    grid-column: 2 / 3 !important;
    padding: 4px 0 !important;
    border: none !important;
    text-align: right !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
  }

  .swc-col-entry-p {
    grid-column: 1 / 2 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 12px !important;
  }

  .swc-col-exit-p {
    grid-column: 2 / 3 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    font-size: 12px !important;
  }

  .swc-col-days,
  .swc-col-qty,
  .swc-col-pct {
    display: none !important;
  }

  .swc-col-r {
    grid-column: 1 / 2 !important;
    padding: 4px 0 !important;
    border: none !important;
    font-size: 12px !important;
  }

  .swc-col-reason {
    grid-column: 1 / -1 !important;
    padding: 6px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-size: 11px !important;
    color: var(--text-sub) !important;
    white-space: normal !important;
  }

  /* Pagination Bar on Mobile */
  .swing-pagination-bar {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==============================================================
   STOCK NOTES & WATCHLIST IDEAS STYLES
   ============================================================== */
.btn-create-note {
  background: linear-gradient(135deg, rgba(19, 187, 132, 0.18), rgba(0, 217, 245, 0.22));
  border: 1px solid rgba(19, 187, 132, 0.45);
  color: #13bb84;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(19, 187, 132, 0.12);
}

.btn-create-note:hover {
  background: linear-gradient(135deg, rgba(19, 187, 132, 0.3), rgba(0, 217, 245, 0.35));
  border-color: #13bb84;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(19, 187, 132, 0.25);
}

.notes-search-box {
  width: 100%;
  background: rgba(14, 20, 36, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.notes-search-box:focus {
  border-color: var(--accent);
  background: rgba(18, 26, 48, 0.95);
  box-shadow: 0 0 0 2px rgba(19, 187, 132, 0.15);
}

.btn-filter-pinned {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-sub);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-filter-pinned.active {
  background: rgba(255, 193, 7, 0.16);
  border-color: var(--gold);
  color: var(--gold);
}

.note-tag-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-sub);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.note-tag-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.note-tag-chip.active {
  background: rgba(19, 187, 132, 0.14);
  border-color: rgba(19, 187, 132, 0.4);
  color: var(--accent);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}

.note-card {
  background: rgba(14, 20, 36, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.note-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.note-card.pinned {
  border-color: rgba(255, 193, 7, 0.35);
  background: linear-gradient(180deg, rgba(255, 193, 7, 0.04) 0%, rgba(14, 20, 36, 0.85) 100%);
}

.note-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
}

.note-card-ticker-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.note-ticker-badge {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.note-sentiment-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.note-sentiment-badge.bullish {
  background: rgba(19, 187, 132, 0.15);
  color: var(--emerald);
  border: 1px solid rgba(19, 187, 132, 0.3);
}

.note-sentiment-badge.bearish {
  background: rgba(230, 57, 70, 0.15);
  color: var(--crimson);
  border: 1px solid rgba(230, 57, 70, 0.3);
}

.note-sentiment-badge.watchlist {
  background: rgba(255, 193, 7, 0.15);
  color: var(--gold);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.note-sentiment-badge.neutral {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-sub);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.note-timeframe-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-sub);
}

.note-pin-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  color: var(--text-sub);
  transition: all 0.15s ease;
  line-height: 1;
}

.note-pin-btn:hover {
  transform: scale(1.15);
}

.note-pin-btn.pinned {
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.6));
}

.note-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.4;
}

.note-card-content {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 14px;
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-levels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.note-level-box {
  display: flex;
  flex-direction: column;
}

.note-level-lbl {
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.note-level-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.note-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.note-card-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--cyan);
  background: rgba(0, 217, 245, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(0, 217, 245, 0.15);
}

.note-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

.note-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.note-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-sub);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.note-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.note-action-btn.delete:hover {
  background: rgba(230, 57, 70, 0.2);
  border-color: rgba(230, 57, 70, 0.4);
  color: var(--crimson);
}

/* Screener note button */
.btn-screener-note {
  background: rgba(0, 217, 245, 0.1);
  border: 1px solid rgba(0, 217, 245, 0.25);
  color: var(--cyan);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-screener-note:hover {
  background: rgba(0, 217, 245, 0.2);
  border-color: var(--cyan);
  color: #fff;
  transform: translateY(-1px);
}

/* Stock Notes Modal Overlay explicit support */
#modal-stock-note {
  display: none;
}
#modal-stock-note.active,
#modal-stock-note.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#modal-stock-note.active .trade-modal-box,
#modal-stock-note.open .trade-modal-box {
  transform: scale(1) !important;
}

/* Delete Confirmation Modal Overlay */
#modal-confirm-delete-note {
  display: none;
}
#modal-confirm-delete-note.active,
#modal-confirm-delete-note.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
#modal-confirm-delete-note.active .trade-modal-box,
#modal-confirm-delete-note.open .trade-modal-box {
  transform: scale(1) !important;
}

/* Plain Note Badge & Card enhancements */
.note-ticker-badge.plain {
  background: rgba(0, 217, 245, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(0, 217, 245, 0.3);
}

.note-mode-btn:hover {
  filter: brightness(1.15);
}

/* Mobile Media Queries for Notes */
@media (max-width: 768px) {
  .notes-grid {
    grid-template-columns: 1fr !important;
  }
  
  .notes-control-bar {
    padding: 12px !important;
  }
  
  .note-card {
    padding: 14px 16px !important;
  }
  
  .btn-create-note {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   Spot Index & Underlying Technical Levels (Audit Modal Section)
   ========================================================================== */
.spot-reference-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

.spot-reference-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.spot-icon {
  font-size: 16px;
}

.spot-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #e2e8f0;
  text-transform: uppercase;
}

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

.spot-subtile {
  background: rgba(8, 14, 26, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spot-sublabel {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.spot-val {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}

.spot-val.rose {
  color: var(--rose, #f43f5e);
}

.spot-val.gold {
  color: var(--gold, #f59e0b);
}

.spot-val.green {
  color: var(--emerald, #10b981);
}

.spot-val.cyan {
  color: var(--cyan, #06b6d4);
}

@media (max-width: 768px) {
  .spot-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .spot-reference-card {
    padding: 12px 14px;
  }
}



/* ==========================================================================
   NSE STOCKS (EQUITY JOURNAL) — MOBILE-ONLY FIXES
   All rules scoped to #view-equity-journal so desktop is completely unaffected.
   ========================================================================== */
@media (max-width: 768px) {

  /* 1. Header title: smaller font, flex-wrap so audit pill drops to its own line */
  #view-equity-journal .radar-title-badge {
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    align-items: flex-start !important;
  }
  #view-equity-journal .journal-page-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
    flex: 1 1 100% !important; /* full width so pill always goes below */
  }
  #view-equity-journal .market-session-pill {
    flex-shrink: 0 !important;
  }

  /* 2. Poll meta (wave schedule + "Top 10" text):
        stack vertically, hide bullet separators, trim font */
  #view-equity-journal .radar-poll-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    margin-top: 4px !important;
  }
  /* Hide the plain bullet separator spans (they have no id or style attr) */
  #view-equity-journal .radar-poll-meta > span:not([id]):not([style]) {
    display: none !important;
  }
  #view-equity-journal .radar-poll-meta > span[id],
  #view-equity-journal .radar-poll-meta > span[style] {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  /* 3. Metric badges: 2-column grid instead of horizontal scroll
        Makes all 5 badges visible without scrolling */
  #view-equity-journal .radar-indices-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    overflow-x: visible !important;
    flex-wrap: unset !important;
    gap: 8px !important;
    width: 100% !important;
    padding-bottom: 0 !important;
  }
  #view-equity-journal .radar-indices-row .index-badge {
    flex-shrink: unset !important;
    white-space: normal !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }
  /* 5th badge spans full width */
  #view-equity-journal .radar-indices-row .index-badge:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  /* 4. VIEW COHORT wave buttons: add right-fade to hint scrollability */
  #view-equity-journal .screener-control-bar {
    overflow: visible !important;
  }
  #view-equity-journal .screener-cohort-group {
    position: relative !important;
    padding-right: 24px !important; /* breathing room so last button isn't clipped */
    padding-bottom: 4px !important;
  }
  /* Subtle right-fade scroll hint */
  #view-equity-journal .screener-cohort-group::after {
    content: '';
    position: sticky !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    min-width: 24px !important;
    background: linear-gradient(to right, transparent, var(--bg-card)) !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
  }
  /* Make wave buttons slightly smaller on mobile */
  #view-equity-journal .journal-wave-btn {
    font-size: 11px !important;
    padding: 4px 9px !important;
    height: 30px !important;
    white-space: nowrap !important;
  }

  /* 5. Session badge + reset button: SINGLE ROW — badge expands, button stays compact */
  #view-equity-journal .journal-session-badge-wrap {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  #view-equity-journal .journal-session-badge-wrap .market-session-pill {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
  }
  #view-equity-journal .journal-session-badge-wrap .btn-cyber-reset {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    /* do NOT set width: 100% — keep it compact icon button */
  }

  /* 6. Cohort info text + refresh button: SINGLE ROW side by side */
  #view-equity-journal .screener-actions-right {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-top: 4px !important;
  }
  #view-equity-journal .screener-actions-right #journal-cohort-info {
    flex: 1 1 auto !important;
    font-size: 11px !important;
    font-family: inherit !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
  }
  #view-equity-journal .screener-actions-right .btn-refresh {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
  }

  /* 7. Stock cards — tighten entry/SL/capital section spacing */
  #view-equity-journal #tbody-equity-journal tr.stock-main-row td {
    padding: 6px 8px !important;
  }
  #view-equity-journal .eq-col-stock {
    padding-left: 10px !important;
  }
  /* Journal cohort-label on mobile */
  #view-equity-journal .cohort-label {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    padding-right: 4px !important;
  }

  /* 8. Stock card row 2 — Win % and R-Multiple alignment fix.
        eq-col-roi (+45.0%) and eq-col-netr (+1.50R) share the same grid cell.
        Stack them cleanly: roi (% gain) on top, netr (R-multiple) below.
        Both right-aligned. Remove the margin-right hack. */
  .eq-col-netr {
    align-self: end !important;      /* +1.50R at bottom of the shared cell */
    justify-self: end !important;
    text-align: right !important;
    margin-right: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .eq-col-roi {
    align-self: start !important;    /* +45.0% at top of the shared cell */
    justify-self: end !important;
    text-align: right !important;
    margin-right: 0 !important;
  }

} /* end @media (max-width: 768px) — NSE Stocks mobile fixes */


/* ============================================================
   ASH OPTIONS — Page & Settings Styles
   ============================================================ */

/* ── Period / Instrument pills on Ash Options page ── */
.ao-period-pill,
.ao-inst-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.ao-period-pill:hover,
.ao-inst-pill:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.ao-period-pill.active,
.ao-inst-pill.active {
  background: rgba(0, 212, 255, 0.12);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ── Period / Instrument pills on Option Strike page (identical to ao-*) ── */
.os-period-pill,
.os-inst-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.os-period-pill:hover,
.os-inst-pill:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.os-period-pill.active,
.os-inst-pill.active {
  background: rgba(0, 212, 255, 0.12);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ── Ash Options Settings Group ── */
.ao-settings-group {
  background: rgba(0, 212, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 24px;
}
.ao-settings-group .settings-group-title {
  color: var(--cyan);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  border: none;
  padding: 0;
}

/* ── Instrument card grid ── */
.ao-instrument-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.ao-instr-card {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.18s;
}
.ao-instr-card:hover {
  border-color: rgba(0, 212, 255, 0.3);
}

.ao-instr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ao-instr-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary, #e8eaf6);
  letter-spacing: 0.06em;
}

.ao-instr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ao-instr-row label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ao-instr-tf {
  width: 90px !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
}

/* ── Model chips ── */
.ao-instr-models {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.ao-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
  background: transparent;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.ao-model-chip input[type="checkbox"] {
  display: none;
}
.ao-model-chip.checked {
  background: rgba(0, 212, 255, 0.12);
  border-color: var(--cyan);
  color: var(--cyan);
}
.ao-model-chip:hover {
  border-color: rgba(0, 212, 255, 0.4);
}

/* ── Sidebar crosshair icon colour (Ash Options item) ── */
.sidebar-link[data-tab="ash-options"].active svg,
.sidebar-link[data-tab="ash-options"]:hover svg {
  stroke: var(--cyan);
}

/* ── Active position card (compact variant used on Ash Options) ── */
.active-position-card.compact {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pos-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pos-symbol {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary, #e8eaf6);
}
.pos-dir {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.pos-dir.buy  { background: rgba(16,185,129,0.15); color: var(--emerald); }
.pos-dir.sell { background: rgba(239, 68, 68,0.15); color: var(--rose); }

/* ── Day nav buttons for Ash Options ── */
.btn-day-nav {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  color: var(--text-sub);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-day-nav:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.btn-day-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ao-instrument-cards {
    grid-template-columns: 1fr;
  }
  .ao-instr-tf {
    width: 80px !important;
  }
}

/* ── Ash Options collapsible sections ── */
.ao-collapsible {
  margin-bottom: 12px;
}
.ao-collapse-hdr {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.ao-collapse-hdr:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(0,212,255,0.2);
}
.ao-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ao-collapsed .ao-chevron {
  transform: rotate(-90deg);
}
.ao-collapse-bdy {
  padding: 14px 4px 4px;
}
.ao-collapsed .ao-collapse-bdy {
  display: none;
}

/* ============================================================
   Instruments Radar Accordion — row padding & hover
   ============================================================ */
#instruments-radar-rows table {
  border-spacing: 0;
}
#instruments-radar-rows .radar-card-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}
#instruments-radar-rows .radar-card-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
#instruments-radar-rows .radar-card-row td {
  padding: 9px 8px !important;
}
#instruments-radar-rows .radar-card-row td:first-child {
  padding-left: 4px !important;
}
#instruments-radar-rows thead tr th {
  padding: 8px 8px 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}