/* ==========================================================================
   ApexTrader OS - Red & White High-Contrast Theme
   Inspired by Swiss Minimalist & Precision Trading Systems
   ========================================================================== */

:root {
  /* Core Red & White Palette */
  --bg-deep: #f8fafc;
  --bg-app: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fff5f5;

  /* Red Accent Scale */
  --red-primary: #dc2626;
  --red-crimson: #e11d48;
  --red-light: #f87171;
  --red-bg-subtle: #fef2f2;
  --red-bg-hover: #fee2e2;
  --red-border: #fca5a5;
  --red-glow: rgba(220, 38, 38, 0.2);

  /* Functional Accents */
  --accent-emerald: #059669;
  --accent-blue: #2563eb;
  --accent-purple: #9333ea;
  --accent-amber: #d97706;

  /* Crisp Borders */
  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-strong: #94a3b8;
  --border-red: #dc2626;

  /* Text Hierarchy */
  --text-pure: #0f172a;
  --text-bright: #1e293b;
  --text-muted: #475569;
  --text-dim: #64748b;

  /* Typography */
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radii & Shadows */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 10px 25px rgba(220, 38, 38, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hidden {
  display: none !important;
}

/* ── Global Text / Typography Utilities ── */
.font-mono  { font-family: var(--font-mono) !important; }
.font-bold  { font-weight: 700 !important; }
.text-dim   { color: var(--text-dim) !important; }
.text-accent-emerald { color: var(--accent-emerald) !important; }
.text-accent-crimson { color: var(--red-crimson) !important; }
.text-accent-cyan    { color: #0891b2 !important; }

body,
body.apex-light {
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.5;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body.apex-light {
  background-color: var(--bg-deep);
  color: var(--text-bright);
}


/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--bg-app);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--red-primary);
}

/* ==========================================================================
   TOP COMMAND BAR (White background with crisp borders & Red accents)
   ========================================================================== */
#status-bar {
  height: 60px;
  background: var(--bg-surface);
  border-bottom: 2px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 18px;
  position: relative;
  z-index: 200;
  box-shadow: var(--shadow-subtle);
}

.status-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.brand-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.brand-logo-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.35);
}

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

.brand-title {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--text-pure);
  line-height: 1.1;
}

.text-gradient {
  color: var(--red-primary);
}

.brand-subtitle {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--red-primary);
  letter-spacing: 0.8px;
}

.divider-v {
  width: 1px;
  height: 28px;
  background: var(--border-medium);
}

/* Digital NY Clock - Horizontal Compact */
.digital-clock-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--red-bg-subtle);
  border: 1.5px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
}

.clock-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--red-primary);
}

.digital-clock-value {
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 6px;
}

.clock-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: 0.5px;
}

.clock-tz {
  font-size: 9.5px;
  font-weight: 700;
  color: #ffffff;
  background: var(--red-primary);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Compact Active Session Badge */
.session-compact-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--red-bg-subtle);
  border: 1.5px solid var(--red-primary);
  color: var(--red-primary);
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono);
  transition: var(--transition);
  white-space: nowrap;
}

.compact-session-label {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.6px;
}

.current-session-text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-primary);
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
  animation: pulseDotRed 1.8s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulseDotRed {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

.live-pulse-dot.is-paused {
  background: var(--text-dim);
  box-shadow: none;
  animation: none;
}

/* Center Reserved Space for Future Trading Journal Metrics */
.status-center-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 20px;
}

/* ==========================================================================
   TOP BAR ACCOUNT BALANCE WIDGET (Manual Entry & Persistent)
   ========================================================================== */
.account-balance-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 13px;
  transition: var(--transition);
  user-select: none;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

.account-balance-card:hover {
  border-color: var(--red-border);
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.08);
}

.account-balance-card.is-editing {
  border-color: var(--red-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--red-glow);
  cursor: default;
}

.account-balance-card.balance-saved-flash {
  border-color: var(--accent-emerald) !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25) !important;
  animation: balanceSavePop 0.9s ease-out;
}

@keyframes balanceSavePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.balance-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.account-balance-card:hover .balance-icon-wrap {
  background: var(--red-primary);
  color: #ffffff;
}

.balance-info-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.balance-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  margin-bottom: 2px;
}

.balance-title-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.balance-badge-mode {
  font-size: 7.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #64748b;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.balance-display-mode {
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.1;
}

.balance-currency-sym {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--red-primary);
}

.balance-amount-text {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: 0.5px;
}

.balance-edit-btn {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  opacity: 0.55;
  transition: var(--transition);
}

.balance-display-mode:hover .balance-edit-btn,
.balance-edit-btn:hover {
  opacity: 1;
  color: var(--red-primary);
  background: var(--red-bg-subtle);
}

/* Inline Edit Form */
.balance-input-mode {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

.balance-input-prefix {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--red-primary);
}

.balance-raw-input {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-pure);
  width: 105px;
  padding: 2px 5px;
  border: 1.5px solid var(--red-border);
  border-radius: 4px;
  background: #ffffff;
  outline: none;
  transition: var(--transition);
}

.balance-raw-input:focus {
  border-color: var(--red-primary);
  box-shadow: 0 0 0 2px var(--red-glow);
}

.balance-input-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.balance-save-btn {
  background: var(--accent-emerald);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.balance-save-btn:hover {
  filter: brightness(1.15);
  transform: scale(1.08);
}

.balance-cancel-btn {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.balance-cancel-btn:hover {
  background: #fee2e2;
  color: var(--red-primary);
  border-color: var(--red-border);
}

@media (max-width: 1100px) {
  .balance-badge-mode {
    display: none;
  }
  .account-balance-card {
    padding: 3px 10px;
  }
}


/* ==========================================================================
   NAVIGATION TABS (Matching User Wireframe: RED OUTLINE BOXES)
   ========================================================================== */
.nav-control-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-pill-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
}

/* The red outline buttons from user's wireframe */
.nav-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: #ffffff;
  color: var(--red-primary);
  border: 2px solid var(--red-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08);
  text-decoration: none;
}

.nav-tab-btn:hover {
  background: var(--red-bg-subtle);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.15);
}

.nav-tab-btn.active {
  background: var(--red-primary);
  color: #ffffff;
  border-color: var(--red-primary);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.tab-icon {
  font-size: 13px;
}

.tab-counter {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 8px;
}

.nav-tab-btn.active .tab-counter {
  background: #ffffff;
  color: var(--red-primary);
}

.tab-chip {
  font-size: 9px;
  font-family: var(--font-mono);
  background: rgba(220, 38, 38, 0.1);
  color: var(--red-primary);
  padding: 1px 5px;
  border-radius: 4px;
}

.nav-tab-btn.active .tab-chip {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Vertical divider between nav tabs and alarm bell */
.nav-action-divider {
  width: 1px;
  height: 24px;
  background: var(--border-color);
  margin: 0 2px;
}

/* Small Bell Icon Button for Alarm Feed */
.nav-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 11px;
  background: #ffffff;
  color: #475569;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  user-select: none;
}

.nav-bell-btn:hover {
  background: #fef2f2;
  color: var(--red-primary);
  border-color: #fca5a5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.nav-bell-btn:hover .bell-svg {
  animation: bell-wiggle 0.5s ease;
}

.nav-bell-btn.active {
  background: var(--red-primary);
  color: #ffffff;
  border-color: var(--red-primary);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.nav-bell-btn.active .bell-svg {
  stroke: #ffffff;
}

.nav-bell-btn.active .alarm-feed-count-badge {
  background: #ffffff;
  color: var(--red-primary);
}

.bell-icon-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bell-svg {
  display: block;
  transition: transform 0.2s ease;
}

.bell-live-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff;
  animation: pulse-dot 1.8s infinite ease-in-out;
}

.nav-bell-btn.active .bell-live-pulse {
  box-shadow: 0 0 0 2px var(--red-primary);
  background: #ffffff;
}

.nav-bell-btn .alarm-feed-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  border-radius: 9px;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}

@keyframes bell-wiggle {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* ==========================================================================
   Clean Profile Icon Button & Institutional Dropdown Menu
   ========================================================================== */
.profile-menu-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-profile-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: #ffffff;
  color: #475569;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  user-select: none;
  outline: none;
}

.nav-profile-btn:hover {
  background: #fef2f2;
  color: var(--red-primary);
  border-color: #fca5a5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.nav-profile-btn.active {
  background: var(--red-primary);
  color: #ffffff;
  border-color: var(--red-primary);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.nav-profile-btn.active .profile-svg {
  stroke: #ffffff;
}

.profile-icon-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-svg {
  display: block;
  transition: transform 0.2s ease;
}

.nav-profile-btn:hover .profile-svg {
  transform: scale(1.08);
}

.profile-status-pulse {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #ffffff;
  transition: box-shadow 0.2s ease;
}

.nav-profile-btn.active .profile-status-pulse {
  box-shadow: 0 0 0 2px var(--red-primary);
}

/* Institutional Profile Dropdown Card */
/* Institutional Profile Dropdown Card */
.profile-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 272px;
  max-height: calc(100vh - 75px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  border: 1.5px solid var(--border-subtle, #e2e8f0);
  border-radius: 14px;
  box-shadow: 
    0 18px 42px -6px rgba(0, 0, 0, 0.14),
    0 4px 14px rgba(0, 0, 0, 0.04);
  padding: 14px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}

.profile-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dropdown-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
}

.dropdown-avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.35);
  flex-shrink: 0;
  text-transform: uppercase;
}

.dropdown-user-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.dropdown-user-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-pure);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.dropdown-role-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-role-badge {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1.2;
}

.dropdown-role-badge.badge-admin {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.dropdown-role-badge.badge-trader {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.dropdown-active-indicator {
  font-size: 10px;
  color: #10b981;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dropdown-active-indicator::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
}

.dropdown-menu-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0 0 10px 0;
}

/* Dropdown Navigation Modules List */
.dropdown-section-label {
  font-size: 9.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-dim, #64748b);
  margin-bottom: 6px;
  padding: 0 4px;
}

.dropdown-nav-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.dropdown-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  color: var(--text-pure, #0f172a);
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 700;
  transition: all 0.15s ease;
  user-select: none;
}

.dropdown-nav-item:hover {
  background: var(--red-bg-subtle, #fef2f2);
  border-color: var(--red-border, #fca5a5);
  color: var(--red-primary, #dc2626);
  transform: translateX(2px);
}

.dropdown-nav-item.active {
  background: var(--red-bg-subtle, #fef2f2);
  border-color: var(--red-border, #fca5a5);
  color: var(--red-primary, #dc2626);
  font-weight: 800;
}

.dropdown-nav-icon {
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
}

.dropdown-nav-text {
  flex: 1;
}

.dropdown-nav-counter {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--text-muted, #475569);
  border: 1px solid var(--border-subtle, #e2e8f0);
  line-height: 1.2;
}

.dropdown-nav-item:hover .dropdown-nav-counter,
.dropdown-nav-item.active .dropdown-nav-counter {
  background: #ffffff;
  color: var(--red-primary, #dc2626);
  border-color: var(--red-border, #fca5a5);
}

.dropdown-nav-counter.has-unread {
  background: var(--red-primary, #dc2626) !important;
  color: #ffffff !important;
  border-color: var(--red-primary, #dc2626) !important;
  box-shadow: 0 1px 6px rgba(220, 38, 38, 0.35);
  animation: pulseSignalsCount 2s infinite ease-in-out;
}

@keyframes pulseSignalsCount {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Dark Mode Overrides for Dropdown Navigation */




.dropdown-action-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Admin dropdown button in profile menu */
.btn-dropdown-admin {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-main);
  background: #f8fafc;
  color: var(--text-bright);
  border: 1px solid var(--border-medium);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
}

.btn-dropdown-admin:hover {
  background: var(--red-bg-subtle);
  border-color: var(--red-border);
  color: var(--red-primary);
  transform: translateY(-0.5px);
}

.btn-dropdown-admin svg {
  color: var(--red-primary);
}

.btn-dropdown-logout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-main);
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-dropdown-logout:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
  transform: translateY(-0.5px);
}

.btn-dropdown-logout svg {
  display: block;
}

/* Theme Toggle Button in Profile Dropdown */
.btn-dropdown-theme {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-main);
  background: #f8fafc;
  color: var(--text-bright);
  border: 1px solid var(--border-medium);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
  user-select: none;
}

.btn-dropdown-theme:hover {
  background: var(--red-bg-subtle);
  border-color: var(--red-border);
  color: var(--red-primary);
  transform: translateY(-0.5px);
}

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

.theme-btn-icon {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.theme-btn-text {
  letter-spacing: 0.1px;
}

/* Micro Switch Pill */
.theme-switch-pill {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: #cbd5e1;
  padding: 2px;
  display: flex;
  align-items: center;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  flex-shrink: 0;
}

.theme-switch-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateX(0);
}

.theme-switch-pill.is-active {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.35);
}

.theme-switch-pill.is-active .theme-switch-thumb {
  transform: translateX(14px);
  background: #ffffff;
}

.theme-switch-pill.is-off {
  background: #cbd5e1;
}

.theme-switch-pill.is-off .theme-switch-thumb {
  transform: translateX(0);
  background: #ffffff;
}

/* Test Audio Chime Button */
.btn-dropdown-test-sound {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-main);
  background: #f1f5f9;
  color: var(--text-bright);
  border: 1px dashed var(--border-medium);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 1px;
  margin-bottom: 2px;
  user-select: none;
}

.btn-dropdown-test-sound:hover {
  background: var(--red-bg-subtle);
  border-color: var(--red-border);
  color: var(--red-primary);
  border-style: solid;
  transform: translateY(-0.5px);
}

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

.test-chime-icon {
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.test-chime-text {
  letter-spacing: 0.1px;
}

.test-chime-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #e2e8f0;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.btn-dropdown-test-sound:hover .test-chime-pill {
  background: var(--red-primary);
  color: #ffffff;
}

.btn-dropdown-test-sound.is-playing {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  border-style: solid !important;
  color: #059669 !important;
}

.btn-dropdown-test-sound.is-playing .test-chime-pill {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* Dark Mode Overrides for Action Buttons */











/* ==========================================================================
   Admin User Management Modal (Swiss Red & White Minimalist Theme)
   ========================================================================== */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.admin-modal-backdrop.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

.admin-modal-dialog {
  background: #ffffff;
  width: 100%;
  max-width: 840px;
  border-radius: 18px;
  border: 1.5px solid var(--border-subtle);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.8);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1.5px solid var(--border-subtle);
  background: #ffffff;
}

.admin-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--red-primary);
  background: var(--red-bg-subtle);
  border: 1px solid var(--red-border);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.6px;
}

.badge-dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-primary);
}

.admin-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 0;
}

.btn-admin-modal-close {
  background: #f1f5f9;
  border: 1px solid var(--border-subtle);
  color: #64748b;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-admin-modal-close:hover {
  background: #fee2e2;
  color: var(--red-primary);
  border-color: var(--red-border);
}

.admin-modal-nav {
  display: flex;
  gap: 8px;
  padding: 12px 24px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-subtle);
}

.admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-main);
  background: #ffffff;
  color: #64748b;
  border: 1.5px solid var(--border-medium);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-tab-btn:hover {
  background: var(--red-bg-subtle);
  border-color: var(--red-border);
  color: var(--red-primary);
}

.admin-tab-btn.active {
  background: var(--red-primary);
  border-color: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.admin-tab-btn.active svg {
  stroke: #ffffff;
}

.admin-tab-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  padding: 1px 6px;
  border-radius: 6px;
}

.admin-tab-btn.active .admin-tab-count {
  background: #ffffff;
  color: var(--red-primary);
}

.admin-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  background: #ffffff;
}

/* Table View */
.admin-table-wrap {
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}

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

.admin-users-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--border-subtle);
}

.admin-users-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-pure);
  vertical-align: middle;
}

.admin-users-table tbody tr:hover {
  background: #fcfdfe;
}

.user-row-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar-tiny {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-name-col {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-table-name {
  font-weight: 700;
  color: var(--text-pure);
}

.user-self-pill {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 800;
  background: #dcfce7;
  color: #15803d;
  padding: 1px 5px;
  border-radius: 4px;
}

.cell-mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.cell-date {
  font-size: 12px;
  color: #64748b;
}

.btn-action-protected {
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
}

.btn-user-delete {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-main);
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-user-delete:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
  transform: translateY(-1px);
}

.btn-user-delete-confirming {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  padding: 4px 8px;
  border-radius: 6px;
  color: #991b1b;
}

.btn-confirm-yes {
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.btn-confirm-no {
  background: #ffffff;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* Form View */
.admin-form-card {
  max-width: 600px;
  margin: 0 auto;
}

.admin-form-intro {
  margin-bottom: 20px;
}

.admin-form-intro h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-pure);
  margin-bottom: 4px;
}

.admin-form-intro p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .admin-form-grid {
    grid-template-columns: 1fr;
  }
}

.admin-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-form-field label {
  font-size: 11.5px;
  font-weight: 800;
  color: #334155;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.admin-form-field input,
.admin-form-field select {
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--border-medium);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: var(--font-main);
  background: #ffffff;
  color: var(--text-pure);
  outline: none;
  transition: all 0.15s ease;
}

.admin-form-field input:focus,
.admin-form-field select:focus {
  border-color: var(--red-primary);
  box-shadow: 0 0 0 3px var(--red-glow);
}

.field-hint {
  font-size: 11px;
  color: #64748b;
}

.input-with-eye {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-eye input {
  width: 100%;
  padding-right: 36px;
}

.btn-toggle-new-pw {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.65;
  transition: opacity 0.15s;
}

.btn-toggle-new-pw:hover {
  opacity: 1;
}

.admin-form-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 16px;
}

.admin-form-alert.error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.admin-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}

.btn-admin-cancel {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  background: #f1f5f9;
  border: 1px solid var(--border-subtle);
  color: #475569;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-admin-cancel:hover {
  background: #e2e8f0;
}

.btn-admin-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid #dc2626;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);
  transition: all 0.15s ease;
}

.btn-admin-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45);
  transform: translateY(-1px);
}

.btn-admin-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.top-action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.action-primary {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: 1px solid var(--red-primary);
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

.action-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.action-secondary {
  background: #ffffff;
  color: var(--red-primary);
  border: 1.5px solid var(--red-primary);
}

.action-secondary:hover {
  background: var(--red-bg-subtle);
}

/* ==========================================================================
   APP LAYOUT (Side Bar + Main Display Area)
   ========================================================================== */
#app-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  height: calc(100vh - 70px);
  overflow: hidden;
}

/* ==========================================================================
   SIDEBAR (Pristine White with Red Highlights)
   ========================================================================== */
#side-bar {
  background: var(--bg-surface);
  border-right: 2px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

.sidebar-search-box {
  padding: 16px 16px 8px;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-ico {
  position: absolute;
  left: 12px;
  color: var(--text-dim);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  background: #f8fafc;
  border: 1.5px solid var(--border-medium);
  color: var(--text-pure);
  padding: 9px 34px 9px 34px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  transition: var(--transition);
}

.search-field input:focus {
  background: #ffffff;
  border-color: var(--red-primary);
  box-shadow: 0 0 0 3px var(--red-glow);
}

.key-shortcut {
  position: absolute;
  right: 10px;
  background: #e2e8f0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}

.sidebar-block {
  padding: 12px 14px;
  overflow-y: auto;
  flex: 1;
}

.sidebar-block.tags-block {
  flex: none;
  max-height: 180px;
  border-top: 1.5px solid var(--border-subtle);
}

.block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 6px;
}

.block-title {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--text-dim);
}

.btn-icon-add {
  background: var(--red-bg-subtle);
  border: 1px solid var(--red-border);
  color: var(--red-primary);
  font-size: 14px;
  font-weight: 900;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 20px;
  text-align: center;
  transition: var(--transition);
}

/* Category Actions Bar in Toolbar */
.category-actions-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.category-actions-bar.hidden {
  display: none !important;
}

.btn-cat-action {
  background: #ffffff;
  border: 1.5px solid var(--border-medium);
  color: var(--text-pure);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
}

.btn-cat-action:hover {
  background: var(--red-bg-subtle);
  border-color: var(--red-primary);
  color: var(--red-primary);
}

.btn-cat-action.danger {
  color: var(--red-primary);
  border-color: var(--red-border);
  background: var(--red-bg-subtle);
}

.btn-cat-action.danger:hover {
  background: var(--red-primary);
  color: #ffffff;
}

/* Edit action in workspace */
.btn-action-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1.5px solid var(--border-medium);
  color: var(--text-pure);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-action-edit:hover {
  border-color: var(--red-primary);
  color: var(--red-primary);
  background: var(--red-bg-subtle);
}

/* Sidebar Row Actions (Quick Add & Delete) */
.cat-hover-actions {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.menu-link:hover .cat-hover-actions {
  display: flex;
}

.btn-row-action {
  background: transparent;
  border: none;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--text-dim);
  line-height: 1;
  transition: var(--transition);
}

.btn-row-action:hover {
  color: var(--red-primary);
  background: rgba(220, 38, 38, 0.1);
}

/* Card Quick Delete */
.card-quick-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-medium);
  color: var(--text-dim);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition);
}

.playbook-card:hover .card-quick-delete {
  display: flex;
}

.card-quick-delete:hover {
  background: var(--red-primary);
  color: #ffffff;
  border-color: var(--red-primary);
}

/* Card Quick Broadcast */
.card-quick-broadcast {
  position: absolute;
  top: 10px;
  right: 42px;
  background: rgba(79, 70, 229, 0.92);
  border: 1px solid #4f46e5;
  color: #ffffff;
  border-radius: 4px;
  height: 26px;
  padding: 0 8px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

.playbook-card:hover .card-quick-broadcast {
  display: flex;
}

.card-quick-broadcast:hover {
  background: #4338ca;
  transform: scale(1.04);
}

.category-tree-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-item {
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-bright);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.menu-link:hover {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
}

.menu-item.active .menu-link {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border-left: 4px solid var(--red-primary);
  font-weight: 800;
  box-shadow: var(--shadow-subtle);
}

.cat-badge-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.menu-text {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.menu-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  background: #f1f5f9;
  color: var(--text-dim);
  padding: 2px 7px;
  border-radius: 8px;
}

.menu-item.active .menu-pill {
  background: var(--red-primary);
  color: #ffffff;
}

/* Tags Cloud */
.tags-cloud-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
}

.tag-pill-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: #f8fafc;
  color: var(--text-muted);
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--border-medium);
  cursor: pointer;
  transition: var(--transition);
}

.tag-pill-btn:hover, .tag-pill-btn.active {
  background: var(--red-bg-subtle);
  border-color: var(--red-primary);
  color: var(--red-primary);
  font-weight: 800;
}

/* Storage Footer */
.sidebar-bottom-card {
  padding: 14px 16px;
  background: #f8fafc;
  border-top: 1.5px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.disk-sync-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sync-glow {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-primary);
}

.sync-heading {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-pure);
}

.disk-folder-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.disk-quick-metrics {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ==========================================================================
   MAIN DASHBOARD DISPLAY AREA
   ========================================================================== */
#main-display-area {
  background: var(--bg-app);
  overflow-y: auto;
  padding: 24px 32px;
}

.dashboard-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: viewFade 0.2s ease-out;
}

.dashboard-view.hidden {
  display: none !important;
}

@keyframes viewFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Market Context Hero Banner (Clean White with Bold Red Left Accent) */
.session-hero-banner {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-left: 5px solid var(--red-primary);
  border-radius: var(--radius-md);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
}

.hero-tag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.hero-badge {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: var(--red-primary);
}

.volatility-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}

.volatility-pill.high {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.volatility-pill.medium {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.volatility-pill.low {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.hero-title {
  font-size: 21px;
  font-weight: 900;
  color: var(--text-pure);
  margin-bottom: 4px;
}

.hero-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 650px;
  line-height: 1.5;
}

.hero-action-box {
  background: var(--red-bg-subtle);
  border: 1.5px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.action-box-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--red-primary);
}

.action-box-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-pure);
}

.hero-cta-btn {
  background: transparent;
  border: none;
  color: var(--red-primary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
}

/* Toolbar & Filters */
.library-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 14px;
}

.library-heading {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-pure);
}

.library-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.difficulty-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
}

.filter-chip-group {
  display: flex;
  gap: 4px;
  background: #ffffff;
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-subtle);
}

.pill-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.pill-btn:hover:not(.active) {
  background: #f1f5f9;
  color: var(--text-pure);
}

.pill-btn:focus {
  outline: none;
}

.pill-btn.active {
  background: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

/* Institutional Semantic Pill Accents (Active States for Multi-Filter) */
.pill-btn[data-validity="all"].active,
.pill-btn[data-execution="all"].active,
.pill-btn[data-result="all"].active,
.pill-btn[data-difficulty="all"].active {
  background: #1e293b !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(30, 41, 59, 0.25) !important;
}

.pill-btn[data-validity="Valid"].active,
.pill-btn[data-execution="Followed"].active,
.pill-btn[data-result="Worked"].active {
  background: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}

.pill-btn[data-validity="Invalid"].active,
.pill-btn[data-execution="Not Followed"].active,
.pill-btn[data-result="Failed"].active {
  background: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35) !important;
}

.pill-btn[data-validity="Unclear"].active {
  background: #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35) !important;
}

.pill-btn[data-execution="Partially"].active {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.pill-btn[data-result="Avoided"].active {
  background: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35) !important;
}

.action-btn.action-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: none;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  transition: var(--transition);
  user-select: none;
  margin-left: 8px;
}

.action-btn.action-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

/* ==========================================================================
   PLAYBOOKS GRID (White Cards with Red Badges)
   ========================================================================== */
.playbooks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 22px;
}

.playbook-card {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-card);
}

.playbook-card:hover {
  border-color: var(--red-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}

.card-chart-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
  overflow: hidden;
  border-bottom: 1.5px solid var(--border-subtle);
}

.card-chart-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.playbook-card:hover .card-chart-banner img {
  transform: scale(1.04);
}

.banner-overlay-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.cat-pill-glow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid var(--red-primary);
  color: var(--red-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.diff-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.diff-badge.beginner {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.diff-badge.intermediate {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.diff-badge.advanced {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.banner-zoom-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(220, 38, 38, 0.9);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
  transition: var(--transition);
}

.playbook-card:hover .banner-zoom-hint {
  opacity: 1;
}

.card-content-area {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-pure);
  line-height: 1.35;
}

.card-summary {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.micro-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--red-primary);
  font-weight: 600;
}

.card-footer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1.5px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: auto;
}

.rule-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--red-primary);
}

.open-cta {
  font-size: 12px;
  font-weight: 800;
  color: var(--red-primary);
}

/* ==========================================================================
   INTERACTIVE STRATEGY WORKSPACE (White Paper Aesthetic)
   ========================================================================== */
.strategy-workspace {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.workspace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 16px;
}

.btn-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid var(--red-primary);
  color: var(--red-primary);
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.btn-back-link:hover {
  background: var(--red-bg-subtle);
}

.btn-action-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: var(--red-primary);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.workspace-hero-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workspace-breadcrumbs {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

.workspace-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-pure);
}

/* Compliance Meter (Red to Green) */
.compliance-meter-card {
  background: var(--red-bg-subtle);
  border: 1.5px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.compliance-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.compliance-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--red-primary);
}

.compliance-status-text {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-pure);
}

.compliance-bar-wrapper {
  flex: 1;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compliance-bar-track {
  height: 10px;
  background: #e2e8f0;
  border-radius: 5px;
  overflow: hidden;
}

.compliance-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #dc2626 0%, #059669 100%);
  transition: width 0.3s ease;
}

.compliance-percentage {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red-primary);
  font-weight: 800;
  text-align: right;
}

/* Rules Checklist */
.interactive-rules-box {
  background: #f8fafc;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 20px;
}

.rules-box-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--red-primary);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.rules-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rule-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 16px;
  background: #ffffff;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-subtle);
  transition: var(--transition);
}

.rule-checklist-item.checked {
  background: #f0fdf4;
  border-color: #86efac;
}

.rule-check-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--red-primary);
  cursor: pointer;
}

.rule-text-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-pure);
  cursor: pointer;
  flex: 1;
}

/* Charts Gallery */
.workspace-charts-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-h {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

.charts-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.chart-thumbnail {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--border-subtle);
  background: #0f172a;
  cursor: pointer;
  position: relative;
  transition: var(--transition);
}

.chart-thumbnail:hover {
  border-color: var(--red-primary);
  transform: scale(1.02);
}

.chart-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chart-zoom-cue {
  position: absolute;
  inset: 0;
  background: rgba(220, 38, 38, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  transition: var(--transition);
}

.chart-thumbnail:hover .chart-zoom-cue {
  opacity: 1;
}

/* Notes Text */
.workspace-notes-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #334155;
}

.workspace-notes-text h2, .workspace-notes-text h3 {
  color: var(--text-pure);
  margin: 18px 0 8px;
  font-weight: 800;
}

.workspace-notes-text h4 {
  color: var(--red-primary);
  margin: 14px 0 6px;
  font-weight: 800;
}

.workspace-notes-text p {
  margin-bottom: 12px;
}

.workspace-notes-text ul, .workspace-notes-text ol {
  padding-left: 22px;
  margin-bottom: 12px;
}

.workspace-notes-text li {
  margin-bottom: 6px;
}

.workspace-notes-text code {
  font-family: var(--font-mono);
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
}

/* ==========================================================================
   ROADMAP VIEWS
   ========================================================================== */
.preview-hero-card {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-left: 5px solid var(--red-primary);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-card);
}

.preview-badge {
  font-size: 11px;
  font-weight: 900;
  color: var(--red-primary);
  letter-spacing: 0.8px;
}

.preview-hero-card h2 {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-pure);
}

.preview-hero-card p {
  color: var(--text-muted);
  max-width: 750px;
}

.features-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.feature-item-card {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
}

.feature-item-card:hover {
  border-color: var(--red-primary);
}

.feature-icon {
  font-size: 26px;
}

.feature-item-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-pure);
}

.feature-item-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.preview-tag {
  margin-top: auto;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  color: var(--red-primary);
  background: var(--red-bg-subtle);
  padding: 3px 8px;
  border-radius: 4px;
}

.journal-preview-card {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.journal-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.badge-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  padding: 3px 9px;
  border-radius: 4px;
}

.json-code-box {
  background: #0f172a;
  padding: 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #f87171;
  overflow-x: auto;
}

/* ==========================================================================
   MODALS (White with Crisp Red Accents)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
  animation: modalFade 0.2s ease-out;
}

.modal-backdrop.hidden {
  display: none !important;
}

@keyframes modalFade {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.modal-box {
  background: #ffffff;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-box.modal-wide {
  max-width: 760px;
  height: 88vh;
  max-height: 860px;
}

.modal-box form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 2px solid var(--border-subtle);
  background: var(--red-bg-subtle);
  flex-shrink: 0;
}

.modal-title-with-icon {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-icon {
  font-size: 18px;
}

.modal-title-with-icon h3 {
  font-size: 17px;
  font-weight: 900;
  color: var(--red-primary);
}

.modal-x-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
}

.modal-x-btn:hover {
  color: var(--red-primary);
}

.modal-inner {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: scroll; /* Dedicated vertical scroll bar */
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}

/* Red & Slate Custom Vertical Scrollbar */
.modal-inner::-webkit-scrollbar,
.popup-scroll-body::-webkit-scrollbar {
  width: 9px;
}

.modal-inner::-webkit-scrollbar-track,
.popup-scroll-body::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 6px;
  margin: 6px 0;
}

.modal-inner::-webkit-scrollbar-thumb,
.popup-scroll-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
  border: 2px solid #f8fafc;
  transition: background 0.2s ease;
}

.modal-inner::-webkit-scrollbar-thumb:hover,
.popup-scroll-body::-webkit-scrollbar-thumb:hover {
  background: var(--red-primary);
}

.modal-help-text {
  font-size: 12.5px;
  color: var(--text-muted);
}

.modal-help-text code {
  color: var(--red-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}

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

.form-two-cols {
  display: flex;
  gap: 14px;
}

.flex-1 {
  flex: 1;
}

label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-pure);
}

input[type="text"], input[type="date"], select, textarea {
  background: #f8fafc;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-pure);
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: var(--font-main);
  outline: none;
  transition: var(--transition);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
}

input[type="text"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  background: #ffffff;
  border-color: var(--red-primary);
  box-shadow: 0 0 0 3px var(--red-glow);
}

textarea {
  resize: vertical;
}

.modal-subtitle {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Step Section Cards */
.form-section-card {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
  margin-bottom: 2px;
}

.step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--red-primary);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-pure);
}

.section-tag-helper {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
  font-style: italic;
}

.btn-text-action {
  background: transparent;
  border: none;
  color: var(--red-primary);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-text-action:hover {
  text-decoration: underline;
}

/* Segmented Difficulty Control */
.difficulty-segmented-control {
  display: flex;
  gap: 6px;
  background: #f8fafc;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.diff-seg-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.diff-seg-btn:hover {
  color: var(--text-pure);
}

.diff-seg-btn.active {
  background: #ffffff;
  color: var(--text-pure);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.diff-seg-btn.active[data-val="Beginner"] { border-left: 3px solid var(--accent-emerald); }
.diff-seg-btn.active[data-val="Intermediate"] { border-left: 3px solid var(--accent-blue); }
.diff-seg-btn.active[data-val="Advanced"] { border-left: 3px solid var(--red-primary); }

/* Quick Tag Suggestions */
.quick-tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.quick-tag-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
}

.btn-quick-tag {
  background: var(--red-bg-subtle);
  border: 1px solid var(--red-border);
  color: var(--red-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-quick-tag:hover {
  background: var(--red-primary);
  color: #ffffff;
}

/* Rule Adder & Interactive Checklist Builder */
.rule-adder-bar {
  display: flex;
  gap: 8px;
}

.rule-adder-bar input {
  flex: 1;
}

.btn-add-rule,
.btn-add-rule-action {
  background: var(--red-primary);
  color: #ffffff;
  border: none;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
}

.btn-add-rule:hover,
.btn-add-rule-action:hover {
  background: var(--red-crimson);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.35);
  transform: translateY(-1px);
}

#input-new-rule {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#input-new-rule:focus {
  border-color: var(--red-primary);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.quick-rule-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.quick-rule-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
}

.btn-quick-rule {
  background: #f1f5f9;
  border: 1px solid var(--border-medium);
  color: var(--text-pure);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-quick-rule:hover {
  background: var(--red-bg-subtle);
  border-color: var(--red-primary);
  color: var(--red-primary);
}

.added-rules-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}

.rules-empty-hint {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1.5px dashed var(--border-medium);
  border-radius: var(--radius-sm);
  text-align: center;
}

.added-rule-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 6px 10px;
}

.added-rule-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  background: #e2e8f0;
  color: var(--text-pure);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.added-rule-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-pure);
  flex: 1;
}

.btn-del-rule {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}

.btn-del-rule:hover {
  color: var(--red-primary);
}

/* ==========================================================================
   ADVANCED STUDY NOTES & EXECUTION GUIDE EDITOR
   ========================================================================== */
.study-editor-section {
  gap: 10px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.notes-mode-toggle,
.editor-mode-switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1.5px solid var(--border-medium);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.btn-notes-mode,
.btn-editor-mode {
  background: transparent;
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}

.btn-notes-mode:hover,
.btn-editor-mode:hover {
  color: var(--text-pure);
}

.btn-notes-mode.active,
.btn-editor-mode.active {
  background: #ffffff;
  color: var(--red-primary);
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.md-editor-toolbar,
.notes-format-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1.5px solid var(--border-medium);
  border-radius: 6px 6px 0 0;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.md-toolbar-group,
.format-btn-group {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  overflow: hidden;
}

.md-tool-btn,
.btn-format {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-subtle);
  color: #334155;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  user-select: none;
}

.md-toolbar-group .md-tool-btn:last-child,
.format-btn-group .btn-format:last-child {
  border-right: none;
}

.md-tool-btn:hover,
.btn-format:hover {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
}

.md-toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border-medium);
  margin: 0 3px;
}

.md-badge-btn {
  border-radius: 4px;
  border: 1px solid var(--border-medium);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
}

.md-badge-btn[data-md="tip"]:hover,
.btn-callout-tip:hover {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}

.md-badge-btn[data-md="warning"]:hover,
.btn-callout-warn:hover {
  background: #fef2f2 !important;
  border-color: var(--red-primary) !important;
  color: var(--red-primary) !important;
}

.md-badge-btn[data-md="execution"]:hover,
.btn-callout-exec:hover {
  background: #f0fdf4 !important;
  border-color: #10b981 !important;
  color: #047857 !important;
}

.md-toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.md-template-btn,
.btn-template {
  margin-left: auto;
  background: #ffffff;
  border: 1.5px solid var(--red-primary);
  color: var(--red-primary);
  border-radius: 4px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
}

.md-template-btn:hover,
.btn-template:hover {
  background: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.editor-work-pane {
  position: relative;
  width: 100%;
}

.md-editor-toolbar + #material-notes-input {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

#material-notes-input {
  width: 100%;
  min-height: 200px;
  max-height: 380px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: #1e293b;
  background: #ffffff;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#material-notes-input:focus {
  border-color: var(--red-primary);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.notes-preview-box,
.editor-preview-container {
  width: 100%;
  min-height: 200px;
  max-height: 380px;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1.5px solid var(--border-medium);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border-top: none;
  background: #ffffff;
  font-size: 13.5px;
  line-height: 1.65;
  color: #1e293b;
}

.notes-preview-empty,
.editor-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  color: var(--text-dim);
  font-style: italic;
  font-size: 12.5px;
}

.notes-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 4px 2px;
}

.editor-shortcut-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-shortcut-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: #f1f5f9;
  border: 1px solid var(--border-medium);
  border-radius: 3px;
  padding: 1px 5px;
  color: #475569;
}

.editor-word-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  background: #f8fafc;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

.editor-preview-container h1,
.workspace-notes-text h1 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 14px 0 8px;
}

.editor-preview-container h2,
.workspace-notes-text h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 14px 0 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
}

.editor-preview-container h3,
.workspace-notes-text h3 {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 12px 0 6px;
}

.editor-preview-container h4,
.workspace-notes-text h4 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--red-primary);
  margin: 10px 0 4px;
}

.editor-preview-container p,
.workspace-notes-text p {
  margin-bottom: 8px;
}

.editor-preview-container ul,
.editor-preview-container ol,
.workspace-notes-text ul,
.workspace-notes-text ol {
  padding-left: 20px;
  margin-bottom: 10px;
}

.editor-preview-container li,
.workspace-notes-text li {
  margin-bottom: 4px;
}

.editor-preview-container code,
.workspace-notes-text code {
  font-family: var(--font-mono);
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 700;
}

.notes-blockquote {
  border-left: 3.5px solid var(--border-medium);
  padding: 8px 14px;
  margin: 10px 0;
  background: #f8fafc;
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: #475569;
}

.notes-hr {
  border: none;
  border-top: 1.5px dashed var(--border-medium);
  margin: 14px 0;
}

/* Institutional Trading Callout Badges */
.callout-box {
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.callout-box .callout-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.callout-box .callout-body {
  font-size: 13px;
  line-height: 1.55;
}

.callout-box.callout-tip {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
}

.callout-box.callout-tip .callout-header {
  color: #b45309;
}

.callout-box.callout-tip .callout-body {
  color: #78350f;
}

.callout-box.callout-warn {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid var(--red-primary);
}

.callout-box.callout-warn .callout-header {
  color: var(--red-primary);
}

.callout-box.callout-warn .callout-body {
  color: #7f1d1d;
}

.callout-box.callout-exec {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 4px solid #10b981;
}

.callout-box.callout-exec .callout-header {
  color: #047857;
}

.callout-box.callout-exec .callout-body {
  color: #064e3b;
}

.editor-preview-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: 13px;
}

.editor-footer-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  padding: 2px 2px 0;
}

.editor-shortcuts-hint kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: #475569;
  font-weight: 700;
}

.modal-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 2px solid var(--border-subtle);
  background: #f8fafc;
  flex-shrink: 0;
}

.btn-cancel {
  background: #ffffff;
  border: 1.5px solid var(--border-medium);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btn-submit {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
  color: #ffffff;
  padding: 9px 22px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-submit:hover {
  filter: brightness(1.08);
}

/* Upload Dropzone */
.upload-dropzone {
  border: 2px dashed var(--red-border);
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center;
  background: var(--red-bg-subtle);
  cursor: pointer;
  transition: var(--transition);
}

.upload-dropzone:hover, .upload-dropzone.dragover {
  border-color: var(--red-primary);
  background: #fee2e2;
}

.hidden-input {
  display: none;
}

.dropzone-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

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

.dropzone-text,
.dropzone-main-text {
  font-size: 13.5px;
  color: var(--text-pure);
}

.dropzone-text strong,
.dropzone-main-text strong {
  color: var(--red-primary);
}

.browse-link {
  color: var(--red-primary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.dropzone-hint,
.dropzone-sub-text {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 4px;
}

.dropzone-hint kbd,
.dropzone-sub-text kbd {
  background: #ffffff;
  border: 1px solid var(--border-medium);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--red-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}

.thumb-preview-grid,
.preview-thumbs-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.tags-input-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: #ffffff;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  min-height: 42px;
  transition: var(--transition);
}

.tags-input-box:focus-within {
  border-color: var(--red-primary);
  box-shadow: 0 0 0 3px var(--red-glow);
}

.tags-input-box input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
  flex: 1;
  min-width: 160px;
  background: transparent !important;
  font-size: 13px;
  color: var(--text-pure);
}

.thumb-preview-card {
  position: relative;
  width: 84px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--border-medium);
  background: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.thumb-preview-card:hover {
  border-color: var(--red-primary);
  transform: translateY(-2px);
}

.thumb-preview-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-saved-badge,
.thumb-new-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  font-size: 8.5px;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.1;
  text-transform: uppercase;
}

.thumb-saved-badge {
  background: rgba(15, 23, 42, 0.9);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
}

.thumb-new-badge {
  background: rgba(15, 23, 42, 0.9);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.del-thumb-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(220, 38, 38, 0.92);
  color: #ffffff;
  border: none;
  font-size: 13px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}

.del-thumb-btn:hover {
  background: var(--red-crimson);
  transform: scale(1.15);
}

/* ==========================================================================
   FULL-SCREEN MATERIAL POPUP MODAL
   ========================================================================== */
.popup-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2500;
  padding: 18px;
  animation: modalFade 0.2s ease-out;
}

.popup-modal-overlay.hidden {
  display: none !important;
}

.popup-study-workspace,
.popup-modal-container {
  width: 96vw;
  max-width: 1420px;
  height: 94vh;
  background: #ffffff;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.popup-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 2px solid var(--border-subtle);
  background: var(--red-bg-subtle);
  flex-shrink: 0;
}

.popup-title-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.popup-heading {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-pure);
  line-height: 1.2;
}

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

.popup-x-btn,
.popup-close-btn {
  background: #ffffff;
  border: 1.5px solid var(--red-primary);
  color: var(--red-primary);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: var(--transition);
}

.popup-x-btn:hover,
.popup-close-btn:hover {
  background: var(--red-primary);
  color: #ffffff;
  transform: scale(1.05);
}

.popup-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 26px 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: #ffffff;
}

/* ==========================================================================
   INTERACTIVE ZOOMABLE LIGHTBOX (Mouse Wheel Zoom & Pan)
   ========================================================================== */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, 0.94);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  z-index: 3500;
  padding: 16px 24px;
  animation: modalFade 0.2s ease-out;
  user-select: none;
}

.lightbox-backdrop.hidden {
  display: none !important;
}

/* Top Controls Toolbar */
.lightbox-controls-toolbar {
  width: 100%;
  max-width: 1250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 8px 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.lightbox-caption-tag {
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* Lightbox Multi-Image Switcher */
.lightbox-nav-switcher {
  display: flex;
  align-items: center;
}

.lightbox-mode-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lightbox-chart-pills {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-lb-tab {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-lb-tab:hover {
  background: rgba(220, 38, 38, 0.35);
  border-color: var(--red-primary);
  color: #ffffff;
}

.btn-lb-tab.active {
  background: var(--red-primary);
  border-color: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

.zoom-tools-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.zoom-btn {
  width: 28px;
  height: 28px;
  background: #ffffff;
  border: none;
  border-radius: 4px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: var(--transition);
}

.zoom-btn:hover {
  background: var(--red-primary);
  color: #ffffff;
}

.zoom-btn-reset {
  width: auto;
  padding: 0 10px;
  font-size: 11px;
  font-family: var(--font-mono);
}

.zoom-indicator {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--red-primary);
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
  min-width: 48px;
  text-align: center;
}

.lightbox-close-btn {
  background: #ffffff;
  border: 1.5px solid var(--red-primary);
  color: var(--red-primary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: var(--transition);
}

.lightbox-close-btn:hover {
  background: var(--red-primary);
  color: #ffffff;
  transform: scale(1.05);
}

/* Viewbox & Interactive Image Canvas */
.lightbox-viewbox {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  position: relative;
  cursor: grab;
}

.lightbox-viewbox.panning {
  cursor: grabbing !important;
}

.lightbox-viewbox #lightbox-image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.05s ease-out;
  will-change: transform;
}

/* Side-by-Side Multi-Image Comparison Canvas */
.lightbox-side-by-side-canvas {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  width: 96vw;
  max-width: 1600px;
  height: 82vh;
  max-height: 82vh;
  transition: transform 0.05s ease-out;
  will-change: transform;
}

/* 2 Charts: 2 equal columns side-by-side */
.lightbox-side-by-side-canvas.count-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  height: 82vh;
}

/* 3 Charts: 3 equal columns side-by-side */
.lightbox-side-by-side-canvas.count-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  height: 82vh;
}

/* 4 Charts: 2x2 grid */
.lightbox-side-by-side-canvas.count-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  height: 82vh;
}

/* 5 Charts: 2-row symmetrical bento grid (Row 1: 3 charts, Row 2: 2 charts) */
.lightbox-side-by-side-canvas.count-5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  height: 82vh;
}

.lightbox-side-by-side-canvas.count-5 .split-chart-card:nth-child(1),
.lightbox-side-by-side-canvas.count-5 .split-chart-card:nth-child(2),
.lightbox-side-by-side-canvas.count-5 .split-chart-card:nth-child(3) {
  grid-column: span 2;
}

.lightbox-side-by-side-canvas.count-5 .split-chart-card:nth-child(4),
.lightbox-side-by-side-canvas.count-5 .split-chart-card:nth-child(5) {
  grid-column: span 3;
}

/* 6+ Charts: 3 columns x 2 rows */
.lightbox-side-by-side-canvas.count-6,
.lightbox-side-by-side-canvas.count-many {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  height: 82vh;
}

.split-chart-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  background: #0b101d;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.split-chart-card.initial-focus {
  border-color: var(--red-primary);
  box-shadow: 0 0 25px rgba(220, 38, 38, 0.45), 0 12px 35px rgba(0, 0, 0, 0.6);
}

.split-card-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  gap: 8px;
}

.split-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
}

.split-card-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  color: #ffffff;
  background: var(--red-primary);
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.split-card-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-split-focus {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.btn-split-focus:hover {
  background: var(--red-primary);
  border-color: var(--red-primary);
}

.split-card-img-wrap {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020617;
  padding: 6px;
  overflow: hidden;
}

.split-card-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

/* Bottom Helper Hint */
.lightbox-helper-hint {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  z-index: 10;
  letter-spacing: 0.3px;
}

.lightbox-helper-hint strong {
  color: var(--red-primary);
}

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: #ffffff;
  border: 1.5px solid var(--border-medium);
  border-left: 5px solid var(--red-primary);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  color: var(--text-pure);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastSlide 0.3s ease-out;
}

.toast.success { border-left-color: var(--accent-emerald); }
.toast.error { border-left-color: var(--red-primary); }

@keyframes toastSlide {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   MULTI-TIMEFRAME ANALYSIS WIZARD STYLES (ANALYSIS TAB ONLY)
   ========================================================================== */

.wizard-modal-box {
  max-width: 920px;
}

.wizard-stepper-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wizard-stage-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--red-primary);
  border: 1px solid rgba(220, 38, 38, 0.25);
  padding: 3px 10px;
  border-radius: 20px;
}

/* Stepper Progress Bar */
.wizard-stepper-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-subtle);
  user-select: none;
  flex-shrink: 0;
}

.wizard-step-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 24px;
  transition: all 0.2s ease;
  position: relative;
  font-family: inherit;
}

.wizard-step-btn .step-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.wizard-step-btn .step-label {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  transition: color 0.2s ease;
}

.wizard-step-btn:hover .step-label {
  color: var(--text-pure);
}

.wizard-step-btn.active {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-medium);
}

.wizard-step-btn.active .step-circle {
  background: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.35);
}

.wizard-step-btn.active .step-label {
  color: var(--text-pure);
  font-weight: 800;
}

.wizard-step-btn.completed .step-circle {
  background: #10b981;
  color: #ffffff;
}

.wizard-step-btn.completed .step-label {
  color: #0f172a;
}

.wizard-step-line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin: 0 6px;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.wizard-step-line.completed {
  background: #10b981;
}

/* Global Context Summary (Steps 2-5) */
.wizard-context-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f1f5f9;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  margin-bottom: 18px;
  animation: fadeIn 0.25s ease;
}

.wizard-context-summary .context-pill,
.summary-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.wizard-context-summary .context-label,
.summary-label {
  color: #64748b;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.wizard-context-summary strong,
.summary-val {
  color: var(--text-pure);
  font-weight: 800;
  background: #ffffff;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
}

.btn-edit-context,
.btn-edit-global {
  margin-left: auto;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-edit-context:hover,
.btn-edit-global:hover {
  border-color: var(--red-primary);
  color: var(--red-primary);
}

.modal-wizard,
.wizard-modal-box {
  max-width: 980px !important;
  width: 95vw;
  height: 88vh;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: auto;
}

.wizard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 24px 12px;
  flex-shrink: 0;
}

.wizard-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--red-primary);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.step-section-heading {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-pure);
  margin: 0;
}

.step-section-subheading {
  font-size: 12.5px;
  color: var(--text-dim);
  font-weight: 600;
  margin: 2px 0 0;
}

.input-sub-hint {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

.input-sub-hint code {
  color: var(--red-primary);
  background: rgba(220, 38, 38, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Bias Direction Toggle Group */
.direction-toggle-group,
.direction-segmented-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

.dir-seg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  background: #f8fafc;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dir-seg-btn:hover {
  background: #ffffff;
  border-color: #94a3b8;
  color: var(--text-pure);
}

.dir-seg-btn.active {
  background: #ffffff;
  border-color: var(--red-primary);
  color: var(--red-primary);
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.12);
}

.dir-seg-btn .dir-icon {
  font-size: 16px;
}

/* Word Counter & Alert */
.comment-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.word-counter-badge,
.comment-word-hint {
  font-size: 11.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 12px;
}

.word-counter-badge.limit-reached {
  background: rgba(220, 38, 38, 0.12);
  color: var(--red-primary);
  font-weight: 800;
}

.word-limit-warning,
.comment-limit-warning {
  font-size: 12px;
  font-weight: 700;
  color: var(--red-primary);
  animation: pulse 1.5s infinite;
}

/* Clarity Score Bar */
.clarity-score-panel,
.clarity-score-card {
  background: #f8fafc;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.clarity-metric-group,
.clarity-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clarity-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #64748b;
}

.clarity-percentage {
  font-size: 17px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-pure);
}

.clarity-status-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
}

.clarity-status-tag.high {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.clarity-status-tag.medium {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.clarity-status-tag.low {
  background: rgba(220, 38, 38, 0.15);
  color: var(--red-primary);
}

.clarity-hint {
  font-size: 11.5px;
  color: #94a3b8;
}

.clarity-slider-wrap input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  outline: none;
  cursor: pointer;
  accent-color: var(--red-primary);
}

.clarity-meter-track {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.clarity-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #10b981 100%);
  border-radius: 4px;
  transition: width 0.2s ease-out;
}

/* Wizard Footer */
.wizard-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  flex-shrink: 0;
  border-top: 1.5px solid var(--border-subtle);
  background: #f8fafc;
}

.wizard-bottom-left, .wizard-bottom-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-wizard-nav {
  padding: 9px 18px;
  border: 1.5px solid var(--border-medium);
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-wizard-nav:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.btn-wizard-draft {
  padding: 9px 16px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-wizard-draft:hover {
  background: #f1f5f9;
  color: var(--text-pure);
}

.btn-finish {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-color: #059669 !important;
}

.btn-finish:hover {
  filter: brightness(1.08);
}

#form-analysis-wizard {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#form-analysis-wizard .modal-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 18px 24px;
}

/* Analysis Quick Filter Bar */
.analysis-quick-filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: #ffffff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-subtle);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.analysis-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analysis-filter-item .filter-label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.filter-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.filter-select-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #ffffff;
  color: var(--text-pure);
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 32px 6px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-subtle);
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 142px;
}

.filter-select-dropdown:hover {
  border-color: var(--border-medium);
  background: #f8fafc;
}

.filter-select-dropdown:focus {
  border-color: var(--red-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.select-chevron {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: var(--text-dim);
  transition: transform 0.2s ease;
}

.filter-select-dropdown:focus + .select-chevron {
  color: var(--red-primary);
  transform: rotate(180deg);
}

.analysis-filter-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-apply-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid #dc2626;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.28);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.02em;
}

.btn-apply-filters:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.38);
  filter: brightness(1.06);
}

.btn-apply-filters:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.btn-reset-filters {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: var(--red-primary);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.btn-reset-filters:hover {
  background: var(--red-primary);
  color: #ffffff;
  border-color: var(--red-primary);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.btn-reset-filters.hidden {
  display: none !important;
}

.analysis-filter-stats {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  background: #f8fafc;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.analysis-filter-stats strong {
  color: var(--text-pure);
}

/* ==========================================================================
   SIDE-BY-SIDE ANALYSIS DISPLAY STYLES
   ========================================================================== */
.mtf-cards-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.mtf-side-by-side-card {
  background: #ffffff;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.mtf-side-by-side-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.mtf-side-by-side-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 1080px) {
  .mtf-side-by-side-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.mtf-col-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.mtf-col-charts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.mtf-commentary-box {
  background: #f8fafc;
  border: 1.5px solid var(--border-subtle);
  border-left: 4px solid var(--red-primary);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #1e293b;
}

.mtf-commentary-title {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mtf-charts-side-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
}

.mtf-chart-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border-medium);
  background: #0f172a;
  height: 250px;
  min-height: 200px;
  max-height: 340px;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.mtf-chart-card:hover {
  transform: translateY(-2px);
  border-color: var(--red-primary);
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.2);
}

.mtf-chart-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #090d16;
  display: block;
}

.mtf-chart-card-cue {
  position: absolute;
  inset: 0;
  background: rgba(220, 38, 38, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 13.5px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mtf-chart-card:hover .mtf-chart-card-cue {
  opacity: 1;
}

.mtf-no-charts-box {
  min-height: 180px;
  border: 1.5px dashed var(--border-medium);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  background: #fafafa;
  padding: 24px;
  text-align: center;
  font-size: 13px;
}

/* Timeframe Filter Tabs in Reader */
.mtf-tab-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
}

.mtf-tab-btn {
  background: #ffffff;
  border: 1.5px solid var(--border-medium);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.mtf-tab-btn:hover {
  border-color: var(--red-primary);
  color: var(--red-primary);
  background: var(--red-bg-subtle);
}

.mtf-tab-btn.active {
  background: var(--red-primary);
  border-color: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

/* 2-Column Timeframe Matrix Mode */
.mtf-cards-container.matrix-mode {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

.mtf-cards-container.matrix-mode .mtf-side-by-side-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  overflow: hidden;
}

.mtf-cards-container.matrix-mode .mtf-side-by-side-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: stretch;
  height: 100%;
}

.mtf-cards-container.matrix-mode .mtf-charts-side-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.mtf-cards-container.matrix-mode .mtf-chart-card {
  height: 210px;
  max-height: 220px;
  min-height: 170px;
  width: 100%;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .mtf-cards-container.matrix-mode {
    grid-template-columns: 1fr !important;
  }
}

/* General Analysis / Trade Side-by-Side Layout */
.analysis-side-by-side-layout {
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 26px;
  align-items: start;
}

@media (max-width: 1080px) {
  .analysis-side-by-side-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.analysis-col-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.analysis-col-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ==========================================================================
   TRADE OUTCOME SCREEN & POST-TRADE REVIEW STYLES
   ========================================================================== */
.outcome-recap-section {
  background: #f8fafc;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 16px 20px;
}

.outcome-recap-title {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.outcome-recap-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .outcome-recap-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

.outcome-recap-item {
  background: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.outcome-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .outcome-metrics-grid,
  .form-three-cols {
    grid-template-columns: 1fr !important;
  }
}

.outcome-metric-box {
  background: #f8fafc;
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.outcome-metric-label {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.outcome-metric-value {
  font-size: 15px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

.outcome-metric-value.validity-valid {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.outcome-metric-value.validity-invalid {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.outcome-metric-value.validity-unclear {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.outcome-metric-value.execution-followed {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.outcome-metric-value.execution-not-followed {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.outcome-metric-value.execution-partially {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.outcome-metric-value.result-worked {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.outcome-metric-value.result-failed {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.outcome-metric-value.result-avoided {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.25);
}

/* ==========================================================================
   HOME PAGE (Center area kept empty for now)
   ========================================================================== */
.home-empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
}

.home-empty-canvas {
  width: 100%;
  max-width: 1100px;
  min-height: 520px;
  border: 2px dashed #cbd5e1;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: var(--transition);
}

.home-empty-canvas:hover {
  border-color: #94a3b8;
  background: #ffffff;
}

.home-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.85;
}

.home-empty-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-pure);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}

.home-empty-desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.home-empty-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.home-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #ffffff;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-pure);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: var(--shadow-subtle);
}

.home-quick-link:hover {
  border-color: var(--red-primary);
  color: var(--red-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.toolbar-title-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tab-title,
.tab-label {
  font-size: 13px;
  font-weight: 800;
}

.checklist-builder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}

.cat-badge-icon.default {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
}

.btn-row-add,
.btn-row-rename,
.btn-row-delete {
  background: transparent;
  border: none;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--text-dim);
  line-height: 1;
  transition: var(--transition);
}

.btn-row-add:hover {
  color: var(--red-primary);
  background: rgba(220, 38, 38, 0.12);
  font-weight: 800;
}

.btn-row-rename:hover {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
}

.btn-row-delete:hover {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.15);
}

.callout-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.mtf-reader-header-card {
  background: #f8fafc;
  border: 1.5px solid var(--border-medium);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 22px;
}

.thumb-preview-card.new-pending {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.thumb-preview-card.existing {
  border-color: #38bdf8;
}

.tags-input-box input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--text-pure);
  width: 100%;
}

.dropzone-text .browse-link {
  color: var(--red-primary);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   INSTITUTIONAL TRADE JOURNAL - TWO-PART LAYOUT & EXCEL TABLE
   ========================================================================== */

/* TOP HALF: Executive KPI Summary Cards */
/* TOP HALF: SUMMARY DISPLAY TABS & PROFITABILITY INTELLIGENCE */
.summary-tabs-container {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-subtle);
  padding: 14px 18px;
  margin-bottom: 12px;
}

.summary-tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.summary-tabs-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.summary-section-icon {
  font-size: 20px;
}

.summary-section-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 0;
  line-height: 1.2;
}

.summary-section-sub {
  font-size: 11px;
  color: var(--text-dim);
}

.summary-tabs-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}

.summary-tab-btn {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.15s ease;
  user-select: none;
}

.summary-tab-btn:hover {
  color: var(--text-pure);
  background: rgba(255, 255, 255, 0.7);
}

.summary-tab-btn.active {
  background: #ffffff;
  color: var(--red-primary);
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Summary Cards Grids */
.summary-cards-grid {
  display: grid;
  gap: 12px;
}

.summary-cards-grid.five-cols {
  grid-template-columns: repeat(5, 1fr);
}

.summary-cards-grid.four-cols {
  grid-template-columns: repeat(4, 1fr);
}

.summary-cards-grid.three-cols {
  grid-template-columns: repeat(3, 1fr);
}

.summary-cards-grid.two-cols {
  grid-template-columns: repeat(2, 1fr);
}

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

/* Individual Summary Metric Cards */
.summary-metric-card {
  background: #ffffff;
  border: 1.5px solid var(--border-light);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  transition: all 0.2s ease;
  position: relative;
}

.summary-metric-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.clickable-edge-card {
  cursor: pointer;
}

.clickable-edge-card:hover {
  border-color: var(--red-border);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.1);
  transform: translateY(-1px);
}

.sm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.sm-badge {
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #475569;
}

.sm-badge.crown {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.sm-badge.edge {
  background: #fef2f2;
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.sm-badge.danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.sm-type-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
}

.sm-hero-val {
  font-size: 19px;
  font-weight: 900;
  color: var(--text-pure);
  margin-bottom: 6px;
  line-height: 1.2;
}

.sm-stats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.sm-stat-pill {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #334155;
}

.sm-stat-pill.emerald {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.sm-footer-note {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 4px;
}

/* Execution Comparison Box */
.sm-comparison-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}

.sm-comp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.comp-label {
  color: var(--text-muted);
  font-weight: 600;
}

.comp-val {
  font-size: 11.5px;
  font-weight: 800;
}

/* Quality Archetype Bars */
.quality-bars-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 8px;
}

.quality-item-row {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.quality-item-row:hover {
  background: #f8fafc;
}

.q-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.q-count-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.q-bar-track {
  width: 100%;
  height: 5px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.q-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.q-bar-fill.hero { background: #be185d; }
.q-bar-fill.mentor { background: #1d4ed8; }
.q-bar-fill.shadow { background: #6d28d9; }
.q-bar-fill.villain { background: #dc2626; }

/* Setup Forced Comparison Deck */
.forced-comparison-deck {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.forced-box {
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.15s ease;
}

.forced-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.forced-box.clean {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.forced-box.violated {
  background: #fef2f2;
  border-color: #fecaca;
}

.forced-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.forced-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-pure);
}

.forced-sub {
  font-size: 9.5px;
  color: var(--text-dim);
}

.forced-verdict-alert {
  padding: 6px 10px;
  border-radius: 4px;
  background: #f8fafc;
  border-left: 3px solid var(--red-primary);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-pure);
}

/* Exit Distribution Cards */
.exit-card {
  cursor: pointer;
}

.sm-progress-pill-row {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

/* Podiums for Top 3 Emotions and Interference */
.podium-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 6px;
}

.podium-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.podium-item:hover {
  background: #f1f5f9;
}

.podium-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.podium-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
  font-family: var(--font-mono);
}

.podium-rank.rank-1 { background: #fef08a; color: #854d0e; }
.podium-rank.rank-2 { background: #e2e8f0; color: #475569; }
.podium-rank.rank-3 { background: #ffedd5; color: #9a3412; }

.podium-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-pure);
}

.podium-stats {
  display: flex;
  align-items: center;
  gap: 6px;
}

.podium-wr-badge {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 1px 5px;
  border-radius: 3px;
}

.podium-wr-badge.win {
  background: #ecfdf5;
  color: #059669;
}

.podium-wr-badge.loss {
  background: #fef2f2;
  color: #dc2626;
}

/* Fear Dual Split */
.fear-dual-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

.fear-split-box {
  padding: 6px 8px;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.fear-split-box.winner {
  border-left: 3px solid #10b981;
}

.fear-split-box.loser {
  border-left: 3px solid #ef4444;
}

.fs-label {
  display: block;
  font-size: 9.5px;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.fs-val {
  font-size: 13px;
  font-weight: 900;
}

/* Dynamic Filter Result Banner */
.trade-filter-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fef2f2;
  border: 1.5px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin-bottom: 12px;
  animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.filter-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-bar-icon {
  color: var(--red-primary);
  font-size: 13px;
}

.filter-bar-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-pure);
  font-family: var(--font-mono);
}

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

.filter-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid var(--red-border);
  color: var(--red-primary);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.filter-tag-remove {
  cursor: pointer;
  opacity: 0.7;
  font-weight: 900;
}
.filter-tag-remove:hover {
  opacity: 1;
}

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

.filter-stats-badge {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--red-primary);
}

.btn-clear-filters {
  background: transparent;
  border: 1px solid var(--red-border);
  color: var(--red-primary);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.btn-clear-filters:hover {
  background: var(--red-primary);
  color: #ffffff;
}

/* BOTTOM HALF: Excel-Style Interactive Data Table */
.excel-table-wrapper {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 280px);
  min-height: 380px;
  overflow: hidden;
}

/* ==========================================================================
   PROFESSIONAL EXCEL TABLE & CALENDAR TOOLBAR SYSTEM
   ========================================================================== */

.excel-table-header-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px;
  min-height: 46px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  box-sizing: border-box;
}

.excel-table-header-controls::-webkit-scrollbar {
  display: none;
}


/* Toolbar Vertical Divider */
.tb-divider {
  width: 1px;
  height: 22px;
  background: #e2e8f0;
  flex-shrink: 0;
  margin: 0 2px;
}


/* 1. Left: Journal View Switcher */
.journal-view-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  height: 32px;
  box-sizing: border-box;
  flex-shrink: 0;
}


.btn-journal-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 26px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-journal-view .tb-icon {
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.btn-journal-view:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.7);
}

.btn-journal-view:hover .tb-icon {
  opacity: 1;
}


.btn-journal-view.active {
  color: #0f172a;
  background: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-journal-view.active .tb-icon {
  opacity: 1;
  color: var(--red-primary, #dc2626);
}



/* 2. Center: Quick Filters & Search */
.table-left-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* Search Box Capsule */
.table-search-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 8px;
  height: 32px;
  width: 190px;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-sizing: border-box;
  position: relative;
}

.table-search-box:focus-within {
  background: #ffffff;
  border-color: var(--red-primary, #dc2626);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
  width: 220px;
}



.search-ico-inline {
  color: #64748b;
  flex-shrink: 0;
}


.table-search-box input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 11.5px;
  font-weight: 500;
  width: 100%;
  color: #0f172a;
  padding: 0;
}


.table-search-box input::placeholder {
  color: #94a3b8;
  font-size: 11.5px;
}


.btn-clear-search-inline {
  background: none;
  border: none;
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  border-radius: 3px;
  transition: color 0.15s ease;
}

.btn-clear-search-inline:hover {
  color: #ef4444;
}

/* Filter Dropdown Pills */
.table-filter-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 8px;
  height: 32px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.15s ease;
  position: relative;
  cursor: pointer;
}

.table-filter-select-wrap:hover {
  background: #ffffff;
  border-color: #94a3b8;
}



/* Active Highlight when filter is engaged */
.table-filter-select-wrap.has-active-filter {
  background: rgba(220, 38, 38, 0.05) !important;
  border-color: var(--red-primary, #dc2626) !important;
}


.select-prefix-icon {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}

.table-quick-select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  padding-right: 14px;
  white-space: nowrap;
  max-width: 175px;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 8px 5px;
}

.table-filter-select-wrap.has-active-filter .table-quick-select {
  color: var(--red-primary, #dc2626);
  font-weight: 700;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23dc2626' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
}



.table-quick-select option {
  background: #ffffff;
  color: #0f172a;
}


/* Custom Time Inputs Popup */
.table-custom-time-inputs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid var(--red-primary, #dc2626);
  border-radius: 6px;
  padding: 0 6px;
  height: 32px;
  box-sizing: border-box;
  animation: fadeInDown 0.15s ease;
  flex-shrink: 0;
}


.time-range-box {
  width: 48px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  padding: 2px 3px;
  outline: none;
  background: transparent;
  color: inherit;
}

.time-range-box:focus {
  border-color: var(--red-primary, #dc2626);
}

.time-sep {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 700;
}

.btn-time-apply {
  background: var(--red-primary, #dc2626);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-time-apply:hover {
  opacity: 0.9;
}

/* Reset Toolbar Filters Button */
.btn-tb-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.btn-tb-reset:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

/* 3. Right: CSV Actions & Count Telemetry */
.table-meta-counts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
}

.btn-table-csv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-sizing: border-box;
  margin: 0;
}

.btn-table-csv .btn-csv-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

.btn-table-csv:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-table-csv:hover .btn-csv-icon {
  opacity: 1;
}



#table-row-count-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  font-family: var(--font-mono, monospace);
  white-space: nowrap !important;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  box-sizing: border-box;
}


.balance-cell-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pnl-pill-pos {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.pnl-pill-neg {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.pnl-pill-open {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.excel-table-scroll-container {
  overflow: auto;
  flex: 1;
}

.excel-trades-table {
  width: 100%;
  min-width: 2350px;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.excel-trades-table th.col-sticky-id,
.excel-trades-table td.col-sticky-id {
  position: sticky;
  left: 0;
  z-index: 5;
  background: #ffffff;
  border-right: 2px solid #e2e8f0;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.04);
}

.excel-trades-table thead th.col-sticky-id {
  background: #f1f5f9;
  z-index: 15;
}

.excel-trades-table tbody tr:hover td.col-sticky-id {
  background: #fff5f5;
}

.excel-trades-table tbody tr.row-open-trade td.col-sticky-id {
  background: #fefce8;
}

.excel-trades-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f1f5f9;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border-medium);
  border-right: 1px solid #e2e8f0;
  white-space: nowrap;
  user-select: none;
}

.excel-trades-table thead th:last-child {
  border-right: none;
}

.th-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.th-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sort-icon {
  font-size: 9px;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.col-sortable:hover .sort-icon {
  opacity: 1;
  color: var(--red-primary);
}

.th-filter-btn {
  background: transparent;
  border: none;
  outline: none;
  font-size: 8px;
  color: #64748b;
  cursor: pointer;
  padding: 1px 3px;
  border-radius: 2px;
  transition: var(--transition);
}

.th-filter-btn:hover,
.th-filter-btn.active {
  background: var(--red-primary);
  color: #ffffff;
}

.excel-trades-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.excel-trades-table tbody tr:hover {
  background-color: #fff5f5;
}

.excel-trades-table tbody tr.row-open-trade {
  background-color: #fefce8;
  border-left: 3px solid #f59e0b;
}

.excel-trades-table tbody td {
  padding: 7px 10px;
  border-right: 1px solid #f1f5f9;
  white-space: nowrap;
  vertical-align: middle;
}

.excel-trades-table tbody td:last-child {
  border-right: none;
}

/* Badges inside Excel table */
.badge-id {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  color: var(--text-pure);
}

.badge-session {
  display: inline-block;
  padding: 1px 6px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.badge-execution {
  display: inline-block;
  padding: 1px 6px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}

.badge-emotion {
  display: inline-block;
  padding: 1px 6px;
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.badge-interference {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.badge-interf-relax {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.badge-interf-normal {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.badge-interf-too-much {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.badge-forced {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
}

.badge-forced-no {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.badge-forced-yes {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.badge-classification {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.badge-class-a--setup,
.badge-class-a-setup {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.badge-class-chase-market {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.badge-class-invalid-analysis {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.badge-exit {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
}

.badge-exit-tp {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.badge-exit-sl {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.badge-exit-manual-cut {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.table-text-cell {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  color: var(--text-dim);
}

.cell-empty-dash {
  color: #94a3b8;
  font-weight: 600;
  font-size: 12px;
}

.badge-direction-buy {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 10px;
  font-family: var(--font-mono);
}

.badge-direction-sell {
  background: #fef2f2;
  color: var(--red-primary);
  border: 1px solid #fecaca;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 10px;
  font-family: var(--font-mono);
}

.badge-result-profit {
  background: #10b981;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 9.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.badge-result-loss {
  background: #dc2626;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 9.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.badge-result-open {
  background: #f59e0b;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 9.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.badge-quality-hero {
  background: #fdf2f8;
  color: #be185d;
  border: 1px solid #fbcfe8;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
}

.badge-quality-mentor {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
}

.badge-quality-shadow {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
}

.badge-quality-villain {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
}

.chart-thumbnail-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  background: #f1f5f9;
  border: 1px solid var(--border-medium);
  border-radius: 3px;
  font-size: 10px;
  color: var(--text-pure);
  cursor: pointer;
  transition: var(--transition);
}

.chart-thumbnail-btn:hover {
  background: var(--red-bg-subtle);
  border-color: var(--red-border);
  color: var(--red-primary);
}

.row-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: var(--transition);
}

.row-action-btn:hover {
  background: #fee2e2;
  color: var(--red-primary);
}

.excel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--text-dim);
}

.excel-empty-state .empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.excel-empty-state .empty-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-pure);
}

.excel-empty-state .empty-desc {
  font-size: 12px;
  margin-top: 4px;
}

/* Excel Column Filter Popover */
.excel-filter-dropdown {
  position: fixed;
  z-index: 1000;
  background: #ffffff;
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  width: 220px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.filter-col-title {
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-pure);
}

.filter-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text-dim);
}

.filter-search-box input {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  font-size: 11px;
  outline: none;
}

.filter-search-box input:focus {
  border-color: var(--red-primary);
}

.filter-options-actions {
  display: flex;
  gap: 6px;
}

.filter-options-actions button {
  background: #f1f5f9;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}

.filter-options-list {
  max-height: 150px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid #f1f5f9;
  border-radius: 3px;
  padding: 4px;
}

.filter-option-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-pure);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
}

.filter-option-item:hover {
  background: #f8fafc;
}

.filter-popover-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

.btn-filter-cancel {
  background: #f1f5f9;
  border: none;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 10px;
  cursor: pointer;
}

.btn-filter-apply {
  background: var(--red-primary);
  color: #ffffff;
  border: none;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

/* ==========================================================================
   4-SCREEN TRADE LOGGING WIZARD MODAL
   ========================================================================== */
.modal-trade-wizard-box {
  width: 92%;
  max-width: 760px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--border-subtle);
  background: #ffffff;
}

.wizard-title-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wizard-id-badge {
  background: #fef2f2;
  border: 1.5px solid var(--red-border);
  color: var(--red-primary);
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 4px;
}

.wizard-subtitle {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-subtle);
}

.step-item {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0.5;
  transition: var(--transition);
}

.step-item.active {
  opacity: 1;
}

.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font-mono);
}

.step-item.active .step-num {
  background: var(--red-primary);
}

.step-item.passed .step-num {
  background: #10b981;
}

.step-text {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-pure);
}

.step-divider {
  flex: 1;
  height: 1px;
  background: var(--border-medium);
  margin: 0 12px;
}

.wizard-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1.5px solid var(--border-subtle);
  background: #f8fafc;
}

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

.btn-wizard-next {
  background: var(--red-primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 7px 16px;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-wizard-next:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-wizard-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-wizard-prev {
  background: #f1f5f9;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.btn-partial-save {
  background: #ffffff;
  border: 1.5px solid #059669;
  color: #059669;
  border-radius: 4px;
  padding: 7px 14px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-partial-save:hover {
  background: #059669;
  color: #ffffff;
}

/* Gatekeeper Card (Screen 1) */
.gatekeeper-card {
  background: #fffafa;
  border: 1.5px solid var(--red-border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}

.gatekeeper-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gatekeeper-shield {
  font-size: 28px;
}

.gatekeeper-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--text-pure);
}

.gatekeeper-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

.wizard-input-large {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  padding: 8px 10px;
  border: 1.5px solid var(--border-medium);
  border-radius: 4px;
  outline: none;
}

.wizard-input-large:focus {
  border-color: var(--red-primary);
  box-shadow: 0 0 0 2px var(--red-glow);
}

/* Screen 1 Redesigned Lot Size & Gatekeeper Styles */
.gatekeeper-account-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 14px;
  margin-top: 12px;
  margin-bottom: 14px;
}

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

.gas-label {
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.gas-val {
  font-size: 13px;
  font-weight: 900;
}

.gatekeeper-inputs-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.field-badge-limit {
  font-size: 9.5px;
  font-weight: 800;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 1px 5px;
  border-radius: 3px;
}

.field-unit-tag {
  font-size: 9.5px;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
}

.risk-preset-chips {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.risk-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.risk-chip:hover, .risk-chip.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.risk-chip.danger:hover, .risk-chip.danger.active {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

/* Lot Hero Card */
.lot-hero-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px 18px;
  color: #ffffff;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
}

.lot-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.lot-card-badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: #38bdf8;
  color: #0f172a;
  padding: 2px 7px;
  border-radius: 3px;
}

.lot-card-type {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.lot-hero-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.lot-hero-val {
  font-size: 32px;
  font-weight: 900;
  color: #38bdf8;
  line-height: 1;
}

.lot-hero-unit {
  font-size: 13.5px;
  font-weight: 700;
  color: #cbd5e1;
}

.lot-formula-callout {
  font-size: 10.5px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  border: 1px dashed #334155;
}

.lot-sub-breakdown {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  font-family: var(--font-mono);
}

.compliance-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.calc-box {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: var(--transition);
}

.calc-box.pass {
  border-color: #10b981;
  background: #f0fdf4;
}

.calc-box.fail {
  border-color: #ef4444;
  background: #fef2f2;
}

.calc-label {
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-dim);
}

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

.calc-val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 900;
  color: var(--text-pure);
}

.calc-status-badge {
  font-size: 8.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #64748b;
}

.calc-box.pass .calc-status-badge {
  background: #10b981;
  color: #ffffff;
}

.calc-box.fail .calc-status-badge {
  background: #dc2626;
  color: #ffffff;
}

.calc-rule-note {
  font-size: 10px;
  color: var(--text-muted);
}

.compliance-alert-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fef2f2;
  border: 1px solid var(--red-border);
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
}

/* Screen 2 Auto details layout */
.pane-grid-two {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
}

.panel-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.panel-heading-row .panel-heading {
  margin-bottom: 0;
}

.btn-telemetry-now {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  padding: 2.5px 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-telemetry-now:hover {
  background: #f1f5f9;
  color: var(--text-pure);
  border-color: #94a3b8;
}

.auto-details-panel {
  background: #f8fafc;
  border: 1.5px solid var(--border-subtle);
  border-radius: 6px;
  padding: 12px 14px;
}

.auto-fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 6px;
  gap: 8px;
}

.auto-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.auto-label {
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
}

.auto-val {
  font-weight: 800;
  color: var(--text-pure);
}

.telemetry-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex: 1;
}

.telemetry-input {
  padding: 3px 6px !important;
  font-size: 11.5px !important;
  height: 28px !important;
  border-radius: 4px !important;
  border: 1px solid var(--border-medium) !important;
  background: #ffffff !important;
  color: var(--text-pure) !important;
  max-width: 140px;
}

.telemetry-input:focus {
  border-color: var(--red-primary) !important;
}

.telemetry-sub-badge {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.telemetry-tz-tag {
  font-size: 9.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}

.telemetry-select {
  padding: 3px 6px !important;
  font-size: 11px !important;
  height: 28px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  background: #ffffff !important;
  color: var(--text-pure) !important;
  max-width: 175px;
}

.balance-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.balance-input-wrap .currency-prefix {
  font-size: 12px;
  font-weight: 900;
  color: #10b981;
  font-family: var(--font-mono);
}

.telemetry-input.balance-input {
  width: 110px !important;
  text-align: right;
  color: #059669 !important;
  font-weight: 800 !important;
}

.wizard-select,
.wizard-select-compact {
  padding: 6px 8px;
  border: 1.5px solid var(--border-medium);
  border-radius: 4px;
  font-size: 12px;
  outline: none;
  width: 100%;
}

.wizard-select-compact {
  width: auto;
  padding: 2px 6px;
  font-size: 11px;
}

.wizard-select:focus,
.wizard-input:focus,
.wizard-textarea:focus {
  border-color: var(--red-primary);
  box-shadow: 0 0 0 2px var(--red-glow);
}

.wizard-select optgroup {
  font-weight: 800;
  font-family: var(--font-main);
  color: var(--text-dim);
  padding: 4px 0;
}




.wizard-input,
.wizard-textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid var(--border-medium);
  border-radius: 4px;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}

/* Dropzone in Wizard */
.wizard-dropzone {
  border: 1.5px dashed var(--border-medium);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.wizard-dropzone:hover {
  border-color: var(--red-primary);
  background: #fff5f5;
}

.screenshot-preview-box {
  position: relative;
  display: inline-block;
}

.screenshot-preview-box img {
  max-width: 100%;
  max-height: 120px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

.btn-remove-ss {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  cursor: pointer;
}

/* Fear Slider */
.fear-slider {
  width: 100%;
  accent-color: var(--red-primary);
  cursor: pointer;
}

.slider-marks {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-top: 3px;
}

.fear-percent-badge {
  background: #fef2f2;
  border: 1px solid var(--red-border);
  color: var(--red-primary);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 800;
  font-size: 11px;
}

/* ==========================================================================
   COMPLETE INDIVIDUAL TRADE POPUP READER MODAL
   ========================================================================== */
.modal-trade-detail-box {
  width: 92%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}

.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1.5px solid var(--border-subtle);
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.detail-header-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.detail-id-pill {
  background: #0f172a;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
}

.detail-pair-pill {
  background: #f1f5f9;
  color: var(--text-pure);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-mono);
}

.detail-dir-pill {
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
}

.detail-dir-pill.buy {
  background: #ecfdf5;
  color: #059669;
}

.detail-dir-pill.sell {
  background: #fef2f2;
  color: var(--red-primary);
}

.detail-status-pill {
  background: #f8fafc;
  border: 1px solid var(--border-medium);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
}

.detail-heading {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-pure);
}

.detail-timestamp {
  font-size: 10.5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.detail-body-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 24px;
}

.detail-card {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.detail-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

.detail-card-head h4 {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-pure);
}

.detail-stat-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

.stat-label {
  color: var(--text-dim);
}

.stat-val {
  font-weight: 800;
  color: var(--text-pure);
}

.detail-lesson-box {
  margin: 0 24px 16px;
  background: #f8fafc;
  border-left: 3px solid var(--red-primary);
  border-radius: 0 4px 4px 0;
  padding: 10px 14px;
}

.lesson-label {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--red-primary);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.lesson-text {
  font-size: 12px;
  color: var(--text-pure);
  margin-top: 4px;
  line-height: 1.4;
}

.detail-screenshots-section {
  padding: 0 24px 16px;
}

.detail-screenshots-section .section-title {
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-pure);
  margin-bottom: 10px;
}

.detail-screenshots-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.detail-screenshot-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-header-badge {
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.detail-ss-frame {
  border: 1.5px solid var(--border-medium);
  border-radius: 6px;
  overflow: hidden;
  background: #f8fafc;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-ss-frame img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.detail-ss-frame img:hover {
  transform: scale(1.02);
}

.ss-empty-placeholder {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}

.detail-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1.5px solid var(--border-subtle);
  background: #f8fafc;
  position: sticky;
  bottom: 0;
}

.detail-actions-left,
.detail-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-action-delete-trade {
  background: transparent;
  border: 1px solid #fca5a5;
  color: #dc2626;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.btn-action-delete-trade:hover {
  background: #fee2e2;
}

.btn-view-raw-json {
  background: #f1f5f9;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.btn-edit-trade {
  background: var(--red-primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

/* Raw JSON viewer modal */
.modal-json-box {
  width: 90%;
  max-width: 650px;
  max-height: 80vh;
}

.json-code-block {
  background: #0f172a;
  color: #38bdf8;
  padding: 16px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  overflow: auto;
  max-height: 50vh;
}

/* Mistake Quick Chips & Dynamic Management in Wizard */
.field-label-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.mistake-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-reset-mistakes {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: #3b82f6;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: all 0.15s ease;
}

.btn-reset-mistakes:hover {
  color: #1d4ed8;
}

.field-hint-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #94a3b8;
}

.field-hint-tag.clean {
  color: #059669;
  background: #ecfdf5;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
  font-weight: 700;
}

.field-hint-tag.warn {
  color: #dc2626;
  background: #fef2f2;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid #fecaca;
  font-weight: 700;
}

.mistake-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 6px;
  min-height: 28px;
}

.mistakes-empty-note {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
  padding: 4px 0;
}

.mistake-chip-wrapper {
  display: inline-flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 11px;
  transition: all 0.15s ease;
  overflow: hidden;
  user-select: none;
}

.mistake-chip-wrapper:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mistake-chip-btn {
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}

.mistake-chip-btn:hover {
  color: #0f172a;
}

.chip-remove-btn {
  background: transparent;
  border: none;
  border-left: 1px solid #e2e8f0;
  padding: 4px 7px;
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s ease;
}

.chip-remove-btn:hover {
  background: #fee2e2;
  color: #dc2626;
  border-left-color: #fca5a5;
}

/* Active Highlight for Selected Mistake Chip */
.mistake-chip-wrapper.active {
  background: #fef2f2;
  border-color: #f87171;
  box-shadow: 0 0 0 1px #f87171;
}

.mistake-chip-wrapper.active .mistake-chip-btn {
  color: #b91c1c;
  font-weight: 700;
}

.mistake-chip-wrapper.active:not(.clean) .mistake-chip-btn::before {
  content: "✓ ";
  font-weight: 800;
  color: #dc2626;
  margin-right: 1px;
}

.mistake-chip-wrapper.active .chip-remove-btn {
  border-left-color: #fca5a5;
  color: #b91c1c;
}

.mistake-chip-wrapper.clean {
  background: #f8fafc;
}

.mistake-chip-wrapper.clean.active {
  background: #ecfdf5;
  border-color: #10b981;
  box-shadow: 0 0 0 1px #10b981;
}

.mistake-chip-wrapper.clean.active .mistake-chip-btn {
  color: #047857;
  font-weight: 700;
}

.mistake-chip-wrapper.clean.active .chip-remove-btn {
  border-left-color: #a7f3d0;
  color: #047857;
}

/* Add Mistake Inline Bar */
.add-mistake-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.add-mistake-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 5px;
  padding: 0 9px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.add-mistake-input-wrap:focus-within {
  border-color: #3b82f6;
  border-style: solid;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.add-mistake-icon {
  font-size: 11.5px;
  margin-right: 6px;
  user-select: none;
}

.input-new-mistake {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 11.5px;
  font-weight: 500;
  color: #1e293b;
  padding: 5px 0;
  font-family: inherit;
}

.input-new-mistake::placeholder {
  color: #94a3b8;
  font-size: 11px;
}

.btn-add-mistake {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-add-mistake:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

/* Dark Mode Overrides */


/* Repeated Mistakes Podium Item in Summary Cards */
.podium-item.podium-mistake {
  background: #fff5f5;
  border-color: #fed7d7;
}

.podium-item.podium-mistake:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.podium-mistake-impact {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #dc2626;
  background: #fef2f2;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #fecaca;
  white-space: nowrap;
}

/* Table Badge for Lot Size */
.badge-lot-size {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f0fdfa;
  border: 1.5px solid #5eead4;
  color: #0f766e;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* =======================================================
   HOME EXECUTIVE DASHBOARD & 5 INTELLIGENCE TABS
   ======================================================= */
.home-intelligence-container {
  padding: 24px 32px 48px;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Header */
.home-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 8px;
}

.home-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--red-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.home-main-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-pure);
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}

.home-main-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  max-width: 720px;
}

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

.home-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-action-btn.primary {
  background: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}

.home-action-btn.primary:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
}

/* KPI Strip */
.home-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.home-kpi-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.home-kpi-card:hover {
  border-color: var(--border-medium);
  transform: translateY(-2px);
}

.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kpi-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.kpi-icon {
  font-size: 16px;
}

.home-kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-pure);
  line-height: 1.2;
}

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

/* Tab Navigation Wrapper */
.home-tabs-wrapper {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.home-tabs-nav {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border-bottom: 2px solid var(--border-subtle);
  padding: 8px 16px 0;
  gap: 6px;
  overflow-x: auto;
}

.home-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  border: 1.5px solid transparent;
  border-bottom: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.home-tab-btn:hover {
  color: var(--text-pure);
  background: rgba(255, 255, 255, 0.7);
}

.home-tab-btn.active {
  color: var(--red-primary);
  background: #ffffff;
  border-color: var(--border-subtle);
  border-top: 2.5px solid var(--red-primary);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.02);
}

.home-tab-btn .btn-icon {
  font-size: 15px;
}

/* Tab Content Panes */
.home-tab-panes-body {
  padding: 24px;
  background: #ffffff;
}

.pane-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.pane-section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 0 0 4px;
}

.pane-section-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

/* TAB 1: Quality Cards Grid */
.quality-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.quality-archetype-card {
  border-radius: var(--radius-md);
  padding: 18px 20px;
  border: 1.5px solid var(--border-subtle);
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
}

.quality-archetype-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.quality-archetype-card.archetype-hero {
  border-color: #a7f3d0;
  background: #f0fdf4;
}

.quality-archetype-card.archetype-mentor {
  border-color: #bae6fd;
  background: #f0f9ff;
}

.quality-archetype-card.archetype-shadow {
  border-color: #ddd6fe;
  background: #faf5ff;
}

.quality-archetype-card.archetype-villain {
  border-color: #fecaca;
  background: #fef2f2;
}

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

.arc-badge-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-pure);
}

.arc-pct-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  background: #ffffff;
  padding: 2px 7px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

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

.arc-count-val {
  font-size: 18px;
  color: var(--text-pure);
}

.arc-count-val strong {
  font-size: 22px;
}

.arc-out-of {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-left: 2px;
}

.arc-wr-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.arc-wr-badge.wr-good {
  background: #dcfce7;
  color: #166534;
}

.arc-wr-badge.wr-bad {
  background: #fee2e2;
  color: #991b1b;
}

.arc-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.arc-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.arc-description {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
  min-height: 34px;
}

.arc-trade-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.trade-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.trade-chip:hover {
  transform: translateY(-1px);
}

.trade-chip.pill-profit {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.trade-chip.pill-loss {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.trade-chip.pill-open {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Distribution bar */
.quality-distribution-section {
  background: #f8fafc;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.dist-header {
  margin-bottom: 8px;
}

.dist-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.stacked-dist-bar {
  display: flex;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dist-slice {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--font-mono);
  white-space: nowrap;
  padding: 0 6px;
  transition: width 0.4s ease;
}

/* TAB 2: Entry Cards Grid */
.entry-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.entry-archetype-card {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.entry-archetype-card.entry-a-plus {
  border-top: 3px solid #10b981;
}

.entry-archetype-card.entry-invalid {
  border-top: 3px solid #f59e0b;
}

.entry-archetype-card.entry-chase {
  border-top: 3px solid #ef4444;
}

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

.entry-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entry-card-title h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 0;
}

.entry-pct-pill {
  font-size: 11px;
  font-weight: 800;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 10px;
}

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

.entry-count-big {
  font-size: 18px;
  color: var(--text-pure);
}

.entry-count-big strong {
  font-size: 24px;
}

.out-of-text {
  font-size: 11.5px;
  color: var(--text-dim);
}

.entry-wr-pill {
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.entry-wr-pill.emerald {
  background: #dcfce7;
  color: #166534;
}

.entry-wr-pill.red {
  background: #fee2e2;
  color: #991b1b;
}

.entry-progress-wrap {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.entry-archetype-card.entry-a-plus .entry-progress-bar {
  background: #10b981;
}

.entry-archetype-card.entry-invalid .entry-progress-bar {
  background: #f59e0b;
}

.entry-archetype-card.entry-chase .entry-progress-bar {
  background: #ef4444;
}

.entry-progress-bar {
  height: 100%;
  border-radius: 3px;
}

.entry-pnl-impact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px dashed var(--border-subtle);
}

.entry-trade-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.home-callout-box {
  background: #f8fafc;
  border: 1.5px solid var(--border-subtle);
  border-left: 4px solid var(--red-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text-pure);
  line-height: 1.5;
}

/* TAB 3: Mistakes Grid & Cards */
.mistakes-stat-pills {
  display: flex;
  gap: 8px;
}

.m-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  font-family: var(--font-mono);
}

.m-pill.danger {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.m-pill.success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.home-mistakes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.home-mistake-card {
  background: #ffffff;
  border: 1.5px solid #fecaca;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.home-mistake-card:hover {
  background: #fff5f5;
  border-color: #f87171;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.hm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hm-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hm-warning-icon {
  font-size: 16px;
}

.hm-name {
  font-size: 14px;
  font-weight: 800;
  color: #991b1b;
  margin: 0;
}

.mistake-damage-tag {
  font-size: 11.5px;
  font-weight: 800;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  padding: 2px 7px;
  border-radius: 4px;
}

.hm-repetition-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #f1f5f9;
}

.hm-rep-badge {
  font-size: 11.5px;
  color: #334155;
}

.hm-inspect-btn {
  font-size: 11px;
  font-weight: 700;
  color: var(--red-primary);
  background: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-medium);
}

.hm-trade-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.trade-pill-number {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  padding: 1px 6px;
  border-radius: 3px;
}

/* Modal Mistake Drilldown */
.modal-mistake-drilldown-box {
  max-width: 960px;
  width: 95%;
}

.modal-mistake-meta-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.m-meta-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
}

.m-meta-pill.rep {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.m-meta-pill.loss {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.modal-drilldown-inner {
  max-height: 65vh;
  overflow-y: auto;
}

.mistake-drilldown-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12px;
}

.mistake-drilldown-table th {
  background: #f8fafc;
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 9px 12px;
  border-bottom: 1.5px solid var(--border-medium);
  text-align: left;
}

.mistake-drilldown-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.mistake-drilldown-table tr:hover td {
  background: #f8fafc;
}

.lesson-bubble {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
}

.drill-open-trade-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--red-primary);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--border-medium);
  padding: 3px 8px;
  border-radius: 3px;
}

.drill-open-trade-btn:hover {
  background: var(--red-primary);
  color: #ffffff;
}

/* TAB 4: Forced Split Cards */
.forced-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.forced-split-card {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.forced-split-card.card-clean {
  border-top: 4px solid #10b981;
}

.forced-split-card.card-forced {
  border-top: 4px solid #ef4444;
}

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

.fsc-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.fsc-tag.green {
  color: #059669;
}

.fsc-tag.red {
  color: #dc2626;
}

.fsc-pct {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-dim);
}

.fsc-big-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-pure);
}

.fsc-stats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
}

.fsc-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.fsc-trades-tray {
  margin-top: 4px;
}

.tray-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  display: block;
  margin-bottom: 6px;
}

.tray-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* TAB 5: Win Rate Hero Deck */
.winrate-deck-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  margin-bottom: 24px;
}

.winrate-hero-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15);
}

.wr-hero-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.wr-hero-val {
  font-size: 48px;
  font-weight: 800;
  color: #34d399;
  line-height: 1.1;
  margin-bottom: 6px;
}

.wr-hero-sub {
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.wr-pnl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
}

.wr-metrics-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.wr-metrics-quad.six-cols {
  grid-template-columns: repeat(3, 1fr);
}

.wr-metric-box {
  background: #f8fafc;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.box-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}

.box-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-pure);
}

.wr-pair-section {
  background: #f8fafc;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.wr-table-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 0 0 12px;
}

.home-pair-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.home-pair-table th {
  background: #ffffff;
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border-bottom: 1.5px solid var(--border-medium);
  text-align: left;
}

.home-pair-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

/* TAB 6: Exit Breakdown (TP, SL, Manual Cut) */
.exit-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 1024px) {
  .exit-cards-grid {
    grid-template-columns: 1fr;
  }
}

.exit-category-card {
  border-radius: var(--radius-md);
  padding: 18px 20px;
  border: 1.5px solid var(--border-subtle);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.exit-category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.exit-category-card.exit-tp {
  border-top: 3.5px solid #10b981;
}

.exit-category-card.exit-sl {
  border-top: 3.5px solid #ef4444;
}

.exit-category-card.exit-manual {
  border-top: 3.5px solid #f59e0b;
}

.exit-category-card.exit-open {
  border-top: 3.5px solid #64748b;
}

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

.exit-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.exit-tag.tp {
  background: #dcfce7;
  color: #166534;
}

.exit-tag.sl {
  background: #fee2e2;
  color: #991b1b;
}

.exit-tag.manual {
  background: #fef3c7;
  color: #92400e;
}

.exit-tag.open {
  background: #f1f5f9;
  color: #475569;
}

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

.exit-count-val {
  font-size: 18px;
  color: var(--text-pure);
}

.exit-count-val strong {
  font-size: 24px;
}

.exit-out-of {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 2px;
}

.exit-wr-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.exit-wr-badge.wr-good {
  background: #dcfce7;
  color: #166534;
}

.exit-wr-badge.wr-bad {
  background: #fee2e2;
  color: #991b1b;
}

.exit-wr-badge.wr-warn {
  background: #fef3c7;
  color: #92400e;
}

.exit-progress-bar {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.exit-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.exit-stats-substrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 4px;
  font-size: 11.5px;
  border: 1px solid var(--border-subtle);
}

.exit-trades-tray {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.exit-trades-tray .tray-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dark mode for Exit Breakdown */



/* ==========================================================================
   SCREEN #04: REALIZED PROFIT / LOSS EDITABLE CARD & PROJECTION
   ========================================================================== */
.pnl-editable-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 18px 0 20px 0;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pnl-editable-card.profit-mode {
  background: #f0fdf4;
  border-color: #86efac;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08);
}

.pnl-editable-card.loss-mode {
  background: #fef2f2;
  border-color: #fca5a5;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.08);
}

.pnl-edit-left {
  flex: 1.4;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pnl-edit-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.field-label-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.pnl-field-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-pure);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  letter-spacing: -0.2px;
}

.pnl-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pnl-mode-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
  user-select: none;
}

.pnl-mode-tag.auto {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.pnl-mode-tag.manual {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.btn-pnl-recalc {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-pnl-recalc:hover {
  background: #f1f5f9;
  color: var(--text-pure);
  border-color: #94a3b8;
}

.pnl-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.pnl-sign-badge {
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-mono, monospace);
  min-width: 34px;
  text-align: center;
  user-select: none;
}

.pnl-sign-badge.text-emerald {
  color: #10b981;
}

.pnl-sign-badge.text-rose {
  color: #ef4444;
}

.pnl-manual-input {
  font-size: 22px !important;
  font-weight: 900 !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: 2px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: var(--text-pure) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.pnl-editable-card.profit-mode .pnl-manual-input {
  border-color: #86efac !important;
  color: #065f46 !important;
}

.pnl-editable-card.profit-mode .pnl-manual-input:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  outline: none;
}

.pnl-editable-card.loss-mode .pnl-manual-input {
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

.pnl-editable-card.loss-mode .pnl-manual-input:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
  outline: none;
}

.pnl-formula-caption {
  font-size: 11px;
  color: #64748b;
  margin-top: 8px;
  line-height: 1.45;
}

.pnl-balance-projection-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

.pnl-editable-card.profit-mode .pnl-balance-projection-card {
  border-color: #bbf7d0;
  background: #ffffff;
}

.pnl-editable-card.loss-mode .pnl-balance-projection-card {
  border-color: #fecaca;
  background: #ffffff;
}

.pnl-balance-projection-card .proj-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #64748b;
  text-transform: uppercase;
}

.pnl-balance-projection-card .proj-val {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-pure);
  margin: 4px 0 2px 0;
  letter-spacing: -0.5px;
}

.pnl-balance-projection-card .proj-math {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dark mode overrides */














@media (max-width: 640px) {
  .pnl-editable-card {
    flex-direction: column;
  }
  .pnl-balance-projection-card {
    margin-top: 8px;
  }
}

/* Screen 2 Telemetry Dark Mode Overrides */







/* ==========================================================================
   MISTAKE ALARM SYSTEM - FULL-SCREEN POPUP & PSYCHOLOGICAL RESET MODAL
   ========================================================================== */

/* Body locking when fullscreen alarm is active */
body.alarm-modal-open {
  overflow: hidden !important;
}

/* Page scroll enable for alarm.html */
body[data-page="alarm"] {
  overflow: auto !important;
  height: auto !important;
  min-height: 100vh;
}

.modal-fullscreen-alarm {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

.modal-fullscreen-alarm.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.alarm-fullscreen-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: -1;
}

.alarm-modal-container {
  width: 100%;
  max-width: 1040px;
  min-height: 590px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-top: 5px solid #dc2626;
  border-radius: 16px;
  box-shadow: 0 25px 65px rgba(15, 23, 42, 0.3), 0 8px 25px rgba(220, 38, 38, 0.1);
  padding: 32px 38px;
  color: #0f172a;
  overflow-y: auto;
  position: relative;
  animation: alarmModalEntrance 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes alarmModalEntrance {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(14px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Shake animation when user attempts unauthorized dismissal */
.alarm-shake {
  animation: alarmShakeAnim 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes alarmShakeAnim {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(3px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Prominent Alarm Header */
.alarm-header-area {
  margin-bottom: 22px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 16px;
}

.alarm-header-top-line {
  display: flex;
  align-items: center;
  gap: 14px;
}

.alarm-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.alarm-pulse-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 8px #dc2626;
  animation: pulseBeacon 1.5s infinite;
}

@keyframes pulseBeacon {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.alarm-hero-title {
  font-size: 23px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Spacious Creative Visual Flashcards Container */
.alarm-mistakes-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  flex: 1;
}

.alarm-mistake-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 28px;
  min-height: 96px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.alarm-mistake-card:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.alarm-mistake-card.alarm-card-checked {
  border-color: #86efac;
  background: #f0fdf4;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.16);
}

.alarm-card-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.alarm-flaw-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alarm-badge-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: #dc2626;
  background: #fee2e2;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Much Bigger Mistake Heading */
.alarm-flaw-tag {
  font-size: 19px;
  font-weight: 800;
  color: #b91c1c;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alarm-mantra-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alarm-mantra-spark {
  font-size: 19px;
  line-height: 1;
  flex-shrink: 0;
}

.alarm-mantra-text {
  font-size: 16px;
  font-weight: 700;
  color: #334155;
  line-height: 1.45;
}

.alarm-card-checked .alarm-mantra-text {
  color: #15803d;
}

.alarm-card-right {
  flex-shrink: 0;
}

.alarm-checkbox-btn {
  display: block;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.alarm-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.alarm-check-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #64748b;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.alarm-checkbox-btn:hover .alarm-check-pill {
  border-color: #10b981;
  color: #059669;
  background: #f0fdf4;
}

.alarm-checkbox-input:checked + .alarm-check-pill {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.alarm-check-tick {
  font-size: 16px;
  font-weight: 900;
}

/* Prominent Footer Lock & Commitment Action */
.alarm-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.alarm-commit-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alarm-progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 7px 16px;
  border-radius: 7px;
  width: fit-content;
}

.alarm-progress-pill.tracker-completed {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.btn-alarm-commit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 50px;
  padding: 14px 34px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-main);
  border: none;
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.8;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-alarm-commit.ready {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  cursor: pointer;
  opacity: 1;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45);
  transform: translateY(-1px);
}

.btn-alarm-commit.ready:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.55);
}

.btn-alarm-commit.ready:active {
  transform: translateY(0);
}

/* ==========================================================================
   HOME PAGE TAB 3: FEED TO ALARM BUTTONS
   ========================================================================== */
.hm-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-feed-alarm-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 6px;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-feed-alarm-inline:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: #fef2f2;
}

.btn-feed-alarm-inline.is-in-feed {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.btn-feed-alarm-inline.is-in-feed:hover {
  border-color: #059669;
  background: rgba(16, 185, 129, 0.18);
}

.btn-feed-alarm-modal {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-feed-alarm-modal:hover {
  border-color: #dc2626;
  background: #fef2f2;
}

.btn-feed-alarm-modal.is-in-feed {
  border-color: #10b981;
  color: #059669;
  background: #ecfdf5;
}

/* ==========================================================================
   ALARM.HTML - DEDICATED MISTAKE ALARM HUB STYLES
   ========================================================================== */

.alarm-page-container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 28px 24px 60px 24px;
}

.alarm-hero-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 28px 36px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.alarm-hero-left {
  flex: 1;
}

.alarm-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 10px;
}

.alarm-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: pulseBeacon 1.5s infinite;
}

.alarm-page-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 8px;
}

.alarm-page-desc {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
  max-width: 650px;
}

.alarm-page-desc strong {
  color: #f1f5f9;
}

.alarm-hero-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.alarm-timer-widget {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px 22px;
  text-align: center;
  min-width: 170px;
}

.alarm-timer-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 4px;
}

.alarm-timer-digits {
  font-size: 28px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.04em;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

.alarm-timer-sub {
  display: block;
  font-size: 10.5px;
  color: #64748b;
  margin-top: 4px;
}

.alarm-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-primary-alarm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary-alarm:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.5);
}

.btn-secondary-alarm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-secondary-alarm:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Two Column Layout */
.alarm-layout-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .alarm-hero-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .alarm-layout-grid {
    grid-template-columns: 1fr;
  }
}

.alarm-panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.alarm-panel-card.mb-4 {
  margin-bottom: 24px;
}

.panel-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.panel-title-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.panel-icon {
  font-size: 22px;
  line-height: 1.2;
}

.panel-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-pure);
  margin-bottom: 3px;
}

.panel-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

.feed-count-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Feed List & Item Cards */
.alarm-feed-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feed-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}

.feed-empty-state .empty-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 10px;
}

.feed-empty-state h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 6px;
}

.alarm-feed-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
  padding: 16px 18px;
  transition: all 0.2s ease;
}

.alarm-feed-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.feed-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

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

.feed-item-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  padding: 2px 7px;
  border-radius: 4px;
}

.feed-item-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-pure);
  margin: 0;
}

.btn-remove-from-feed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid #fca5a5;
  background: #fff5f5;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-remove-from-feed:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

.feed-item-antidote {
  background: var(--bg-app);
  border-left: 3px solid #38bdf8;
  padding: 9px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.feed-antidote-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #0284c7;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.feed-antidote-text {
  font-size: 13px;
  font-style: italic;
  color: var(--text-bright);
  line-height: 1.4;
  margin: 0;
}

.feed-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.feed-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-app);
  padding: 3px 8px;
  border-radius: 4px;
}

.feed-meta-pill strong {
  color: var(--text-bright);
}

/* Manual Form */
.alarm-manual-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-group-alarm {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.alarm-form-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-pure);
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-required {
  color: #dc2626;
}

.label-optional {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

.alarm-input-text,
.alarm-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: var(--font-main);
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-pure);
  transition: all 0.2s ease;
}

.alarm-input-text:focus,
.alarm-textarea:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.btn-feed-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-feed-submit:hover {
  background: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Quick Flaws Library */
.quick-flaws-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-flaw-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.quick-flaw-item:hover {
  border-color: var(--border-medium);
  background: var(--bg-app);
}

.quick-flaw-item.already-in-feed {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.quick-flaw-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.qf-icon {
  font-size: 16px;
}

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

.qf-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-pure);
}

.qf-sub {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.3;
}

.btn-quick-feed-add {
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid var(--border-medium);
  background: var(--bg-surface);
  color: var(--text-bright);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-quick-feed-add:hover {
  border-color: #dc2626;
  color: #dc2626;
  background: #fef2f2;
}

.qf-status-pill {
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ==========================================
   Admin User & Subscription Management Console
   ========================================== */

/* Profile dropdown enhancements */
.dropdown-user-email {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  font-weight: 500;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-active-indicator.sub-active {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.dropdown-active-indicator.sub-expired {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.btn-dropdown-admin {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
}

.btn-dropdown-admin:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Admin Modal Window */
.admin-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFadeIn 0.2s ease;
}

.admin-modal-backdrop.hidden {
  display: none !important;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.admin-modal-dialog {
  background: #ffffff;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  width: 100%;
  max-width: 1020px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dialogPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialogPop {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.admin-modal-header {
  padding: 18px 24px;
  border-bottom: 1.5px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
}

.admin-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #dc2626;
  font-family: 'JetBrains Mono', monospace;
}

.badge-dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

.admin-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 4px 0 0 0;
}

.btn-admin-modal-close {
  background: transparent;
  border: none;
  font-size: 26px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}

.btn-admin-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Tabs */
.admin-modal-nav {
  display: flex;
  gap: 8px;
  padding: 10px 24px;
  background: #f8fafc;
  border-bottom: 1.5px solid #f1f5f9;
}

.admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-tab-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.admin-tab-btn.active {
  background: #ffffff;
  color: #dc2626;
  border-color: #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.admin-tab-count {
  background: #f1f5f9;
  color: #475569;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 12px;
}

.admin-tab-btn.active .admin-tab-count {
  background: #fee2e2;
  color: #dc2626;
}

.admin-modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
}

/* Users Table */
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.admin-users-table th {
  background: #f8fafc;
  padding: 12px 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 1.5px solid #e2e8f0;
  white-space: nowrap;
}

.admin-users-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #1e293b;
}

.admin-users-table tr:hover td {
  background: #fbfcfe;
}

.table-loading-row,
.table-empty-row,
.table-error-row {
  text-align: center !important;
  padding: 30px !important;
  color: #64748b;
  font-weight: 600;
}

.table-error-row {
  color: #dc2626 !important;
}

.user-row-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar-tiny {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f172a, #334155);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-name-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-table-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
}

.user-table-email {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

.user-self-pill {
  font-size: 9.5px;
  font-weight: 800;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Password Cell in Table */
.cell-pwd {
  white-space: nowrap;
}

.user-password-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.user-pwd-text {
  font-size: 11.5px;
  color: #0f172a;
  font-weight: 700;
  letter-spacing: 0.5px;
  min-width: 72px;
  display: inline-block;
}

.btn-pwd-eye,
.btn-pwd-copy {
  background: transparent;
  border: none;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  transition: all 0.15s;
  color: #64748b;
}

.btn-pwd-eye:hover,
.btn-pwd-copy:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Subscription Badges */
.sub-badge-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.badge-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  width: fit-content;
  white-space: nowrap;
}

.badge-sub-active {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.badge-sub-warning {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.badge-sub-expired {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.badge-sub-lifetime {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.sub-expiry-caption {
  font-size: 10.5px;
  color: #64748b;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

/* Actions Cell */
.table-actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.btn-sub-manage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-sub-manage:hover {
  background: #f8fafc;
  border-color: #0f172a;
  color: #0f172a;
}

.btn-user-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-user-delete:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

.btn-user-delete-confirming {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #fff1f2;
  border: 1px solid #fda4af;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #9f1239;
}

.btn-confirm-yes {
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.btn-confirm-no {
  background: #e2e8f0;
  color: #475569;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-action-protected {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

/* Provision Form */
.admin-form-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 24px;
}

.admin-form-intro {
  margin-bottom: 20px;
}

.admin-form-intro h3 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.admin-form-intro p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.admin-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-form-field label {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.admin-form-field input,
.admin-form-field select {
  padding: 9px 12px;
  font-size: 13px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: all 0.15s;
}

.admin-form-field input:focus,
.admin-form-field select:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.field-hint {
  font-size: 11px;
  color: #64748b;
}

.admin-form-alert {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 16px;
}

.admin-form-alert.error {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #991b1b;
}

.admin-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-admin-cancel {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btn-admin-submit {
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  background: #dc2626;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-admin-submit:hover {
  background: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

/* Subscription Management Sub-Modal */
.sub-manage-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10100;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sub-manage-backdrop.hidden {
  display: none !important;
}

.sub-manage-dialog {
  background: #ffffff;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  animation: dialogPop 0.15s ease;
}

.sub-manage-header {
  padding: 16px 20px;
  border-bottom: 1.5px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub-manage-kicker {
  font-size: 9.5px;
  font-weight: 800;
  color: #dc2626;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.8px;
}

.sub-manage-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 2px 0 0 0;
}

.btn-sub-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.sub-manage-body {
  padding: 20px;
}

.sub-user-summary-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sub-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}

.sub-label {
  color: #64748b;
  font-weight: 600;
}

.sub-val {
  color: #0f172a;
}

.sub-manage-field {
  margin-bottom: 16px;
}

.sub-manage-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.sub-email-input-wrap {
  display: flex;
  gap: 8px;
}

.sub-email-input-wrap input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
}

.sub-email-input-wrap input:focus {
  border-color: #dc2626;
}

.btn-sub-save-email {
  padding: 8px 14px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.btn-sub-save-email:hover {
  background: #1e293b;
}

.sub-actions-section label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.sub-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.btn-sub-action {
  padding: 12px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  transition: all 0.15s;
}

.btn-sub-action:hover {
  border-color: #dc2626;
  background: #fef2f2;
}

.sub-action-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.sub-action-title {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
}

.sub-action-desc {
  display: block;
  font-size: 10.5px;
  color: #64748b;
}

.btn-sub-action.danger-action:hover {
  border-color: #ef4444;
  background: #fff1f2;
}

.sub-manage-alert {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 14px;
}

.sub-manage-alert.success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.sub-manage-alert.error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

@media (max-width: 768px) {
  .admin-form-grid,
  .sub-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   3-STEP STRATEGY PLAYBOOK CREATION WIZARD & SEQUENTIAL EXECUTION WORKSPACE
   ========================================================================== */

/* Strategy Wizard Modal Box */
.strat-wizard-box {
  max-width: 980px;
  width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

.strat-wizard-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border-bottom: 1.5px solid #e2e8f0;
  padding: 14px 24px;
  gap: 12px;
  overflow-x: auto;
}

.strat-wizard-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.strat-wizard-node:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.strat-wizard-node.active {
  border-color: #dc2626;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
}

.strat-wizard-node.completed {
  border-color: #10b981;
  background: #f0fdf4;
}

.strat-node-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.strat-wizard-node.active .strat-node-num {
  background: #dc2626;
  color: #ffffff;
}

.strat-wizard-node.completed .strat-node-num {
  background: #10b981;
  color: #ffffff;
}

.strat-node-text-col {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.strat-node-phase {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748b;
  text-transform: uppercase;
}

.strat-wizard-node.active .strat-node-phase {
  color: #dc2626;
}

.strat-wizard-node.completed .strat-node-phase {
  color: #059669;
}

.strat-node-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

.strat-wizard-divider {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  min-width: 14px;
}

.strat-wizard-divider.passed {
  background: #10b981;
}

/* Wizard Panels */
.strat-wizard-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.strat-wizard-panel {
  display: none;
  animation: fadeInPanel 0.2s ease forwards;
}

.strat-wizard-panel.active {
  display: block;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.strat-panel-lead {
  background: #f8fafc;
  border-left: 3.5px solid #dc2626;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.strat-panel-lead h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.strat-panel-lead p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

/* ==========================================================================
   STRATEGY CREATION WIZARD: PHASE 1 LAYOUT & COMPONENTS
   ========================================================================== */

.modal-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 820px) {
  .modal-grid-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.modal-col-left,
.modal-col-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modal-grid-layout .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}

.modal-grid-layout .form-field label {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.02em;
}

.modal-grid-layout input[type="text"],
.modal-grid-layout select {
  width: 100%;
  font-size: 13.5px;
  font-weight: 600;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
}

.modal-grid-layout input[type="text"]:focus,
.modal-grid-layout select:focus {
  border-color: #dc2626;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.modal-grid-layout textarea {
  width: 100%;
  min-height: 84px;
  font-size: 13px;
  line-height: 1.45;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
  resize: vertical;
}

.modal-grid-layout textarea:focus {
  border-color: #dc2626;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Difficulty Segmented Control */
.diff-segmented-group,
.segmented-control {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
  width: 100%;
}

.diff-seg-btn,
.seg-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.diff-seg-btn:hover,
.seg-btn:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.65);
}

.diff-seg-btn.active,
.seg-btn.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.diff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.diff-dot-beginner {
  background: #10b981;
}

.diff-dot-intermediate {
  background: #3b82f6;
}

.diff-dot-advanced {
  background: #dc2626;
}

.diff-seg-btn[data-val="Beginner"].active,
.diff-seg-btn[data-diff="Beginner"].active,
.seg-btn[data-val="Beginner"].active,
.seg-btn[data-diff="Beginner"].active {
  color: #047857;
  border-bottom: 2.5px solid #10b981;
}

.diff-seg-btn[data-val="Intermediate"].active,
.diff-seg-btn[data-diff="Intermediate"].active,
.seg-btn[data-val="Intermediate"].active,
.seg-btn[data-diff="Intermediate"].active {
  color: #1d4ed8;
  border-bottom: 2.5px solid #3b82f6;
}

.diff-seg-btn[data-val="Advanced"].active,
.diff-seg-btn[data-diff="Advanced"].active,
.seg-btn[data-val="Advanced"].active,
.seg-btn[data-diff="Advanced"].active {
  color: #b91c1c;
  border-bottom: 2.5px solid #dc2626;
}

/* Upload Dropzone Area in Phase 1 */
.dropzone-area {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 22px 18px;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.dropzone-area:hover,
.dropzone-area.dragover {
  border-color: #dc2626;
  background: #fef2f2;
}

.dropzone-inner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.dropzone-inner-content svg {
  stroke: #dc2626;
  margin-bottom: 2px;
}

.dropzone-lead {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.dropzone-lead span {
  color: #dc2626;
  text-decoration: underline;
  font-weight: 800;
}

.dropzone-sub {
  font-size: 11px;
  color: #64748b;
  margin: 0;
}

.file-input-hidden,
input[type="file"].file-input-hidden {
  display: none !important;
}

.screenshots-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* Checklist Rules Builder Inside Wizard */
.strat-step-builder-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 18px;
}

.strat-step-input-group {
  margin-bottom: 18px;
}

.strat-step-input-group label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.strat-step-name-input {
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 14px;
  background: #f8fafc;
  outline: none;
  transition: all 0.2s ease;
}

.strat-step-name-input:focus {
  border-color: #dc2626;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.strat-rule-add-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.strat-rule-text-input {
  flex: 1;
  font-size: 13px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  padding: 9px 12px;
  background: #ffffff;
  outline: none;
}

.strat-rule-text-input:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.btn-strat-add-rule {
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-strat-add-rule:hover {
  background: #dc2626;
}

.strat-quick-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.strat-quick-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  margin-right: 4px;
}

.strat-quick-chip {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.strat-quick-chip:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.strat-rules-bucket {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  padding: 12px;
}

.strat-rule-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.strat-rule-badge-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.strat-rule-card-text {
  flex: 1;
  font-size: 12.5px;
  color: #0f172a;
  line-height: 1.35;
}

.btn-del-strat-rule {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
}

.btn-del-strat-rule:hover {
  color: #dc2626;
  background: #fee2e2;
}

.strat-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-top: 1.5px solid #e2e8f0;
  padding: 16px 28px;
  gap: 14px;
}

.strat-wizard-step-tracker {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.strat-wizard-nav-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   STRATEGY WORKSPACE: SEQUENTIAL 3-STEP LOCKED EXECUTION CONTROLLER
   ========================================================================== */

.strat-exec-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Stepper Header Bar in Reader */
.strat-exec-stepper-header {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.strat-exec-stepper-nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}

.strat-exec-node {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 16px;
  flex: 1;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.strat-exec-node.active {
  background: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12);
}

.strat-exec-node.completed {
  background: #f0fdf4;
  border-color: #10b981;
}

.strat-exec-node.locked {
  background: #f8fafc;
  border-color: #cbd5e1;
  opacity: 0.65;
  cursor: not-allowed;
}

.strat-exec-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.strat-exec-node.active .strat-exec-icon-box {
  background: #dc2626;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}

.strat-exec-node.completed .strat-exec-icon-box {
  background: #10b981;
  color: #ffffff;
}

.strat-exec-node.locked .strat-exec-icon-box {
  background: #e2e8f0;
  color: #94a3b8;
}

.strat-exec-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.strat-exec-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.strat-exec-step-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
}

.strat-exec-node.active .strat-exec-step-tag {
  color: #dc2626;
}

.strat-exec-node.completed .strat-exec-step-tag {
  color: #059669;
}

.strat-exec-state-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge-state-in-progress {
  background: #fef2f2;
  color: #dc2626;
}

.badge-state-passed {
  background: #dcfce7;
  color: #15803d;
}

.badge-state-locked {
  background: #e2e8f0;
  color: #64748b;
}

.strat-exec-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strat-exec-stepper-connector {
  width: 24px;
  height: 2px;
  background: #e2e8f0;
  flex-shrink: 0;
}

.strat-exec-stepper-connector.passed {
  background: #10b981;
}

/* Overall Readiness Bar */
.strat-overall-readiness {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.strat-readiness-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
  position: relative;
}

.strat-readiness-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #10b981 100%);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.strat-readiness-text {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

/* Split Layout: Step Execution Card + Reference Column */
.strat-exec-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 960px) {
  .strat-exec-split-grid {
    grid-template-columns: 1fr;
  }
}

/* Active Step Execution Card */
.strat-active-step-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
}

.strat-active-step-header {
  border-bottom: 1.5px solid #f1f5f9;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.strat-step-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.strat-step-hero-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0 0 6px 0;
}

.strat-step-hero-sub {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}

/* Interactive Checklist Items */
.strat-checklist-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.strat-check-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.strat-check-row:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.strat-check-row.checked {
  background: #f0fdf4;
  border-color: #86efac;
}

.strat-check-input-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #94a3b8;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all 0.2s ease;
}

.strat-check-row.checked .strat-check-input-box {
  background: #10b981;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.strat-check-input-box svg {
  display: none;
  stroke: #ffffff;
}

.strat-check-row.checked .strat-check-input-box svg {
  display: block;
}

.strat-check-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.strat-check-text {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45;
  transition: all 0.2s ease;
}

.strat-check-row.checked .strat-check-text {
  color: #166534;
}

/* Step Gate Footer & Navigation */
.strat-step-gate-footer {
  border-top: 1.5px solid #f1f5f9;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.strat-gate-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px;
}

.strat-gate-notice.warning {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.strat-gate-notice.ready {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

.strat-gate-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.btn-strat-prev-step {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-strat-prev-step:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-strat-next-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #cbd5e1;
  color: #64748b;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: not-allowed;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-strat-next-step.unlocked {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.btn-strat-next-step.unlocked:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* 100% Validated Completion Hero Card */
.strat-celebration-hero {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border: 2px solid #86efac;
  border-radius: 14px;
  padding: 32px 36px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.12);
  animation: celebrationEntrance 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes celebrationEntrance {
  0% { opacity: 0; transform: scale(0.96) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.strat-celebration-icon {
  font-size: 44px;
  margin-bottom: 12px;
}

.strat-celebration-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dcfce7;
  border: 1.5px solid #86efac;
  color: #15803d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.strat-celebration-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
}

.strat-celebration-desc {
  font-size: 13.5px;
  color: #475569;
  max-width: 540px;
  margin: 0 auto 24px auto;
  line-height: 1.5;
}

.strat-summary-gates-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 20px;
  text-align: left;
  margin-bottom: 26px;
}

.strat-summary-gate-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: #0f172a;
}

.strat-summary-gate-item:last-child {
  border-bottom: none;
}

.strat-celebration-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-strat-log-trade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 26px;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}

.btn-strat-log-trade:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}

.btn-strat-reset-run {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-strat-reset-run:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Reference Column (Charts & Notes) */
.strat-ref-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.strat-ref-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1.5px solid #f1f5f9;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.strat-ref-tab-btn {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.strat-ref-tab-btn.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.strat-ref-tab-content {
  max-height: 520px;
  overflow-y: auto;
}

/* ============================================================ */
/* APEXTRADER OS — FOREX SIGNALS & CHART ANALYZER STYLES         */
/* ============================================================ */

/* Navbar Signal Pulse & Counter */
.tab-counter.has-unread {
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
  animation: signalBadgePulse 1.8s infinite;
}

@keyframes signalBadgePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Performance Metrics Bar */
.signals-performance-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.perf-metric-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.perf-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.perf-metric-card .metric-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-secondary, #64748b);
  margin-bottom: 6px;
}

.perf-metric-card .metric-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
}

.perf-metric-card .metric-val.positive {
  color: #10b981;
}

.perf-metric-card .metric-val.negative {
  color: #f43f5e;
}

.perf-metric-card.filter-card {
  padding: 10px 16px;
}

/* Signals Grid */
.signals-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* Signal Card */
.signal-card {
  background: var(--bg-card, #ffffff);
  border: 1.5px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.signal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.signal-card.action-buy {
  border-top: 4px solid #10b981;
}

.signal-card.action-sell {
  border-top: 4px solid #f43f5e;
}

.signal-card-header {
  padding: 16px 18px 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
}

.pair-and-action {
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-badge {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.action-badge.action-buy {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.action-badge.action-sell {
  background: rgba(244, 63, 94, 0.14);
  color: #e11d48;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.signal-pair-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin: 0;
}

.signal-order-type {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
  font-weight: 600;
  background: var(--bg-body, #f8fafc);
  padding: 2px 7px;
  border-radius: 4px;
}

.status-and-rr {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signal-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.signal-status-pill .pulse-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.status-tp {
  background: rgba(16, 185, 129, 0.22);
  color: #047857;
  font-weight: 900;
}

.status-be {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.status-sl {
  background: rgba(244, 63, 94, 0.14);
  color: #e11d48;
}

.status-closed {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
}

.signal-rr-pill {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 800;
  color: var(--red-primary, #dc2626);
  background: var(--red-bg-subtle, #fef2f2);
  border: 1px solid var(--red-border, #fca5a5);
  padding: 3px 8px;
  border-radius: 6px;
}

/* Price Matrix */
.signal-price-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 12px 18px;
  background: var(--bg-body, #f8fafc);
  border-bottom: 1px solid var(--border-color, #f1f5f9);
}

.price-box {
  display: flex;
  flex-direction: column;
}

.price-box-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-secondary, #64748b);
  letter-spacing: 0.5px;
}

.price-box-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  margin: 2px 0 1px 0;
}

.price-box-sub {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
}

/* Screenshot Preview Strip */
.signal-screenshots-strip {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  overflow-x: auto;
  align-items: center;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.02);
  border-bottom: 1px solid var(--border-color, #f1f5f9);
  position: relative;
}

.signal-screenshots-strip:hover {
  background: rgba(220, 38, 38, 0.03);
}

.ss-strip-item {
  position: relative;
  width: 90px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--border-color, #cbd5e1);
  flex-shrink: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.ss-strip-item:hover {
  transform: scale(1.05);
  border-color: var(--red-primary, #dc2626);
}

.ss-strip-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-tf-badge {
  position: absolute;
  bottom: 2px;
  left: 3px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  padding: 1px 4px;
  border-radius: 3px;
}

.ss-strip-inspect-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--red-primary, #dc2626);
  white-space: nowrap;
}

.signal-no-chart-banner {
  padding: 12px 18px;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
}

/* Confluences Wrap */
.signal-confluences-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 6px 18px;
}

.conf-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
}

.conf-pill.poi {
  background: var(--red-bg-subtle, #fef2f2);
  color: var(--red-primary, #dc2626);
  border: 1px solid var(--red-border, #fca5a5);
}

.conf-pill.mss {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.conf-pill.liq {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}

.conf-pill.session {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.signal-notes-box {
  padding: 8px 18px;
}

.signal-notes-text {
  font-size: 12px;
  color: var(--text-secondary, #475569);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

.signal-invalidation-row {
  margin: 6px 18px 10px 18px;
  padding: 6px 10px;
  background: rgba(244, 63, 94, 0.08);
  border-left: 3px solid #f43f5e;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  color: #be123c;
  line-height: 1.4;
}

.signal-latest-update-banner {
  margin: 0 18px 10px 18px;
  padding: 6px 10px;
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #1d4ed8;
}

.signal-latest-update-banner .update-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  flex-shrink: 0;
}

/* Admin Quick Action Bar on Card */
.signal-admin-action-bar {
  margin: 4px 18px 10px 18px;
  padding: 8px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-bar-label {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  margin-right: 4px;
}

.btn-sig-admin {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sig-admin:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.btn-sig-admin.btn-be:hover { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.btn-sig-admin.btn-tp1:hover { background: #dcfce7; color: #15803d; border-color: #86efac; }
.btn-sig-admin.btn-tp2:hover { background: #dcfce7; color: #15803d; border-color: #86efac; }
.btn-sig-admin.btn-sl:hover { background: #ffe4e6; color: #be123c; border-color: #fda4af; }
.btn-sig-admin.btn-delete:hover { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

/* Card Footer */
.signal-card-footer {
  margin-top: auto;
  padding: 12px 18px;
  background: var(--bg-body, #f8fafc);
  border-top: 1px solid var(--border-color, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.signal-meta-col {
  display: flex;
  flex-direction: column;
}

.signal-author {
  font-size: 11px;
  color: var(--text-secondary, #64748b);
}

.signal-time {
  font-size: 10px;
  color: #94a3b8;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.signal-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-signal-inspect {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  transition: all 0.2s ease;
}

.btn-signal-inspect:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
  transform: translateY(-1px);
}

.btn-signal-journal {
  padding: 7px 11px;
  background: #ffffff;
  color: #0f172a;
  border: 1.5px solid var(--border-color, #cbd5e1);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-signal-journal:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* ============================================================ */
/* INTERACTIVE CHART ANALYZER LIGHTBOX MODAL                   */
/* ============================================================ */

.apex-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.88);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 20px;
}

.apex-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.inspector-modal-window {
  width: 96vw;
  height: 94vh;
  max-width: 1700px;
  background: var(--bg-surface, #ffffff);
  border: 2px solid var(--border-subtle, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(226, 232, 240, 0.8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-pure, #0f172a);
}

.inspector-header {
  height: 58px;
  padding: 0 22px;
  background: var(--bg-surface, #ffffff);
  border-bottom: 1.5px solid var(--border-subtle, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

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

.inspector-pill {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 6px;
}

.inspector-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--text-pure, #0f172a);
}

.inspector-rr {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 800;
  color: var(--red-primary, #dc2626);
  background: var(--red-bg-subtle, #fef2f2);
  border: 1px solid var(--red-border, #fca5a5);
  padding: 2px 7px;
  border-radius: 4px;
}

.inspector-tf-carousel {
  display: flex;
  align-items: center;
  gap: 6px;
}

.insp-tf-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f8fafc;
  color: var(--text-muted, #64748b);
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.insp-tf-tab:hover {
  background: #f1f5f9;
  color: var(--text-pure, #0f172a);
}

.insp-tf-tab.active {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35);
}

.inspector-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.inspector-zoom-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1.5px solid var(--border-subtle, #e2e8f0);
  padding: 3px 6px;
  border-radius: 8px;
}

.btn-zoom {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-pure, #0f172a);
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.btn-zoom:hover { background: #e2e8f0; }

.zoom-display-text {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-pure, #0f172a);
  min-width: 44px;
  text-align: center;
}

.btn-zoom-reset {
  background: #ffffff;
  color: var(--text-muted, #64748b);
  border: 1px solid var(--border-medium, #cbd5e1);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
}

.btn-zoom-reset:hover { background: #f1f5f9; color: var(--text-pure, #0f172a); }

.btn-inspector-close {
  background: #f1f5f9;
  border: 1.5px solid var(--border-subtle, #e2e8f0);
  color: #64748b;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-inspector-close:hover {
  background: #fee2e2;
  color: var(--red-primary, #dc2626);
}

/* Inspector Body */
.inspector-body-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.inspector-viewport-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0f172a;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.inspector-chart-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.inspector-main-img {
  max-width: 98%;
  max-height: 98%;
  object-fit: contain;
  transition: transform 0.08s ease-out;
  transform-origin: center center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
}

.inspector-chart-caption-bar {
  height: 48px;
  background: #ffffff;
  border-top: 1.5px solid var(--border-subtle, #e2e8f0);
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.caption-left {
  display: flex;
  flex-direction: column;
}

.caption-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-pure, #0f172a);
}

.caption-desc {
  font-size: 11px;
  color: var(--text-muted, #64748b);
}

.caption-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-chart-nav {
  background: #f8fafc;
  color: var(--text-pure, #0f172a);
  border: 1.5px solid var(--border-medium, #cbd5e1);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-chart-nav:hover { background: #f1f5f9; }

.chart-counter-text {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--text-dim, #64748b);
}

/* Confluence Panel */
.inspector-confluence-panel {
  width: 380px;
  background: #f8fafc;
  border-left: 1.5px solid var(--border-subtle, #e2e8f0);
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.panel-section-title {
  font-size: 10.5px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 900;
  letter-spacing: 0.9px;
  color: var(--text-dim, #64748b);
  margin-bottom: 8px;
}

.confluence-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conf-breakdown-card {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.conf-card-label {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-dim, #64748b);
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.conf-card-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-pure, #0f172a);
  line-height: 1.4;
}

.conf-breakdown-card.invalidation-card {
  background: var(--red-bg-subtle, #fef2f2);
  border: 1.5px solid var(--red-border, #fca5a5);
}

.conf-breakdown-card.invalidation-card .conf-card-label {
  color: var(--red-primary, #dc2626);
}

.conf-breakdown-card.invalidation-card .conf-card-val {
  color: var(--red-crimson, #e11d48);
  font-weight: 800;
}

.inspector-thesis-box {
  background: #ffffff;
  border: 1.5px solid var(--border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 12px;
}

.thesis-text {
  font-size: 12px;
  color: var(--text-bright, #1e293b);
  line-height: 1.55;
  margin: 0 0 10px 0;
  font-style: italic;
}

.risk-guidance-pill {
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 8px;
  border-radius: 4px;
}

.inspector-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline-empty {
  font-size: 12px;
  color: var(--text-dim, #64748b);
  font-style: italic;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.timeline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-primary, #dc2626);
  margin-top: 5px;
  flex-shrink: 0;
}

.timeline-content {
  display: flex;
  flex-direction: column;
}

.timeline-time {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--text-dim, #64748b);
}

.timeline-msg {
  font-size: 12px;
  color: var(--text-bright, #1e293b);
  margin: 2px 0 0 0;
  line-height: 1.4;
}

.trader-study-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trader-study-textarea {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  color: var(--text-pure, #0f172a);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

.trader-study-textarea:focus {
  border-color: var(--red-primary, #dc2626);
  outline: none;
  box-shadow: 0 0 0 3px var(--red-glow, rgba(220, 38, 38, 0.18));
}

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

.btn-save-study-note {
  padding: 6px 12px;
  background: #ffffff;
  color: var(--text-bright, #1e293b);
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-save-study-note:hover { background: #f1f5f9; }

.btn-action-journal {
  padding: 6px 14px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  transition: all 0.15s ease;
}

.btn-action-journal:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

/* Dark Mode Overrides for Inspector Modal */





















/* ============================================================ */
/* ADMIN SIGNAL DISPATCHER STUDIO MODAL                        */
/* ============================================================ */

.admin-modal-window {
  width: 92vw;
  max-width: 840px;
  max-height: 90vh;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-bright, #0f172a);
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPop {
  from {
    transform: scale(0.96) translateY(8px);
    opacity: 0.8;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.admin-signal-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#admin-signal-modal .modal-header {
  padding: 16px 22px;
  background: var(--bg-surface-elevated, #f8fafc);
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#admin-signal-modal .modal-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

#admin-signal-modal .modal-header-icon {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--red-bg-subtle, #fef2f2);
  color: var(--red-primary, #dc2626);
  border: 1.5px solid var(--red-border, #fca5a5);
}

#admin-signal-modal .modal-heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-bright, #0f172a);
  margin: 0;
  letter-spacing: -0.2px;
}

#admin-signal-modal .modal-sub {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin: 2px 0 0 0;
}

#admin-signal-modal .modal-close-btn {
  background: #f1f5f9;
  border: 1.5px solid var(--border-subtle, #e2e8f0);
  font-size: 20px;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.15s ease;
  line-height: 1;
}

#admin-signal-modal .modal-close-btn:hover {
  background: #fee2e2;
  color: var(--red-primary, #dc2626);
}

#admin-signal-modal .modal-body-scrollable {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#admin-signal-modal .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#admin-signal-modal .form-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-dim, #64748b);
  text-transform: uppercase;
}

#admin-signal-modal .form-sub-label {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin: 0 0 6px 0;
  line-height: 1.4;
}

#admin-signal-modal .req {
  color: var(--red-primary, #dc2626);
  font-weight: 900;
}

#admin-signal-modal .form-input,
#admin-signal-modal select.form-input,
#admin-signal-modal textarea.form-input {
  padding: 8px 12px;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-bright, #0f172a);
  background: var(--bg-surface, #ffffff);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}

#admin-signal-modal .form-input:focus,
#admin-signal-modal select.form-input:focus,
#admin-signal-modal textarea.form-input:focus {
  border-color: var(--red-primary, #dc2626);
  box-shadow: 0 0 0 3px var(--red-glow, rgba(220, 38, 38, 0.18));
}

#admin-signal-modal textarea.form-input {
  resize: vertical;
  min-height: 70px;
}

#admin-signal-modal .modal-footer {
  padding: 14px 22px;
  background: var(--bg-surface-elevated, #f8fafc);
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

#admin-signal-modal .modal-footer .btn-cancel {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  background: transparent;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  cursor: pointer;
  transition: all 0.15s ease;
}

#admin-signal-modal .modal-footer .btn-cancel:hover {
  background: #f1f5f9;
  color: #0f172a;
}

#admin-signal-modal .modal-footer .btn-save.action-primary {
  padding: 9px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
  transition: all 0.2s ease;
}

#admin-signal-modal .modal-footer .btn-save.action-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45);
}

#admin-signal-modal .modal-footer .btn-save.action-primary:active {
  transform: translateY(0);
}

#admin-signal-modal .modal-footer .btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Dark Theme Overrides for Admin Signal Studio */
















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

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

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

.signal-calc-preview-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 14px;
  background: var(--red-bg-subtle, #fef2f2);
  border: 1.5px solid var(--red-border, #fca5a5);
  border-radius: 8px;
  margin-top: 10px;
}

.calc-box {
  display: flex;
  flex-direction: column;
}

.calc-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-dim, #64748b);
  letter-spacing: 0.5px;
}

.calc-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 800;
  margin-top: 2px;
}

.file-dropzone-box {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 18px;
  background: #f8fafc;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.file-dropzone-box:hover,
.file-dropzone-box.dragover {
  border-color: var(--red-primary, #dc2626);
  background: var(--red-bg-subtle, #fef2f2);
}

.dropzone-icon {
  font-size: 26px;
  margin-bottom: 4px;
}

.dropzone-prompt {
  font-size: 13px;
  color: #334155;
}

.dropzone-hint {
  font-size: 11px;
  color: #94a3b8;
}

.pending-thumbnails-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.pending-thumb-card {
  position: relative;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.pending-thumb-card.pasted {
  border-color: var(--red-border, #fca5a5);
}

.pending-thumb-img {
  width: 100%;
  height: 90px;
  object-fit: cover;
}

.pending-thumb-meta {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pasted-pill {
  font-size: 9px;
  font-weight: 800;
  color: var(--red-primary, #dc2626);
  background: var(--red-bg-subtle, #fef2f2);
  border: 1px solid var(--red-border, #fca5a5);
  padding: 1px 4px;
  border-radius: 3px;
  width: fit-content;
}

.tf-mini-select,
.pending-label-input {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  width: 100%;
}

.btn-remove-thumb {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  color: #ffffff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.btn-remove-thumb:hover { background: #ef4444; }

/* ============================================================ */
/* FLOATING HEADS-UP NOTIFICATION ALERT STACK                   */
/* ============================================================ */

.apex-heads-up-stack {
  position: fixed;
  top: 68px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  width: calc(100vw - 48px);
  pointer-events: none;
}

.apex-heads-up-card {
  pointer-events: auto;
  background: #ffffff;
  border: 1.5px solid var(--border-subtle, #e2e8f0);
  border-top: 3.5px solid var(--red-primary, #dc2626);
  border-radius: 14px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(226, 232, 240, 0.8);
  overflow: hidden;
  color: var(--text-pure, #0f172a);
  animation: headsUpPopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.apex-heads-up-card:hover {
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(220, 38, 38, 0.3);
}

.apex-heads-up-card.signal-card {
  border-top-color: var(--red-primary, #dc2626);
}

.apex-heads-up-card.update-card {
  border-top-color: #0284c7;
}

.apex-heads-up-card.analysis-card {
  border-top-color: #d97706;
}

.apex-heads-up-card.dismissing {
  transform: translateX(110%);
  opacity: 0;
}

@keyframes headsUpPopIn {
  0% { transform: translateY(-30px) scale(0.92); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.heads-up-body {
  padding: 14px 16px 14px 16px;
}

.heads-up-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.heads-up-badge {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.heads-up-badge.pill-buy {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.heads-up-badge.pill-sell {
  background: var(--red-bg-subtle, #fef2f2);
  color: var(--red-primary, #dc2626);
  border: 1px solid var(--red-border, #fca5a5);
}

.heads-up-live-indicator {
  font-size: 10px;
  font-weight: 800;
  color: var(--red-primary, #dc2626);
  background: var(--red-bg-subtle, #fef2f2);
  border: 1px solid var(--red-border, #fca5a5);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.5px;
}

.heads-up-live-indicator .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-primary, #dc2626);
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  animation: headsUpPulse 1.6s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes headsUpPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.heads-up-close-btn {
  background: #f1f5f9;
  border: 1.5px solid var(--border-subtle, #e2e8f0);
  color: var(--text-dim, #64748b);
  font-size: 18px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: all 0.15s ease;
}

.heads-up-close-btn:hover {
  background: #fee2e2;
  color: var(--red-primary, #dc2626);
  border-color: #fca5a5;
}

.heads-up-content-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.heads-up-thumb-wrap {
  width: 78px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  flex-shrink: 0;
  background: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.heads-up-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.heads-up-thumb-wrap:hover .heads-up-thumb {
  transform: scale(1.08);
}

.heads-up-text {
  flex: 1;
  min-width: 0;
}

.heads-up-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text-pure, #0f172a);
  margin: 0 0 3px 0;
  letter-spacing: -0.2px;
}

.heads-up-sub {
  font-size: 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-muted, #475569);
  margin: 0;
  line-height: 1.4;
  font-weight: 600;
}

.heads-up-confluence {
  font-size: 11px;
  color: var(--red-primary, #dc2626);
  background: var(--red-bg-subtle, #fef2f2);
  border: 1px solid var(--red-border, #fca5a5);
  padding: 3px 8px;
  border-radius: 6px;
  margin: 6px 0 0 0;
  font-weight: 600;
  display: inline-block;
}

.heads-up-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.btn-heads-up-primary {
  flex: 1;
  text-align: center;
  padding: 8px 14px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-heads-up-primary:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
  transform: translateY(-1px);
  color: #ffffff !important;
}

.btn-heads-up-secondary {
  padding: 8px 12px;
  background: #ffffff;
  color: var(--text-bright, #1e293b) !important;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: 1.5px solid var(--border-medium, #cbd5e1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.btn-heads-up-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: var(--text-pure, #0f172a) !important;
  transform: translateY(-1px);
}

.heads-up-progress-bar {
  height: 3.5px;
  background: linear-gradient(90deg, #ef4444, #dc2626);
  animation: headsUpCountdown 14s linear forwards;
}

@keyframes headsUpCountdown {
  0% { width: 100%; }
  100% { width: 0%; }
}

/* Dark Theme Overrides for Heads-Up Card */








/* Modal Open Body Class */
body.modal-open {
  overflow: hidden !important;
}

/* ==========================================================================
   Pre-Market Discipline Checklist & Routine Streak Module
   ========================================================================== */

/* Dropdown Streak Badge */
.dropdown-nav-counter.streak-badge {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.dropdown-nav-counter.streak-badge.has-streak {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  color: #ea580c;
  border-color: #fdba74;
  box-shadow: 0 1px 4px rgba(234, 88, 12, 0.15);
}

/* Page scroll enable for routine.html */
html:has(body[data-page="routine"]),
body[data-page="routine"] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
}

/* Routine Page Main Container */
.routine-page-main {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 20px 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - 60px);
}

/* Header Block */
.routine-header-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.routine-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--red-primary, #dc2626);
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.routine-badge-live .badge-dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-primary, #dc2626);
  box-shadow: 0 0 6px var(--red-primary, #dc2626);
  animation: pulse-ring 1.8s infinite;
}

.routine-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.routine-subtitle {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  max-width: 720px;
  line-height: 1.5;
}

/* Streak Hero Pill */
.streak-hero-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1.5px solid #fed7aa;
  border-radius: 14px;
  padding: 12px 20px;
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.streak-hero-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.16);
}

.streak-fire-icon {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(234, 88, 12, 0.3));
}

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

.streak-val {
  font-size: 22px;
  font-weight: 800;
  color: #c2410c;
  line-height: 1.1;
}

.streak-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9a3412;
}

.streak-best-tag {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  background: #ffffff;
  color: #ea580c;
  border: 1px solid #fdba74;
  padding: 4px 9px;
  border-radius: 8px;
}

/* Routine KPI 5-Card Deck */
.routine-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.routine-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.routine-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

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

.rkc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #64748b;
}

.rkc-icon {
  font-size: 16px;
}

.rkc-badge-sub {
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 7px;
  border-radius: 6px;
}

.rkc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rkc-pct {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.rkc-meter-bar {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 9999px;
  overflow: hidden;
}

.rkc-meter-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.bg-emerald {
  background: #10b981;
}

.bg-blue {
  background: #2563eb;
}

.text-blue {
  color: #2563eb;
}

.text-amber {
  color: #d97706;
}

.rkc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: #64748b;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
}

.rkc-sub-target {
  font-weight: 600;
}

.rkc-streak-track {
  display: flex;
  align-items: center;
  gap: 6px;
}

.streak-dot-step {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
}

.streak-dot-step.active {
  background: #ea580c;
  box-shadow: 0 0 6px rgba(234, 88, 12, 0.4);
}

/* Workspace Split */
.routine-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1100px) {
  .routine-workspace-grid {
    grid-template-columns: 1fr;
  }
}

/* Routine Panel */
.routine-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.panel-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.panel-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.panel-badge.red {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.panel-badge.blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.panel-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.panel-subtitle {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}

/* Score Circle Widget */
.live-score-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.score-circle-indicator {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  transition: all 0.2s ease;
}

.score-number {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.score-status-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
}

.score-status-tag.success {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.score-status-tag.warning {
  background: #fefce8;
  color: #b45309;
  border: 1px solid #fde68a;
}

.score-status-tag.danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Checklist Meta Inputs */
.checklist-meta-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.meta-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #475569;
}

.meta-select,
.meta-input {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease;
}

.meta-select:focus,
.meta-input:focus {
  border-color: #dc2626;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

/* Checklist Items Stack */
.checklist-items-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.checklist-item-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.checklist-item-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.checklist-item-card:has(.routine-chk:checked) {
  background: #ffffff;
  border-color: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.routine-chk {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chk-custom-box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #ffffff;
  margin-top: 2px;
  transition: all 0.15s ease;
}

.routine-chk:checked + .chk-custom-box {
  background: #10b981;
  border-color: #10b981;
}

.routine-chk:checked + .chk-custom-box svg {
  stroke: #ffffff;
}

.chk-custom-box svg {
  stroke: transparent;
  transition: stroke 0.1s ease;
}

.chk-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

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

.chk-number {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.chk-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.checklist-item-card:has(.routine-chk:checked) .chk-title {
  color: #065f46;
}

.chk-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
}

.chk-tag.danger {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.chk-tag.primary {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.chk-tag.success {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.chk-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

/* Notes Block */
.checklist-notes-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.notes-textarea {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #0f172a;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.notes-textarea:focus {
  border-color: #dc2626;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

/* Actions Row */
.checklist-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.btn-routine-reset {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #64748b;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-routine-reset:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-routine-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-primary, #dc2626);
  border: 1px solid var(--red-primary, #dc2626);
  color: #ffffff;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  transition: all 0.15s ease;
}

.btn-routine-submit:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
  transform: translateY(-1px);
}

/* Header Right Group & Customize Button */
.panel-header-right-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.btn-routine-customize {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 3.5px solid var(--red-primary, #dc2626);
  color: #0f172a;
  padding: 0 14px 0 10px;
  height: 42px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  position: relative;
  white-space: nowrap;
}

.btn-routine-customize:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  border-left-color: #dc2626;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12), 0 2px 5px rgba(15, 23, 42, 0.06);
}

.btn-routine-customize:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.btn-customize-icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--red-primary, #dc2626);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.btn-routine-customize:hover .btn-customize-icon-wrap {
  background: var(--red-primary, #dc2626);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.05);
}

.btn-customize-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.rule-count-pill {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  color: #334155;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  line-height: 1.2;
  transition: all 0.15s ease;
}

.btn-routine-customize:hover .rule-count-pill {
  background: #fef2f2;
  color: var(--red-primary, #dc2626);
  border-color: #fecaca;
}

/* Checklist Item Dynamic Weight Pill */
.chk-weight-pill {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 5px;
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
}

.checklist-item-card:has(.routine-chk:checked) .chk-weight-pill {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.3);
}

/* ==========================================================================
   HYBRID MODULAR CHECKLIST BUILDER MODAL (Max 5 Goals, Dynamic Weighting)
   ========================================================================== */
#modal-checklist-builder.modal-backdrop {
  z-index: 2500;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-checklist-dialog {
  max-width: 980px;
  width: 94vw;
  max-height: 90vh;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-top: 4px solid var(--red-primary, #dc2626);
  border-radius: 16px;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalChecklistZoom 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.builder-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.bmh-title-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bmh-title-group .panel-badge.red {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--red-primary, #dc2626);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.bmh-title {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
}

.bmh-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
  max-width: 820px;
}

.btn-close-modal {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-close-modal:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: var(--red-primary, #dc2626);
  transform: rotate(90deg);
}

/* Status HUD Ribbon */
.builder-status-ribbon {
  display: flex;
  align-items: center;
  padding: 14px 28px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  gap: 24px;
}

.bsr-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bsr-col.progress-col {
  flex: 1;
}

.bsr-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
}

.bsr-val-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.bsr-val {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
}

.bsr-max,
.bsr-sub {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.bsr-divider {
  width: 1px;
  height: 36px;
  background: #cbd5e1;
}

.bsr-prog-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.bsr-alloc-text {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
}

.bsr-prog-bar {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.bsr-prog-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

/* Modal Body */
.builder-modal-body {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  padding: 22px 28px;
  overflow-y: auto;
  max-height: 60vh;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

@media (max-width: 860px) {
  .builder-modal-body {
    grid-template-columns: 1fr;
  }
}

/* Goals Column */
.builder-goals-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.bgc-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.bgc-hint {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.builder-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-empty-notice {
  padding: 36px 20px;
  text-align: center;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  color: #64748b;
  font-size: 13px;
  background: #f8fafc;
}

.builder-goal-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-left: 4px solid #64748b;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
}

/* Category Accent Borders */
.builder-goal-card[data-category*="CAPITAL"] { border-left-color: #dc2626; }
.builder-goal-card[data-category*="ORDER"] { border-left-color: #2563eb; }
.builder-goal-card[data-category*="PRICE"] { border-left-color: #7c3aed; }
.builder-goal-card[data-category*="MATH"] { border-left-color: #059669; }
.builder-goal-card[data-category*="MINDSET"] { border-left-color: #d97706; }
.builder-goal-card[data-category*="SAFETY"] { border-left-color: #0284c7; }
.builder-goal-card[data-category*="PROP"] { border-left-color: #db2777; }
.builder-goal-card[data-category*="CUSTOM"] { border-left-color: #0f172a; }

.builder-goal-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.builder-goal-card.editing {
  border-color: var(--red-primary, #dc2626) !important;
  border-left-color: var(--red-primary, #dc2626) !important;
  background: #fffcfc;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15), 0 4px 12px rgba(220, 38, 38, 0.08);
}

.bgc-left-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-top: 2px;
}

.bgc-index {
  font-size: 11.5px;
  font-weight: 800;
  color: #94a3b8;
}

.bgc-reorder-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-bgc-move {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  border-radius: 5px;
  width: 24px;
  height: 22px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.12s ease;
}

.btn-bgc-move:hover:not(:disabled) {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  transform: scale(1.05);
}

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

.bgc-main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bgc-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bgc-weight-badge {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 800;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 1px 7px;
  border-radius: 5px;
}

.bgc-cal-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  padding: 1px 7px;
  border-radius: 5px;
  text-transform: uppercase;
}

.bgc-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
}

.bgc-card-desc {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

.bgc-actions-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.btn-bgc-action {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #64748b;
}

.btn-bgc-action.edit:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
  transform: scale(1.05);
}

.btn-bgc-action.delete:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
  transform: scale(1.05);
}

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

/* Add / Edit Form Column */
.builder-form-column {
  display: flex;
  flex-direction: column;
}

.bfc-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.bfc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.bfc-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.bfc-slot-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.bfc-slot-pill.avail {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.bfc-slot-pill.full {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.form-group-custom {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label-custom {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  letter-spacing: -0.01em;
}

.form-input-custom,
.form-select-custom,
.form-textarea-custom {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #0f172a;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input-custom:focus,
.form-select-custom:focus,
.form-textarea-custom:focus {
  border-color: var(--red-primary, #dc2626);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.bfc-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.btn-builder-save-goal {
  flex: 1;
  background: #0f172a;
  border: 1px solid #0f172a;
  color: #ffffff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.btn-builder-save-goal:hover:not(:disabled) {
  background: #1e293b;
  border-color: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.btn-builder-save-goal:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-builder-cancel-edit {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #64748b;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-builder-cancel-edit:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.builder-limit-notice {
  font-size: 11.5px;
  font-weight: 700;
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.45;
}

/* Modal Footer */
.builder-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.btn-builder-restore {
  background: transparent;
  border: 1.5px dashed #cbd5e1;
  color: #64748b;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-builder-restore:hover {
  border-color: var(--red-primary, #dc2626);
  color: var(--red-primary, #dc2626);
  background: rgba(220, 38, 38, 0.05);
}

.bmf-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-builder-dismiss {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-builder-dismiss:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-builder-apply {
  background: var(--red-primary, #dc2626);
  border: 1px solid var(--red-primary, #dc2626);
  color: #ffffff;
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
  transition: all 0.15s ease;
}

.btn-builder-apply:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
  transform: translateY(-1px);
}

.btn-builder-apply:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Toast Feedback */
.routine-toast {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  animation: fadeIn 0.2s ease;
}

.routine-toast.success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.routine-toast.danger {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Filter Bar */
.routine-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.filter-btn-group {
  display: inline-flex;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  gap: 3px;
}

.filter-toggle-btn {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-toggle-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

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

.filter-select,
.filter-month-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: #0f172a;
  outline: none;
}

/* Filter Summary Strip */
.filter-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
}

.f-summary-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.f-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748b;
}

.f-val {
  font-size: 20px;
  font-weight: 800;
}

/* Telemetry Table */
.routine-table-wrapper {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

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

.routine-history-table th {
  background: #f8fafc;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.routine-history-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.routine-history-table tr[data-id] {
  cursor: pointer;
  transition: background 0.12s ease;
}

.routine-history-table tr[data-id]:hover {
  background: #f8fafc;
}

.badge-score {
  display: inline-block;
  font-weight: 800;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 6px;
}

.badge-score.perfect {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.badge-score.success {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.badge-score.warning {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.badge-score.danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.session-table-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.session-table-badge.blue {
  background: #eff6ff;
  color: #2563eb;
}

.session-table-badge.purple {
  background: #faf5ff;
  color: #7c3aed;
}

.session-table-badge.emerald {
  background: #ecfdf5;
  color: #059669;
}

.mini-chips-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chk-mini-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.chk-mini-pill.pass {
  background: #ecfdf5;
  color: #047857;
}

.chk-mini-pill.fail {
  background: #fef2f2;
  color: #b91c1c;
  opacity: 0.7;
}

.table-notes-col {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #475569;
}

.btn-table-delete {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.btn-table-delete:hover {
  color: #dc2626;
  background: #fee2e2;
}

/* ==========================================================================
   Home Page: Tab 7 Pre-Market Discipline Styling
   ========================================================================== */
.routine-home-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.routine-home-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.routine-home-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

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

.rh-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 6px;
}

.rh-badge.blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.rh-badge.green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.rh-badge.purple {
  background: #faf5ff;
  color: #7c3aed;
  border: 1px solid #e9d5ff;
}

.rh-sub {
  font-size: 11.5px;
  color: #64748b;
}

.rh-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rh-pct-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rh-pct-val {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.rh-pct-lbl {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

/* Mini Progress Meter Ring */
.rh-mini-meter {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rh-meter-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(#10b981 var(--ring-pct, 0%), #e2e8f0 0);
  padding: 4px;
}

.rh-ring-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.rh-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

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

.rh-s-lbl {
  font-size: 11px;
  color: #64748b;
}

.rh-s-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

/* Fast Checklist Banner */
.routine-home-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 24px;
  flex-wrap: wrap;
}

.rhb-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rhb-icon {
  font-size: 26px;
  line-height: 1;
}

.rhb-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 3px 0;
}

.rhb-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.rhb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-primary, #dc2626);
  color: #ffffff;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.2);
  transition: all 0.15s ease;
}

.rhb-btn:hover {
  background: #b91c1c;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
  transform: translateY(-1px);
}

.btn-pane-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-pane-action:hover {
  background: #ffffff;
  border-color: #dc2626;
  color: #dc2626;
}

/* ==========================================================================
   Dark Mode Support for Routine & Pre-Market Module
   ========================================================================== */


















/* ==========================================================================
   POSITION SIZE & RISK CALCULATOR PAGE STYLES
   ========================================================================== */

/* Page scroll enable for calculator.html */
html:has(body[data-page="calculator"]),
body[data-page="calculator"] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
}

/* Calculator Page Main Container */
.calculator-page-main {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 20px 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - 60px);
}

/* Header Block */
.calc-header-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.calc-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--red-primary, #dc2626);
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  padding: 3px 10px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.calc-badge-live .badge-dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-primary, #dc2626);
  box-shadow: 0 0 6px var(--red-primary, #dc2626);
  animation: pulse-ring 1.8s infinite;
}

.calc-page-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.calc-page-subtitle {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  max-width: 760px;
  line-height: 1.5;
}

/* Signal Pre-fill Indicator Pill */
.calc-signal-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
}

.calc-signal-pill .signal-badge-icon {
  font-size: 18px;
}

.calc-signal-pill .sig-pill-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1e40af;
}

.calc-signal-pill .sig-pill-pair {
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
}

.btn-clear-prefill {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}

.btn-clear-prefill:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.05);
}

/* 2-Column Calculator Grid */
.calculator-grid {
  display: grid;
  grid-template-columns: minmax(380px, 460px) 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .calculator-grid {
    grid-template-columns: 1fr;
  }
}

/* Panel Containers */
.calc-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.calc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 14px;
}

.panel-tag-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-tag-red {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 5px;
  padding: 3px 8px;
}

.panel-tag-green {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  border-radius: 5px;
  padding: 3px 8px;
}

.panel-heading {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.btn-calc-text {
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.btn-calc-text:hover {
  color: #dc2626;
  background: #fef2f2;
}

.institutional-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  border-radius: 9999px;
}

/* Form Fields */
.calc-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.calc-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #334155;
}

.sub-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
}

.field-hint {
  font-size: 11.5px;
  color: #64748b;
}

.field-risk-amount {
  font-size: 12.5px;
  font-weight: 700;
}

.field-pip-info {
  font-size: 11.5px;
}

/* Inputs & Selects */
.calc-input,
.calc-select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 14px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calc-input:focus,
.calc-select:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.input-with-prefix,
.input-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-prefix .input-sym {
  position: absolute;
  left: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  pointer-events: none;
}

.input-with-prefix input {
  padding-left: 26px;
}

.input-with-suffix .input-sfx {
  position: absolute;
  right: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  pointer-events: none;
}

.input-with-suffix input {
  padding-right: 48px;
}

/* Risk Presets */
.risk-presets-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 2px;
}

.risk-preset-btn {
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.risk-preset-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.risk-preset-btn.active {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

.risk-custom-inputs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}

/* Mode Toggle Bar (Pips vs Prices) */
.mode-toggle-bar {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
  margin-bottom: 12px;
}

.mode-toggle-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mode-toggle-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Direction Toggle Row */
.direction-toggle-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.btn-dir-toggle {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-dir-toggle.buy.active {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
  box-shadow: 0 2px 5px rgba(16, 185, 129, 0.2);
}

.btn-dir-toggle.sell.active {
  background: #fef2f2;
  border-color: #ef4444;
  color: #b91c1c;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.2);
}

.btn-invert-setup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-invert-setup:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
}

.btn-invert-setup:active {
  transform: translateY(0);
}

/* Take Profit Strategy Selector Chips */
.tp-strategy-chips-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.strategy-chip {
  flex: 1;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.strategy-chip:hover {
  border-color: #cbd5e1;
  color: #334155;
}

.strategy-chip.active {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #15803d;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(34, 197, 94, 0.15);
}

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

.price-calc-summary-pill {
  margin-top: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  color: #334155;
  text-align: center;
}

/* ==========================================================================
   RESULTS TELEMETRY DECK (RIGHT COLUMN)
   ========================================================================== */

/* Hero Lot Size Card */
.hero-lot-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 14px;
  padding: 24px;
  color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.hlc-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.hlc-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
  padding: 3px 8px;
  border-radius: 6px;
}

.hlc-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hlc-number-col {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hlc-big-val {
  font-size: 46px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1;
}

.hlc-unit-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

/* Copy Lots Button */
.btn-copy-lots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-primary, #dc2626);
  color: #ffffff;
  font-weight: 700;
  font-size: 12.5px;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
  transition: all 0.15s ease;
}

.btn-copy-lots:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.5);
}

.btn-copy-lots:active {
  transform: translateY(0);
}

/* Granular Breakdown Grid */
.hlc-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

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

.hlc-m-lbl {
  font-size: 10.5px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hlc-m-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
}

/* Telemetry Split Grid (Risk, TP1, TP2) */
.telemetry-split-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 768px) {
  .telemetry-split-grid {
    grid-template-columns: 1fr;
  }
}

.telemetry-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.telemetry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.telemetry-card.card-risk {
  border-left: 4px solid #ef4444;
}

.telemetry-card.card-tp1 {
  border-left: 4px solid #10b981;
}

.telemetry-card.card-tp2 {
  border-left: 4px solid #059669;
}

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

.tc-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
}

.tc-badge.danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.tc-badge.success {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.tc-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.tc-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  padding-top: 6px;
  margin-top: 2px;
}

.tc-tranche {
  font-size: 10.5px;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
}

/* Broker Leverage & Required Margin Estimator Card */
.margin-estimator-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

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

.mec-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0284c7;
}

.mec-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0f172a;
}

.mec-leverage-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mec-leverage-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-right: 2px;
}

.leverage-chip {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.leverage-chip:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.leverage-chip.active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

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

@media (max-width: 640px) {
  .mec-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.mec-metric-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mec-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.mec-val {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.mec-sub {
  font-size: 11px;
  color: #64748b;
  font-family: 'JetBrains Mono', monospace;
}

.mec-health-row {
  margin-top: 4px;
}

.margin-health-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.margin-health-badge.optimal {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.margin-health-badge.safe {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.margin-health-badge.tight {
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
}

.margin-health-badge.danger {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* Payoff Visualizer Card */
.payoff-visualizer-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.pvc-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.pvc-verdict {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.pvc-bar-wrap {
  height: 28px;
  background: #f1f5f9;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  position: relative;
  gap: 3px;
  padding: 3px;
}

.pvc-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: #ffffff;
  border-radius: 4px;
  transition: width 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
}

.pvc-segment.risk {
  background: #ef4444;
}

.pvc-segment.tp1 {
  background: #10b981;
}

.pvc-segment.tp2 {
  background: #059669;
}

/* Bridge to Trade Journal */
.journal-bridge-row {
  margin-top: 4px;
}

.btn-bridge-journal {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #0f172a;
  border: 1.5px solid #0f172a;
  border-radius: 10px;
  padding: 13px 20px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-bridge-journal:hover {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* Floating Toast */
.calc-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  animation: slideUpFade 0.2s ease-out;
}

@keyframes slideUpFade {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Signal Card Calc Lots Button */
.btn-signal-calc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 6px;
}

.btn-signal-calc:hover {
  background: #fef2f2;
  border-color: #dc2626;
  color: #dc2626;
}

/* ==========================================================================
   DARK MODE ADAPTATIONS FOR CALCULATOR PAGE
   ========================================================================== */









































/* ==========================================================================
   JOURNAL CSV EXPORT & SHAREABLE SETUP CARD STYLES
   ========================================================================== */

/* Top Toolbar Secondary Action Button (Export CSV) */
.action-btn.action-secondary {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.action-btn.action-secondary:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Table Header CSV Export Button */
.btn-table-csv {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  margin-right: 8px;
  transition: all 0.15s ease;
}

.btn-table-csv:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

/* Table Row Share Button */
.row-share-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.row-share-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: scale(1.08);
}

/* Detail Modal Share Button */
.btn-share-card-detail {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-share-card-detail:hover {
  background: #1e293b;
  border-color: #475569;
  transform: translateY(-1px);
}

/* Signal Card Share Button */
.btn-signal-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-signal-share:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* ==========================================================================
   SHAREABLE SETUP CARD STUDIO MODAL
   ========================================================================== */

.modal-share-card-box {
  max-width: 820px;
  width: 95%;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-badge-red {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.share-card-preview-wrap {
  background: #070a13;
  padding: 20px;
  border-radius: 14px;
  margin: 18px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.share-card-container {
  background: linear-gradient(135deg, #090d16 0%, #0f172a 50%, #1e293b 100%);
  border-radius: 12px;
  padding: 24px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  position: relative;
}

.sc-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.sc-brand-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sc-brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
}

.sc-brand-name {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.sc-brand-sub {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
  display: block;
}

.sc-meta-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sc-date-pill,
.sc-session-pill {
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 9px;
  border-radius: 6px;
  color: #cbd5e1;
}

.sc-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
}

.sc-pair-name {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc;
  line-height: 1.1;
  display: block;
}

.sc-dir-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  margin-top: 6px;
}

.sc-dir-badge.buy {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid #10b981;
}

.sc-dir-badge.sell {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid #ef4444;
}

.sc-outcome-col {
  text-align: right;
}

.sc-outcome-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  padding: 4px 12px;
  border-radius: 6px;
}

.sc-outcome-badge.profit {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid #10b981;
}

.sc-outcome-badge.loss {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid #ef4444;
}

.sc-outcome-badge.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid #3b82f6;
}

.sc-pnl-val {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
}

.sc-levels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  .sc-levels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sc-level-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}

.sc-lvl-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #94a3b8;
  display: block;
  margin-bottom: 4px;
}

.sc-lvl-val {
  font-size: 16px;
  font-weight: 700;
}

.sc-chart-preview {
  margin-bottom: 14px;
  border-radius: 8px;
  overflow: hidden;
  max-height: 240px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sc-chart-preview img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.sc-confluence-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.sc-conf-pill {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 3px 9px;
  color: #cbd5e1;
}

.sc-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: #64748b;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

.sc-watermark {
  color: #94a3b8;
}

/* Sharing Actions Row */
.share-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .share-actions-row {
    flex-direction: column;
    width: 100%;
  }
  .share-actions-row .btn-share-action {
    width: 100%;
    justify-content: center;
  }
}

.btn-share-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-share-action.primary {
  background: #dc2626;
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.btn-share-action.primary:hover {
  background: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.45);
}

.btn-share-action.secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.btn-share-action.secondary:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}

/* ==========================================================================
   DARK MODE OVERRIDES FOR CSV & SHARE CARD
   ========================================================================== */














/* ==========================================================================
   TRADE JOURNAL ENHANCEMENTS: CLONE SETUP, SESSION VOLUME BADGE & PDF EXPORT
   ========================================================================== */

/* 1. Live Session Volume Badge (Wizard Screen #02) */
.session-volume-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
  user-select: none;
  border: 1px solid transparent;
}

.vol-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  animation: volPulse 2s infinite ease-in-out;
}

@keyframes volPulse {
  0% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); opacity: 0.75; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Peak Volume / London-NY Overlap */
.session-volume-badge.vol-peak {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}
.session-volume-badge.vol-peak .vol-pulse-dot {
  background: #10b981;
}

/* London Active Trend Volume */
.session-volume-badge.vol-active {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  border-color: rgba(14, 165, 233, 0.3);
}
.session-volume-badge.vol-active .vol-pulse-dot {
  background: #0ea5e9;
  box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
}

/* NY Afternoon Moderate Volume */
.session-volume-badge.vol-moderate {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
  border-color: rgba(148, 163, 184, 0.25);
}
.session-volume-badge.vol-moderate .vol-pulse-dot {
  background: #64748b;
}

/* Friday Close Approaching Warning */
.session-volume-badge.vol-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.3);
}
.session-volume-badge.vol-warning .vol-pulse-dot {
  background: #f59e0b;
}

/* Asian Session Consolidation */
.session-volume-badge.vol-low {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
  border-color: rgba(139, 92, 246, 0.3);
}
.session-volume-badge.vol-low .vol-pulse-dot {
  background: #8b5cf6;
}

/* Rollover / Dead Zone */
.session-volume-badge.vol-dead {
  background: rgba(244, 63, 94, 0.12);
  color: #e11d48;
  border-color: rgba(244, 63, 94, 0.3);
}
.session-volume-badge.vol-dead .vol-pulse-dot {
  background: #f43f5e;
}

/* Dark Mode Volume Badges */

/* 2. Table Row Clone Action Button */
.row-clone-btn {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.row-clone-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
}



/* 3. Detail Modal Clone & Export PDF Buttons */
.btn-clone-detail {
  background: #f1f5f9;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-clone-detail:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
  transform: translateY(-1px);
}



.btn-export-pdf-detail {
  background: #0284c7;
  color: #ffffff;
  border: 1px solid #0369a1;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-export-pdf-detail:hover {
  background: #0369a1;
  border-color: #075985;
  transform: translateY(-1px);
}



/* 4. Dedicated Print Engine: Institutional Trade Case Study / PDF */
@media print {
  @page {
    margin: 10mm;
    size: auto;
  }

  /* Hide background interface elements */
  #status-bar,
  #main-content,
  .site-sidebar,
  #toast-container,
  .modal-backdrop:not(#modal-trade-detail),
  #modal-wizard,
  #modal-json-viewer,
  #modal-material-reader,
  #modal-lightbox,
  #excel-filter-popover,
  .detail-bottom-actions,
  .modal-x-btn {
    display: none !important;
  }

  /* Display only modal-trade-detail cleanly formatted for print */
  #modal-trade-detail {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    color: #0f172a !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .modal-trade-detail-box {
    display: block !important;
    position: static !important;
    background: #ffffff !important;
    color: #0f172a !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .detail-topbar {
    position: static !important;
    background: #ffffff !important;
    padding: 0 0 14px 0 !important;
    border-bottom: 2px solid #0f172a !important;
    margin-bottom: 16px !important;
  }

  .detail-heading {
    color: #0f172a !important;
    font-size: 20px !important;
    font-weight: 800 !important;
  }

  .detail-timestamp {
    color: #475569 !important;
    font-size: 11.5px !important;
  }

  .detail-body-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .detail-card {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .detail-card-head h4 {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .stat-label {
    color: #475569 !important;
    font-size: 11px !important;
  }

  .stat-val {
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .detail-lesson-box {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-left: 4px solid #0284c7 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    margin-bottom: 16px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .lesson-label {
    color: #0369a1 !important;
    font-weight: 800 !important;
  }

  .lesson-text {
    color: #1e293b !important;
    font-size: 12px !important;
  }

  .detail-screenshots-section {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-top: 12px !important;
  }

  .section-title {
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  .detail-screenshots-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .detail-screenshot-col {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 8px !important;
  }

  .ss-header-badge {
    color: #475569 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
  }

  .detail-ss-frame img {
    max-height: 200px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
  }

  .ss-empty-placeholder {
    padding: 24px 12px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
  }

  .detail-topbar::before {
    content: "APEXTRADER PRO · INSTITUTIONAL CASE STUDY DOSSIER";
    display: block;
    font-size: 9.5px;
    letter-spacing: 1.5px;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 4px;
  }
}

/* ==========================================================================
   CALCULATOR: SPREAD & BROKER COMMISSION BUFFER
   ========================================================================== */
.btn-open-compound-sim {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-sm, 6px);
  color: #059669;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-open-compound-sim:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(6, 182, 212, 0.22));
  border-color: #10b981;
  color: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.btn-open-compound-sim svg {
  stroke: currentColor;
}



/* Friction Buffer Toggle and Inputs */
.friction-buffer-group {
  position: relative;
}

.toggle-label-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-switch-wrap {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}

.toggle-switch-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 20px;
}

.toggle-switch-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.toggle-switch-input:checked + .toggle-switch-slider {
  background-color: #10b981;
}

.toggle-switch-input:focus + .toggle-switch-slider {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

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



.toggle-text-label {
  cursor: pointer;
  user-select: none;
}

.friction-buffer-panel {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
  margin-top: 10px;
  animation: modalFade 0.2s ease-out;
}


.friction-chips-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.f-chip {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.f-chip:hover {
  border-color: #94a3b8;
  color: #0f172a;
}

.f-chip.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  font-weight: 700;
}




.friction-summary-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #b45309;
  font-size: 11.5px;
  margin-top: 12px;
  flex-wrap: wrap;
}


.f-pill-icon {
  font-size: 13px;
}

.f-pill-dot {
  color: #cbd5e1;
}

/* Right column output card buffer tags */
.hlc-buffer-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  font-weight: 700;
  margin-left: 6px;
  letter-spacing: 0.5px;
}


.output-risk-fee-note {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.3;
}


.output-tp-net {
  font-size: 11px;
  color: #059669;
  font-weight: 600;
  margin-top: 2px;
}


/* ==========================================================================
   MODAL: COMPOUND GROWTH & EQUITY CURVE SIMULATOR
   ========================================================================== */
.modal-compound-sim-box {
  max-width: 1040px;
  width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* Topbar */
.sim-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 16px;
  margin-bottom: 18px;
}


.sim-tag-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.sim-badge-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  padding: 2px 8px;
  border-radius: 4px;
}


.sim-badge-mode {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  padding: 2px 8px;
  border-radius: 4px;
}


.sim-heading {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  line-height: 1.2;
}


.sim-subheading {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}


/* Controls Strip */
.sim-controls-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}


.sim-controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.sim-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sim-field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sim-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}


.sim-val-preview {
  font-size: 12px;
  font-weight: 700;
}

.sim-chips-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.sim-chip {
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  padding: 3px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sim-chip:hover {
  border-color: #94a3b8;
  color: #0f172a;
}

.sim-chip.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  font-weight: 700;
}




.sim-trades-row {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.sim-trade-btn {
  flex: 1;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.sim-trade-btn:hover {
  border-color: #94a3b8;
  color: #0f172a;
}

.sim-trade-btn.active {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}



.sim-mode-toggle-row {
  display: flex;
  gap: 4px;
}

.sim-mode-btn {
  flex: 1;
  padding: 5px 6px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sim-mode-btn.active {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}



.sim-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}


.sim-action-left {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-reroll-sim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-reroll-sim:hover {
  background: #1e293b;
  transform: translateY(-1px);
}



.btn-theoretical-toggle {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-theoretical-toggle.active {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  color: #2563eb;
}



.sim-status-indicator {
  font-size: 11px;
  color: #64748b;
}


/* KPI Deck */
.sim-kpi-deck {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 840px) {
  .sim-kpi-deck {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .sim-kpi-deck {
    grid-template-columns: 1fr;
  }
}

.sim-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}


.sim-kpi-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.kpi-icon {
  font-size: 14px;
}

.kpi-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #64748b;
}


.sim-kpi-val {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
  line-height: 1.2;
}

.sim-kpi-sub {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
}


/* Equity Chart Card */
.sim-chart-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}


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

.sim-chart-heading {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
}


.sim-chart-sub {
  font-size: 11px;
  color: #64748b;
}


.sim-chart-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #475569;
}


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

.legend-line {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
}

.legend-line.random {
  background: #10b981;
}

.legend-line.expected {
  background: #3b82f6;
  border-top: 1px dashed #3b82f6;
}

.legend-line.baseline {
  background: #94a3b8;
}

.sim-svg-wrapper {
  position: relative;
  width: 100%;
  height: 260px;
  background: #f8fafc;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}


#sim-equity-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sim-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: #0f172a;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
  transform: translate(-50%, -120%);
  white-space: nowrap;
  transition: opacity 0.1s ease;
  line-height: 1.4;
}

/* Milestones Banner */
.sim-milestones-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}


.ms-label {
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.5px;
}


.ms-chips-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ms-chip {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

.ms-chip.reached {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}


.ms-chip.pending {
  background: rgba(148, 163, 184, 0.15);
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.3);
}


/* Table Breakdown */
.sim-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}


.sim-table-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sim-table-heading {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}


.sim-table-counter {
  font-size: 11px;
  color: #64748b;
  font-family: var(--font-mono, monospace);
}


.sim-table-wrap {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}


.sim-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.sim-breakdown-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid #cbd5e1;
  text-align: left;
  z-index: 2;
}


.sim-breakdown-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
}


.sim-breakdown-table tr:hover td {
  background: #f8fafc;
}


.sim-badge-win {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border-radius: 4px;
}


.sim-badge-loss {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(244, 63, 94, 0.15);
  color: #e11d48;
  border-radius: 4px;
}


/* Bottom Actions */
.sim-bottom-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}


.btn-apply-sim-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.btn-apply-sim-balance:hover {
  background: linear-gradient(135deg, #047857, #059669);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

.btn-apply-sim-balance:active {
  transform: translateY(0);
}

/* ==========================================================================
   KELLY CRITERION POSITION SIZING ADVISOR
   ========================================================================== */
.kelly-advisor-box {
  margin-top: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}


.kelly-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.kelly-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kelly-icon {
  font-size: 14px;
}

.kelly-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #64748b;
  text-transform: uppercase;
}


.kelly-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.kelly-badge.badge-optimal {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}


.kelly-badge.badge-neg {
  background: rgba(244, 63, 94, 0.15);
  color: #e11d48;
}


.kelly-metrics-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.kelly-metric-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.km-label {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
}


.km-val {
  font-size: 13px;
  font-weight: 800;
}

.btn-apply-kelly {
  margin-left: auto;
  padding: 5px 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-apply-kelly:hover:not(:disabled) {
  background: #10b981;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.btn-apply-kelly:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #cbd5e1;
  color: #94a3b8;
  background: transparent;
}



.kelly-explanation {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.4;
}


/* ==========================================================================
   MATHEMATICAL EDGE & EXPECTANCY HEATMAP MATRIX
   ========================================================================== */
.calc-matrix-section {
  margin-top: 24px;
  margin-bottom: 24px;
  width: 100%;
}

.calc-matrix-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
}


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

.matrix-title-col {
  max-width: 680px;
}

.matrix-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}


.matrix-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.matrix-heading {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  line-height: 1.25;
}


.matrix-subheading {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}


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

.matrix-metric-toggle-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 6px;
}


.metric-toggle-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  padding: 0 4px;
}


.matrix-toggle-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.matrix-toggle-btn:hover {
  color: #0f172a;
}

.matrix-toggle-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}



.btn-matrix-open-sim {
  padding: 7px 14px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-matrix-open-sim:hover {
  background: #10b981;
  color: #ffffff;
  transform: translateY(-1px);
}



.matrix-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.m-legend-label {
  font-size: 10.5px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
}


.m-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}


.m-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.m-dot.high { background: #059669; }
.m-dot.mod { background: #10b981; }
.m-dot.neutral { background: #94a3b8; }
.m-dot.neg { background: #fb7185; }
.m-dot.toxic { background: #e11d48; }

.matrix-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}


.matrix-heatmap-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 11.5px;
}

.matrix-heatmap-table th {
  background: #f8fafc;
  color: #475569;
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 700;
  border-bottom: 1px solid #cbd5e1;
  font-family: var(--font-mono, monospace);
}


.col-winrate-header {
  text-align: left;
  padding-left: 14px !important;
}

.col-winrate {
  text-align: left;
  padding-left: 14px !important;
  background: #f8fafc;
  color: #475569;
  border-right: 1px solid #cbd5e1;
  font-weight: 800;
}


.heatmap-cell {
  position: relative;
  padding: 10px 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 700;
  border: 1px solid rgba(226, 232, 240, 0.4);
}


.heatmap-cell:hover {
  transform: scale(1.04);
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.heatmap-cell.tier-high {
  background: rgba(16, 185, 129, 0.22);
  color: #047857;
}


.heatmap-cell.tier-mod {
  background: rgba(16, 185, 129, 0.10);
  color: #059669;
}


.heatmap-cell.tier-neutral {
  background: rgba(148, 163, 184, 0.10);
  color: #64748b;
}


.heatmap-cell.tier-neg {
  background: rgba(244, 63, 94, 0.10);
  color: #e11d48;
}


.heatmap-cell.tier-toxic {
  background: rgba(225, 29, 72, 0.22);
  color: #be123c;
}


.cell-active-setup {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.3), 0 0 14px rgba(59, 130, 246, 0.4);
  z-index: 4;
}

.cell-active-badge {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  background: #3b82f6;
  color: #ffffff;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.matrix-footnote {
  font-size: 11px;
  color: #64748b;
  margin-top: 10px;
}


/* ==========================================================================
   MONTE CARLO CONE & RISK OF RUIN UI
   ========================================================================== */
.sim-kpi-deck-5col {
  grid-template-columns: repeat(5, 1fr) !important;
}

@media (max-width: 1050px) {
  .sim-kpi-deck-5col {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 700px) {
  .sim-kpi-deck-5col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .sim-kpi-deck-5col {
    grid-template-columns: 1fr !important;
  }
}

.btn-cone-toggle {
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-cone-toggle:hover {
  border-color: #94a3b8;
  color: #0f172a;
}

.btn-cone-toggle.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
  border-color: #10b981;
  color: #059669;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.25);
}



.sim-dd-cutoff-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748b;
  margin-left: 2px;
}


.dd-cutoff-label {
  font-weight: 700;
  font-size: 10.5px;
}

.sim-dd-select {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
}


.legend-line.median {
  background: #10b981 !important;
  height: 3px !important;
}

.legend-line.cone-band {
  background: rgba(16, 185, 129, 0.35) !important;
  border: 1px dashed #10b981;
  height: 8px !important;
  width: 18px !important;
  border-radius: 2px;
}

/* ==========================================================================
   TRADE JOURNAL ENHANCEMENTS: CALENDAR HEATMAP, LEAK TRACKER, CSV IMPORT
   ========================================================================== */



/* 2. Psychological Leak Cost Tracker Card */
.summary-metric-card.leak-tracker-card {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(180deg, #ffffff 0%, rgba(254, 242, 242, 0.6) 100%);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.summary-metric-card.leak-tracker-card:hover {
  border-color: #ef4444;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.12);
  transform: translateY(-2px);
}



.leak-bleed-tag {
  background: #fee2e2;
  color: #b91c1c;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.leak-bleed-tag.optimal {
  background: #d1fae5;
  color: #065f46;
}



.leak-hero-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 8px;
}

.leak-hero-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.leak-breach-count {
  font-size: 11px;
  color: #64748b;
}


.leak-clean-vs-breach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
}


.leak-split {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leak-split .ls-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}


.leak-split .ls-val {
  font-size: 11.5px;
}

.leak-recovery-projection {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px dashed rgba(16, 185, 129, 0.4);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 10.5px;
  color: #065f46;
  margin-bottom: 6px;
}


.leak-mistakes-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.leak-mistake-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10.5px;
  color: #991b1b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.leak-mistake-pill:hover {
  background: #fee2e2;
  border-color: #f87171;
  transform: translateY(-1px);
}



.lm-cost {
  font-weight: 700;
  color: #dc2626;
}


/* 3. Trading Calendar Heatmap */
.journal-calendar-view-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid var(--border-light, #e2e8f0);
  overflow: hidden;
  margin-top: 10px;
}


.calendar-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light, #e2e8f0);
}


.cal-nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-nav-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cal-nav-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}



.cal-month-heading-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 170px;
  justify-content: center;
}

.cal-current-month-heading {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
}


.cal-today-btn {
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cal-today-btn:hover {
  background: #ffffff;
  color: #0f172a;
}



/* Calendar KPI Strip */
.calendar-kpi-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 14px;
}


.cal-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cal-kpi-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.3px;
}


.cal-kpi-val {
  font-size: 12.5px;
  font-weight: 700;
}

.cal-kpi-divider {
  width: 1px;
  height: 24px;
  background: #e2e8f0;
}


/* Weekday Headers */
.calendar-week-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light, #e2e8f0);
}


.cal-th-day {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border-light, #e2e8f0);
}

.cal-th-day:last-child {
  border-right: none;
}


.dow-name {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.5px;
}


.dow-stat {
  font-size: 10px;
  color: #64748b;
  margin-top: 1px;
}


/* Calendar Days Grid */
.calendar-grid-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--border-light, #e2e8f0);
  gap: 1px;
}


.cal-day-cell {
  min-height: 100px;
  background: #ffffff;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}


.cal-cell-inactive {
  background: #f8fafc;
  opacity: 0.45;
}


.cal-cell-today {
  box-shadow: inset 0 0 0 2px #3b82f6;
}

.cal-cell-active:hover {
  transform: scale(1.02);
  z-index: 5;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}


/* Dynamic Heatmap Color Gradations */
.cal-cell-green {
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.4) 0%, rgba(209, 250, 229, calc(0.3 + 0.4 * var(--cal-intensity, 0.5))) 100%);
  border-bottom: 2px solid rgba(16, 185, 129, calc(0.4 + 0.6 * var(--cal-intensity, 0.5)));
}


.cal-cell-red {
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.4) 0%, rgba(254, 226, 226, calc(0.3 + 0.4 * var(--cal-intensity, 0.5))) 100%);
  border-bottom: 2px solid rgba(239, 68, 68, calc(0.4 + 0.6 * var(--cal-intensity, 0.5)));
}


.cal-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-day-num {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}


.cal-badge-today {
  background: #3b82f6;
  color: #ffffff;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.4px;
}

.cal-day-wr-pill {
  font-size: 9.5px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 4px;
  border-radius: 3px;
  color: #334155;
}


.cal-cell-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.cal-cell-pnl {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.cal-cell-trade-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.cal-trade-count-badge {
  font-size: 10px;
  color: #64748b;
}


.cal-trade-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}

.cal-dot {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
}

.cal-dot.dot-win {
  background: #10b981;
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.6);
}

.cal-dot.dot-loss {
  background: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.6);
}

.cal-dot.dot-be {
  background: #94a3b8;
}

.cal-dot-more {
  font-size: 8px;
  color: #64748b;
  font-weight: 700;
}

/* 4. Day Detail Modal & Trade Cards */
.modal-day-detail-box {
  max-width: 620px;
  width: 95%;
}

.day-modal-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}


.day-modal-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dmm-label {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.3px;
}


.dmm-val {
  font-size: 14px;
  font-weight: 800;
}

.day-modal-trades-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}


.day-modal-trades-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

.day-trade-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.day-trade-card:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateX(2px);
}



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

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

.dtc-id {
  font-weight: 700;
  color: #3b82f6;
  font-size: 12px;
}

.dtc-pair {
  font-weight: 800;
  font-size: 12px;
}

.dtc-session {
  font-size: 10px;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  color: #475569;
}


.dtc-sub {
  font-size: 11px;
  color: #64748b;
}


.dtc-mistake {
  color: #dc2626;
  font-weight: 600;
}


.dtc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.dtc-pnl {
  font-size: 14px;
  font-weight: 800;
}

.dtc-result-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.dtc-result-pill.profit {
  background: #d1fae5;
  color: #065f46;
}

.dtc-result-pill.loss {
  background: #fee2e2;
  color: #991b1b;
}

.dtc-result-pill.open {
  background: #e2e8f0;
  color: #475569;
}



/* 5. CSV Import Confirmation Modal */
.modal-csv-import-box {
  max-width: 680px;
  width: 95%;
}

.csv-import-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 12px;
}


.csv-stat-pill {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.csv-stat-label {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
}


.csv-stat-num {
  font-size: 13px;
  font-weight: 800;
}

.csv-import-mode-selection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.csv-mode-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 7px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.csv-mode-radio-label:hover {
  border-color: #94a3b8;
}

.csv-mode-radio-label.danger-mode {
  border-color: rgba(239, 68, 68, 0.3);
}

.csv-mode-radio-label.danger-mode:hover {
  border-color: #ef4444;
}


.csv-mode-radio-label input[type="radio"] {
  margin-top: 3px;
}

.csv-mode-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.csv-mode-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}


.csv-mode-desc {
  font-size: 11px;
  color: #64748b;
}


.csv-preview-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.csv-preview-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
}


.csv-preview-table-scroll {
  max-height: 180px;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}


.csv-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.csv-preview-table th {
  background: #f1f5f9;
  padding: 6px 10px;
  text-align: left;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid #cbd5e1;
  white-space: nowrap;
}


.csv-preview-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}


/* ==========================================================================
   ANALYSIS HUB: EDGE ANALYTICS & POST-TRADE OUTCOME REVIEW SUMMARY SYSTEM
   ========================================================================== */

/* 1. View Mode Switcher in Library Toolbar */
.analysis-view-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  height: 32px;
  box-sizing: border-box;
}


.btn-analysis-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 26px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-analysis-view:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
}


.btn-analysis-view.active {
  color: #0f172a;
  background: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}


.analytics-badge-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  letter-spacing: 0.4px;
}

.difficulty-chip-divider {
  width: 1px;
  height: 20px;
  background: #cbd5e1;
  margin: 0 6px;
  flex-shrink: 0;
}


/* 2. Executive Analytics Summary View Container */
.analytics-summary-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
  animation: fadeIn 0.2s ease-in-out;
}

/* 3. Executive KPI Strip */
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.kpi-metric-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
}


.kpi-metric-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.kpi-metric-card.kpi-card-highlight {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, #ffffff 0%, rgba(16, 185, 129, 0.04) 100%);
}


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

.kpi-label {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
}


.kpi-icon-pill {
  font-size: 13px;
  line-height: 1;
}

.kpi-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.kpi-number {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-mono, monospace);
  line-height: 1.1;
}


.text-accent-cyan {
  color: #0284c7 !important;
}


.text-accent-emerald {
  color: #059669 !important;
}


.text-accent-gold {
  color: #d97706 !important;
}


.text-accent-boost {
  color: #10b981 !important;
}


.kpi-sub-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}


.kpi-sub-badge.badge-valid {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
}

.kpi-sub-badge.badge-followed {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.kpi-sub-badge.badge-worked {
  background: rgba(217, 119, 6, 0.1);
  color: #d97706;
}

.kpi-sub-badge.badge-boost {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.kpi-mini-bar-wrap {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}


.kpi-mini-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.kpi-mini-bar.bar-cyan { background: #0284c7; }
.kpi-mini-bar.bar-emerald { background: #10b981; }
.kpi-mini-bar.bar-gold { background: #f59e0b; }

.kpi-footer-note {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}


/* 4. Section Card Shell */
.analytics-section-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}


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

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

.section-badge-icon {
  font-size: 20px;
  line-height: 1;
}

.section-heading {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}


.section-subtext {
  font-size: 11.5px;
  color: #64748b;
  margin: 2px 0 0;
}


.shield-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: #059669;
}


/* 5. The 4-Quadrant Matrix */
.matrix-quadrants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.quadrant-card {
  border-radius: 8px;
  padding: 14px 16px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.quadrant-card:hover {
  transform: translateY(-2px);
}

.quadrant-card.selected {
  outline: 2px solid #0f172a;
}


.quad-deserved-win {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.3);
}

.quad-deserved-win:hover {
  border-color: #10b981;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15);
}


.quad-good-loss {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.3);
}

.quad-good-loss:hover {
  border-color: #3b82f6;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.15);
}


.quad-toxic-luck {
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.3);
}

.quad-toxic-luck:hover {
  border-color: #f59e0b;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.15);
}


.quad-deserved-loss {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.3);
}

.quad-deserved-loss:hover {
  border-color: #ef4444;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.15);
}


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

.quad-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #64748b;
  font-family: var(--font-mono, monospace);
}


.quad-status-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.badge-quad-win { background: #10b981; color: #ffffff; }
.badge-quad-loss { background: #3b82f6; color: #ffffff; }
.badge-quad-luck { background: #f59e0b; color: #ffffff; }
.badge-quad-danger { background: #ef4444; color: #ffffff; }

.quad-hero {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0;
}

.quad-count {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.quad-deserved-win .quad-count { color: #059669; }
.quad-good-loss .quad-count { color: #2563eb; }
.quad-toxic-luck .quad-count { color: #d97706; }
.quad-deserved-loss .quad-count { color: #dc2626; }

.quad-percent {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.quad-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}


.quad-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}


.quad-formula {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.03);
  padding: 3px 6px;
  border-radius: 4px;
}


/* 6. Outcome Dimensions Telemetry */
.outcome-dimensions-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.dimension-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


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

.dim-title {
  font-size: 10.5px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.5px;
}


.dim-total {
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: #64748b;
}

.stacked-bar-container {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  background: #e2e8f0;
}


.bar-slice {
  height: 100%;
  transition: width 0.3s ease;
}

.slice-valid { background: #10b981; }
.slice-invalid { background: #ef4444; }
.slice-unclear { background: #94a3b8; }

.slice-followed { background: #10b981; }
.slice-partial { background: #f59e0b; }
.slice-not-followed { background: #ef4444; }

.slice-worked { background: #10b981; }
.slice-failed { background: #ef4444; }
.slice-avoided { background: #3b82f6; }

.dim-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
}


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

.dot-valid, .dot-followed, .dot-worked {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.dot-invalid, .dot-not-followed, .dot-failed {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
}

.dot-unclear, .dot-avoided {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
}

.dot-partial {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
}

/* 7. Session Edge Breakdown Cards */
.session-crown-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: #d97706;
}


.session-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.session-edge-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.15s ease;
}


.session-edge-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.session-edge-card.top-edge-card {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, rgba(16, 185, 129, 0.03) 100%);
}


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

.session-title-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.session-flag-icon {
  font-size: 18px;
  line-height: 1;
}

.session-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}


.session-window-time {
  font-size: 10px;
  color: #64748b;
}


.crown-tag {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: #10b981;
  color: #ffffff;
  letter-spacing: 0.4px;
}

.session-hero-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.session-wr-cluster {
  display: flex;
  flex-direction: column;
}

.session-wr-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.badge-wr-high { color: #059669; }
.badge-wr-neutral { color: #2563eb; }
.badge-wr-low { color: #dc2626; }

.session-wr-label {
  font-size: 9.5px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
}

.session-counts-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.session-counts-ratio {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}


.session-counts-sub {
  font-size: 10.5px;
  color: #94a3b8;
}

.session-meter-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}


.session-meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.fill-emerald { background: #10b981; }
.fill-gold { background: #f59e0b; }
.fill-crimson { background: #ef4444; }

.session-telemetry-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid #e2e8f0;
}


.telemetry-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
}

.tel-label {
  color: #64748b;
}

.tel-val {
  font-weight: 700;
  color: #0f172a;
}


/* 8. Pair Edge Podium & Ranking Table */
.table-search-pill-wrap {
  width: 200px;
}

.pair-search-input {
  width: 100%;
  height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 11.5px;
  background: #ffffff;
  color: inherit;
  outline: none;
  box-sizing: border-box;
}

.pair-search-input:focus {
  border-color: var(--red-primary, #dc2626);
}


.pair-podium-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.podium-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}


.podium-rank-1 {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(180deg, #ffffff 0%, rgba(245, 158, 11, 0.04) 100%);
}


.podium-badge {
  font-size: 10px;
  font-weight: 800;
  color: #d97706;
}

.podium-pair-name {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}


.podium-wr {
  font-size: 20px;
  font-weight: 800;
}

.podium-wr-sub {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
}

.podium-sub-meta {
  font-size: 11px;
  color: #64748b;
}


.podium-tier-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 4px;
  width: fit-content;
}

.tier-a-plus {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}


.tier-solid {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}


.tier-neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #475569;
}


.tier-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
}


/* Pair Table */
.pair-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}


.pair-edge-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.pair-edge-table th {
  background: #f8fafc;
  padding: 8px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}


.pair-edge-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
}


.pair-edge-table tr:hover {
  background: #f8fafc;
}


.td-pair-name {
  display: flex;
  align-items: center;
  gap: 6px;
}

.table-wr-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.table-mini-bar-track {
  width: 50px;
  height: 5px;
  background: #e2e8f0;
  border-radius: 2.5px;
  overflow: hidden;
}


.table-mini-bar-fill {
  height: 100%;
  border-radius: 2.5px;
}

.table-tier-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

/* 9. Automated Tactical Insights */
.tactical-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.tactical-item {
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid;
}

.tactical-positive {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.25);
}


.tactical-boost {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.25);
}


.tactical-warning {
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.25);
}


.tactical-shield {
  background: rgba(147, 51, 234, 0.05);
  border-color: rgba(147, 51, 234, 0.25);
}


.tactical-neutral {
  background: #f8fafc;
  border-color: #e2e8f0;
}


.tactical-item-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

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

.tactical-item-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}


.tactical-item-text {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}


/* Live Process vs Outcome Quadrant Banner */
.outcome-quadrant-live-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
  margin-bottom: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


.outcome-quadrant-live-banner .live-banner-icon {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
  flex-shrink: 0;
}

.outcome-quadrant-live-banner .live-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.outcome-quadrant-live-banner .live-banner-text strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #065f46;
}


.outcome-quadrant-live-banner .live-banner-text span {
  font-size: 12px;
  color: #047857;
  opacity: 0.9;
}


/* Quadrant-Specific Themes */
.outcome-quadrant-live-banner.quadrant-q1 {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.02) 100%);
}
.outcome-quadrant-live-banner.quadrant-q1 strong { color: #059669; }
.outcome-quadrant-live-banner.quadrant-q1 span { color: #047857; }

.outcome-quadrant-live-banner.quadrant-q2 {
  border-color: rgba(59, 130, 246, 0.45);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.02) 100%);
}
.outcome-quadrant-live-banner.quadrant-q2 strong { color: #2563eb; }
.outcome-quadrant-live-banner.quadrant-q2 span { color: #1d4ed8; }

.outcome-quadrant-live-banner.quadrant-q3 {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.02) 100%);
}
.outcome-quadrant-live-banner.quadrant-q3 strong { color: #d97706; }
.outcome-quadrant-live-banner.quadrant-q3 span { color: #b45309; }

.outcome-quadrant-live-banner.quadrant-q4 {
  border-color: rgba(239, 68, 68, 0.45);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.02) 100%);
}
.outcome-quadrant-live-banner.quadrant-q4 strong { color: #dc2626; }
.outcome-quadrant-live-banner.quadrant-q4 span { color: #b91c1c; }

.outcome-quadrant-live-banner.quadrant-avoided {
  border-color: rgba(147, 51, 234, 0.45);
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.12) 0%, rgba(147, 51, 234, 0.02) 100%);
}
.outcome-quadrant-live-banner.quadrant-avoided strong { color: #9333ea; }
.outcome-quadrant-live-banner.quadrant-avoided span { color: #7e22ce; }

/* Reader Post-Trade Reflection Box */
.reader-reflection-box {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: var(--radius-md, 8px);
}
.reader-reflection-box .refl-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #64748b);
  margin-bottom: 6px;
}
.reader-reflection-box .refl-body {
  font-size: 13px;
  color: var(--text-pure, #0f172a);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

/* Setup Quality Grade Edge Cards */
.setup-grade-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.setup-grade-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.setup-grade-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

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

.setup-grade-card .grade-badge {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #0f172a;
}


.setup-grade-card.grade-tier-a-plus {
  border-color: rgba(16, 185, 129, 0.4);
}
.setup-grade-card.grade-tier-a-plus .grade-badge {
  color: #059669;
}

.setup-grade-card.grade-tier-c {
  border-color: rgba(239, 68, 68, 0.3);
}

.setup-grade-card .grade-total {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.setup-grade-card .grade-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
}


.setup-grade-card .grade-hero-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 2px;
}

.setup-grade-card .grade-wr {
  font-size: 22px;
  font-weight: 800;
}

.setup-grade-card .grade-counts {
  font-size: 11px;
  color: #64748b;
}

.setup-grade-card .grade-meter-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}


.setup-grade-card .grade-meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.setup-grade-card .grade-footer-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #64748b;
  border-top: 1px dashed #e2e8f0;
  padding-top: 6px;
  margin-top: 2px;
}


/* Outcome Driver Analysis */
.driver-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.driver-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.driver-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.driver-name {
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}


.driver-stat {
  font-size: 11px;
  color: #64748b;
}


.driver-track {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}


.driver-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Responsive splits */
@media (max-width: 900px) {
  .analytics-split-grid {
    grid-template-columns: 1fr !important;
  }
  .setup-grade-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   EDGE ANALYTICS – TIME PERIOD FILTER BAR
   ========================================================================== */

.edge-period-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 14px;
  border-bottom: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-wrap: wrap;
}

.edge-period-pill-group {
  display: flex;
  gap: 3px;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 3px;
  border: 1.5px solid var(--border-subtle);
}

.edge-period-pill {
  padding: 5px 15px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.edge-period-pill:hover:not(.active) {
  color: var(--text-pure);
  background: var(--bg-surface);
}

.edge-period-pill:focus {
  outline: none;
}

.edge-period-pill.active {
  background: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.30);
}

.edge-period-pill[data-period="all"].active {
  background: #1e293b;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(30, 41, 59, 0.25);
}

/* Dark mode overrides */




.edge-period-count-label {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-left: auto;
  opacity: 0.8;
}

@media (max-width: 700px) {
  .edge-period-filter-bar {
    gap: 8px;
    padding: 10px 14px;
  }
  .edge-period-count-label {
    margin-left: 0;
    width: 100%;
  }
}

/* ==========================================================================
   SESSION COUNTDOWN TIMER & SESSION RADAR HUD MODAL
   (ApexTrader OS Theme Matched - Red & White Swiss Minimalist)
   ========================================================================== */

/* Header countdown integration */
.header-countdown-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1.5px solid var(--border-subtle);
}

.header-countdown-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.header-countdown-wrap .timer-icon {
  font-size: 10px;
  opacity: 0.9;
}

.header-countdown-wrap .timer-tag {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.header-countdown-wrap .timer-tag.ends {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.header-countdown-wrap .timer-tag.next {
  background: var(--bg-app);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.header-countdown-wrap .timer-tag.opens {
  background: var(--red-bg-hover);
  color: var(--red-crimson);
  border: 1px solid var(--red-border);
}

.header-countdown-wrap .timer-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-bright);
}

.header-countdown-wrap .timer-digits {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text-pure);
}

.mini-progress-track {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  background: var(--red-primary);
  transition: width 0.3s ease;
}

/* Home Dashboard Session Strip */
.dash-session-radar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.dash-session-radar-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-elevated);
}

.dash-session-radar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--red-primary);
}

.dash-session-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-session-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-session-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-dim);
}

.dash-session-name {
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  color: var(--red-primary);
}

.dash-session-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: var(--radius-xs);
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.dash-session-next {
  font-size: 11.5px;
  color: var(--text-dim);
}

.dash-session-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 180px;
}

.dash-session-timer-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-timer-icon {
  font-size: 14px;
}

.dash-session-digits {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--text-pure);
}

.dash-progress-track {
  width: 100%;
  height: 6px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
}

.dash-progress-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--red-primary);
  transition: width 0.4s ease;
}

.btn-open-radar-hud {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  background: var(--red-bg-subtle);
  border: 1.5px solid var(--red-border);
  color: var(--red-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-open-radar-hud:hover {
  background: var(--red-primary);
  border-color: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--red-glow);
  transform: translateY(-1px);
}

/* ==========================================================================
   INSTITUTIONAL SESSION RADAR & KILLZONE HUD (HIGH-END INSTITUTIONAL AESTHETICS)
   Swiss Minimalist Red & White High-Contrast Design System
   ========================================================================== */

.modal-session-radar-box {
  display: block !important;
  max-width: 980px;
  width: 94%;
  max-height: 90vh;
  overflow-y: auto !important;
  overflow-x: hidden;
  background: #ffffff;
  border: 1.5px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.05);
  padding: 24px 28px;
  position: relative;
  color: var(--text-pure);
  box-sizing: border-box;
}

.modal-session-radar-box > * {
  flex-shrink: 0;
}

.modal-session-radar-box::-webkit-scrollbar {
  width: 6px;
}

.modal-session-radar-box::-webkit-scrollbar-track {
  background: transparent;
}

.modal-session-radar-box::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 4px;
}

.modal-session-radar-box::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.7);
}

/* Institutional Laser Top Accent Line */
.radar-top-laser {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 25%, #f59e0b 50%, #2563eb 75%, #7c3aed 100%);
}

/* Header */
.radar-modal-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--border-subtle);
}

.radar-modal-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.radar-live-icon {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.07);
  border: 1.5px solid rgba(220, 38, 38, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.radar-ping {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.2);
  animation: pingRing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.radar-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.8);
  z-index: 2;
}

.radar-sweep-beam {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(220, 38, 38, 0.4) 0deg, transparent 60deg, transparent 360deg);
  animation: radarSpin 3s linear infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes radarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pingRing {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.radar-telemetry-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.radar-badge-telemetry {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #dc2626;
  color: #ffffff;
}

.radar-badge-precision {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.radar-badge-utc {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.radar-modal-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #0f172a;
  margin: 0 0 3px;
}

.radar-modal-sub {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

.radar-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.radar-close-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  transform: scale(1.05);
}

/* Clocks Bar */
.radar-clocks-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}

.radar-clock-card {
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
  position: relative;
}

.radar-clock-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.radar-clock-card.ny {
  border-left: 4px solid #dc2626;
}

.radar-clock-card.local {
  border-left: 4px solid #059669;
}

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

.radar-clock-id {
  display: flex;
  align-items: center;
  gap: 6px;
}

.radar-flag-pill {
  font-size: 13px;
  line-height: 1;
}

.radar-clock-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: #475569;
  text-transform: uppercase;
}

.radar-clock-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.radar-clock-tag.local-tag {
  background: #ecfdf5;
  color: #047857;
  border-color: rgba(5, 150, 105, 0.2);
}

.radar-clock-val-wrap {
  margin: 4px 0;
}

.radar-clock-val {
  font-size: 26px;
  font-weight: 900;
  font-family: var(--font-mono);
  color: #0f172a;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.radar-clock-val.local-val {
  color: #0f172a;
}

.radar-clock-hint {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
  margin-top: 4px;
}

/* Active Session Hero Cockpit Card */
.radar-hero-active-card {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 130px !important;
  height: auto !important;
  padding: 22px 26px !important;
  border-radius: 14px;
  margin: 18px 0 24px 0 !important;
  position: relative;
  overflow: visible !important;
  flex-shrink: 0 !important;
  box-sizing: border-box;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, #ffffff 100%);
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.radar-hero-active-card.active {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, #ffffff 60%, rgba(220, 38, 38, 0.02) 100%);
  border: 2px solid var(--hero-accent, #dc2626);
  box-shadow: 0 10px 30px -8px rgba(220, 38, 38, 0.18), 0 0 0 1px rgba(220, 38, 38, 0.1);
}

.radar-hero-active-card.weekend {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #cbd5e1;
}

.radar-hero-active-card.idle {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border: 1.5px solid #e2e8f0;
}

.radar-hero-left {
  flex: 1;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px;
}

.radar-hero-badge-row {
  display: flex !important;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.radar-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 9px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.radar-live-pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: pillBlink 1.5s ease infinite;
}

@keyframes pillBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.radar-live-pill.active {
  background: #dc2626;
  color: #ffffff;
}

.radar-live-pill.closed {
  background: #64748b;
  color: #ffffff;
}

.radar-live-pill.idle {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.radar-vol-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.radar-vol-pill.high {
  background: #fee2e2;
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.3);
}

.radar-vol-pill.medium {
  background: #fef3c7;
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.3);
}

.radar-vol-pill.low {
  background: #f1f5f9;
  color: #475569;
}

.radar-session-type-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2.5px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.radar-hero-title-row {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0;
  flex-shrink: 0;
}

.radar-hero-icon {
  font-size: 24px !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.radar-active-title {
  font-size: 21px !important;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.3px;
  margin: 0;
  line-height: 1.25;
}

.radar-hero-desc-box {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 8px 14px !important;
  border-radius: 8px;
  display: block;
  max-width: 580px;
}

.radar-directive-tag {
  font-size: 9.5px !important;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #dc2626;
  display: block;
  margin-bottom: 3px;
  line-height: 1;
}

.radar-active-desc {
  font-size: 12px !important;
  color: #475569;
  margin: 0;
  line-height: 1.45;
}

.radar-hero-countdown-wrap {
  text-align: right;
  min-width: 220px !important;
  min-height: 100px !important;
  height: auto !important;
  flex-shrink: 0 !important;
  background: #ffffff;
  padding: 14px 20px !important;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box;
}

.radar-countdown-meta {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px !important;
  gap: 8px;
  flex-shrink: 0;
  line-height: 1.2;
}

.radar-countdown-label {
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #64748b;
  text-transform: uppercase;
  white-space: nowrap;
}

.radar-progress-pct {
  font-size: 11px !important;
  font-weight: 800;
  color: #dc2626;
}

.radar-countdown-digits {
  font-size: 34px !important;
  font-weight: 900;
  font-family: var(--font-mono);
  color: #dc2626;
  letter-spacing: 1.5px;
  line-height: 1.15 !important;
  margin: 2px 0 8px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.radar-progress-bar-track {
  width: 100%;
  height: 6px !important;
  min-height: 6px !important;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0 !important;
}

.radar-progress-bar-fill {
  height: 100%;
  background: #dc2626;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Sections in Radar Modal */
.radar-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border-subtle);
  margin-bottom: 14px;
}

.radar-sec-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.radar-sec-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #0f172a;
}

.radar-sec-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.radar-sec-legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-chip {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-chip.active {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.legend-chip.active .chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #dc2626;
}

.legend-chip.upcoming {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.legend-chip.inactive {
  background: transparent;
  color: #94a3b8;
}

.legend-chip.sniper {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.15);
}

/* 4 Major Sessions Grid */
.radar-sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.radar-card {
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
  position: relative;
}

.radar-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
}

.radar-card.active {
  border-color: var(--session-accent, #dc2626);
  background: linear-gradient(145deg, #ffffff 0%, rgba(220, 38, 38, 0.03) 100%);
  box-shadow: 0 8px 24px -4px rgba(220, 38, 38, 0.15), 0 0 0 1px var(--session-accent, #dc2626);
}

.radar-card.upcoming {
  border-color: #cbd5e1;
  background: #ffffff;
}

.radar-card.weekend-closed {
  opacity: 0.85;
  background: #fafafa;
  border-color: #e2e8f0;
}

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

.radar-card-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.radar-card-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.radar-card-name {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radar-card-status-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.radar-card-status-pill.active {
  background: var(--session-accent, #dc2626);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.radar-card-status-pill.active .pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  animation: pillBlink 1.5s ease infinite;
}

.radar-card-status-pill.upcoming {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

.radar-card-status-pill.idle {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.radar-card-status-pill.weekend {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.radar-card-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.radar-strategy-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.05);
  color: #334155;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.radar-card-vol {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}

.radar-card-vol.high {
  background: #fee2e2;
  color: #b91c1c;
}

.radar-card-vol.medium {
  background: #fef3c7;
  color: #b45309;
}

.radar-card-vol.low {
  background: #f1f5f9;
  color: #475569;
}

.radar-card-timing {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.radar-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.radar-time-row .time-label {
  font-size: 9.5px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.3px;
}

.radar-time-row .time-val {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
}

.radar-time-row.local-row .time-val {
  color: #059669;
  font-weight: 800;
}

.radar-card-countdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.countdown-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: #0f172a;
}

.countdown-badge.active {
  color: var(--session-accent, #dc2626);
}

.countdown-badge.upcoming {
  color: #2563eb;
}

.countdown-badge.weekend {
  color: #64748b;
}

.progress-num {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--session-accent, #dc2626);
}

.radar-card-progress-track {
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.radar-card-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.radar-card-rule {
  font-size: 11px;
  color: #64748b;
  line-height: 1.45;
  margin-top: 2px;
  display: flex;
  gap: 5px;
}

.radar-card-rule .rule-bullet {
  color: var(--session-accent, #dc2626);
  font-weight: 800;
  flex-shrink: 0;
}

/* ICT Silver Bullet Grid */
.radar-silver-bullet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.radar-sb-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}

.radar-sb-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
}

.radar-sb-card.active {
  border-color: var(--sb-accent, #2563eb);
  background: linear-gradient(145deg, #ffffff 0%, rgba(37, 99, 235, 0.04) 100%);
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.15), 0 0 0 1px var(--sb-accent, #2563eb);
}

.radar-sb-card.weekend-closed {
  opacity: 0.85;
  background: #fafafa;
}

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

.sb-card-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sb-card-icon {
  font-size: 14px;
}

.sb-card-title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.sb-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}

.sb-badge.active {
  background: #dc2626;
  color: #ffffff;
}

.sb-badge.idle {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.sb-badge.closed {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.sb-time-dual {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sb-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
}

.sb-time-lbl {
  font-size: 9px;
  font-weight: 800;
  color: #64748b;
}

.sb-ny {
  font-weight: 700;
  color: #0f172a;
}

.sb-local {
  color: #059669;
  font-weight: 800;
}

.sb-countdown {
  font-size: 12px;
  font-weight: 800;
  color: #dc2626;
}

.sb-rule {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

/* Radar Modal Footer */
.radar-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1.5px solid var(--border-subtle);
  margin-top: 22px;
  gap: 16px;
  flex-wrap: wrap;
}

.radar-footer-left {
  display: flex;
  align-items: center;
}

.radar-chime-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.radar-chime-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chime-toggle-slider {
  position: relative;
  width: 38px;
  height: 22px;
  background: #cbd5e1;
  border-radius: 20px;
  transition: all 0.25s ease;
  display: inline-block;
  flex-shrink: 0;
}

.chime-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  top: 3px;
  left: 3px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.radar-chime-toggle input:checked + .chime-toggle-slider {
  background: #dc2626;
}

.radar-chime-toggle input:checked + .chime-toggle-slider::before {
  transform: translateX(16px);
}

.chime-toggle-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
}

.radar-footer-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.radar-footer-note {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.btn-radar-close {
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-radar-close:hover {
  background: #dc2626;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
  transform: translateY(-1px);
}

/* Responsive Styles for Radar Modal */
@media (max-width: 768px) {
  .modal-session-radar-box {
    padding: 18px 16px;
    width: 96%;
  }

  .radar-modal-title {
    font-size: 17px;
  }

  .radar-clocks-bar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .radar-hero-active-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .radar-hero-countdown-wrap {
    width: 100%;
    text-align: left;
  }

  .radar-countdown-meta {
    justify-content: space-between;
  }

  .radar-sessions-grid {
    grid-template-columns: 1fr;
  }

  .radar-silver-bullet-grid {
    grid-template-columns: 1fr;
  }

  .radar-modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .radar-footer-right {
    width: 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   INSTITUTIONAL EQUITY CURVE & DRAWDOWN CHART
   (ApexTrader OS Theme Matched - Red & White Swiss Minimalist)
   ========================================================================== */

.home-equity-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.home-equity-card:hover {
  border-color: var(--border-medium);
}

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

.equity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  background: var(--red-bg-subtle);
  border: 1px solid var(--red-border);
  color: var(--red-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.equity-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}

.equity-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

.equity-controls-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.equity-pill-group {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--bg-app);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.equity-mode-pill,
.equity-period-pill {
  padding: 5px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition);
}

.equity-mode-pill:hover,
.equity-period-pill:hover {
  color: var(--text-pure);
  background: var(--bg-surface);
}

.equity-mode-pill.active,
.equity-period-pill.active {
  background: var(--red-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px var(--red-glow);
}

.equity-toggles-row {
  display: inline-flex;
  gap: 5px;
}

.equity-toggle-btn {
  padding: 5px 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition);
}

.equity-toggle-btn:hover {
  border-color: var(--border-medium);
  color: var(--text-pure);
}

.equity-toggle-btn.active {
  background: var(--red-bg-subtle);
  border-color: var(--red-border);
  color: var(--red-primary);
}

/* Metrics Ribbon */
.equity-metrics-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 10px;
  padding: 14px 18px;
  background: var(--bg-app);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.eq-metric-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.eq-metric-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.eq-metric-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-pure);
  white-space: nowrap;
}

/* Chart Viewport */
.equity-chart-viewport {
  position: relative;
  width: 100%;
  min-height: 320px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.equity-svg-canvas {
  width: 100%;
  height: auto;
  display: block;
}

.eq-grid-line {
  stroke: var(--border-subtle);
  stroke-dasharray: 4, 4;
}

.eq-axis-label {
  font-size: 10px;
  fill: var(--text-dim);
  font-weight: 600;
}

.eq-baseline-line {
  stroke: var(--border-strong);
  stroke-width: 1.2;
}

.eq-baseline-label {
  font-size: 9px;
  font-weight: 800;
  fill: var(--text-dim);
  letter-spacing: 0.5px;
}

.eq-line-path {
  filter: drop-shadow(0 2px 6px rgba(5, 150, 105, 0.25));
}

.eq-trade-dot {
  cursor: pointer;
  transition: r 0.15s ease, stroke-width 0.15s ease;
}

.eq-trade-dot:hover {
  r: 7;
  stroke: #ffffff;
  stroke-width: 3;
}

.eq-drawdown-section line.eq-dd-zeroline {
  stroke: var(--red-border);
  stroke-dasharray: 2, 2;
}

.eq-section-subheading {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  fill: var(--red-primary);
  opacity: 0.9;
}

.eq-crosshair-line {
  stroke: var(--text-dim);
  stroke-width: 1.2;
}

/* Tooltip Card */
.equity-tooltip-card {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-width: 220px;
  box-shadow: var(--shadow-elevated);
  transition: transform 0.05s ease-out;
  color: var(--text-pure);
}

.eq-tt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.eq-tt-id {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-pure);
}

.eq-tt-res {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
}

.eq-tt-res.profit {
  background: rgba(5, 150, 105, 0.15);
  color: var(--accent-emerald);
}

.eq-tt-res.loss {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.eq-tt-res.be {
  background: var(--bg-app);
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
}

.eq-tt-pair {
  font-size: 11px;
  color: var(--red-primary);
  font-weight: 700;
}

.eq-tt-date {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.eq-tt-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 6px 0;
}

.eq-tt-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 3px;
}

.eq-tt-row .lbl {
  color: var(--text-dim);
}

.eq-tt-row .val {
  color: var(--text-pure);
}

.badge-archetype {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.equity-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.equity-empty-state .empty-icon {
  font-size: 38px;
  margin-bottom: 8px;
  opacity: 0.6;
}

.equity-empty-state .empty-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 0 0 4px;
}

.equity-empty-state .empty-desc {
  font-size: 12px;
  color: var(--text-dim);
  max-width: 380px;
  margin: 0;
}

@media (max-width: 800px) {
  .dash-session-radar-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .dash-session-center {
    width: 100%;
    align-items: flex-start;
  }
}

/* ==========================================================================
   DAILY PRE-SESSION CHECKLIST CONSOLE (SWISS MINIMALIST RED & WHITE)
   ========================================================================== */
.dash-pre-session-card {
  margin-top: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}

.dash-pre-session-card:hover {
  border-color: var(--border-medium);
}

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

.dash-pre-session-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pre-session-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red-bg-subtle);
  border: 1px solid var(--red-border);
  color: var(--red-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
}

.pre-session-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 2px 0 0 0;
  letter-spacing: -0.3px;
}

.pre-session-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

.dash-pre-session-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pre-session-selector-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-app);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.pre-session-sel-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.pre-session-select {
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-pure);
  outline: none;
  cursor: pointer;
}

.pre-session-streak-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #c2410c;
  font-size: 12px;
  font-weight: 800;
}


.dash-checkpoints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.dash-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.dash-check-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--red-border);
}

.dash-pre-chk {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dash-chk-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border-medium);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
  transition: var(--transition);
  margin-top: 1px;
}

.dash-check-item:has(.dash-pre-chk:checked) {
  background: var(--red-bg-subtle);
  border-color: var(--red-border);
}

.dash-check-item:has(.dash-pre-chk:checked) .dash-chk-box {
  background: var(--red-primary);
  border-color: var(--red-primary);
  color: #ffffff;
}

.dash-chk-content {
  flex: 1;
}

.dash-chk-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.dash-chk-idx {
  font-size: 11px;
  font-weight: 800;
  color: var(--red-primary);
}

.dash-chk-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-pure);
}

.dash-chk-link-btn {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
  cursor: pointer;
  transition: var(--transition);
}

.dash-chk-link-btn:hover {
  background: var(--red-primary);
  color: #ffffff;
}

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

.dash-pre-session-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 16px;
}

.readiness-meter-col {
  display: flex;
  align-items: center;
  gap: 16px;
}

.readiness-ring-wrap {
  width: 52px;
  height: 52px;
  position: relative;
}

.readiness-score-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(var(--red-primary) var(--readiness-pct, 0%), var(--border-subtle) 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.3s ease;
}

.readiness-score-ring::before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  position: absolute;
}

.readiness-pct-digits {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-pure);
}

.readiness-text-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.readiness-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.readiness-status-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.readiness-status-badge.status-standdown {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.readiness-status-badge.status-caution {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}


.readiness-status-badge.status-cleared {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}


.readiness-ratio {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.readiness-advice {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
}

.readiness-actions-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-dash-save-routine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--red-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--red-glow);
  transition: var(--transition);
}

.btn-dash-save-routine:hover {
  background: var(--red-crimson);
  transform: translateY(-1px);
}

.btn-dash-save-routine:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.link-open-full-routine {
  font-size: 12px;
  font-weight: 700;
  color: var(--red-primary);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--red-border);
  background: var(--red-bg-subtle);
  transition: var(--transition);
}

.link-open-full-routine:hover {
  background: var(--red-bg-hover);
  border-color: var(--red-primary);
}


/* ==========================================================================
   ECONOMIC CALENDAR & RED-FOLDER RADAR WIDGET
   ========================================================================== */
.dash-economic-calendar-card {
  margin-top: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}

.dash-economic-calendar-card.highlight-glow {
  box-shadow: 0 0 0 3px var(--red-primary), 0 10px 25px var(--red-glow) !important;
}

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

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

.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red-bg-subtle);
  border: 1px solid var(--red-border);
  color: var(--red-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
}

.eco-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 2px 0 0 0;
  letter-spacing: -0.3px;
}

.eco-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

.eco-controls-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.eco-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eco-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.eco-refresh-btn:hover {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border-color: var(--red-border);
}

.eco-refresh-btn.spinning .refresh-spin-icon {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.eco-red-summary-pill {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--red-bg-subtle);
  border: 1px solid var(--red-border);
  color: var(--red-primary);
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
}

.eco-pill-group {
  display: flex;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.eco-day-pill,
.eco-curr-pill,
.eco-impact-pill {
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
}

.eco-day-pill:hover,
.eco-curr-pill:hover,
.eco-impact-pill:hover {
  color: var(--text-pure);
}

.eco-day-pill.active,
.eco-curr-pill.active,
.eco-impact-pill.active {
  background: var(--bg-card);
  color: var(--red-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.eco-imminent-alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-md);
  color: var(--red-primary);
  margin-bottom: 14px;
}


.alert-icon-wrap {
  font-size: 18px;
  flex-shrink: 0;
}

.alert-text-wrap {
  font-size: 13px;
  line-height: 1.4;
}

.eco-fallback-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid #3b82f6;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.2px;
}


.eco-table-header-row {
  display: grid;
  grid-template-columns: 135px 80px 90px 1fr 200px 115px 32px;
  gap: 12px;
  padding: 9px 14px;
  background: var(--bg-app);
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.eco-events-list-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 178px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.eco-events-list-container.has-expanded {
  max-height: 400px;
}

.eco-events-list-container::-webkit-scrollbar {
  width: 6px;
}

.eco-events-list-container::-webkit-scrollbar-track {
  background: var(--bg-app);
  border-radius: 4px;
}

.eco-events-list-container::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 4px;
}

.eco-events-list-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

.eco-event-item {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.eco-event-item.is-expanded {
  border: 1px solid rgba(59, 130, 246, 0.4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  background: var(--bg-card);
  margin: 4px 0;
}

.eco-event-row {
  display: grid;
  grid-template-columns: 135px 80px 90px 1fr 200px 115px 32px;
  gap: 12px;
  padding: 10px 14px;
  min-height: 52px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  transition: var(--transition);
  cursor: pointer;
  user-select: none;
}

.eco-event-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.eco-event-item.is-expanded > .eco-event-row {
  background: rgba(59, 130, 246, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.eco-event-row.is-imminent {
  background: var(--red-bg-subtle);
  border-left: 3px solid var(--red-primary);
}

.eco-event-row.is-live {
  background: #fef2f2;
  border-left: 3px solid var(--red-primary);
  animation: subtle-pulse 1.5s infinite;
}

.eco-col-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eco-time-ny {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-pure);
}

.eco-time-local {
  font-size: 11px;
  color: var(--text-dim);
}

.eco-col-flag {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eco-flag {
  font-size: 16px;
}

.eco-currency {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-pure);
}

.eco-col-impact {
  display: flex;
  align-items: center;
}

.eco-impact-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.eco-impact-badge.impact-high {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.eco-impact-badge.impact-med {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}


.eco-impact-badge.impact-low {
  background: var(--bg-app);
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
}

.eco-col-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-pure);
  padding-right: 12px;
}

.eco-col-metrics {
  display: flex;
  gap: 12px;
  align-items: center;
}

.eco-metric-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.eco-metric-cell .m-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
}

.eco-metric-cell .m-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.eco-metric-cell .m-val.actual.has-actual {
  font-weight: 800;
  color: var(--text-pure);
}

.eco-metric-cell .m-val.actual.actual-beat {
  color: #10b981;
  font-weight: 800;
}

.eco-metric-cell .m-val.actual.actual-miss {
  color: #ef4444;
  font-weight: 800;
}

.eco-metric-cell .m-val.actual.actual-neutral {
  color: var(--text-pure);
  font-weight: 700;
}

.eco-col-countdown {
  display: flex;
  justify-content: flex-end;
}

.eco-countdown-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
}

.eco-countdown-badge.live {
  background: var(--red-primary);
  color: #ffffff;
}

.eco-countdown-badge.imminent {
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
}

.eco-countdown-badge.upcoming {
  background: var(--bg-app);
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
}

.eco-countdown-badge.released {
  background: var(--bg-app);
  color: var(--text-dim);
  opacity: 0.6;
}

.eco-countdown-badge.scheduled {
  background: var(--bg-app);
  color: var(--text-dim);
}

.eco-col-expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.eco-expand-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.eco-expand-btn:hover,
.eco-event-row:hover .eco-expand-btn {
  color: var(--text-pure);
  border-color: var(--text-muted);
  background: rgba(255, 255, 255, 0.08);
}

.eco-expand-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #3b82f6;
}

/* Unfolded Scenario Analysis Drawer (Website Theme) */
.eco-event-drawer {
  background: var(--bg-app);
  border-top: 1px solid var(--border-subtle);
  padding: 10px 14px 12px 14px;
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: ecoDrawerFadeIn 0.2s ease-out;
}

@keyframes ecoDrawerFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.eco-realized-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid #64748b;
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  flex-wrap: wrap;
}

.eco-realized-banner.theme-green {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.06);
}

.eco-realized-banner.theme-red {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

.eco-realized-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-pure);
}

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

.eco-realized-text strong {
  color: var(--text-pure);
}

.eco-materialized-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--border-subtle);
  color: var(--text-pure);
  width: fit-content;
  margin-bottom: 2px;
}

.eco-simple-card.is-materialized {
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.eco-simple-card.theme-green.is-materialized .eco-materialized-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.eco-simple-card.theme-red.is-materialized .eco-materialized-badge {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.eco-simple-explainer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  color: var(--text-muted);
}

.eco-simple-bulb {
  font-size: 14px;
}

.eco-simple-text {
  line-height: 1.4;
  color: var(--text-muted);
  font-weight: 500;
}

.eco-simple-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 768px) {
  .eco-simple-grid {
    grid-template-columns: 1fr;
  }
}

.eco-simple-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: var(--transition);
}

.eco-simple-card.theme-green {
  border-left: 3px solid #10b981;
}

.eco-simple-card.theme-red {
  border-left: 3px solid #ef4444;
}

.eco-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 5px;
}

.eco-cond-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text-dim);
}

.eco-curr-result {
  font-size: 11px;
  font-weight: 800;
}

.eco-curr-result.up {
  color: #10b981;
}

.eco-curr-result.down {
  color: #ef4444;
}

.eco-pairs-list {
  display: flex;
  gap: 10px;
}

.eco-pair-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  padding: 5px 9px;
  border-radius: 4px;
}

.eco-pair-item .pair-name {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-pure);
}

.pair-arrow {
  font-size: 11px;
  font-weight: 800;
}

.pair-arrow.up {
  color: #10b981;
}

.pair-arrow.down {
  color: #ef4444;
}

.pair-arrow.neutral {
  color: var(--text-dim);
}

.eco-empty-state,
.eco-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  text-align: center;
}

.eco-empty-state .empty-icon {
  font-size: 32px;
  margin-bottom: 6px;
  opacity: 0.6;
}

.eco-empty-state .empty-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-pure);
  margin: 0 0 4px 0;
}

.eco-empty-state .empty-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
}

.btn-eco-suggest {
  margin-top: 12px;
  padding: 7px 16px;
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-eco-suggest:hover {
  background: var(--red-primary);
  color: #ffffff;
}

.eco-retry-text {
  cursor: pointer;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.eco-retry-text:hover {
  color: var(--red-primary);
  text-decoration: underline;
}

.eco-unreachable-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn-eco-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--red-primary);
  color: #ffffff;
  border: 1px solid var(--red-primary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-eco-retry:hover {
  background: var(--red-hover, #dc2626);
}

.btn-eco-ff-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--bg-surface);
  color: var(--text-pure);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-eco-ff-link:hover {
  border-color: var(--text-muted);
  color: #ffffff;
}

/* Routine Calendar Trigger and Drawer */
.btn-routine-inspect-calendar {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--red-bg-subtle);
  color: var(--red-primary);
  border: 1px solid var(--red-border);
  cursor: pointer;
  transition: var(--transition);
}

.btn-routine-inspect-calendar:hover,
.btn-routine-inspect-calendar.active {
  background: var(--red-primary);
  color: #ffffff;
}

.routine-calendar-drawer {
  margin: 12px 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--red-border);
  background: var(--bg-card);
  padding: 12px;
}

@media (max-width: 900px) {
  .eco-table-header-row,
  .eco-event-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .eco-col-title {
    grid-column: span 2;
  }
  .eco-col-metrics {
    grid-column: span 2;
  }
}

/* ==========================================================================
   FOREX SIGNAL NOTIFICATION PREFERENCES & TOOLBAR TOGGLE (SWISS MINIMALIST)
   ========================================================================== */

/* Toolbar Notification Settings Button */
.action-btn.action-notif {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  color: var(--text-pure, #0f172a);
  border: 1.5px solid var(--border-medium, #cbd5e1);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  user-select: none;
}

.action-btn.action-notif:hover {
  background: #f8fafc;
  border-color: var(--red-primary, #dc2626);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
  transform: translateY(-1px);
}

.action-btn.action-notif.is-muted {
  background: #f8fafc;
  border-color: var(--border-subtle, #e2e8f0);
  color: var(--text-muted, #64748b);
}

.action-btn.action-notif.is-muted:hover {
  border-color: var(--red-border, #fca5a5);
  color: var(--text-pure, #0f172a);
}

.notif-btn-icon {
  font-size: 13px;
  line-height: 1;
}

.notif-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.2s ease;
}

.notif-status-dot.active {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: notifDotPulse 2s infinite ease-in-out;
}

.notif-status-dot.muted {
  background: #94a3b8;
  box-shadow: none;
}

@keyframes notifDotPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Notification Preferences Modal Dialog */
.modal-signal-notif-box {
  width: 100% !important;
  max-width: 540px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-top: 4px solid #dc2626 !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(220, 38, 38, 0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  animation: notifModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes notifModalPop {
  from { opacity: 0; transform: scale(0.96) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.notif-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 22px !important;
  border-bottom: 1.5px solid #f1f5f9 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.notif-modal-header .modal-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.modal-title-icon-badge {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #fef2f2 !important;
  border: 1px solid #fee2e2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.notif-modal-header .modal-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.notif-modal-header .modal-sub {
  font-size: 12px !important;
  color: #64748b !important;
  margin: 3px 0 0 0 !important;
  line-height: 1.3 !important;
}

.notif-modal-header .modal-x-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.notif-modal-header .modal-x-btn:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}

.notif-prefs-body {
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* Master Banner Card */
.notif-master-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left: 5px solid #dc2626 !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.notif-master-card.muted-mode {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  border-left-color: #94a3b8 !important;
}

.notif-master-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}

.notif-master-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  flex-shrink: 0 !important;
}

.notif-master-text {
  flex: 1 !important;
}

.notif-master-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 2px 0 !important;
}

.notif-master-desc {
  font-size: 12px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* Quick Actions Bar */
.notif-quick-actions {
  display: flex !important;
  gap: 10px !important;
}

.btn-notif-quick {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-notif-quick:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.notif-sub-settings {
  transition: opacity 0.25s ease !important;
}

.notif-section-label {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  color: #64748b !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

.notif-pref-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.notif-pref-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.notif-pref-item:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.pref-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}

.pref-item-icon {
  font-size: 20px !important;
  line-height: 1 !important;
  width: 28px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.pref-item-text {
  flex: 1 !important;
}

.pref-item-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
}

.pref-item-sub {
  font-size: 11px !important;
  color: #64748b !important;
  margin-top: 2px !important;
  line-height: 1.35 !important;
}

.pref-item-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.btn-pref-test {
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-pref-test:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Rounded Toggle Switches */
.switch-toggle {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

.switch-toggle input[type="checkbox"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  margin: 0 !important;
}

.slider-round {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #cbd5e1 !important;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 34px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.slider-round:before {
  position: absolute !important;
  content: "" !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: #ffffff !important;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

.switch-toggle input[type="checkbox"]:checked + .slider-round {
  background-color: #dc2626 !important;
}

.switch-toggle input[type="checkbox"]:checked + .slider-round:before {
  transform: translateX(20px) !important;
}

.switch-toggle.switch-master {
  width: 52px !important;
  height: 28px !important;
}

.switch-toggle.switch-master .slider-round:before {
  height: 22px !important;
  width: 22px !important;
  left: 3px !important;
  bottom: 3px !important;
}

.switch-toggle.switch-master input[type="checkbox"]:checked + .slider-round:before {
  transform: translateX(24px) !important;
}

/* Heads-up Card Controls (Top Bar Mute Action) */
.heads-up-top-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.heads-up-mute-btn {
  background: transparent !important;
  border: 1px solid var(--border-subtle, #e2e8f0) !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-dim, #64748b) !important;
  padding: 2px 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.heads-up-mute-btn:hover {
  background: var(--red-bg-subtle, #fef2f2) !important;
  color: var(--red-primary, #dc2626) !important;
  border-color: var(--red-border, #fca5a5) !important;
}

/* Modal Footer */
.notif-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 22px !important;
  background: #f8fafc !important;
  border-top: 1.5px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.notif-footer-hint {
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

.btn-notif-done {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 8px 24px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35) !important;
  transition: all 0.2s ease !important;
}

.btn-notif-done:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.45) !important;
}

/* ==========================================================================
   HYBRID COMMUNITY FORUM & LIVE TRADING FLOOR CHAT (OPTION 3)
   ========================================================================== */

/* Guaranteed Page Scrolling Override for Community Hub */
html:has(body[data-page="community"]),
body[data-page="community"],
body.apex-light[data-page="community"] {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

body[data-page="community"]::-webkit-scrollbar {
  width: 10px !important;
}
body[data-page="community"]::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}
body[data-page="community"]::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 6px !important;
  border: 2px solid #f1f5f9 !important;
}
body[data-page="community"]::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

.community-page-main {
  max-width: 1560px;
  margin: 0 auto;
  padding: 24px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* 1. Header Block */
.community-header-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--red-primary, #dc2626);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.community-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.community-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--red-primary, #dc2626);
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  padding: 3px 9px;
  border-radius: 6px;
  align-self: flex-start;
}

.badge-dot-pulse {
  width: 7px;
  height: 7px;
  background: #dc2626;
  border-radius: 50%;
  animation: pulseDot 1.5s infinite;
}

.community-title {
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0;
}

.community-subtitle {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  max-width: 680px;
  line-height: 1.45;
}

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

.community-hero-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comm-stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  min-width: 65px;
}

.csp-val {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.csp-val.text-emerald {
  color: #059669 !important;
}

.csp-val.text-red {
  color: var(--red-primary, #dc2626) !important;
}

.csp-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748b;
}

.btn-community-create {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-primary, #dc2626);
  border: 1px solid var(--red-primary, #dc2626);
  color: #ffffff;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.28);
  white-space: nowrap;
}

.btn-community-create:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.btn-community-create .btn-icon {
  font-size: 17px;
  line-height: 1;
}

/* 2. Grid Layout */
.community-layout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 22px;
  align-items: start;
}

@media (max-width: 1100px) {
  .community-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* 3. Forum Section */
.community-forum-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Category Filter Bar */
.community-category-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.community-category-bar::-webkit-scrollbar {
  display: none;
}

.comm-cat-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.comm-cat-pill:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.comm-cat-pill.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

/* Toolbar & Search */
.community-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #ffffff;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.comm-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 12px;
  color: #64748b;
  position: relative;
}

.comm-search-wrap input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: #0f172a;
  width: 100%;
}

.comm-search-clear {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

.comm-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.comm-sort-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.comm-sort-select {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  cursor: pointer;
}

/* Topics Feed */
.community-topics-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comm-loading-placeholder,
.comm-empty-state,
.comm-error-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: #ffffff;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  text-align: center;
  color: #64748b;
}

.ces-icon {
  font-size: 38px;
  margin-bottom: 8px;
}

.ces-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
}

.ces-desc {
  font-size: 13px;
  color: #64748b;
  max-width: 420px;
  margin: 0 0 16px;
  line-height: 1.45;
}

.btn-comm-action-empty {
  background: #0f172a;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
}

/* Topic Card */
.forum-topic-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.forum-topic-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.forum-topic-card.is-solved {
  border-left: 3.5px solid #059669;
}

.ftc-upvote-col {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.btn-card-upvote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 48px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-card-upvote:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}

.btn-card-upvote.active {
  background: #fee2e2;
  border-color: #fca5a5;
  color: var(--red-primary, #dc2626);
}

.bcu-arrow {
  font-size: 12px;
  line-height: 1;
}

.bcu-count {
  font-size: 11.5px;
  font-weight: 800;
}

.ftc-main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

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

.ftc-badges-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ftc-cat-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.ftc-solved-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.ftc-has-chart-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.ftc-time-text {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.ftc-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
  transition: color 0.15s ease;
}

.forum-topic-card:hover .ftc-title {
  color: var(--red-primary, #dc2626);
}

.ftc-excerpt {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ftc-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #f8fafc;
}

.ftc-author-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ftc-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ftc-author-name {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.ftc-role-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.role-admin {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.role-trader {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.ftc-meta-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #64748b;
}

/* ==========================================
   4. Live Trading Floor Chat Dock
   ========================================== */
.community-chat-dock {
  display: flex;
  flex-direction: column;
}

.chat-dock-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  /* Compact & adaptive: guarantees the chat entry box is NEVER pushed below the fold */
  height: min(450px, calc(100vh - 210px));
  max-height: 460px;
  min-height: 310px;
  position: sticky;
  top: 72px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  box-sizing: border-box;
}

.chat-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
}

.cdh-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cdh-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--red-primary, #dc2626);
}

.badge-dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  animation: pulseDot 1.5s infinite;
}

.cdh-title {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
}

.cdh-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-online-pill {
  font-size: 10px;
  font-weight: 800;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 2px 6px;
  border-radius: 4px;
}

.btn-chat-sound-toggle,
.btn-chat-purge-toggle {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-chat-sound-toggle:hover {
  background: #f1f5f9;
}

.btn-chat-purge-toggle:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}

.btn-chat-purge-toggle.hidden {
  display: none !important;
}

/* Quick Tickers Bar */
.chat-quick-tickers {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}

.chat-quick-tickers::-webkit-scrollbar {
  display: none;
}

.cqt-lbl {
  font-size: 9.5px;
  font-weight: 800;
  color: #94a3b8;
  white-space: nowrap;
}

.cqt-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1.5px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}

.cqt-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

/* Messages Scroll */
.chat-messages-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 10px 12px;
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
}

.chat-loading-notice,
.chat-empty-notice {
  text-align: center;
  color: #94a3b8;
  font-size: 11.5px;
  padding: 24px 10px;
}

.chat-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.chat-msg-row.is-self {
  flex-direction: row-reverse;
}

.cmr-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cmr-bubble {
  max-width: 82%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.chat-msg-row.is-self .cmr-bubble {
  background: #fef2f2;
  border-color: #fecaca;
}

.cmr-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cmr-name {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
}

.cmr-role {
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
}

.cmr-time {
  font-size: 9.5px;
  color: #94a3b8;
  margin-left: auto;
}

.btn-chat-delete-msg {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 10px;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 3px;
  margin-left: 2px;
  transition: all 0.12s ease;
  line-height: 1;
}

.btn-chat-delete-msg:hover {
  color: #dc2626;
  background: #fee2e2;
}

.cmr-text {
  font-size: 12px;
  color: #1e293b;
  line-height: 1.35;
  word-break: break-word;
}

.chat-ticker-tag {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 800;
  display: inline-block;
}

/* Chat Input Row - Fixed at bottom of card */
.chat-input-form {
  padding: 8px 10px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0 !important;
}

.chat-input-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 3px 5px 3px 9px;
  transition: border-color 0.15s ease;
}

.chat-input-wrapper:focus-within {
  border-color: var(--red-primary, #dc2626);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.chat-text-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  color: #0f172a;
}

.btn-chat-send {
  background: #0f172a;
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-chat-send:hover {
  background: var(--red-primary, #dc2626);
  transform: scale(1.05);
}

/* ==========================================
   5. Modals & Detail Dialog
   ========================================== */
.modal-topic-dialog,
.modal-detail-dialog {
  max-width: 860px;
  width: min(860px, 94vw);
  height: 88vh;
  max-height: 88vh;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-top: 4px solid var(--red-primary, #dc2626);
  border-radius: 16px;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: modalChecklistZoom 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.comm-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 26px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.cmh-title-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmh-title {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
}

.cmh-subtitle {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}

.comm-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 22px 28px;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 #f8fafc !important;
  box-sizing: border-box;
}

.comm-modal-body::-webkit-scrollbar {
  width: 9px !important;
  display: block !important;
}

.comm-modal-body::-webkit-scrollbar-track {
  background: #f8fafc !important;
  border-left: 1px solid #e2e8f0 !important;
}

.comm-modal-body::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 6px !important;
  border: 2px solid #f8fafc !important;
}

.comm-modal-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

.form-group-custom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.form-label-custom {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}

.form-input-custom,
.form-select-custom,
.form-textarea-custom {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 15px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0f172a;
  transition: all 0.15s ease;
  outline: none;
}

.form-input-custom:focus,
.form-select-custom:focus,
.form-textarea-custom:focus {
  border-color: var(--red-primary, #dc2626);
  box-shadow: 0 0 0 3.5px rgba(220, 38, 38, 0.12);
}

.form-textarea-custom {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}

.form-row-split {
  display: flex;
  gap: 14px;
}

.flex-1 {
  flex: 1;
}

.comm-file-upload-box {
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.comm-file-upload-box:hover,
.comm-file-upload-box.drag-over {
  background: #eff6ff;
  border-color: #93c5fd;
}

.cfu-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #64748b;
}

.cfu-main {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

.cfu-sub {
  font-size: 11px;
  color: #94a3b8;
}

.cfu-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cfu-preview-wrap img {
  max-height: 180px;
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.btn-remove-preview {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.comm-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 26px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.btn-modal-cancel {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #64748b;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
}

.btn-modal-submit {
  background: var(--red-primary, #dc2626);
  border: 1px solid var(--red-primary, #dc2626);
  color: #ffffff;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
}

.btn-modal-submit:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-1px);
}

/* Detail View */
.detail-header {
  padding: 14px 24px;
}

.cmd-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topic-cat-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.topic-solved-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 5px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.topic-date-text {
  font-size: 12px;
  color: #94a3b8;
}

.modal-detail-scroll-area {
  padding: 22px 28px;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 #f8fafc !important;
  box-sizing: border-box !important;
}

.modal-detail-scroll-area::-webkit-scrollbar {
  width: 9px !important;
  display: block !important;
}

.modal-detail-scroll-area::-webkit-scrollbar-track {
  background: #f8fafc !important;
  border-left: 1px solid #e2e8f0 !important;
}

.modal-detail-scroll-area::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 6px !important;
  border: 2px solid #f8fafc !important;
}

.modal-detail-scroll-area::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

.detail-main-question {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  border-bottom: 1.5px solid #f1f5f9;
  padding-bottom: 20px;
}

.dmq-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.author-avatar-wrap {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.dmq-author-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  margin-left: 10px;
}

.dmq-author-name {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.dmq-role-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.dmq-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-comm-upvote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #475569;
}

.btn-comm-upvote:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: var(--red-primary, #dc2626);
}

.btn-comm-upvote.active {
  background: #fee2e2;
  border-color: #fca5a5;
  color: var(--red-primary, #dc2626);
}

.btn-topic-delete {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-topic-delete:hover {
  background: #fee2e2;
}

.dmq-title {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
}

.dmq-tags-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dmq-tag {
  font-size: 11px;
  font-weight: 800;
  color: #0369a1;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  padding: 1px 7px;
  border-radius: 4px;
}

.dmq-content {
  font-size: 14px;
  color: #334155;
  line-height: 1.6;
}

.dmq-chart-preview img {
  max-width: 100%;
  max-height: 380px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  cursor: zoom-in;
}

/* Replies Section */
.detail-replies-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drd-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.detail-replies-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-empty-replies {
  padding: 24px;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  font-size: 13px;
  color: #64748b;
}

.detail-reply-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.detail-reply-card.is-verified-solution {
  background: #f0fdf4;
  border-color: #86efac;
  border-left: 4px solid #16a34a;
}

.drc-solution-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #15803d;
  margin-bottom: 2px;
}

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

.drc-author-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.drc-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drc-author-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.drc-role-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
}

.drc-time {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 4px;
}

.drc-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-reply-upvote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s ease;
}

.btn-reply-upvote:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: var(--red-primary, #dc2626);
}

.btn-reply-upvote.active {
  background: #fee2e2;
  border-color: #fca5a5;
  color: var(--red-primary, #dc2626);
}

.btn-mark-solution {
  background: #ffffff;
  border: 1px solid #10b981;
  color: #047857;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-mark-solution:hover {
  background: #ecfdf5;
}

.btn-mark-solution.is-accepted {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
}

.btn-reply-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 11px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.12s ease;
}

.btn-reply-delete:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  transform: translateY(-1px);
}

.drc-body-text {
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}

.drc-chart-attachment img {
  max-height: 240px;
  max-width: 100%;
  border-radius: 7px;
  border: 1px solid #cbd5e1;
  margin-top: 4px;
}

/* ==========================================
   Reply Composer - Institutional & User-Friendly
   ========================================== */
.detail-reply-composer {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-left: 4px solid var(--red-primary, #dc2626);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  box-sizing: border-box !important;
  width: 100% !important;
}

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

.drc-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.drc-hint {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

#form-submit-reply {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 100% Full-width, high-comfort institutional textarea */
.reply-textarea-styled,
.detail-reply-composer textarea {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  min-height: 110px !important;
  max-height: 360px;
  padding: 14px 16px !important;
  font-family: inherit;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  resize: vertical !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) inset;
}

.reply-textarea-styled:focus,
.detail-reply-composer textarea:focus {
  border-color: var(--red-primary, #dc2626) !important;
  box-shadow: 0 0 0 3.5px rgba(220, 38, 38, 0.14), 0 1px 3px rgba(15, 23, 42, 0.04) inset !important;
  background: #ffffff !important;
}

.reply-textarea-styled::placeholder,
.detail-reply-composer textarea::placeholder {
  color: #94a3b8 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.drc-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  width: 100% !important;
  box-sizing: border-box !important;
}

.drc-file-attach {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-attach-chart-sm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-attach-chart-sm:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.btn-reply-remove-file {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #dc2626;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.btn-reply-remove-file:hover {
  background: #fecaca;
}

.btn-submit-reply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red-primary, #dc2626);
  border: 1px solid var(--red-primary, #dc2626);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 22px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.28);
  letter-spacing: 0.1px;
}

.btn-submit-reply:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.38);
}

.btn-submit-reply:active {
  transform: translateY(0);
}

.btn-submit-reply .btn-arrow {
  transition: transform 0.15s ease;
}

.btn-submit-reply:hover .btn-arrow {
  transform: translateX(3px);
}